/* ═══ BOGU DEMO TRAKA ═══ */
.bogu-demo-bar {
  position:fixed; top:0; left:0; right:0; z-index:10000;
  height:40px;
  background:var(--earth);
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:0 var(--px);
  font-family:var(--bf); font-size:0.72rem;
}
.bogu-demo-bar__text {
  color:var(--wheat); font-weight:300; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.bogu-demo-bar__cta {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--leaf); color:#fff;
  padding:4px 14px; border-radius:999px;
  font-size:0.68rem; font-weight:600;
  white-space:nowrap;
  transition:background 0.2s, transform 0.2s var(--pop);
  flex-shrink:0;
}
.bogu-demo-bar__cta:hover { background:var(--leaf-light); transform:translateY(-1px) }
.bogu-demo-bar__arr { transition:transform 0.2s }
.bogu-demo-bar__cta:hover .bogu-demo-bar__arr { transform:translateX(3px) }

@media(max-width:600px) {
  .bogu-demo-bar { gap:0.6rem; padding:0 1rem }
  .bogu-demo-bar__text { font-size:0.65rem }
  .bogu-demo-bar__cta { font-size:0.62rem; padding:3px 10px }
}
@media(max-width:400px) {
  .bogu-demo-bar__text { display:none }
}

/*
Theme Name: KORIJEN Starter
Theme URI: https://korijen-opg.hr
Author: BOGU Design
Author URI: https://bogu.design
Description: Organic raw family farm WordPress theme. Warm beige palette with earth brown and fresh green accents. Text-mask hero, hexagonal product grid, right-side drawer navigation, vertical seed-to-table timeline, handwritten accent typography and bilingual HR/EN. Built for family farms (OPG), organic producers, farm shops and local food brands.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: korijen-starter
Tags: one-column, custom-menu, featured-images, translation-ready, farm, organic, food
*/

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Nunito+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Inconsolata:wght@300;400;500;600&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  --earth:      #3e2c1c;
  --earth-mid:  #5a4030;
  --earth-soft: #7a6450;
  --bark:       #2e1e10;
  --soil:       #f5efe8;
  --hay:        #ede4d6;
  --wheat:      #d4c4aa;
  --parchment:  #faf7f2;
  --cream:      #fffcf7;
  --leaf:       #4a7c59;
  --leaf-light: #6a9e70;
  --leaf-soft:  rgba(74,124,89,0.08);
  --leaf-glow:  rgba(74,124,89,0.12);
  --berry:      #b44a5e;
  --sun:        #d4a24e;
  --sun-soft:   rgba(212,162,78,0.10);

  --hf: 'Bitter','Georgia',serif;
  --bf: 'Nunito Sans',system-ui,sans-serif;
  --cf: 'Inconsolata',monospace;
  --hw: 'Caveat',cursive;

  --max-w: 1200px;
  --px:    clamp(1.25rem,4vw,2.5rem);
  --r:     12px;
  --r-lg:  20px;

  --smooth: cubic-bezier(0.22,1,0.36,1);
  --pop:    cubic-bezier(0.34,1.56,0.64,1);
}

/* ═══ RESET ═══ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; overflow-x:hidden; scroll-behavior:smooth }
body { font-family:var(--bf); font-weight:400; background:var(--cream); color:var(--earth); line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased }
::selection { background:var(--leaf); color:#fff }
a { color:inherit; text-decoration:none }
img { max-width:100%; height:auto; display:block }
button { font-family:inherit; border:none; background:none; color:inherit; cursor:pointer }

.wrap { max-width:var(--max-w); margin:0 auto; padding:0 var(--px) }

/* ═══ LEAF TRAIL CURSOR ═══ */
.leaf-cursor {
  position:fixed; width:22px; height:22px; pointer-events:none; z-index:100000;
  transform:translate(-50%,-50%) rotate(-30deg);
  display:none; opacity:0.7;
  will-change:left,top;
  filter:drop-shadow(0 2px 4px rgba(74,124,89,0.3));
}
.leaf-cursor svg { width:100%; height:100% }
@media(min-width:1024px) {
  body { cursor:none }
  a,button { cursor:none }
  .leaf-cursor { display:block }
}
.lc-big .leaf-cursor {
  opacity:1;
  width:30px; height:30px;
  filter:drop-shadow(0 3px 8px rgba(74,124,89,0.5));
}

