/*
Theme Name: Šuma okusa – Šumska večera
Theme URI: https://gorskikotar.hr
Author: Arijan
Description: Custom landing page tema za event "Šuma okusa – Šumska večera", 24.7.2026. Fužine. Koncept "Plakati u šumi". Dizajn sustav: Jasmina / TZ Gorskog kotara.
Version: 3.7.0
Requires PHP: 7.4
Text Domain: sumaokusa
*/

/* ============================ FONTOVI ============================ */
@font-face { font-family:'Gopher'; src:url('assets/fonts/Gopher-Regular.woff2') format('woff2'),url('assets/fonts/Gopher-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gopher'; src:url('assets/fonts/Gopher-Medium.woff2') format('woff2'),url('assets/fonts/Gopher-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gopher'; src:url('assets/fonts/Gopher-Bold.woff2') format('woff2'),url('assets/fonts/Gopher-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gopher'; src:url('assets/fonts/Gopher-BoldItalic.woff2') format('woff2'),url('assets/fonts/Gopher-BoldItalic.woff') format('woff'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Gopher'; src:url('assets/fonts/Gopher-Black.woff2') format('woff2'),url('assets/fonts/Gopher-Black.woff') format('woff'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Gopher'; src:url('assets/fonts/Gopher-BlackItalic.woff2') format('woff2'),url('assets/fonts/Gopher-BlackItalic.woff') format('woff'); font-weight:900; font-style:italic; font-display:swap; }

/* ============================ TOKENI ============================ */
:root {
  --sumska:#253D1E; --sumska-tamnija:#1B2E16; --watermark:#3F5920;
  --limeta:#9DC41F; --limeta-hover:#B4DC2E;
  --krem:#EAF3E0; --krem-squiggle:#DAEABD;
  --narancasta:#FF7538; --tirkiz:#0AA6A6; --tirkiz-svijetli:#40E0D1;
  --bijela:#FFF;
  --font:'Gopher','Trebuchet MS',system-ui,sans-serif;
  --sirina:1240px;
}

/* ============================ BAZA ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--font);font-weight:400;font-size:1.0625rem;line-height:1.6;color:var(--bijela);background:var(--sumska);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--limeta)}
a:focus-visible,button:focus-visible{outline:3px solid var(--limeta);outline-offset:3px}
.wrap{max-width:var(--sirina);margin:0 auto;padding:0 32px;position:relative}


/* redak točkica s natpisa */
.dots{display:flex;gap:13px;list-style:none;margin:30px 0 0}
.dots li{width:16px;height:16px;border-radius:50%;border:3px solid currentColor}
.dots li.on{background:currentColor}
.dots--limeta{color:var(--limeta)} .dots--naranca{color:var(--narancasta)}
.dots--tirkiz{color:var(--tirkiz)} .dots--tirkiz-s{color:var(--tirkiz-svijetli)}

/* brand tagline — HTML tekst (Gopher), ne slika */
.tagline{font-size:.95rem;line-height:1.45}
.tagline .redak1{font-weight:400}
.tagline .redak2{font-weight:700;font-style:italic}
.tagline img.mmm{width:120px;margin-top:10px}

/* ============================ HERO ============================ */
.hero{min-height:100svh;display:flex;flex-direction:column}
.hero__band{background:var(--krem)}
.hero__band .wrap{display:flex;align-items:center;padding-top:26px;padding-bottom:22px}
.hero__logo img{width:180px}
.hero__body{flex:1;display:flex;align-items:center;padding:72px 0 88px}
.hero__grid{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,5vw,90px);align-items:center;width:100%}
.hero__eyebrow{color:var(--limeta);font-weight:500;font-size:clamp(1.05rem,1.6vw,1.4rem);margin-bottom:20px}
.hero__title{font-weight:900;font-size:clamp(3rem,8vw,7.75rem);line-height:.98;letter-spacing:-.018em;color:var(--limeta)}
.hero__when{margin-top:32px;font-weight:700;font-style:italic;font-size:clamp(1.35rem,2.4vw,2.25rem);line-height:1.3;max-width:26ch}
.hero .cta{margin-top:44px}
.hero__tagline{margin-top:60px}
.hero__badge{width:clamp(150px,17vw,270px);transform:rotate(9deg);align-self:start;margin-top:2vw}

/* ============================ SEKCIJE ============================ */
.section{padding:clamp(72px,8vw,120px) 0}
.section--dark{background:var(--sumska);color:var(--bijela)}
.section--cream{background:var(--krem);color:var(--sumska)}

.h1{font-weight:900;font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.07;letter-spacing:-.012em;margin-bottom:30px;max-width:20ch}
.h2{font-weight:900;font-size:clamp(2rem,3.8vw,3.25rem);line-height:1.08;letter-spacing:-.012em;margin-bottom:36px}
.lead{font-weight:700;font-style:italic;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;max-width:52ch;margin-bottom:22px}
.section p{max-width:60ch}
.section p+p{margin-top:18px}

/* ---- Ključne informacije ---- */
.kljucne{display:grid;gap:clamp(36px,4vw,60px);margin-top:6px}
.kljucne__red{display:grid;grid-template-columns:minmax(170px,300px) 1fr;gap:clamp(24px,3vw,56px);align-items:baseline}
.kljucne__red h3{font-weight:900;font-size:clamp(2rem,4.4vw,3.75rem);line-height:1}
.kljucne__red .dots{margin-top:14px}
.kljucne__red .odgovor{font-weight:700;font-style:italic;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.45;max-width:42ch}

/* ---- Meni: galerija plakata ---- */
.sto .h2{margin-bottom:0}
.sto .h2+.mmm-potpis--uz-naslov{margin-top:8px;margin-bottom:0}
.plakat{padding:clamp(56px,6vw,84px) 0}
.plakat .wrap::before{content:'';position:absolute;top:calc(-1*clamp(56px,6vw,84px));left:32px;right:32px;height:2px;background:var(--watermark)}
.section--cream .plakat .wrap::before{background:var(--krem-squiggle)}
.plakat:first-of-type{padding-top:clamp(40px,4vw,56px)}
.plakat:first-of-type .wrap::before{display:none}
.plakat .wrap{display:grid;grid-template-columns:1fr minmax(170px,260px);gap:clamp(36px,4vw,72px);align-items:center}
.plakat--zrcalo .wrap{grid-template-columns:minmax(170px,260px) 1fr}
.plakat--zrcalo .plakat__sadrzaj{order:2}
.plakat--zrcalo .plakat__bedzevi{order:1}
.plakat__naslov{font-weight:900;font-size:clamp(1.9rem,4vw,3.6rem);line-height:1.05;letter-spacing:-.012em;max-width:15ch;margin-bottom:20px}
.plakat__opis{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:52ch}
.plakat__bedzevi{display:flex;flex-direction:column;gap:0;align-items:center;justify-self:center}
.plakat__bedzevi img{width:clamp(150px,15vw,230px)}
.plakat__bedzevi img:first-child{transform:rotate(6deg)}
.plakat__bedzevi img+img{margin-top:-38px;transform:rotate(-8deg)}

/* ---- Piće ---- */
.pice__list{list-style:none;margin-top:4px;display:grid;gap:16px}
.pice__list li{padding-left:34px;position:relative;max-width:58ch;font-size:clamp(1.05rem,1.4vw,1.2rem)}
.pice__list li::before{content:'';position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;background:var(--limeta)}
.pice__list li:nth-child(2)::before{background:var(--narancasta)}
.pice__list li:nth-child(3)::before{background:var(--tirkiz-svijetli)}
.pice__list li:nth-child(4)::before{background:var(--tirkiz)}

/* ---- Korisne informacije ---- */
.korisne{list-style:none;margin-top:4px;display:grid;gap:20px}
.korisne li{padding-left:36px;position:relative;max-width:66ch}
.korisne li::before{content:'';position:absolute;left:0;top:.4em;width:17px;height:17px;border-radius:50%;border:3px solid var(--limeta)}
.section--cream .korisne li::before{border-color:var(--sumska)}

/* ============================ CTA ============================ */
.cta{margin-top:46px}
.btn{display:inline-block;background:var(--limeta);color:var(--sumska);font-family:var(--font);font-weight:700;font-size:1.15rem;text-decoration:none;padding:20px 42px;border-radius:999px;border:none;cursor:pointer;transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--limeta-hover);transform:translateY(-2px)}
.section--cream .btn{box-shadow:0 5px 0 rgba(37,61,30,.18)}
.cta__note{display:block;margin-top:12px;font-weight:500;font-style:italic;font-size:.95rem;opacity:.85}

/* ============================ FOOTER ============================ */
.footer{background:var(--sumska-tamnija);padding:76px 0 56px;position:relative;overflow:hidden}
.footer .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;flex-wrap:wrap}
.footer__brand img.logo{width:160px;margin-bottom:18px}
.footer__gk{text-align:right}
.footer__gk img{width:180px;margin-left:auto;margin-bottom:14px}
.footer__links{margin-top:8px;font-size:.95rem}
.footer__links a{color:var(--limeta);text-decoration:none}
.footer__links a:hover{text-decoration:underline}

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__badge{order:-1;margin-top:0;width:140px;justify-self:end}
  .plakat .wrap,.plakat--zrcalo .wrap{grid-template-columns:1fr}
  .plakat--zrcalo .plakat__sadrzaj{order:1}
  .plakat--zrcalo .plakat__bedzevi{order:2}
  .plakat__bedzevi{flex-direction:row;justify-self:start}
  .plakat__bedzevi img+img{margin-top:0;margin-left:14px;transform:rotate(-4deg)}
  .kljucne__red{grid-template-columns:1fr;gap:10px}
}
@media (max-width:520px){
  .hero__logo img{width:145px}
  .footer .wrap{flex-direction:column}
  .footer__gk{text-align:left}
  .footer__gk img{margin-left:0}
  .dots{gap:10px}
  .dots li{width:14px;height:14px}
}

