/* ═══════════════════════════════════════════════════════════════════
   TISTI TRENUTEK — svež dizajn (2026)
   Paleta: slonokoščena · črnilo · terakota · žajbelj
   Pisave: Fraunces (naslovi) · Inter (besedilo) · Caveat (poudarki)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #FAF6EF;
  --bg-soft:   #F3ECDF;
  --card:      #FFFDF8;
  --ink:       #221E1A;
  --ink-soft:  #6B6259;
  --line:      #E5DACA;
  --terra:     #C05B33;
  --terra-dk:  #A84E2B;
  --terra-bg:  #F7E8DF;
  --sage:      #6F7D62;
  --sage-bg:   #EDF0E7;
  --dark:      #2A2420;
  --dark-2:    #201B17;
  --gold:      #C99B5F;
  --ok:        #3E7C4F;
  --err:       #B5402E;
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --sh-sm: 0 2px 10px rgba(60,40,20,.07);
  --sh:    0 8px 30px rgba(60,40,20,.10);
  --sh-lg: 0 24px 60px rgba(60,40,20,.16);
  --wrap: 1180px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  line-height:1.65; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; font-size:15px; }
::selection { background:var(--terra); color:#fff; }

h1,h2,h3,.serif { font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.12; letter-spacing:-.01em; }
.script { font-family:'Caveat',cursive; font-weight:600; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.section { padding:96px 0; }
.section-soft { background:var(--bg-soft); }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra); margin-bottom:14px;
}
.eyebrow::before { content:''; width:26px; height:2px; background:linear-gradient(90deg,var(--gold),#F0CE96); border-radius:2px; }
.h2 { font-size:clamp(30px,4.4vw,46px); margin-bottom:14px; }
.lead { color:var(--ink-soft); font-size:18px; max-width:560px; }
.center { text-align:center; }
.center .lead, .center .eyebrow { margin-left:auto; margin-right:auto; }
.center .eyebrow::before { display:none; }

/* ── Gumbi ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:999px; border:none;
  font-size:15.5px; font-weight:600; transition:all .22s ease;
}
.btn-primary { background:linear-gradient(180deg,#3A322B 0%,#2A2420 55%,#1B1613 100%); color:#FAF6EF; box-shadow:0 10px 26px rgba(23,19,16,.35), inset 0 0 0 1.3px rgba(201,155,95,.75), inset 0 1px 0 rgba(255,255,255,.08); }
.btn-primary:hover { background:linear-gradient(180deg,#463C33 0%,#332B25 55%,#221C17 100%); transform:translateY(-2px); box-shadow:0 14px 32px rgba(23,19,16,.45), inset 0 0 0 1.3px rgba(240,206,150,.95), inset 0 1px 0 rgba(255,255,255,.1); }
.btn-ghost { background:transparent; color:var(--ink); border:1.5px solid #D8C3A0; }
.btn-ghost:hover { border-color:var(--gold); background:#F8F1E4; box-shadow:0 6px 18px rgba(160,120,60,.12); }
.btn-dark { background:linear-gradient(180deg,#3A322B 0%,#2A2420 55%,#1B1613 100%); color:#FAF6EF; box-shadow:inset 0 0 0 1.3px rgba(201,155,95,.75); }
.btn-dark:hover { background:linear-gradient(180deg,#463C33 0%,#332B25 55%,#221C17 100%); transform:translateY(-2px); box-shadow:inset 0 0 0 1.3px rgba(240,206,150,.95); }
.btn[disabled] { opacity:.45; pointer-events:none; }
.btn-sm { padding:10px 20px; font-size:14px; }
.btn .arr { transition:transform .22s; }
.btn:hover .arr { transform:translateX(4px); }

/* ── Glava ─────────────────────────────────────────────── */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:all .3s ease; padding:18px 0;
}
.site-header.scrolled {
  background:rgba(250,246,239,.92); backdrop-filter:blur(14px);
  padding:10px 0; box-shadow:0 4px 24px rgba(60,40,20,.08);
}
.header-in { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { display:flex; align-items:center; gap:11px; font-family:'Fraunces',serif; font-size:21px; font-weight:700; }
.logo-mark {
  width:36px; height:36px; border-radius:11px; flex-shrink:0;
  background:url('../img/znak.svg') center/contain no-repeat;
  box-shadow:0 4px 12px rgba(25,19,14,.35);
}
.main-nav { display:flex; gap:4px; }
.main-nav a {
  padding:9px 15px; border-radius:999px; font-size:14.5px; font-weight:500;
  color:var(--ink-soft); transition:all .18s;
}
.main-nav a:hover { color:var(--ink); background:rgba(0,0,0,.045); }
.main-nav a.active { color:var(--terra); font-weight:600; }
.header-cta { display:flex; align-items:center; gap:10px; }
.burger { display:none; background:none; border:none; width:42px; height:42px; border-radius:12px; }
.burger span { display:block; width:20px; height:2px; background:var(--ink); margin:4px auto; border-radius:2px; transition:.25s; }
.mobile-nav {
  display:none; position:fixed; inset:64px 12px auto 12px; z-index:99;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:14px; flex-direction:column; gap:2px;
}
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:13px 18px; border-radius:14px; font-weight:500; }
.mobile-nav a:hover, .mobile-nav a.active { background:var(--terra-bg); color:var(--terra); }