/* ═══ SEED LOADER ═══ */
.seed-load {
  position:fixed; inset:0; background:var(--cream); z-index:999999;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1.5rem
}
.seed-load.grow { animation:seedOut 0.9s var(--smooth) 0.3s forwards }
@keyframes seedOut { to { clip-path:circle(0% at 50% 50%) } }
.seed-load__icon { font-size:2.5rem; animation:seedSpin 2s ease-in-out infinite }
@keyframes seedSpin {
  0%   { transform:rotate(0deg) scale(1) }
  50%  { transform:rotate(180deg) scale(1.1) }
  100% { transform:rotate(360deg) scale(1) }
}
.seed-load__text { font-family:var(--hw); font-size:1.2rem; color:var(--leaf) }

/* ═══ TOP BAR ═══ */
.bar {
  position:fixed; top:40px; left:0; right:0; height:60px; z-index:9999;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--px);
  transition:background 0.4s,box-shadow 0.4s
}
.bar.stuck {
  background:rgba(255,252,247,0.94);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(62,44,28,0.06)
}
.bar__brand { font-family:var(--hf); font-size:1.1rem; font-weight:600; color:var(--earth) }
.bar__brand i { color:var(--leaf); font-style:normal }
.bar__right { display:flex; align-items:center; gap:1rem }

/* Lang inline */
.lang-in { display:flex; gap:0.3rem; font-family:var(--cf); font-size:0.58rem; letter-spacing:0.05em }
.lang-in__btn { padding:3px 8px; border-radius:999px; color:var(--earth-soft); transition:all 0.2s }
.lang-in__btn.on { background:var(--leaf); color:#fff }

/* Drawer trigger */
.drawer-trig {
  display:flex; align-items:center; gap:8px;
  font-size:0.72rem; font-weight:600; color:var(--earth);
  text-transform:uppercase; letter-spacing:0.06em
}
.drawer-trig__lines { width:22px; display:flex; flex-direction:column; gap:5px }
.drawer-trig__lines span {
  height:2px; background:var(--earth); border-radius:1px;
  transition:width 0.3s var(--smooth)
}
.drawer-trig__lines span:nth-child(1) { width:22px }
.drawer-trig__lines span:nth-child(2) { width:16px }
.drawer-trig__lines span:nth-child(3) { width:22px }
.drawer-trig:hover .drawer-trig__lines span { width:22px }

/* ═══ RIGHT DRAWER NAV ═══ */
.r-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(420px,85vw);
  background:var(--parchment); z-index:99999;
  transform:translateX(100%);
  transition:transform 0.5s var(--smooth);
  box-shadow:-20px 0 60px rgba(62,44,28,0.1);
  display:flex; flex-direction:column;
  padding:clamp(2rem,4vw,3.5rem)
}
.r-drawer.open { transform:translateX(0) }
.r-drawer__close {
  align-self:flex-end; width:36px; height:36px; border-radius:50%;
  background:var(--hay); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-bottom:2rem; transition:background 0.2s
}
.r-drawer__close:hover { background:var(--wheat) }
.r-drawer__nav { flex:1; display:flex; flex-direction:column; justify-content:center; gap:0.25rem }
.r-drawer__link {
  font-family:var(--hf); font-size:clamp(1.5rem,3.5vw,2.2rem); font-weight:500;
  padding:0.5rem 0; color:var(--earth);
  transition:color 0.2s,padding-left 0.3s var(--smooth);
  border-bottom:1px solid var(--hay)
}
.r-drawer__link:hover { color:var(--leaf); padding-left:0.75rem }
.r-drawer__link:last-child { border:none }
.r-drawer__footer { margin-top:2rem; font-size:0.78rem; color:var(--earth-soft); line-height:1.6 }
.r-drawer__overlay {
  position:fixed; inset:0; background:rgba(46,30,16,0.3); z-index:99998;
  opacity:0; pointer-events:none; transition:opacity 0.4s
}
.r-drawer__overlay.open { opacity:1; pointer-events:all }

