/*
Theme Name: Kuvajmo
Theme URI: https://example.com/kuvajmo
Author: Hranan
Author URI: https://example.com
Description: Profesionalna WordPress tema za kuvarski i lifestyle sajt na srpskom jeziku (latinica). Tema je vizuelni sloj: kremasta paprika paleta, samostalno hostovani fontovi Fraunces + Karla, editorial hero, kartice sa zumiranjem slike, čitaonici (podeljeni članci) sa dugmetom „Nastavi da čitaš“, trajmer vremena čitanja, komentari samo sa tekstom. Recepti, kartica recepta, preračun porcija, strukturirani podaci, društvene oznake, reklame i saglasnost za kolačiće žive u dodatku „Kuvajmo Recipes“.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kuvajmo
Tags: food-and-drink, blog, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

:root{
  --accent:#c2410c;            /*pečena paprika*/
  --accent-dark:#9a3412;       /*tamna paprika*/
  --accent-press:#7c2d12;      /* shadows of the buttons*/
  --saffron:#e09b2d;           /*second accent*/
  --bg:#f6f0e4;                /*cream*/
  --surface:#fffdf8;           /*paper*/
  --ink:#241a14;               /*espresso text*/
  --muted:#7d6a5c;             /*stone text*/
  --border:#e7dccb;            /*sand line*/
  --bubble:#f3ead9;            /*comment bubble*/
  --font-display:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --font-body:"Karla","Karla Fallback",system-ui,"Segoe UI",Roboto,sans-serif;
  --container:1180px; --content:720px; --sidebar:320px; --gutter:44px;
  --body-size:17.5px; --body-lh:1.75;
  --radius:22px; --radius-sm:16px; --btn-radius:999px;
  --shadow:0 24px 48px -26px rgba(80,45,20,.42);
  --shadow-sm:0 6px 18px -10px rgba(80,45,20,.30);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:96px}
img{max-width:100%;display:block;height:auto}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--body-size);line-height:var(--body-lh);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:650;color:var(--ink);line-height:1.15;letter-spacing:-.01em}
.media{display:block;width:100%;height:100%;object-fit:cover;background-color:var(--border)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 26px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;word-wrap:normal!important}
/* Bez ovoga se „preskoči na sadržaj“ veza ne vidi ni kada dobije fokus (clip:rect). */
.screen-reader-text:focus{width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 18px;z-index:200;border-radius:0 0 12px 0}
.skip-link:focus{left:0;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none}
.km-reading-bar{position:fixed;top:0;left:0;height:4px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--saffron),var(--accent));z-index:130;will-change:transform}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:40;background:rgba(246,240,228,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.hdr{max-width:var(--container);margin:0 auto;padding:14px 26px;display:flex;align-items:center;gap:16px}
.burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;color:var(--ink)}
.burger:hover{background:var(--bubble)}
.burger svg,.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:650;font-style:italic;font-size:1.65rem;letter-spacing:-.02em;color:var(--ink)}
.brand .hat{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdr-tools{margin-inline-start:auto;display:flex;align-items:center;gap:6px}
.icon-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--ink);opacity:.85}
.icon-btn:hover{opacity:1;background:var(--accent);color:#fff}
.navbar{background:var(--surface);border-bottom:1px solid var(--border)}
.nav{max-width:var(--container);margin:0 auto;padding:10px 26px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;list-style:none}
.nav a{font-family:var(--font-body);font-weight:700;font-size:.9rem;color:var(--ink);padding:8px 16px;border-radius:999px;display:inline-block;transition:background .15s,color .15s}
.nav a:hover,.nav .current-menu-item>a,.nav .current-menu-ancestor>a{background:var(--accent);color:#fff}
/* Podmeni (meni podržava dva nivoa — bez ovoga se prikazuje kao obična lista) */
.nav li{position:relative}
.nav .sub-menu{position:absolute;top:100%;inset-inline-start:0;z-index:50;min-width:230px;margin-top:6px;padding:8px;list-style:none;display:none;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:flex}
.nav .sub-menu a{display:block;text-align:start;border-radius:12px;font-weight:600;font-size:.88rem}
.nav .sub-menu .sub-menu{top:-9px;inset-inline-start:100%;margin-top:0}
.search-pop{display:none;position:absolute;inset-inline-end:26px;top:66px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:14px;z-index:60;width:min(380px,92vw)}
.search-pop.open{display:block}
.search-pop form{display:flex;gap:8px}
.search-pop input{flex:1;border:2px solid var(--border);border-radius:999px;padding:11px 16px;font:inherit;background:var(--bg);color:var(--ink)}
.search-pop input:focus{border-color:var(--accent);outline:none}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-weight:700;font-size:.88rem;letter-spacing:.01em;padding:12px 24px;border-radius:var(--btn-radius);background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-press),0 16px 24px -14px rgba(124,45,18,.55);transition:transform .13s,box-shadow .13s,background .13s}
.btn:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-press)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn.ghost{background:transparent;color:var(--accent-dark);border:2px solid var(--accent-dark);box-shadow:none}
.btn.ghost:hover{background:var(--accent-dark);color:#fff}

/* ===== chips and section headers ===== */
.tag{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--accent);padding:5px 12px;border-radius:999px}
.shead{display:flex;align-items:baseline;gap:16px;margin:10px 0 22px}
.shead h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:650}
.shead::after{content:"";flex:1;height:1px;background:var(--border);align-self:center}
.dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--saffron);color:var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.72rem;overflow:hidden;flex-shrink:0}

