/* =============================================
   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; }

/* ── 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: #c8c8c8;
}

.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;
}

/* ── 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;
  }
}

/* ── 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;
}
/* parallax samo na desktopu — mobile ne podrzava background-attachment:fixed */
@media (hover: hover) {
  .zs-pattern {
    background-attachment: fixed;
  }
}