/* ═══ HERO — TEXT MASK ON IMAGE ═══ */
.mask-hero {
  min-height:100svh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  position:relative; overflow:hidden; background:var(--soil);
  padding:clamp(7rem,14vh,9rem) var(--px)
}
.mask-hero__bg {
  position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1920&q=80') center/cover;
  opacity:0.12
}
.mask-hero__content { position:relative; z-index:2; max-width:800px; width:100% }
.mask-hero__handwritten {
  font-family:var(--hw); font-size:clamp(1rem,2.5vw,1.8rem);
  color:var(--leaf); margin-bottom:1rem; transform:rotate(-2deg);
  display:inline-block
}
.mask-hero__h1 {
  font-family:var(--hf); font-size:clamp(2.4rem,7vw,6rem);
  font-weight:700; line-height:0.95; color:var(--earth); margin-bottom:1.5rem;
  background:url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1200&q=80') center/cover;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent
}
@supports not (-webkit-background-clip:text) {
  .mask-hero__h1 { -webkit-text-fill-color:var(--earth); color:var(--earth) }
}
.mask-hero__sub {
  font-size:clamp(0.88rem,1.2vw,1.1rem); font-weight:300;
  color:var(--earth-soft); max-width:520px; margin:0 auto 2.5rem; line-height:1.9
}
.mask-hero__actions { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap }

/* Buttons */
.btn-leaf {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:600; padding:12px 28px; border-radius:999px;
  background:var(--leaf); color:#fff;
  transition:background 0.3s,transform 0.2s var(--pop)
}
.btn-leaf:hover { background:var(--leaf-light); transform:translateY(-2px) }
.btn-earth {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:600; padding:12px 28px; border-radius:999px;
  border:1.5px solid var(--wheat); color:var(--earth);
  transition:border-color 0.3s,color 0.3s
}
.btn-earth:hover { border-color:var(--leaf); color:var(--leaf) }
.btn-arr { transition:transform 0.2s }
.btn-leaf:hover .btn-arr,.btn-earth:hover .btn-arr { transform:translateX(3px) }

/* Seasonal badge */
.season-badge {
  display:inline-flex; align-items:center; gap:6px; font-family:var(--cf);
  font-size:0.62rem; letter-spacing:0.06em; color:var(--leaf);
  background:var(--leaf-soft); padding:5px 14px; border-radius:999px; margin-bottom:1.5rem
}
.season-badge__dot { width:6px; height:6px; border-radius:50%; background:var(--leaf); animation:sDot 2s ease-in-out infinite }
@keyframes sDot { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ═══════════════════════════════════════════════
   AWARD LEVEL — "O NAMA" SEKCIJA NA FRONTPAGEU
   ═══════════════════════════════════════════════ */

.about-award {
  position:relative;
  overflow:hidden;
  padding:clamp(5rem,10vh,9rem) 0;
  background:var(--cream);
}

/* Ogromni watermark broj generacija u pozadini */
.about-award__bg-num {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--hf);
  font-size:clamp(18rem,35vw,30rem);
  font-weight:700;
  color:var(--leaf);
  opacity:0.028;
  line-height:1;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  letter-spacing:-0.04em;
  transition:opacity 0.8s var(--smooth);
}

/* Layout: dvije kolone s nejednakim omjerom */
.about-award__inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,6rem);
  align-items:center;
  position:relative;
  z-index:2;
}
@media(max-width:860px) {
  .about-award__inner { grid-template-columns:1fr }
}

