/* Roboto font metric override - prevents CLS from web font swap */
@font-face{font-family:"Roboto-fallback";src:local("Arial");size-adjust:100.14%;ascent-override:92.77%;descent-override:24.41%;line-gap-override:0%}
body{font-family:Roboto,"Roboto-fallback",Arial,sans-serif}

/* Font Awesome font-display fix */
@font-face { font-family: "Font Awesome 6 Free"; font-display: swap; }
@font-face { font-family: "Font Awesome 6 Brands"; font-display: swap; }

/* =============================================
   AUTO-ŠKOLA ZELENI SIGNAL — zajednički stilovi
   Ukljucuje se na svakoj stranici:
   <link rel="stylesheet" href="custom.css">
   ============================================= */

body { font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 1.6; overflow-x: clip; }

/* ── NAVBAR: meni ostaje mali ── */
.navbar, .navbar li, .navbar a, .navbar .menu, .navbar .menu li, .navbar .menu a,
.dropdown-content, .dropdown-content li, .dropdown-content a { font-size: 14px !important; line-height: 1.4 !important; }


/* ── MOBILNI MENI: smanji font ── */
#mobilePanel li, #mobilePanel ul li, #mobilePanel a { font-size: 14px !important; line-height: 1.4 !important; }

/* ── TEMA: Emerald primary ── */
[data-theme="light"],
[data-theme="dark"] {
  --color-primary: oklch(0.634 0.158 154.2);
  --color-primary-content: oklch(1 0 0);
}

[data-theme="light"] {
  --color-base-content: #151515;
}

[data-theme="dark"] {
  --color-base-100: #151515;
  --color-base-200: #000000;
  --color-base-content: #d0d0d0;
}

.accent { color: oklch(0.634 0.158 154.2); }

/* ── SMOOTH THEME TRANSITION ── */
*, body {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* ── PRELOAD: blokira tranzicije tokom inicijalnog učitavanja teme ── */
.preload *, .preload body {
  transition: none !important;
}

/* ── NAVBAR SCROLL EFEKAT ── */
.nav-scrolled {
  background-color: color-mix(in oklch, var(--color-base-100) 98%, transparent) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.12) !important;
  border-bottom-color: var(--color-base-200) !important;
}


/* ── KARTICE: tekst levo po defaultu ── */
html body .card-body:not(.flex-row) > p { text-align: left !important; width: 100% !important; }

/* ── KARTICE: fontovi ── */
.card-title { font-size: 22px !important; line-height: 1.3 !important; }
.card .text-sm, .card p { font-size: 18px !important; }
.card .font-bold.text-base { font-size: 22px !important; }
li, ul li, ol li { font-size: 18px !important; line-height: 1.6 !important; }

/* ── Q&A: fontovi ── */
.collapse-title { font-size: 18px !important; line-height: 1.3 !important; }
.collapse-content, .collapse-content .text-sm, .collapse-content p,
.collapse-content li, .collapse-content ul li { font-size: 18px !important; }

@media (max-width: 639px) {
  html .collapse-title { font-size: 16px !important; line-height: 1.3 !important; }
  html .collapse-content { font-size: 16px !important; }
  html .collapse-content * { font-size: 16px !important; }
}


/* ── STEPS SECTION: zeleni broj ispred naslova ── */
.steps-section { counter-reset: step-counter; }
.steps-section .card { counter-increment: step-counter; }
.steps-section .card h3::before {
  content: counter(step-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  background-color: oklch(0.634 0.158 154.2);
  color: white;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 900;
  vertical-align: middle;
  margin-right: 0.5rem;
  position: relative;
  top: -0.1em;
}


/* ── GOOGLE MAPS DARK MODE ── */
html[data-theme="dark"] .map-iframe {
  filter: invert(90%) hue-rotate(180deg) brightness(0.85) contrast(0.9) !important;
}

/* ── RANGE SLIDER SA KORACIMA (višekratno upotrebljiv) ── */
.range-steps-wrap { width: 100%; }

.range-steps-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--color-base-content);
  opacity: 0.35;
}

.range-steps-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-base-content);
  opacity: 0.6;
}