/* ===== HERO featured (1 big + 2 tiles) ===== */
.km-hero{padding:34px 0 10px}
.lead{position:relative;display:block;border-radius:var(--radius);overflow:hidden;min-height:460px}
.lead .media{position:absolute;inset:0;transition:transform .4s ease}
.lead:hover .media{transform:scale(1.04)}
.lead .tx{position:absolute;inset-inline:18px;bottom:18px;z-index:2;background:var(--surface);border-radius:var(--radius-sm);padding:20px 22px;box-shadow:var(--shadow-sm)}
.lead .tx h2{font-size:1.65rem;line-height:1.12;margin:12px 0 8px}
.lead:hover .tx h2{color:var(--accent-dark)}
.lead .tx p{color:var(--muted);font-size:.95rem;max-width:52ch;margin-bottom:10px}
.lead .meta{font-size:.82rem;color:var(--muted);display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* ===== article cards (new look) ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .thumb{position:relative;overflow:hidden}
.card .thumb .media{aspect-ratio:4/3;height:auto;transition:transform .45s ease}
.card:hover .thumb .media{transform:scale(1.06)}
.card .tag{position:absolute;top:12px;inset-inline-start:12px;z-index:2;box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .card-title{font-size:1.28rem;line-height:1.22;font-weight:650;overflow-wrap:anywhere}
.card:hover .card-title{color:var(--accent-dark)}
.card p{font-size:.92rem;color:var(--muted);line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:.8rem;color:var(--muted);display:flex;gap:9px;align-items:center}
.card .meta .who{font-weight:700;color:var(--ink)}
/* prva kartica u mreži više nije široka pločica — sve kartice su jednake */

/* ===== ranked list (Popularno) ===== */
.trending{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.trend{display:flex;gap:15px;align-items:center;padding:13px 0;border-bottom:1px dashed var(--border)}
.trend .rank{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--saffron);width:30px;flex-shrink:0;text-align:center;line-height:1}
.trend .tn{width:68px;height:68px;border-radius:14px;flex-shrink:0;object-fit:cover;aspect-ratio:1/1}
.trend h3{font-size:1rem;line-height:1.3;font-weight:650}
.trend:hover h3{color:var(--accent-dark)}
.trend .rt{font-size:.78rem;color:var(--muted);margin-top:4px}

/* ===== sidebar ===== */
.layout{display:flex;gap:var(--gutter);padding:34px 0 12px;align-items:flex-start}
.layout.no-sidebar .main{max-width:none;margin:0 auto}
.main{flex:1;min-width:0;max-width:var(--content)}
body.home .main,body.blog .main,body.archive .main,body.search .main{max-width:none}
.aside{width:var(--sidebar);flex-shrink:0;position:sticky;top:92px}
.widget{margin-bottom:30px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.widget-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;padding-bottom:12px;margin-bottom:16px;border-bottom:2px solid var(--saffron)}
.km-poplist{display:flex;flex-direction:column;gap:15px}
.km-pop{display:flex;gap:13px;align-items:center}
.km-pop .pn{width:64px;height:64px;border-radius:14px;flex-shrink:0;object-fit:cover;aspect-ratio:1/1}
.km-pop h3{font-family:var(--font-body);font-weight:700;font-size:.93rem;line-height:1.3}
.km-pop:hover h3{color:var(--accent-dark)}
.km-pop .rt{font-size:.76rem;color:var(--muted);margin-top:3px}

/* ===== single post ===== */
.post-banner{background:var(--surface);border-bottom:1px solid var(--border)}
.post-banner .wrap{padding:30px 26px}
.pb-crumb{font-size:.83rem;color:var(--muted);margin-bottom:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pb-crumb a:hover{color:var(--accent-dark)}
.pb-crumb .sep{opacity:.4}
.read-head{text-align:center;max-width:760px;margin:34px auto 0;padding:0 26px}
.read-head .tag{margin-bottom:16px}
.post-title{font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.12;font-weight:650}
.post-dek{font-size:1.15rem;color:var(--muted);margin-top:14px;font-family:var(--font-body);line-height:1.6}
.post-meta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);margin-top:18px}
.post-meta .avatar{width:40px;height:40px;font-size:.85rem}
.post-meta .who{color:var(--ink);font-weight:700}
.featured{margin:26px 0 10px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.featured .media{aspect-ratio:16/9;height:auto}
.fig-cap{font-size:.8rem;color:var(--muted);text-align:center;padding:10px 14px;background:var(--surface);border-top:1px solid var(--border)}

/* ===== article body ===== */
.body{font-size:var(--body-size);line-height:1.8}
.body p{margin:0 0 1.3em}
.body h2{font-size:1.65rem;font-weight:650;margin:38px 0 14px}
.body h3{font-size:1.25rem;margin:28px 0 10px}
.body ul,.body ol{margin:0 0 1.3em;padding-inline-start:1.4em;display:flex;flex-direction:column;gap:.45em}
.body li{line-height:1.7}
.body img{border-radius:var(--radius-sm);margin:20px 0}
.body figure{margin:20px 0}.body figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:8px}
.body blockquote{margin:30px 0;padding:6px 0 6px 24px;border-inline-start:4px solid var(--saffron);font-family:var(--font-display);font-weight:600;font-size:1.2em;line-height:1.5;color:var(--ink)}
.body a{color:var(--accent-dark);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.body a:hover{color:var(--accent)}
.body strong{color:var(--ink)}
.body .alignleft{float:left;margin:6px 20px 14px 0;max-width:44%}
.body .alignright{float:right;margin:6px 0 14px 20px;max-width:44%}
.body .aligncenter{margin-inline:auto}
body.single .body{font-size:18px}

/* ===== page-break pager („Nastavi da čitaš“) ===== */
.km-pager{display:flex;flex-direction:column;align-items:center;gap:16px;margin:52px 0 10px;text-align:center}
.read-prompt{max-width:44ch;font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.5;color:var(--accent-dark)}
.read-prompt .rp-ico{margin-inline-end:8px}
.read-next{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#fff;font-family:var(--font-body);font-weight:700;font-size:1.05rem;padding:17px 36px;border-radius:var(--btn-radius);box-shadow:0 5px 0 var(--accent-press),0 24px 34px -18px rgba(124,45,18,.6);transition:transform .13s,box-shadow .13s,background .13s}
.read-next:hover{background:var(--accent-dark);transform:translateY(-3px);box-shadow:0 7px 0 var(--accent-press),0 28px 38px -18px rgba(124,45,18,.6)}
.read-next:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-press)}
.read-next svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.read-next:hover svg{transform:translateX(4px)}
.km-page-ind{font-size:.85rem;color:var(--muted);font-weight:700;letter-spacing:.02em}
.km-pager .dots{display:flex;gap:6px}
/* Neaktivne tačkice su na kremastoj pozadini bile gotovo nevidljive. */
.km-pager .dots i{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.28}
.km-pager .dots i.on{opacity:1}

/* Paginacija: WordPress stavlja klasu .page-numbers na sam link/span
   (a.page-numbers), a ne na roditelja — zato su stari selektori bili bez efekta. */
.navigation.pagination{margin:34px 0}
.nav-links{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;font-weight:700}
.page-numbers{display:inline-block;padding:9px 15px;border:1px solid var(--border);border-radius:999px;color:var(--ink);background:var(--surface);font-size:.9rem;line-height:1.2}
.page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
a.page-numbers:hover{border-color:var(--accent);color:var(--accent-dark)}
.page-numbers.dots{border-color:transparent;background:transparent}

/* ===== related ===== */
.related{margin:48px 0 6px}
.related h2{font-size:1.6rem;margin-bottom:18px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.rel-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.rel-card .media-wrap{position:relative;display:block;overflow:hidden}
.rel-card .media{aspect-ratio:4/3;height:auto;transition:transform .45s}
.rel-card:hover .media{transform:scale(1.05)}
.rel-card .media-wrap .tag{position:absolute;top:10px;inset-inline-start:10px}
.rel-card .ct{padding:15px 16px 18px}
.rel-card .ct h3{font-size:1rem;font-weight:650;line-height:1.3}
.rel-card:hover h3{color:var(--accent-dark)}
.rel-card .ct .rt{font-size:.78rem;color:var(--muted);margin-top:8px}

/* ===== ads ===== */
.km-ad{display:block;width:100%;margin:26px 0;clear:both}
/* Reklama u feedu je unutar .card-grid mreže — neka zauzme ceo red. */
.card-grid>.km-ad{grid-column:1 / -1;margin:10px 0}
.km-ad-lbl{display:block;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;color:var(--ink);text-align:center}
.km-ad ins.km-ad-frame{display:block;width:100%}
.km-ad--side{margin:0}
/* Rezervisana visina reklamnih blokova — dodatak dodaje klasu .km-ad-reserve
   na <body> samo dok su reklame uključene, da ne bi bilo pomeranja sadržaja. */
.km-ad-reserve .km-ad{min-height:96px}
.km-ad-reserve .km-ad--incontent{min-height:250px}
.km-ad-reserve .km-ad--side{min-height:600px}

/* ===== comments ===== */
.comments{margin-top:50px;border-top:1px solid var(--border);padding-top:32px}
.comments-title{font-size:1.6rem;margin-bottom:8px}
.comments .policy{font-size:.85rem;color:var(--muted);margin-bottom:22px;display:flex;align-items:center;gap:9px}
.comments .policy svg{width:18px;height:18px;stroke:var(--accent-dark);fill:none;stroke-width:2;flex-shrink:0}
.comment-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.comment-form textarea,.comment-form input[type=text]{width:100%;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-sm);padding:13px 16px;font:inherit;color:var(--ink);margin-bottom:12px}
.comment-form textarea:focus,.comment-form input[type=text]:focus{border-color:var(--accent);outline:none}
.comment-form textarea{min-height:110px;resize:vertical;line-height:1.6}
.cf-error{color:#b3261e;font-size:.86rem;font-weight:700}
.cf-hp{position:absolute!important;left:-9999px!important;top:-9999px!important;height:0;width:0;opacity:0}
.comment-list{margin-top:26px;display:flex;flex-direction:column;gap:16px;list-style:none}
.comment .c-wrap{display:flex;gap:10px;align-items:flex-start}
.comment .av{width:42px;height:42px;border-radius:50%;color:var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.95rem;flex-shrink:0;background:var(--saffron);overflow:hidden}
.comment li.depth-2 .av,.comment li.depth-3 .av{width:34px;height:34px;font-size:.8rem}
.comment .av img{width:100%;height:100%;object-fit:cover}
.comment .cbody{flex:1;min-width:0}
.c-bubble{display:inline-block;max-width:100%;background:var(--bubble);border-radius:20px;padding:10px 15px;overflow-wrap:anywhere}
.c-bubble .cname{font-family:var(--font-body);font-weight:700;font-size:.85rem;color:var(--ink);line-height:1.3}
.c-bubble .ctext{font-size:.95rem;line-height:1.5;color:var(--ink);margin-top:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.cmeta{display:flex;align-items:center;flex-wrap:wrap;padding:4px 14px 0;font-size:.76rem;line-height:1.2}
.cmeta .comment-reply-link{font-weight:700;color:var(--muted)}
.cmeta .comment-reply-link:hover{color:var(--accent-dark);text-decoration:underline}
.cmeta .cdot{margin:0 6px;color:var(--muted)}
.cmeta .ctime{color:var(--muted)}
.children,.replies{margin-top:12px;padding-inline-start:26px;display:flex;flex-direction:column;gap:14px;list-style:none}
.comment-respond small a{color:var(--muted);font-weight:700}
.comments-closed{color:var(--muted);font-style:italic}

/* ===== static pages ===== */
.page-wrap{max-width:820px;margin:0 auto;padding:46px 26px 76px}
.pg-crumb{font-size:.82rem;color:var(--muted);margin-bottom:16px;display:flex;gap:8px;align-items:center}
.pg-crumb a{color:var(--accent-dark);font-weight:700}
.pg-crumb .sep{opacity:.5}
.pg-title{font-size:2.3rem;margin-bottom:12px}
.pg-updated{font-size:.84rem;color:var(--muted);margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.pg-body{font-size:1.05rem;line-height:1.8}
.pg-body h2{font-size:1.35rem;margin:30px 0 10px}
.pg-body p{margin-bottom:16px}
.pg-body ul{margin:0 0 16px;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px}
.pg-body a{color:var(--accent-dark);font-weight:700;text-decoration:underline}
/* ===== archive header ===== */
.arch-head{background:var(--surface);border-bottom:1px solid var(--border)}
.arch-head .wrap{padding:36px 26px}
.arch-head h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.arch-head p{color:var(--muted);margin-top:8px;max-width:60ch}
.arch-empty{padding:70px 0;text-align:center;color:var(--muted)}
.notfound{text-align:center;padding:64px 0}
.notfound h1{font-size:clamp(3rem,10vw,5rem);color:var(--saffron)}
.notfound p{color:var(--muted);margin:12px 0 24px}
.notfound .search-pop,.notfound form.search-form{display:flex;gap:8px;max-width:420px;margin:0 auto 30px;position:static;width:auto}
.notfound input{flex:1;border:2px solid var(--border);border-radius:999px;padding:12px 18px;font:inherit;background:var(--surface);color:var(--ink)}

/* ===== footer ===== */
.foot{background:var(--ink);color:#d8cbb8;margin-top:56px}
.foot-top{max-width:var(--container);margin:0 auto;padding:52px 26px 30px;display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:34px}
.foot .fbrand{font-family:var(--font-display);font-weight:650;font-style:italic;font-size:1.6rem;color:#fff;margin-bottom:12px}
.foot .ftag{font-size:.92rem;line-height:1.7;opacity:.8;max-width:320px}
.foot .widget-title{font-family:var(--font-body);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--saffron);margin-bottom:16px;padding-bottom:0;border-bottom:0}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul a{display:inline-block;padding:4px 0;font-size:.92rem;opacity:.85}
.foot ul a:hover{opacity:1;color:#fff}
.foot .widget,.foot .widget-title{background:transparent;border:none;color:inherit;padding:0}
.foot .widget-title{color:var(--saffron)}
.fsocial{display:flex;gap:9px;margin-top:18px}
.fsocial a{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;opacity:.85}
.fsocial a:hover{opacity:1;border-color:var(--saffron);color:var(--saffron)}
.fsocial svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1)}
.fb-in{max-width:var(--container);margin:0 auto;padding:18px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.84rem;opacity:.9}
.backtop{display:block;text-align:center;padding:15px;background:rgba(0,0,0,.25);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.backtop:hover{color:var(--saffron)}

/* ===== share row ===== */
.share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:34px 0 6px;padding-top:22px;border-top:1px dashed var(--border)}
.share-label{font-weight:700;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.share-btn{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:44px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.72rem;font-weight:800;letter-spacing:.06em;color:var(--accent-dark);transition:background .15s,color .15s,border-color .15s}
.share-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== comment form title ===== */
.comment-respond{margin-top:34px}
.comment-reply-title{font-size:1.35rem;margin:0 0 14px}
.comment-respond small a{font-size:.8rem}
.cpol{display:block;font-size:.82rem;color:var(--muted);margin-bottom:12px}
.comment-form label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:14px}

/* ===== faza 4: čipovi, pretraga, naslovna, navigacija unosa ===== */
.home-section{margin:28px 0}
.chips{display:flex;gap:10px;overflow-x:auto;padding:8px 0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-weight:700;font-size:.86rem;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.chip:hover,.chip.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.shead-link,.shead-note{font-size:.85rem;font-weight:700;color:var(--muted)}
.shead-link{color:var(--accent-dark)}
.shead-link:hover{color:var(--accent)}
.time-chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--muted)}
.time-chip svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.card .time-chip{margin-top:auto}
.search-form{display:flex;gap:10px;max-width:560px;margin-top:18px}
.search-form input{flex:1;min-width:0;border:2px solid var(--border);border-radius:999px;padding:13px 18px;font:inherit;background:var(--surface);color:var(--ink)}
.search-form input:focus{border-color:var(--accent);outline:none}
.about-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px 28px;margin:34px 0 10px}
.about-block h2{font-size:1.5rem;margin-bottom:10px}
.about-block p{color:var(--muted);line-height:1.7;max-width:72ch}
.postnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:42px 0 10px}
.postnav-link{display:flex;flex-direction:column;gap:5px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color .15s,color .15s}
.postnav-next{text-align:end}
.postnav-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted)}
.postnav-title{font-family:var(--font-display);font-weight:650;font-size:1.02rem;line-height:1.3;overflow-wrap:anywhere}
.postnav-link:hover{border-color:var(--accent);color:var(--accent-dark)}

