/* ============================================================
   Marija Design — main.css
   ============================================================ */

/* ---------- 1. Tokeni ------------------------------------- */
/* Zvezdicom označene vrednosti prepisuje Customizer inline u <head>. */
:root{
  --grad-1:#6FA8FF;   /* * */
  --grad-2:#1E3FD8;   /* * */
  --grad-3:#EAF2FF;   /* * */
  --grad-1-rgb:111,168,255;
  --grad-2-rgb:30,63,216;
  --grad-3-rgb:234,242,255;

  --band-1-opacity:1;    /* * */
  --band-2-opacity:.82;  /* * */
  --band-3-opacity:.66;  /* * */
  --band-4-opacity:.52;  /* * */
  --cycle-1:28s;         /* * */
  --cycle-2:41s;         /* * */
  --cycle-3:53s;         /* * */
  --cycle-4:38s;         /* * */
  --cycle-core:32s;      /* * */
  --line-period:250px;   /* * */

  --ink:#16263F;      /* * */
  --muted:#5D7391;    /* * */
  --paper:#FBFCFE;    /* * */
  --ink-rgb:22,38,63;

  --line:rgba(var(--ink-rgb),.12);

  --font-display:"Newsreader","Iowan Old Style",Georgia,serif;
  --font-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;

  --wrap:1320px;
  --wrap-narrow:720px;
  --gutter:32px;
  --section-y:140px;
  --header-h:72px;
}

/* ---------- 2. Osnova ------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%;}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0 0 1.1em;padding-left:1.2em;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.08;margin:0 0 .4em;}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.wrap--narrow{max-width:var(--wrap-narrow);}
.section{padding-block:var(--section-y);}
.section--content{padding-block:72px;}

/* ---------- 3. Animirana pozadina ------------------------- */
/*
   Potpisni element teme.

   Cetiri sloja gradijenta u fiksnom kontejneru. Animiraju se ISKLJUCIVO
   transform i opacity — jedina dva svojstva koja pregledac menja na
   kompozitorskom sloju, bez ponovnog iscrtavanja stranice. Zato pozadina
   moze da bude ovoliko izrazena a da ne kosta frame rate.

   Cetvrti sloj (.aurora-band--4) koristi mix-blend-mode i sluzi da se
   dve plave stvarno pomesaju tamo gde se preklope, umesto da samo jedna
   prekrije drugu. To pravi treci ton koji nije ni jedna ni druga boja —
   odatle dolazi kontrast nijansi.
*/
.aurora{
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:var(--grad-3);
  background:
    linear-gradient(160deg,
      var(--grad-3) 0%,
      color-mix(in oklab, var(--grad-1) 22%, var(--grad-3)) 55%,
      var(--grad-3) 100%);
  pointer-events:none;
  contain:strict;
  isolation:isolate;
}

.aurora-band{
  position:absolute;
  top:-70%;left:-70%;
  width:240%;height:240%;
  transform-origin:52% 48%;
  backface-visibility:hidden;
}

/* Sloj 1 — dva jaka jezgra svetlije plave. */
.aurora-band--1{
  opacity:var(--band-1-opacity);
  background:
    radial-gradient(42% 38% at 28% 32%, rgba(var(--grad-1-rgb),1) 0%, rgba(var(--grad-1-rgb),.55) 38%, rgba(var(--grad-1-rgb),0) 70%),
    radial-gradient(38% 48% at 74% 64%, rgba(var(--grad-1-rgb),.95) 0%, rgba(var(--grad-1-rgb),0) 72%);
}

/* Sloj 2 — tamnija plava, nosi kontrast. */
.aurora-band--2{
  opacity:var(--band-2-opacity);
  background:
    radial-gradient(36% 44% at 66% 26%, rgba(var(--grad-2-rgb),.95) 0%, rgba(var(--grad-2-rgb),.4) 42%, rgba(var(--grad-2-rgb),0) 74%),
    radial-gradient(46% 34% at 20% 76%, rgba(var(--grad-2-rgb),.85) 0%, rgba(var(--grad-2-rgb),0) 70%);
}

/* Sloj 3 — snop svetlih traka. Razmak izmedju traka je --line-period,
   sto se u Customizer-u podesava kao "Gustina linija". */