/* LIJEVA STRANA — složene slike */
.about-award__visual {
  position:relative;
  padding:2.5rem 2.5rem 2.5rem 0;
}

/* Dekorativna linija iza slika */
.about-award__visual::before {
  content:'';
  position:absolute;
  top:0; left:2rem; bottom:0; right:0;
  border:2px solid var(--hay);
  border-radius:var(--r-lg);
  z-index:0;
}

/* Glavna velika slika */
.about-award__img-main {
  position:relative; z-index:2;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 24px 60px rgba(62,44,28,0.12);
}
.about-award__img-main img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.8s var(--smooth);
}
.about-award__visual:hover .about-award__img-main img {
  transform:scale(1.04);
}

/* Mala sekundarna slika — plutajuća */
.about-award__img-float {
  position:absolute;
  bottom:-2rem; right:-1.5rem;
  width:48%;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:5px solid var(--cream);
  box-shadow:0 16px 40px rgba(62,44,28,0.14);
  z-index:3;
}
.about-award__img-float img {
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform 0.8s var(--smooth);
}
.about-award__visual:hover .about-award__img-float img {
  transform:scale(1.06);
}

/* Handwritten caption na float slici */
.about-award__caption {
  position:absolute;
  bottom:-2.8rem; right:0; left:0;
  text-align:center;
  font-family:var(--hw);
  font-size:0.95rem;
  color:var(--earth-soft);
  transform:rotate(-1.5deg);
  opacity:0;
  transition:opacity 0.5s var(--smooth), transform 0.5s var(--smooth);
}
.about-award__visual:hover .about-award__caption {
  opacity:1;
  transform:rotate(-1.5deg) translateY(-4px);
}

/* Ikona lišća — dekorativna */
.about-award__leaf-deco {
  position:absolute;
  top:-1.5rem; left:-1rem;
  font-size:5rem;
  opacity:0.06;
  transform:rotate(-20deg);
  pointer-events:none;
  z-index:1;
}

/* DESNA STRANA — tekst */
.about-award__text { padding:1rem 0 }

.about-award__eyebrow {
  font-size:0.7rem; font-weight:600;
  color:var(--leaf); background:var(--leaf-soft);
  padding:5px 14px; border-radius:999px;
  display:inline-block; margin-bottom:1.5rem;
  font-family:var(--cf); letter-spacing:0.06em; text-transform:uppercase;
}

/* Split-letter naslov — svako slovo animira se zasebno */
.about-award__h2 {
  font-family:var(--hf);
  font-size:clamp(2.2rem,4.5vw,3.4rem);
  font-weight:700;
  line-height:1.08;
  color:var(--earth);
  margin-bottom:1.75rem;
  overflow:hidden;
}
.about-award__h2 i { color:var(--leaf); font-style:italic }

/* Tekst s "clip wipe" reveal-om */
.about-award__p {
  font-size:clamp(0.9rem,1.1vw,1rem);
  font-weight:300;
  color:var(--earth-soft);
  line-height:1.95;
  margin-bottom:1.25rem;
}
.about-award__p strong { font-weight:600; color:var(--earth) }

/* Horizontalna divider linija */
.about-award__divider {
  width:48px; height:2px;
  background:linear-gradient(90deg, var(--leaf), transparent);
  border-radius:1px;
  margin:1.75rem 0;
}

/* ─── BROJEVI — AWARD RAZINA ─── */
.about-award__nums {
  display:flex;
  gap:clamp(1.5rem,3vw,2.5rem);
  flex-wrap:wrap;
  margin-top:2rem;
  padding-top:2rem;
  border-top:1px solid var(--hay);
}

.about-award__num {
  position:relative;
}

/* Velik outline broj u pozadini svake metrike */
.about-award__num-bg {
  position:absolute;
  top:-1rem; left:-0.5rem;
  font-family:var(--hf);
  font-size:4.5rem;
  font-weight:700;
  color:var(--leaf);
  opacity:0.06;
  line-height:1;
  pointer-events:none;
  user-select:none;
  transition:opacity 0.4s;
}
.about-award__num:hover .about-award__num-bg { opacity:0.14 }