/* ===== responsive ===== */
@media (max-width:1020px){
  .layout{flex-direction:column}
  .aside{width:100%;position:static;max-width:620px;margin-inline:auto}
  .trending{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .lead{min-height:360px}
}
@media (max-width:760px){
  :root{--body-size:16.5px}
  .navbar{display:none}
  .navbar.open{display:block}
  .navbar .nav{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px;padding:14px 22px}
  .navbar .nav a{border-radius:14px}
  .navbar .nav .sub-menu{position:static;display:flex;min-width:0;margin:2px 0 6px 10px;padding:0 0 0 10px;border:0;border-inline-start:2px solid var(--border);border-radius:0;box-shadow:none;background:transparent}
  .navbar .nav .sub-menu .sub-menu{margin-inline-start:0}
  .burger{display:flex}
  /* Zaglavlje ostaje lepljivo samo dok je niže od 56px (visina 54px + linija). */
  .hdr{height:54px;min-height:54px;padding:0 18px}
  .brand{font-size:1.3rem}
  .brand img,.brand .custom-logo{max-height:34px;width:auto}
  .card-grid{grid-template-columns:1fr}
  .postnav{grid-template-columns:1fr}
  .postnav-next{text-align:start}
  .rel-grid{grid-template-columns:1fr;gap:12px}
  .rel-card{display:flex;align-items:stretch;min-height:100px}
  .rel-card .media-wrap{flex:0 0 38%;max-width:150px}
  .rel-card .media{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .rel-card .ct{flex:1;display:flex;flex-direction:column;justify-content:center;padding:12px 15px}
  .foot-top{grid-template-columns:1fr 1fr}
  .read-next{width:100%;justify-content:center}
  .fb-in{flex-direction:column-reverse;align-items:flex-start}
  .wrap,.hdr{padding-left:18px;padding-right:18px}
  .lead .tx{inset-inline:12px;bottom:12px}
  .km-hero{padding-top:22px}
}
@media (max-width:540px){
  .foot-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;animation:none!important}
}