.aurora-band--3{
  opacity:var(--band-3-opacity);
  background:repeating-linear-gradient(112deg,
    rgba(var(--grad-3-rgb),0)    0px,
    rgba(var(--grad-3-rgb),.22)  calc(var(--line-period) * .12),
    rgba(var(--grad-3-rgb),.68)  calc(var(--line-period) * .24),
    rgba(var(--grad-1-rgb),.34)  calc(var(--line-period) * .36),
    rgba(var(--grad-3-rgb),0)    calc(var(--line-period) * .50),
    rgba(var(--grad-2-rgb),.18)  calc(var(--line-period) * .64),
    rgba(var(--grad-3-rgb),0)    calc(var(--line-period) * .76),
    rgba(var(--grad-3-rgb),.34)  calc(var(--line-period) * .88),
    rgba(var(--grad-3-rgb),0)    var(--line-period));
}

/* Sloj 4 — mesanje. Tu gde se preklopi sa slojevima ispod nastaje treci ton. */
.aurora-band--4{
  opacity:var(--band-4-opacity);
  mix-blend-mode:overlay;
  background:
    conic-gradient(from 210deg at 45% 55%,
      rgba(var(--grad-2-rgb),.85) 0deg,
      rgba(var(--grad-1-rgb),.25) 72deg,
      rgba(var(--grad-3-rgb),.9)  144deg,
      rgba(var(--grad-2-rgb),.7)  228deg,
      rgba(var(--grad-1-rgb),.35) 300deg,
      rgba(var(--grad-2-rgb),.85) 360deg);
}

/*
   Svetla tacka koja putuje s leva na desno. Kada dodje priblizno u sredinu,
   skupi se, nestane — i iz iste tacke se otvori "bloom": prsten koncentricnih
   nijansi koji se razliva na sve strane, pa se rasplinjava.

   Tacka i bloom su dva elementa sa istim trajanjem ciklusa, pa su uvek
   sinhronizovani: tacka gasne na 52%, bloom pocinje na 46%.
   Oba se animiraju samo transformacijom i providnoscu.
*/
.aurora-core{
  position:absolute;top:50%;left:50%;
  width:34vmax;height:34vmax;margin:-17vmax 0 0 -17vmax;
  pointer-events:none;
}
.aurora-core-dot,
.aurora-core-bloom{
  position:absolute;inset:0;border-radius:50%;
  backface-visibility:hidden;
}

.aurora-core-dot{
  opacity:0;transform:scale(.14);
  background:radial-gradient(circle at 50% 50%,
    #fff 0%,
    rgba(var(--grad-3-rgb),.98) 16%,
    rgba(var(--grad-1-rgb),.9)  34%,
    rgba(var(--grad-2-rgb),.55) 54%,
    rgba(var(--grad-2-rgb),0)   74%);
}

/* Koncentricni prstenovi dve plave — odatle "vise slicnih boja" pri razlivanju. */
.aurora-core-bloom{
  opacity:0;transform:scale(.12);
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(var(--grad-1-rgb),.30) 0deg,
      rgba(var(--grad-2-rgb),.22) 60deg,
      rgba(var(--grad-3-rgb),.34) 120deg,
      rgba(var(--grad-1-rgb),.26) 200deg,
      rgba(var(--grad-2-rgb),.30) 280deg,
      rgba(var(--grad-1-rgb),.30) 360deg),
    radial-gradient(circle at 50% 50%,
      rgba(var(--grad-3-rgb),.95) 0%,
      rgba(var(--grad-1-rgb),.85) 13%,
      rgba(var(--grad-2-rgb),.70) 24%,
      rgba(var(--grad-1-rgb),.58) 34%,
      rgba(var(--grad-2-rgb),.44) 45%,
      rgba(var(--grad-1-rgb),.30) 57%,
      rgba(var(--grad-2-rgb),.18) 68%,
      rgba(var(--grad-1-rgb),0)   80%);
}

.aurora--animated .aurora-core{animation:core-travel var(--cycle-core) cubic-bezier(.36,0,.64,1) infinite;will-change:transform;}
.aurora--animated .aurora-core-dot{animation:core-dot var(--cycle-core) ease-in-out infinite;will-change:transform,opacity;}
.aurora--animated .aurora-core-bloom{animation:core-bloom var(--cycle-core) cubic-bezier(.16,.8,.3,1) infinite;will-change:transform,opacity;}

/* Putovanje: usporava kako se priblizava sredini, pa ubrza posle otvaranja. */
@keyframes core-travel{
  0%   {transform:translate3d(-64vw,-7vh,0);}
  22%  {transform:translate3d(-34vw,-2vh,0);}
  40%  {transform:translate3d(-9vw,1vh,0);}
  50%  {transform:translate3d(0,0,0);}
  60%  {transform:translate3d(9vw,-1vh,0);}
  78%  {transform:translate3d(36vw,3vh,0);}
  100% {transform:translate3d(64vw,7vh,0);}
}

