/*
Theme Name: Stella
Theme URI: https://ordinacijastella.rs
Author: BucevacDesign
Author URI: https://bucevacdesign.com
Description: Klasična tema po meri za sajt ordinacije Stella. Bez graditelja stranica, sa lokalnim fontovima, spoljnim CSS i JS fajlovima i pripremom za pretragu.
Version: 0.2.0
Requires at least: 6.5
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: stella
*/

@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-roman-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-roman-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/fraunces-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/fraunces-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/karla-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/karla-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --tekst:#2a2225; --tekst-blaga:#6f6266; --podloga:#fbf9f9; --podloga-2:#efe0e3;
  --bordo:#5e1a28; --bordo-hover:#743243; --roza:#c08792; --roza-tamna:#8a3444;
  --linija:#eadfe1; --tamna:#2c0a12; --obav:#fbe3e7; --obav-ivica:#eaa8b4; --obav-tekst:#7a1427;
  --f-tekst:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-naslov:"Fraunces",Georgia,"Times New Roman",serif;
  --radius:6px; --sirina:1180px; --razmak:clamp(72px,9vw,140px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--podloga);color:var(--tekst);font:400 1.125rem/1.6 var(--f-tekst);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-naslov);font-weight:400;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0}
.sadrzaj{width:min(100% - 2rem,var(--sirina));margin-inline:auto}
.preskoci{position:absolute;left:-999px;top:0;background:var(--bordo);color:#fff;padding:.75rem 1rem;z-index:100}
.preskoci:focus{left:1rem;top:1rem}
:focus-visible{outline:3px solid var(--roza);outline-offset:3px}

.prazno{background:repeating-linear-gradient(135deg,#fff0 0 6px,rgba(192,135,146,.18) 6px 7px);outline:1px dashed var(--roza);outline-offset:2px;border-radius:3px;padding:0 .25em;color:var(--roza-tamna)}
/* Dugmad */
.dugme{display:inline-flex;align-items:center;gap:.6rem;font:700 .8125rem/1 var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:1.05rem 1.5rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dugme::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dugme--svetlo{background:var(--podloga);color:var(--bordo)}
.dugme--svetlo:hover{background:var(--podloga-2)}
.dugme--bordo{background:var(--bordo);color:var(--podloga)}
.dugme--bordo:hover{background:var(--bordo-hover)}
.dugme--manje{padding:.85rem 1.2rem}
.dugme--okvir{border-color:rgba(251,249,249,.45);color:var(--podloga)}
.dugme--okvir:hover{background:rgba(251,249,249,.1)}
.veza{font:700 .8125rem/1.2 var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--bordo);display:inline-flex;gap:.5rem;align-items:center;border-bottom:1px solid transparent}
.veza:hover{border-bottom-color:currentColor}

/* Zaglavlje */
.zaglavlje{position:sticky;top:0;z-index:50;background:var(--tamna);color:var(--podloga)}
.zaglavlje__red{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px}
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.logo img{width:52px;height:52px}
.logo span{font:500 1.35rem/1 var(--f-naslov);letter-spacing:.14em;text-transform:uppercase}
.meni{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.meni a{font:700 .8125rem/1 var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--podloga-2);padding:.5rem 0;border-bottom:1px solid transparent}
.meni a:hover{border-bottom-color:var(--roza)}
.zaglavlje .dugme{padding:.85rem 1.2rem}
.meni-dugme{display:none;background:none;border:1px solid rgba(251,249,249,.4);color:var(--podloga);border-radius:var(--radius);padding:.6rem .85rem;font:700 .8125rem var(--f-tekst);letter-spacing:.09em;text-transform:uppercase}

/* Hero */
.hero{position:relative;background:var(--bordo);color:var(--podloga);text-align:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 70% at 15% 20%,rgba(192,135,146,.38),transparent 60%),
  radial-gradient(55% 80% at 90% 85%,rgba(116,50,67,.9),transparent 65%),
  linear-gradient(160deg,#5e1a28 0%,#43111c 55%,#2c0a12 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero__okvir{padding:clamp(72px,11vw,150px) 0 clamp(80px,11vw,150px);max-width:880px;margin-inline:auto}
.nadnaslov{font:italic 500 1.2rem/1.3 var(--f-naslov);color:var(--podloga-2);margin-bottom:1.5rem;display:block}
.hero h1{font-size:clamp(2.6rem,7.2vw,5.4rem)}
.hero h1 em,h2 em{font-style:italic;font-weight:500;color:var(--roza)}
.hero h1 em{display:block}
.traka .prazno,.podnozje .prazno,.sekcija--tamna .prazno{color:var(--podloga-2);outline-color:var(--roza);background:none}
.hero p.uvod{font-size:clamp(1.1rem,2vw,1.3rem);max-width:36em;margin:1.75rem auto 2.25rem;color:var(--podloga-2)}
.hero p.uvod .novi-red{display:block;margin-top:.5em}
.hero__dugmad{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* Sekcije */
.sekcija{padding-block:var(--razmak)}
.sekcija--roza{background:var(--podloga-2)}
.sekcija--tamna{background:var(--tamna);color:var(--podloga)}
.eyebrow{font:italic 500 1.1rem/1.2 var(--f-naslov);color:var(--roza-tamna);display:block;margin-bottom:1rem}
.sekcija--tamna .eyebrow{color:var(--podloga-2)}
.glava{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.glava h2{font-size:clamp(2rem,4.4vw,3.5rem)}
.glava p{color:var(--tekst-blaga)}

/* 02 Lekari */
.lekari{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.75rem)}
.lekar{display:flex;flex-direction:column;gap:1rem}
.lekar__slika{aspect-ratio:2/3;border-radius:var(--radius);background:linear-gradient(170deg,#e9d3d7,#d6b3ba);position:relative;overflow:hidden;display:grid;place-items:end start;padding:.75rem}
.lekar__slika::before{content:"";position:absolute;left:50%;top:26%;width:34%;aspect-ratio:1;border-radius:50%;background:rgba(94,26,40,.16);transform:translateX(-50%)}
.lekar__slika::after{content:"";position:absolute;left:50%;top:52%;width:70%;height:60%;border-radius:50% 50% 0 0;background:rgba(94,26,40,.16);transform:translateX(-50%)}
.lekar__slika small{position:relative;z-index:1;font-size:.78rem;color:var(--roza-tamna);background:rgba(251,249,249,.8);padding:.15rem .5rem;border-radius:3px}
.lekar .uloga{font:700 .75rem/1.3 var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;color:var(--roza-tamna)}
.lekar h3{font-size:1.55rem;margin:.3rem 0 .4rem}
.lekar p{color:var(--tekst-blaga);font-size:1rem}

[hidden]{display:none!important}
/* Završni poziv */
.zavrsni{text-align:center}
.zavrsni h2{font-size:clamp(2.1rem,5vw,4rem);max-width:15em;margin:0 auto 1.25rem}
.zavrsni p{color:var(--podloga-2);max-width:32em;margin:0 auto 2rem}

/* Podnožje */
.podnozje{background:#1f070d;color:var(--podloga-2);padding-top:clamp(3rem,6vw,5rem);font-size:1rem}
.podnozje__mreza{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3rem}
.podnozje__naslov{font:700 .75rem var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;color:var(--roza);margin:0 0 1rem}
.podnozje ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.podnozje a{text-decoration:none}
.podnozje a:hover{color:#fff;text-decoration:underline}
.podnozje .logo{margin-bottom:1rem}
.podnozje__dno{border-top:1px solid rgba(251,249,249,.14);padding:1.25rem 0 1.75rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-size:.9rem;color:#cdb8bd}

/* Pojavljivanje pri skrolu (JS dodaje .ceka pa .vidi) */
.ceka{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.ceka.vidi{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.forma::before,.forma.vidi .forma__telo>*,.uspeh svg *{animation:none!important}.uspeh svg *{stroke-dashoffset:0!important}.forma *{transition:none!important}.usluge__slika .krug img,.lista .detalj{transition:none!important}html{scroll-behavior:auto}.ceka{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* Fotografija lekara */
.lekar__slika{overflow:hidden}
.lekar__slika img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lekar__slika:has(img)::before,.lekar__slika:has(img)::after{display:none}
.skip-link{position:absolute;left:-999px;top:0}
/* Stranica rezultata i greške */
.telo--siroko{max-width:none}
/* Obaveštenje posle slanja forme */
.javi{border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.5rem;background:var(--obav);border:1px solid var(--obav-ivica);color:var(--obav-tekst)}

/* ===== Unutrašnje stranice ===== */
/* Unutrašnje stranice: dopuna uz predlog.css (isti tokeni, bez spoljnih zahteva) */

/* Meni sa šest stavki */
.meni{gap:clamp(1rem,1.9vw,1.9rem)}
.meni a[aria-current="page"]{border-bottom-color:var(--roza);color:#fff}
@media (max-width:1120px){
  .meni{display:none}
  .meni-dugme{display:inline-block}
  .zaglavlje.otvoreno .meni{display:flex;position:absolute;left:0;right:0;top:76px;flex-direction:column;background:var(--tamna);padding:1rem 1.5rem 1.5rem;gap:.25rem;border-top:1px solid rgba(251,249,249,.14)}
  .zaglavlje.otvoreno .meni a{display:block;padding:.85rem 0}
}

/* Gornji deo unutrašnje stranice */
.podhero .hero__okvir{padding:clamp(48px,7vw,96px) 0 clamp(56px,8vw,104px);max-width:820px}
.podhero h1{font-size:clamp(2.2rem,5.6vw,4.2rem)}
.podhero h1 em{display:inline}
.podhero p.uvod{margin:1.4rem auto 0}
.mrvice{margin-bottom:1.5rem;font-size:.9rem}
.mrvice ol{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0;color:var(--podloga-2)}
.mrvice li+li::before{content:"/";margin-right:.35rem;opacity:.6}
.mrvice a{color:var(--podloga-2);text-decoration:underline;text-underline-offset:3px}
.mrvice a:hover{color:#fff}

/* Dugi tekst sa bočnim sadržajem */
.clanak{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.sadrzaj-nav{position:sticky;top:100px;border-left:2px solid var(--linija);padding-left:1.25rem}
.sadrzaj-nav h2{font:700 .75rem var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;color:var(--roza-tamna);margin:0 0 .9rem}
.sadrzaj-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.sadrzaj-nav a{text-decoration:none;color:var(--tekst-blaga);font-size:.98rem}
.sadrzaj-nav a:hover{color:var(--bordo);text-decoration:underline}
.telo{max-width:46rem}
.telo section{margin-bottom:clamp(2.5rem,5vw,4rem);scroll-margin-top:100px}
.telo h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:1rem}
.telo h2 em{font-style:italic;font-weight:500;color:var(--roza-tamna)}
.telo p{line-height:1.7;margin-bottom:1rem}
.telo ul.tacke{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.65rem}
.telo ul.tacke li{position:relative;padding-left:1.6rem;line-height:1.6}
.telo ul.tacke li::before{content:"";position:absolute;left:0;top:.7em;width:.55rem;height:.55rem;border-radius:50%;background:var(--roza)}
.telo .dugme{margin-top:.5rem}
.vise{display:inline-block;margin-top:.25rem;font-weight:700;color:var(--bordo);text-decoration:none;border-bottom:1px solid var(--roza);padding-bottom:2px}
.vise::after{content:" \2192"}
.vise:hover{color:var(--bordo-hover);border-bottom-color:var(--bordo)}

/* Tekst sa okruglom fotografijom */
.dvokolona{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.krug-slika{position:relative;width:min(100%,380px);aspect-ratio:1;margin-inline:auto}
.krug-slika::before{content:"";position:absolute;inset:0;border:1.5px dashed var(--roza);border-radius:50%}
.krug-slika img{position:absolute;inset:9%;width:82%;height:82%;object-fit:cover;border-radius:50%}

/* Koraci */
.koraci{list-style:none;counter-reset:k;margin:0 0 1rem;padding:0;display:grid;gap:1.1rem}
.koraci li{counter-increment:k;position:relative;padding:0 0 0 3.4rem;line-height:1.6}
.koraci li::before{content:counter(k);position:absolute;left:0;top:-.1rem;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--bordo);color:var(--podloga);display:grid;place-items:center;font:500 1.15rem var(--f-naslov)}
.koraci b{display:block;font-family:var(--f-naslov);font-weight:500;font-size:1.2rem;margin-bottom:.15rem}

/* Kartice usluga i tromesečja */
.kartice{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,3vw,2.25rem)}
.kartica{display:grid;grid-template-columns:132px 1fr;gap:1.4rem;align-items:center;background:#fff;border:1px solid var(--linija);border-radius:16px;padding:1.4rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.kartica:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(44,10,18,.55);border-color:var(--roza)}
.kartica img{width:132px;height:132px;border-radius:50%;object-fit:cover}
.kartica h2,.kartica h3{font:italic 500 1.55rem/1.15 var(--f-naslov);margin-bottom:.5rem}
.kartica p{color:var(--tekst-blaga);font-size:1rem;margin-bottom:.6rem}
.tromesecja{display:grid;gap:1.25rem;margin-bottom:1rem}
.tromesece{background:var(--podloga-2);border-radius:16px;padding:clamp(1.25rem,3vw,2rem)}
.tromesece header{display:flex;align-items:baseline;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.tromesece .broj{font:italic 500 3rem/1 var(--f-naslov);color:var(--roza-tamna)}
.tromesece h3{font:500 1.5rem/1.15 var(--f-naslov)}
.tromesece .nedelje{font-size:.95rem;color:var(--tekst-blaga)}
.tromesece h4{font:700 .75rem var(--f-tekst);letter-spacing:.09em;text-transform:uppercase;color:var(--roza-tamna);margin:1rem 0 .4rem}
.tromesece ul.tacke{margin-bottom:0}

/* Česta pitanja */
.pitanja{border-top:1px solid var(--linija)}
.pitanja details{border-bottom:1px solid var(--linija)}
.pitanja summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font:500 1.2rem/1.3 var(--f-naslov)}
.pitanja summary::-webkit-details-marker{display:none}
.pitanja summary::after{content:"";flex:none;width:.85rem;height:.85rem;background:linear-gradient(var(--bordo),var(--bordo)) center/100% 2px no-repeat,linear-gradient(var(--bordo),var(--bordo)) center/2px 100% no-repeat;transition:transform .25s}
.pitanja details[open] summary::after{transform:rotate(45deg)}
.pitanja summary:hover{color:var(--bordo-hover)}
.pitanja summary:focus-visible{outline:3px solid var(--roza);outline-offset:2px}
.pitanja .odgovor{padding:0 0 1.25rem;max-width:40rem;line-height:1.65;color:var(--tekst)}

/* Upozorenje i napomene */
.hitno{background:var(--obav);border:1px solid var(--obav-ivica);color:var(--obav-tekst);border-radius:16px;padding:clamp(1.25rem,3vw,2rem)}
.hitno h2{color:var(--obav-tekst);font-size:1.6rem}
.hitno ul.tacke li::before{background:var(--obav-tekst)}
.hitno a{color:var(--obav-tekst);font-weight:700}
.napomena{border-left:3px solid var(--roza);padding:.25rem 0 .25rem 1rem;color:var(--tekst-blaga);font-size:.98rem;margin-bottom:1.5rem}

/* Cenovnik */
.cenovnik{width:100%;border-collapse:collapse;margin-bottom:1rem}
.cenovnik caption{text-align:left;color:var(--tekst-blaga);padding-bottom:.75rem;font-size:.98rem}
.cenovnik th,.cenovnik td{text-align:left;padding:.95rem 0;border-bottom:1px solid var(--linija);vertical-align:top}
.cenovnik th{font-weight:400}
.cenovnik td{text-align:right;white-space:nowrap;font-weight:700}

/* Lekari */
.lekari-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3.5vw,3rem)}
.lekari-lista .lekar{display:grid;grid-template-columns:200px 1fr;gap:1.5rem;align-items:start}
.lekari-lista .lekar__slika{aspect-ratio:3/4}

/* Privatnost */
.pravni h2{font-size:1.5rem;margin-top:1.75rem}

@media (max-width:1000px){
  .clanak,.dvokolona{grid-template-columns:1fr}
  .sadrzaj-nav{position:static}
  .kartice,.lekari-lista{grid-template-columns:1fr}
}
@media (max-width:620px){
  .kartica{grid-template-columns:1fr;text-align:left}
  .kartica img{width:112px;height:112px}
  .lekari-lista .lekar{grid-template-columns:120px 1fr;gap:1rem}
  .cenovnik td{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.kartica,.pitanja summary::after{transition:none!important}.kartica:hover{transform:none}}


@media (max-width:1000px){.podnozje__mreza{grid-template-columns:1fr 1fr}.lekari{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  body{font-size:1.0625rem}
  .zaglavlje .dugme{display:none}
  .podnozje__mreza{grid-template-columns:1fr}
  .lekar h3{font-size:1.3rem}
  .logo span{font-size:1.15rem}
}

/* Pomoćno */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lekari-lista .lekar h2{font-size:1.7rem;margin:.3rem 0 .5rem}
.lekari-lista .lekar p+p{margin-top:.75rem}
.telo--prosiren{max-width:none}