.range-opasnost-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.range-opasnost-wrap .range-label {
  font-size: 0.9rem;
  color: var(--color-base-content);
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── NAVBAR: sprečava crnu `:active` pozadinu iz DaisyUI .menu ── */
.navbar .menu a:not([class*="btn"]):active,
.navbar .menu a:not([class*="btn"]):focus {
  background-color: transparent !important;
  color: inherit !important;
}

/* ── ZELENI WAVY UNDERLINE — koristiti: <span class="zs-underline">tekst</span> ── */
.zs-underline {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: oklch(0.634 0.158 154.2);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ── BLOG PROSE: stilovi za sadržaj blog postova ── */
.prose-zs h2 { font-size:1.5rem; font-weight:900; margin-top:2.5rem; margin-bottom:1rem; color:var(--color-base-content); }
.prose-zs h3 { font-size:1.25rem; font-weight:700; margin-top:2rem; margin-bottom:0.75rem; color:var(--color-base-content); }
.prose-zs p { font-size:18px; line-height:1.75; margin-bottom:1.25rem; color:color-mix(in oklch, var(--color-base-content) 80%, transparent); }
.prose-zs ul { margin-bottom:1.25rem; display:flex; flex-direction:column; gap:0.5rem; }
.prose-zs ul li { display:block; position:relative; padding-left:1.25rem; font-size:18px !important; color:color-mix(in oklch, var(--color-base-content) 80%, transparent); }
.prose-zs ul li::before { content:''; position:absolute; left:0.25rem; top:0.65rem; width:0.375rem; height:0.375rem; border-radius:9999px; background-color:var(--color-primary); }
.prose-zs strong { font-weight:700; }
.prose-zs blockquote { border-left:4px solid var(--color-primary); padding:0.25rem 1rem 0.25rem 1.25rem; margin:1.5rem 0; color:color-mix(in oklch, var(--color-base-content) 70%, transparent); font-style:italic; background-color:color-mix(in oklch, var(--color-primary) 5%, transparent); border-radius:0 0.5rem 0.5rem 0; }
.prose-zs a { color:var(--color-primary); text-decoration:underline; text-underline-offset:2px; transition:color .15s; }
.prose-zs a:hover { opacity:0.8; }

/* ── DESKTOP NAV DROPDOWN ── */
/* Most između stavke i submenija (sprečava gubitak hovera) */
.nav-dropdown {
  position: relative;
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
/* Submenu tačno ispod leve ivice buttona */
.nav-dropdown .dropdown-content {
  left: 0 !important;
  top: 100% !important;
  transform: none !important;
  margin-left: 0 !important;
  transition: none !important;
}

/* Kartice: bez pomeranja pri hoveru */
.card:hover {
  transform: none !important;
}

/* ── HERO: crna pozadina samo na dark temi ── */
.hero-promo-bg {
  background-color: oklch(var(--color-base-200));
}
[data-theme="dark"] .hero-promo-bg {
  background-color: #0a0a0a !important;
}

/* ── SCROLL HIGHLIGHT: sweep animacija pri skrolovanju ── */
.scroll-hl {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
  padding: 0 0.25em;
}

/* ── HERO NASLOV: sweep highlight animacija po redovima ── */
@keyframes hero-sweep {
  0%   { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}
.hero-highlight,
.hero-highlight-2 {
  display: block;
  width: fit-content;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 72%;
  line-height: 1.15;
  padding: 0.05em 0.15em;
}
.hero-highlight {
  margin-bottom: 0.12em;
  animation: hero-sweep 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.3s;
}
.hero-highlight-2 {
  animation: hero-sweep 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.9s;
}
[data-theme="dark"] .hero-highlight,
[data-theme="dark"] .hero-highlight-2 {
  background-image: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10));
}
[data-theme="light"] .hero-highlight,
[data-theme="light"] .hero-highlight-2 {
  background-image: linear-gradient(oklch(0.634 0.158 154.2 / 0.10), oklch(0.634 0.158 154.2 / 0.10));
}

/* ── BOLD TEKST: bele boje na dark temi ── */
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: #ffffff !important;
}

/* ── HERO NASLOV: beo na dark temi ── */
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-title-span {
  color: #ffffff !important;
}

/* ── KARTICE: istaknuti tekst beo na dark temi ── */
[data-theme="dark"] .card .font-black:not(.text-primary),
[data-theme="dark"] .card p.font-black,
[data-theme="dark"] .card span.font-black {
  color: #ffffff !important;
}

/* ── FOOTER: 4 kolone na md+ ── */
@media (min-width: 768px) {
  .footer-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ── DUGMAD: solidna pozadina (mreža se ne vidi kroz providne buttone) ── */
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-outline {
  background-color: var(--color-base-100) !important;
}
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-outline {
  background-color: #ffffff !important;
}

/* ── KARTICE I COLLAPSE: solidna pozadina (tackice se ne vide kroz njih) ── */
[data-theme="dark"] .card,
[data-theme="dark"] .collapse {
  background-color: #1c1c1c !important;
}
[data-theme="light"] .card,
[data-theme="light"] .collapse {
  background-color: #ffffff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.07) !important;
}

/* ── ZS PATTERN: dot-grid pozadina ── */
.zs-pattern {
  background-image:
    linear-gradient(rgba(34, 197, 94, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}
[data-theme="light"] .zs-pattern {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}
.zs-pattern {
  background-attachment: fixed;
}

/* Announcement strip */
.announcement-strip{background:var(--color-base-200);overflow:hidden;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:0;height:46px;display:flex;align-items:center;position:relative;border-bottom:1px solid oklch(1 0 0/.08)}
.announcement-track{display:flex;gap:40px;white-space:nowrap;width:max-content;will-change:transform;align-items:center}
.announcement-track span{flex:0 0 auto;line-height:24px}
.announcement-track span.ann-hl{color:var(--color-primary)}
.ann-logo-sep{display:flex;align-items:center;flex:0 0 auto}
[data-theme="dark"] .announcement-track span{color:#fff}
[data-theme="dark"] .announcement-track span.ann-hl{color:var(--color-primary)}
[data-theme="dark"] .ann-logo{background:#fff;border-radius:5px}
[data-theme="light"] .announcement-track span{color:#000}
[data-theme="light"] .announcement-track span.ann-hl{color:var(--color-primary)}
[data-theme="light"] .ann-logo{background:var(--color-base-200);border-radius:6px}

.ann-logo{height:24px;width:24px;display:block;border-radius:6px}

/* Fix: remove outline flash on theme toggle click */
.toggle:focus, .toggle:active, .toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── MOBILNI MENI: kill hover na touch uređajima ── */
@media (max-width: 1024px) {
  #mobilePanel a:hover,
  #mobilePanel label:hover,
  #mobilePanel button:hover {
    background-color: transparent !important;
    color: inherit !important;
  }
  .navbar .menu a:hover {
    background-color: transparent !important;
  }
  .toggle:hover {
    box-shadow: none !important;
    border-color: currentColor !important;
  }
}