@keyframes core-dot{
  0%   {opacity:0;   transform:scale(.08);}
  10%  {opacity:.85; transform:scale(.15);}
  34%  {opacity:1;   transform:scale(.19);}
  44%  {opacity:1;   transform:scale(.26);}
  48%  {opacity:1;   transform:scale(.13);}   /* skupljanje pred otvaranje */
  53%  {opacity:0;   transform:scale(.04);}   /* tacka nestaje, bloom preuzima */
  100% {opacity:0;   transform:scale(.08);}
}

@keyframes core-bloom{
  0%   {opacity:0;   transform:scale(.10) rotate(0deg);}
  44%  {opacity:0;   transform:scale(.10) rotate(0deg);}
  50%  {opacity:1;   transform:scale(.55) rotate(24deg);}
  57%  {opacity:.9;  transform:scale(1.25) rotate(58deg);}
  66%  {opacity:.62; transform:scale(2.05) rotate(102deg);}
  76%  {opacity:.34; transform:scale(2.80) rotate(150deg);}
  88%  {opacity:.10; transform:scale(3.40) rotate(206deg);}
  100% {opacity:0;   transform:scale(3.70) rotate(250deg);}
}

/* Bez animacije tacka mirno stoji u sredini. */
.aurora:not(.aurora--animated) .aurora-core-dot{opacity:.9;transform:scale(.2);}

/* Blaga tekstura — skida "plastican" utisak cistog gradijenta. */
.aurora-grain{
  position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(rgba(var(--ink-rgb),.06) .5px, transparent .5px);
  background-size:3px 3px;
}

.aurora--animated .aurora-band--1{animation:aurora-drift-a var(--cycle-1) cubic-bezier(.45,0,.55,1) infinite;will-change:transform,opacity;}
.aurora--animated .aurora-band--2{animation:aurora-drift-b var(--cycle-2) cubic-bezier(.45,0,.55,1) infinite;will-change:transform,opacity;}
.aurora--animated .aurora-band--3{animation:aurora-sweep var(--cycle-3) linear infinite;will-change:transform;}
.aurora--animated .aurora-band--4{animation:aurora-mix var(--cycle-4) cubic-bezier(.5,0,.5,1) infinite;will-change:transform,opacity;}

/*
   Sest tacaka prelaza umesto tri. Putanja je zatvorena (100% = 0%),
   pa animacija ide u punom krugu bez "alternate" vracanja unazad —
   time nestaje osecaj klatna koje se ljulja tamo-amo.
*/
@keyframes aurora-drift-a{
  0%   {transform:translate3d(-6%,-3%,0) rotate(0deg)    scale(1.00);opacity:var(--band-1-opacity);}
  18%  {transform:translate3d(2%,5%,0)   rotate(9deg)    scale(1.20);opacity:calc(var(--band-1-opacity) * .82);}
  37%  {transform:translate3d(9%,-2%,0)  rotate(-6deg)   scale(1.08);opacity:var(--band-1-opacity);}
  55%  {transform:translate3d(1%,-7%,0)  rotate(14deg)   scale(1.26);opacity:calc(var(--band-1-opacity) * .74);}
  74%  {transform:translate3d(-8%,2%,0)  rotate(4deg)    scale(1.04);opacity:var(--band-1-opacity);}
  88%  {transform:translate3d(-3%,-5%,0) rotate(-10deg)  scale(1.16);opacity:calc(var(--band-1-opacity) * .88);}
  100% {transform:translate3d(-6%,-3%,0) rotate(0deg)    scale(1.00);opacity:var(--band-1-opacity);}
}

@keyframes aurora-drift-b{
  0%   {transform:translate3d(7%,4%,0)   rotate(0deg)    scale(1.14);opacity:var(--band-2-opacity);}
  21%  {transform:translate3d(-4%,-6%,0) rotate(-12deg)  scale(1.00);opacity:calc(var(--band-2-opacity) * .7);}
  42%  {transform:translate3d(-9%,3%,0)  rotate(7deg)    scale(1.22);opacity:var(--band-2-opacity);}
  60%  {transform:translate3d(3%,8%,0)   rotate(-4deg)   scale(1.06);opacity:calc(var(--band-2-opacity) * .85);}
  79%  {transform:translate3d(10%,-3%,0) rotate(11deg)   scale(1.18);opacity:var(--band-2-opacity);}
  92%  {transform:translate3d(4%,6%,0)   rotate(3deg)    scale(1.09);opacity:calc(var(--band-2-opacity) * .78);}
  100% {transform:translate3d(7%,4%,0)   rotate(0deg)    scale(1.14);opacity:var(--band-2-opacity);}
}