.about-award__num-val {
  font-family:var(--hf);
  font-size:clamp(2rem,3vw,2.5rem);
  font-weight:700;
  color:var(--leaf);
  line-height:1;
  position:relative;
  z-index:1;
}
.about-award__num-label {
  font-size:0.68rem;
  font-family:var(--cf);
  color:var(--earth-soft);
  margin-top:0.3rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  position:relative;
  z-index:1;
}

/* Animirani horizonalni wipe za tekst — CLIP PATH */
.clip-wipe {
  clip-path:inset(0 100% 0 0);
  transition:clip-path 0.9s var(--smooth);
}
.clip-wipe.vis { clip-path:inset(0 0% 0 0) }

/* ═══════════════════════════════════════════════ */

/* ═══ PRODUCTS — HEX-INSPIRED GRID ═══ */
.prod-section { background:var(--soil) }
.prod-hex { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem }
@media(max-width:900px) { .prod-hex { grid-template-columns:1fr 1fr } }
@media(max-width:480px) { .prod-hex { grid-template-columns:1fr } }
.prod-card {
  background:var(--cream); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hay);
  transition:transform 0.35s var(--pop),box-shadow 0.35s
}
.prod-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(62,44,28,0.06) }
.prod-card__img { aspect-ratio:4/3; overflow:hidden }
.prod-card__img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--smooth) }
.prod-card:hover .prod-card__img img { transform:scale(1.06) }
.prod-card__body { padding:1.25rem }
.prod-card__cat { font-family:var(--cf); font-size:0.58rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--leaf); margin-bottom:0.4rem }
.prod-card__name { font-family:var(--hf); font-size:1.1rem; font-weight:600; margin-bottom:0.3rem }
.prod-card__desc { font-size:0.82rem; font-weight:300; color:var(--earth-soft); line-height:1.7; margin-bottom:0.75rem }
.prod-card__price { font-family:var(--hf); font-size:1.05rem; font-weight:700; color:var(--leaf) }

/* ═══ TIMELINE — SEED TO TABLE ═══ */
.timeline { position:relative; padding-left:40px; margin-top:3rem }
.timeline::before { content:''; position:absolute; left:15px; top:0; bottom:0; width:2px; background:var(--hay) }
.tl-step { position:relative; margin-bottom:3rem }
.tl-step:last-child { margin-bottom:0 }
.tl-step__dot { position:absolute; left:-33px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--leaf); border:3px solid var(--cream); z-index:2 }
.tl-step__season { font-family:var(--hw); font-size:1rem; color:var(--leaf); margin-bottom:0.25rem }
.tl-step__title { font-family:var(--hf); font-size:1.3rem; font-weight:600; margin-bottom:0.3rem }
.tl-step__desc { font-size:0.9rem; font-weight:300; color:var(--earth-soft); line-height:1.8 }

/* ═══ REVIEWS — HANDWRITTEN STYLE ═══ */
.hw-reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem }
@media(max-width:900px) { .hw-reviews { grid-template-columns:1fr 1fr } }
@media(max-width:580px) { .hw-reviews { grid-template-columns:1fr } }
.hw-card {
  background:var(--cream); border-radius:var(--r-lg); padding:2rem;
  border:1px solid var(--hay); position:relative;
  transition:transform 0.3s var(--pop), box-shadow 0.3s
}
.hw-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(62,44,28,0.06) }
.hw-card__quote { position:absolute; top:1rem; right:1.5rem; font-family:var(--hf); font-size:3rem; color:var(--leaf); opacity:0.08; line-height:1 }
.hw-card__text { font-family:var(--hw); font-size:1.1rem; color:var(--earth-mid); line-height:1.6; margin-bottom:1rem }
.hw-card__who { font-family:var(--bf); font-weight:600; font-size:0.82rem; color:var(--earth) }
.hw-card__from { font-size:0.68rem; color:var(--earth-soft); margin-top:2px }