/* ============================ MMM POTPIS ============================ */
.mmm-potpis{display:block;width:150px;height:auto;margin:18px 0 0}
.h2 + .mmm-potpis, .mmm-potpis--uz-naslov{margin-top:-14px;margin-bottom:36px}
.hero__mmm{position:absolute;right:32px;bottom:clamp(24px,4vw,64px);width:clamp(180px,16vw,300px);opacity:.95;transform:rotate(-4deg)}
@media (max-width:900px){.hero__mmm{display:none}}

/* ============================ DINAMIKA ============================ */
/* bez JS-a ili uz reduced-motion: sve odmah vidljivo */
html.anim [data-anim]{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.35,1)}
html.anim [data-anim].in{opacity:1;transform:none}
html.anim [data-anim="bedz"]{transform:translateY(26px) rotate(14deg) scale(.85)}
html.anim [data-anim="bedz"].in{transform:none;transition-duration:.7s}
html.anim .plakat__bedzevi img{transition:inherit}

/* squiggle se iscrtava slijeva */
html.anim [data-anim="mmm"]{opacity:0;transform:none;clip-path:inset(0 94% 0 0)}
html.anim [data-anim="mmm"].in{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .9s ease .1s,opacity .35s ease}

/* točkice se pune jedna po jedna */
html.anim [data-anim="dots"] li{opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
html.anim [data-anim="dots"].in li{opacity:1;transform:none}
html.anim [data-anim="dots"].in li:nth-child(1){transition-delay:.05s}
html.anim [data-anim="dots"].in li:nth-child(2){transition-delay:.13s}
html.anim [data-anim="dots"].in li:nth-child(3){transition-delay:.21s}
html.anim [data-anim="dots"].in li:nth-child(4){transition-delay:.29s}
html.anim [data-anim="dots"].in li:nth-child(5){transition-delay:.37s}
html.anim [data-anim="dots"].in li:nth-child(6){transition-delay:.45s}
html.anim [data-anim="dots"].in li:nth-child(7){transition-delay:.53s}

/* stagger unutar hero-a */
html.anim [data-anim].in[data-delay="1"]{transition-delay:.12s}
html.anim [data-anim].in[data-delay="2"]{transition-delay:.24s}
html.anim [data-anim].in[data-delay="3"]{transition-delay:.36s}