@keyframes aurora-sweep{
  0%   {transform:translate3d(-22%,-4%,0) rotate(0deg)   scale(1.05);}
  25%  {transform:translate3d(-6%,3%,0)   rotate(90deg)  scale(1.14);}
  50%  {transform:translate3d(14%,-2%,0)  rotate(180deg) scale(1.02);}
  75%  {transform:translate3d(2%,5%,0)    rotate(270deg) scale(1.12);}
  100% {transform:translate3d(-22%,-4%,0) rotate(360deg) scale(1.05);}
}

@keyframes aurora-mix{
  0%   {transform:translate3d(0,0,0)      rotate(0deg)   scale(1.10);opacity:var(--band-4-opacity);}
  20%  {transform:translate3d(-7%,4%,0)   rotate(48deg)  scale(1.28);opacity:calc(var(--band-4-opacity) * .55);}
  40%  {transform:translate3d(5%,-6%,0)   rotate(96deg)  scale(1.04);opacity:var(--band-4-opacity);}
  60%  {transform:translate3d(8%,5%,0)    rotate(168deg) scale(1.22);opacity:calc(var(--band-4-opacity) * .62);}
  80%  {transform:translate3d(-4%,-3%,0)  rotate(268deg) scale(1.12);opacity:var(--band-4-opacity);}
  100% {transform:translate3d(0,0,0)      rotate(360deg) scale(1.10);opacity:var(--band-4-opacity);}
}

/*
   Sadrzaj stoji na poluprovidnoj podlozi. Sada je neprovidnija nego ranije,
   jer je pozadina izrazenija — tekst mora da ostane citljiv preko najtamnije
   tacke gradijenta, ne samo preko prosecne.
*/
.section--work,.section--about,.section--contact,
.page-hero,.section--content,.section--404,.site-footer{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);
}
.hero{background:transparent;}

/* ---------- 4. Pristupačnost ------------------------------ */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:fixed!important;top:12px;left:12px;z-index:200;width:auto;height:auto;
  clip:auto;clip-path:none;padding:12px 20px;background:#fff;border-radius:4px;
}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}
:focus:not(:focus-visible){outline:none;}

/* ---------- 5. Linkovi u stilu teme ----------------------- */
.link-bracket{
  display:inline-block;font-size:15px;font-weight:500;color:var(--ink);
  padding:5px 12px;border-radius:3px;
  background:rgba(255,255,255,.5);
  transition:background-color .18s ease,transform .18s ease;
}
.link-bracket::before{content:"[ ";opacity:.5;}
.link-bracket::after{content:" ]";opacity:.5;}
.link-bracket:hover{background:rgba(255,255,255,.9);transform:translateY(-1px);}

.link-arrow{
  display:inline-flex;align-items:baseline;gap:7px;
  font-size:15px;font-weight:500;color:var(--ink);
  padding:5px 4px;
}
.link-arrow-mark{opacity:.6;transition:transform .2s ease;}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px;}
.link-arrow:hover .link-arrow-mark{transform:translate(2px,2px);}

/* ---------- 6. Zaglavlje ---------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h);}

.brand{font-size:17px;font-weight:600;letter-spacing:-.01em;}
.brand-rest{color:var(--muted);font-weight:500;}
.custom-logo{max-height:36px;width:auto;}

.site-nav{display:flex;align-items:center;}
.nav-list{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0;}
.nav-list a{
  display:inline-block;font-size:15px;font-weight:500;padding:5px 12px;border-radius:3px;
  transition:background-color .18s ease;
}
.nav-list a::before{content:"[ ";opacity:.45;}
.nav-list a::after{content:" ]";opacity:.45;}
.nav-list a:hover,.nav-list .current-menu-item > a{background:rgba(255,255,255,.85);}

.nav-toggle{display:none;font-size:15px;font-weight:500;padding:6px 10px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-word::after{content:"";}

/* ---------- 7. Hero -------------------------------------- */
.hero{padding:clamp(80px,14vh,170px) 0 clamp(90px,16vh,190px);}
.hero-inner{max-width:1000px;}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(44px,7.4vw,104px);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.02;
  margin:0;
}
.hero-line{display:block;}