/* ═══ CTA ═══ */
.farm-cta {
  background:var(--earth); border-radius:var(--r-lg);
  margin:0 var(--px); padding:clamp(2.5rem,6vw,5rem);
  text-align:center; color:var(--cream); position:relative; overflow:hidden
}
.farm-cta::before { content:'🌿'; position:absolute; top:-20px; right:5%; font-size:8rem; opacity:0.04; transform:rotate(15deg) }
.farm-cta__h { font-family:var(--hf); font-size:clamp(1.8rem,4vw,3rem); font-weight:600; margin-bottom:0.75rem }
.farm-cta__h i { font-style:italic; color:var(--sun) }
.farm-cta__p { font-size:1rem; font-weight:300; color:var(--wheat); max-width:440px; margin:0 auto 2rem; line-height:1.8 }

/* ═══ CONTACT ═══ */
.contact-2col { display:grid; grid-template-columns:1fr 1fr; gap:4rem }
@media(max-width:860px) { .contact-2col { grid-template-columns:1fr; gap:2.5rem } }
.c-info { margin-bottom:1.75rem }
.c-info__tag { font-family:var(--cf); font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--leaf); margin-bottom:0.3rem }
.c-info__val { font-family:var(--hf); font-size:1.2rem; font-weight:500 }
.c-info__val a:hover { color:var(--leaf) }
.f-card { background:var(--soil); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.5rem); border:1px solid var(--hay) }
.ff { margin-bottom:1.25rem }
.ff__label { font-size:0.72rem; font-weight:600; color:var(--earth-soft); margin-bottom:0.35rem; display:block }
.ff__input,.ff__textarea,.ff__select {
  width:100%; background:var(--cream); border:1.5px solid var(--hay);
  border-radius:10px; padding:11px 14px; font-family:var(--bf);
  font-size:0.9rem; color:var(--earth); transition:border-color 0.25s; outline:none
}
.ff__input:focus,.ff__textarea:focus,.ff__select:focus { border-color:var(--leaf) }
.ff__textarea { min-height:100px; resize:vertical }
.ff__select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 7L1 3h8z' fill='%234a7c59'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center
}

/* ═══ INNER PAGE ═══ */
.inner {
  padding:clamp(8rem,15vh,11rem) 0 clamp(3rem,6vh,5rem);
  text-align:center
}
.inner__crumb { font-size:0.75rem; color:var(--earth-soft); margin-bottom:0.75rem }
.inner__crumb a:hover { color:var(--leaf) }
.inner__h { font-family:var(--hf); font-size:clamp(2rem,5vw,3.5rem); font-weight:600; color:var(--earth) }
.inner__h i { font-style:italic; color:var(--leaf) }

/* Section helpers */
.sec-tag {
  font-size:0.7rem; font-weight:600; color:var(--leaf); background:var(--leaf-soft);
  padding:5px 12px; border-radius:999px; display:inline-block; margin-bottom:0.75rem
}
.sec-h { font-family:var(--hf); font-size:clamp(2rem,4vw,3rem); font-weight:600; line-height:1.12; color:var(--earth) }
.sec-h i { font-style:italic; color:var(--leaf) }
.sec-p { font-size:1rem; font-weight:300; color:var(--earth-soft); max-width:520px; line-height:1.9; margin-top:0.75rem }
.zone { padding:clamp(4rem,9vh,8rem) 0 }
.zone--soil { background:var(--soil) }