/* ── Noga ──────────────────────────────────────────────── */
.site-footer { background:var(--dark); color:#CFC5B8; padding:70px 0 34px; margin-top:0; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px; margin-bottom:48px; }
.site-footer h4 { color:var(--gold); font-size:14px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.site-footer a { display:block; padding:5px 0; font-size:14.5px; color:#CFC5B8; transition:color .18s; }
.site-footer a:hover { color:#fff; }
.footer-brand p { font-size:14.5px; max-width:280px; margin-top:12px; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.12); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:12.5px; color:#9C9285;
}
.footer-legal { font-size:11.5px; color:#8A8073; max-width:640px; line-height:1.6; margin-top:18px; }

/* ── Kartice, značke ───────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
}
.badge-terra { background:#F5EAD6; color:#8A6532; box-shadow:inset 0 0 0 1px rgba(201,155,95,.4); }
.badge-sage { background:var(--sage-bg); color:var(--sage); }
.badge-dark { background:var(--ink); color:#fff; }

/* ── Reveal animacije ──────────────────────────────────── */
.rv { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.rv.on { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .rv { opacity:1; transform:none; transition:none; } }

/* ── Obrazci ───────────────────────────────────────────── */
.field { margin-bottom:16px; }
.field label { display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.field input, .field select, .field textarea {
  width:100%; padding:12px 15px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--card); transition:border-color .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(192,91,51,.14);
}
.field .err-msg { color:var(--err); font-size:12.5px; margin-top:5px; display:none; }
.field.invalid input { border-color:var(--err); }
.field.invalid .err-msg { display:block; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ── Piškotki ──────────────────────────────────────────── */
.cookie-banner {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  max-width:520px; margin:0 auto;
  background:var(--dark); color:#E7DFD4; border-radius:var(--r-lg);
  padding:20px 22px; box-shadow:var(--sh-lg);
  display:none; gap:14px; flex-wrap:wrap; align-items:center;
}
.cookie-banner.show { display:flex; }
.cookie-banner p { font-size:13.5px; flex:1 1 260px; line-height:1.55; }
.cookie-banner .btn { padding:10px 20px; font-size:13.5px; }

/* ── FAQ harmonika ─────────────────────────────────────── */
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:18px; margin-bottom:12px; overflow:hidden; transition:border-color .2s; }
.faq-item[open] { border-color:var(--gold); }
.faq-item summary {
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:19px 22px; font-weight:600; font-size:15.5px; cursor:pointer;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .pl {
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:16px; color:var(--terra);
  transition:transform .25s; flex-shrink:0; font-weight:400;
}
.faq-item[open] summary .pl { transform:rotate(45deg); border-color:var(--terra); }
.faq-item .faq-a { padding:0 22px 20px; color:var(--ink-soft); font-size:14.5px; border-top:1px dashed var(--line); }
.faq-item .faq-a p { padding-top:14px; }

/* ── Mozaik (hero + galerija) ──────────────────────────── */
.mosaic { display:grid; gap:3px; }
.mosaic div { border-radius:3px; position:relative; }
.mosaic div.stud::after {
  content:''; position:absolute; inset:18%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%, rgba(255,255,255,.5), rgba(255,255,255,.08) 60%, rgba(0,0,0,.12));
}

/* ── Pomožno ───────────────────────────────────────────── */
.muted { color:var(--ink-soft); }
.small { font-size:13.5px; }
.tiny  { font-size:12px; }
.notice {
  display:flex; gap:12px; align-items:flex-start;
  background:#FBF3D9; border:1px solid #E8D9A0; color:#7A5C1E;
  border-radius:14px; padding:14px 16px; font-size:14px;
}
.pill-tabs { display:inline-flex; background:var(--bg-soft); border-radius:999px; padding:4px; gap:2px; }
.pill-tabs button {
  border:none; background:transparent; padding:9px 18px; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--ink-soft); transition:all .18s;
}
.pill-tabs button.active { background:var(--card); color:var(--ink); box-shadow:var(--sh-sm); font-weight:600; }

@media (max-width:1150px) { .header-cta .btn-biz { display:none; } }

@media (max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .main-nav { display:none; }
  .burger { display:block; }
  .header-cta .btn { display:none; }
  .section { padding:64px 0; }
}
@media (max-width:560px) {
  .grid-2 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
}