.hero-lead{
  max-width:44ch;margin:38px 0 0;
  font-size:17px;color:var(--muted);line-height:1.65;
}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:34px 0 0;}

/* ---------- 8. Sekcije ------------------------------------ */
.section-head{max-width:640px;margin-bottom:64px;}
.section-title{font-size:clamp(34px,4.6vw,58px);margin:0;}
.section-lead{margin:20px 0 0;color:var(--muted);font-size:17px;max-width:52ch;}

/* Radovi */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 40px;}
.work-card{position:relative;}
.work-link{display:block;}
.work-index{
  position:absolute;top:-6px;left:-24px;
  font-family:var(--font-display);font-size:14px;color:var(--muted);
}
.work-media{
  display:block;overflow:hidden;border-radius:6px;
  background:rgba(var(--ink-rgb),.05);
  aspect-ratio:4/3;
}
.work-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.work-link:hover .work-media img{transform:scale(1.03);}
.work-placeholder{
  display:block;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(var(--grad-2-rgb),.35),rgba(var(--grad-1-rgb),.5));
}
.work-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:18px;}
.work-title{font-family:var(--font-display);font-size:22px;line-height:1.2;}
.work-meta{font-size:14px;color:var(--muted);}
.work-link:hover .work-title{text-decoration:underline;text-underline-offset:4px;}
.work-more{margin-top:64px;}

.notice-empty{padding:24px;background:rgba(var(--ink-rgb),.04);border-radius:6px;color:var(--muted);}

/* O meni */
.about-grid{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:40px 80px;align-items:start;}
.about-title{font-size:clamp(30px,3.6vw,44px);margin:0;}
.about-text{font-family:var(--font-display);font-size:clamp(21px,2.3vw,29px);line-height:1.45;margin:0;}

/* Kontakt */
.section--contact{text-align:center;}
.contact-inner{max-width:760px;margin-inline:auto;}
.contact-title{font-size:clamp(34px,5vw,62px);margin:0;}
.contact-lead{margin:22px auto 0;color:var(--muted);max-width:46ch;}
.contact-email{
  display:inline-block;margin-top:36px;
  font-family:var(--font-display);font-size:clamp(22px,3vw,36px);
  border-bottom:1px solid var(--line);padding-bottom:4px;
  transition:border-color .2s ease;
}
.contact-email:hover{border-color:var(--ink);}
.contact-note{margin-top:28px;font-size:14px;color:var(--muted);}

/* ---------- 9. Unutrašnje strane -------------------------- */
.page-hero{padding:80px 0 56px;}
.page-eyebrow{font-size:14px;color:var(--muted);margin:0 0 18px;letter-spacing:.02em;}
.page-eyebrow a:hover{text-decoration:underline;text-underline-offset:3px;}
.page-title{font-size:clamp(34px,5.2vw,64px);margin:0;}
.page-actions{margin:26px 0 0;}

.featured-image{margin:0;border-radius:8px;overflow:hidden;}
.featured-image img{width:100%;}

.entry-content{font-size:17.5px;line-height:1.72;}
.entry-content h2{font-size:32px;margin-top:1.7em;}
.entry-content h3{font-size:24px;margin-top:1.5em;}
.entry-content a{border-bottom:1px solid var(--line);}
.entry-content a:hover{border-color:var(--ink);}
.entry-content blockquote{
  margin:1.7em 0;padding-left:26px;border-left:2px solid var(--line);
  font-family:var(--font-display);font-size:22px;line-height:1.5;
}
.entry-content img{border-radius:6px;}
.entry-content code{background:rgba(var(--ink-rgb),.06);padding:2px 6px;border-radius:4px;font-size:.9em;}
.entry-content pre{background:var(--ink);color:#EAF1FA;padding:22px;border-radius:8px;overflow:auto;}
.entry-content table{width:100%;border-collapse:collapse;margin:1.5em 0;}
.entry-content th,.entry-content td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;}

.inline-cta{margin:56px 0 0;padding-top:34px;border-top:1px solid var(--line);}

/* Lista zapisa */
.post-list{border-top:1px solid var(--line);}
.post-row{border-bottom:1px solid var(--line);}
.post-row-link{
  display:grid;grid-template-columns:160px 1fr;gap:28px;padding:28px 0;
  transition:padding-left .2s ease;
}
.post-row-link:hover{padding-left:10px;}
.post-row-date{font-size:14px;color:var(--muted);padding-top:5px;}
.post-row-title{display:block;font-family:var(--font-display);font-size:24px;line-height:1.25;}
.post-row-text{display:block;margin-top:8px;color:var(--muted);font-size:15.5px;}