/* ═══ ABOUT PAGE (page-o-nama.php) ═══ */
.farm-story { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center }
@media(max-width:860px) { .farm-story { grid-template-columns:1fr } }
.farm-story__imgs { position:relative; padding:1.5rem }
.farm-story__img-a { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/4; position:relative; z-index:2 }
.farm-story__img-a img { width:100%; height:100%; object-fit:cover }
.farm-story__img-b {
  position:absolute; bottom:-1rem; right:-1rem; width:50%;
  border-radius:var(--r-lg); overflow:hidden; border:5px solid var(--cream); z-index:3;
  box-shadow:0 12px 32px rgba(62,44,28,0.08)
}
.farm-story__img-b img { width:100%; aspect-ratio:1; object-fit:cover }
.farm-story__leaf { position:absolute; top:-1.5rem; left:-1rem; font-size:4rem; opacity:0.08; transform:rotate(-20deg); z-index:1 }
.farm-story__body p { font-size:1rem; font-weight:300; color:var(--earth-soft); line-height:1.95; margin-bottom:1.25rem }
.farm-story__body p strong { font-weight:600; color:var(--earth) }
.farm-nums { display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:2rem; padding-top:2rem; border-top:1px solid var(--hay) }
.farm-num__val { font-family:var(--hf); font-size:2.2rem; font-weight:700; color:var(--leaf); line-height:1 }
.farm-num__txt { font-size:0.72rem; color:var(--earth-soft); margin-top:0.2rem }

/* ═══ MAP ═══ */
.map-frame { border-radius:var(--r-lg); overflow:hidden; height:380px; margin:0 var(--px); border:1px solid var(--hay) }
.map-frame iframe { width:100%; height:100%; border:0; filter:saturate(0.8); transition:filter 0.5s }
.map-frame:hover iframe { filter:saturate(1) }

/* ═══ FOOTER ═══ */
.btm {
  background:var(--earth); color:var(--wheat);
  padding:clamp(3rem,6vw,5rem) 0 1.5rem;
  margin-top:clamp(3rem,6vw,5rem);
  border-radius:var(--r-lg) var(--r-lg) 0 0
}
.btm__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem }
@media(max-width:900px) { .btm__grid { grid-template-columns:1fr 1fr } }
@media(max-width:580px) { .btm__grid { grid-template-columns:1fr } }
.btm__brand { font-family:var(--hf); font-size:1.2rem; font-weight:600; color:var(--cream); margin-bottom:0.75rem }
.btm__brand i { color:var(--leaf-light); font-style:normal }
.btm__blurb { font-size:0.82rem; font-weight:300; color:var(--earth-soft); line-height:1.8; max-width:280px }
.btm__col-h { font-family:var(--hf); font-size:0.88rem; font-weight:600; color:var(--cream); margin-bottom:0.75rem }
.btm__link { display:block; font-size:0.8rem; font-weight:300; color:var(--earth-soft); padding:0.2rem 0; transition:color 0.2s }
.btm__link:hover { color:var(--cream) }
.btm__bot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1.25rem; border-top:1px solid rgba(255,252,247,0.06);
  font-size:0.65rem; color:var(--earth-soft)
}
@media(max-width:580px) { .btm__bot { flex-direction:column; gap:0.75rem; text-align:center } }

/* ═══ REVEALS ═══ */
.ap { opacity:0; transform:translateY(22px); transition:opacity 0.65s var(--smooth),transform 0.65s var(--smooth) }
.ap.vis { opacity:1; transform:translateY(0) }
.ap1 { transition-delay:0.05s }
.ap2 { transition-delay:0.10s }
.ap3 { transition-delay:0.15s }
.ap4 { transition-delay:0.20s }
.ap5 { transition-delay:0.25s }

/* ─── CHAR SPLIT ANIMATION (naslov O nama) ─── */
.char-split .char {
  display:inline-block;
  opacity:0;
  transform:translateY(60%) skewY(8deg);
  transition:opacity 0.5s var(--smooth), transform 0.5s var(--smooth);
}
.char-split.vis .char { opacity:1; transform:translateY(0) skewY(0deg) }

/* Bilingual */
[data-lang="en"] [data-show="hr"] { display:none!important }
[data-lang="hr"] [data-show="en"] { display:none!important }

.screen-reader-text { position:absolute!important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px }