.empty-state{text-align:center;padding:80px 0;max-width:520px;margin-inline:auto;}
.section--404{text-align:center;}
.section--404 .hero-actions{justify-content:center;}
.search-block{margin-top:48px;}
.search-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.search-field{
  padding:11px 16px;min-width:260px;font-size:15px;
  border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.8);
}
.search-field:focus{border-color:var(--ink);outline:none;}

.pagination{display:flex;justify-content:center;margin-top:64px;}
.pagination .nav-links{display:flex;gap:6px;flex-wrap:wrap;}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;
  border-radius:4px;font-size:15px;font-weight:500;
}
.pagination .page-numbers:hover{background:rgba(255,255,255,.8);}
.pagination .current{background:var(--ink);color:#fff;}

/* Komentari */
.comments-area{margin:72px 0;padding-top:44px;border-top:1px solid var(--line);}
.comments-title{font-size:24px;}
.comment-list{list-style:none;margin:0 0 44px;padding:0;}
.comment-list li{margin-bottom:24px;}
.comment-list .children{list-style:none;margin-top:24px;padding-left:28px;}
.comment-body{background:rgba(var(--ink-rgb),.04);padding:20px 22px;border-radius:6px;}
.comment-form input:not([type="submit"]):not([type="checkbox"]),.comment-form textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.8);
}
.comment-form .submit{padding:9px 18px;border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.7);}

/* ---------- 10. Podnožje ---------------------------------- */
.site-footer{padding:36px 0;font-size:14px;color:var(--muted);}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.social-list{display:flex;gap:18px;list-style:none;margin:0;padding:0;}
.social-list a:hover,.footer-top:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}

/* ---------- 11. WordPress klase --------------------------- */
.alignleft{float:left;margin:.4em 1.6em 1em 0;}
.alignright{float:right;margin:.4em 0 1em 1.6em;}
.aligncenter{margin-inline:auto;}
.alignwide{width:min(100vw - 2 * var(--gutter),1100px);margin-inline:auto;max-width:none;}
.alignfull{width:100vw;max-width:none;margin-left:calc(50% - 50vw);}
.wp-caption-text,.wp-element-caption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:9px;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}

/* ---------- 12. Responzivno ------------------------------- */
@media (max-width:1080px){
  :root{--section-y:104px;--gutter:26px;}
  .work-grid{gap:48px 32px;}
  .work-index{left:-16px;}
  .about-grid{grid-template-columns:1fr;gap:24px;}
}

@media (max-width:820px){
  .nav-toggle{display:inline-block;}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    padding:14px var(--gutter) 24px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .26s ease,visibility .26s;
  }
  .site-nav.is-open{max-height:70vh;overflow-y:auto;visibility:visible;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-list a{padding:13px 0;font-size:17px;border-bottom:1px solid var(--line);border-radius:0;}
  .nav-list a:hover{background:transparent;}
}

@media (max-width:680px){
  body{font-size:16px;}
  :root{--section-y:80px;--gutter:20px;}
  .work-grid{grid-template-columns:1fr;gap:40px;}
  .work-index{position:static;display:block;margin-bottom:8px;}
  .section-head{margin-bottom:44px;}
  .post-row-link{grid-template-columns:1fr;gap:8px;padding:22px 0;}
  .post-row-date{padding-top:0;}
  .page-hero{padding:56px 0 40px;}
  .hero-lead{margin-top:28px;}
}

/* ---------- 13. Smanjen pokret ---------------------------- */
/*
   Poštuje sistemsko podešavanje. Animacija pozadine se zaustavlja,
   a ne samo ubrzava — kod korisnika osetljivih na pokret trajni
   pokret u pozadini izaziva mučninu, i tu skraćivanje ne pomaže.
*/
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  html{scroll-behavior:auto;}
  .aurora--animated .aurora-band,
  .aurora--animated .aurora-core,
  .aurora--animated .aurora-core-dot,
  .aurora--animated .aurora-core-bloom{animation:none!important;}
  .aurora-core-bloom{opacity:0;}
  .aurora-core-dot{opacity:.9;transform:scale(.2);}
}
body.motion-off .aurora-band,
body.motion-off .aurora-core,
body.motion-off .aurora-core-dot,
body.motion-off .aurora-core-bloom{animation:none!important;}

@media print{
  .aurora,.site-header,.site-footer{display:none;}
  body{background:#fff;color:#000;font-size:12pt;}
}