/* ═══ MOBILE OPTIMIZACIJE ═══ */

/* Sprječava zoom na focus na iOS */
@media(max-width:768px) {
  input, select, textarea { font-size:16px !important }
}

/* Bar na mobilnom */
@media(max-width:480px) {
  .bar { height:54px; padding:0 1rem }
  .bar__brand { font-size:1rem }
  .drawer-trig span:not(.drawer-trig__lines) { display:none }
}

/* Hero na mobilnom */
@media(max-width:480px) {
  .mask-hero { padding:5rem 1.25rem 3rem }
  .mask-hero__h1 { font-size:clamp(2.2rem,11vw,3rem); line-height:1 }
  .mask-hero__sub { font-size:0.9rem }
  .mask-hero__actions { flex-direction:column; align-items:center }
  .btn-leaf, .btn-earth { width:100%; justify-content:center; max-width:280px }
}

/* About award sekcija na mobilnom */
@media(max-width:860px) {
  .about-award__inner { gap:2.5rem }
  .about-award__visual { padding:1.5rem 1.5rem 1.5rem 0 }
  .about-award__img-float { bottom:-1rem; right:-0.5rem; width:44%; border-width:3px }
  .about-award__bg-num { font-size:30vw }
}
@media(max-width:580px) {
  .about-award { padding:3rem 0 5rem }
  .about-award__visual { padding:1rem 1rem 3rem 0 }
  .about-award__img-float { width:40%; right:-0.25rem }
  .about-award__caption { font-size:0.8rem }
  .about-award__nums { gap:1.5rem }
  .about-award__num-val { font-size:1.8rem }
}

/* Forma kontakt na mobilnom */
@media(max-width:580px) {
  .contact-2col { gap:2rem }
  .f-card { padding:1.5rem 1.25rem }
  .ff__input, .ff__textarea, .ff__select { padding:10px 12px }
  /* 2-kolona email/tel → 1 kolona */
  .f-card .ff-row-2 { grid-template-columns:1fr !important }
}

/* Timeline na mobilnom */
@media(max-width:480px) {
  .timeline { padding-left:28px }
  .tl-step__dot { left:-21px }
  .tl-step__title { font-size:1.1rem }
}

/* Slike na page-o-nama mobilnom */
@media(max-width:860px) {
  .farm-story__img-b { bottom:-0.5rem; right:-0.5rem; border-width:3px }
}
@media(max-width:480px) {
  .farm-story__imgs { padding:1rem }
  .farm-story__img-b { width:44%; right:-0.25rem }
}

/* Footer na tabletu */
@media(max-width:680px) {
  .btm { border-radius:var(--r-lg) var(--r-lg) 0 0 }
  .btm__blurb { max-width:100% }
}

/* Mapa na mobilnom */
@media(max-width:580px) {
  .map-frame { height:260px; margin:0 1rem }
}

/* CTA na mobilnom */
@media(max-width:580px) {
  .farm-cta { margin:0 1rem; padding:2.5rem 1.5rem }
  .farm-cta__h { font-size:1.6rem }
}

/* Recenzije na tabletu */
@media(max-width:768px) and (min-width:581px) {
  .hw-reviews { grid-template-columns:1fr 1fr }
  .hw-reviews .hw-card:last-child { grid-column:1/3 }
}

/* Touch — ukloni hover efekte koji smetaju */
@media(hover:none) {
  .prod-card:hover { transform:none; box-shadow:none }
  .btn-leaf:hover { transform:none }
  .r-drawer__link:hover { padding-left:0 }
  .about-award__visual:hover .about-award__img-main img,
  .about-award__visual:hover .about-award__img-float img { transform:none }
}

/* Safe area za notch uređaje */
@supports(padding:max(0px)) {
  .bar { padding-left:max(var(--px), env(safe-area-inset-left)); padding-right:max(var(--px), env(safe-area-inset-right)) }
  .btm { padding-bottom:max(1.5rem, env(safe-area-inset-bottom)) }
}