/* Main Styles */
body {
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
    background-color: #f8f9fa;
}

/* Dark mode base (html.dark class toggled in script) */
html.dark body {
    background-color: #0f1115;
    color: #e4e7ec;
}

html.dark .gradient-text {
    background: linear-gradient(90deg,#60a5fa,#a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Header / nav overrides */
nav {
    background: rgba(255,255,255,0.80);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 4px 16px -6px rgba(0,0,0,.18), 0 2px 6px -3px rgba(0,0,0,.08);
    transition: background .35s ease, box-shadow .4s ease;
}
nav a:not(.bg-gradient-to-r) { color:#1e293b; transition: color .25s ease; }
nav a:not(.bg-gradient-to-r):hover { color:#0f3f8c; }
html.dark nav {
    background: rgba(17,22,29,0.78) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 6px 24px -8px rgba(0,0,0,.65), 0 2px 4px -2px rgba(0,0,0,.5);
}
/* Brighten small 'd.o.o.' / 'Janez s.p.' text in header for dark mode */
html.dark .header-sub { color:#d8dee4 !important; font-weight:400; letter-spacing:.5px; }
/* Unify header sub label (d.o.o. / Janez s.p.) size across themes */
.header-sub { font-size:.8750rem; ; color:#36454F; }
html.dark .header-sub { color:#d8dee4 !important; font-weight:400; letter-spacing:0; }
html.dark .header-sub:hover { color:#ffffff !important; }
html.dark nav a:not(.bg-gradient-to-r) {
    color: #c9d1d9;
}
html.dark nav a:not(.bg-gradient-to-r):hover {
    color: #60a5fa;
}

/* About card (O podjetju) dark mode improvement */
html.dark .about-card {
    /* Slightly darker translucent panel with subtle inner highlight */
    background:
        linear-gradient(145deg, rgba(32,37,44,0.82), rgba(20,24,30,0.78)) padding-box,
        linear-gradient(165deg, rgba(255,255,255,0.08), rgba(255,255,255,0)) border-box;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 4px 18px -6px rgba(0,0,0,0.55),
        0 2px 4px -2px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.04);
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
}
html.dark .about-card h3 { color:#e6e8eb; }
html.dark .about-card p { color:#b8c0c7 !important; }
html.dark .about-card .text-gray-600 { color:#93a0ab !important; }
html.dark .about-card .bg-blue-100 { background:rgba(56,132,255,0.18) !important; }
html.dark .about-card .bg-purple-100 { background:rgba(139,92,246,0.20) !important; }
html.dark .about-card i.text-blue-600 { color:#60a5fa !important; }
html.dark .about-card i.text-purple-600 { color:#b18bff !important; }
html.dark .about-card a.inline-block { box-shadow:0 4px 14px -4px rgba(56,132,255,.4), 0 0 0 1px rgba(255,255,255,0.06); }
html.dark .about-card a.inline-block:hover { box-shadow:0 6px 18px -6px rgba(56,132,255,.55), 0 0 0 1px rgba(255,255,255,0.08); }

/* Cards, panels */
html.dark .bg-white { background-color: #1b1f24 !important; }
html.dark .bg-gray-50 { background-color: #181c21 !important; }
html.dark .text-gray-700 { color: #d1d5db !important; }
html.dark .text-gray-600 { color: #9ca3af !important; }
html.dark .text-gray-500 { color: #6b7280 !important; }
html.dark .text-gray-400 { color: #4b5563 !important; }

/* Borders */
html.dark .border-gray-200 { border-color: #2c333b !important; }
html.dark .border-gray-300 { border-color: #36404a !important; }
html.dark .border-gray-800 { border-color: #1f2429 !important; }

/* Footer */
html.dark footer.bg-gray-900 { background-color: #0d1013 !important; }
/* Footer contrast adjustments */
html.dark footer.bg-gray-900 h4 { color:#f0f3f6 !important; }
html.dark footer.bg-gray-900 p, 
html.dark footer.bg-gray-900 li span, 
html.dark footer.bg-gray-900 a { color:#9ba7b4 !important; }
html.dark footer.bg-gray-900 a:hover { color:#ffffff !important; }
html.dark footer.bg-gray-900 .text-gray-400 { color:#9ba7b4 !important; }
html.dark footer.bg-gray-900 .text-gray-500 { color:#7d8894 !important; }
html.dark footer.bg-gray-900 .bg-white\/10 { background-color:rgba(255,255,255,0.12) !important; }
html.dark footer.bg-gray-900 .bg-white\/10:hover { background-color:rgba(255,255,255,0.2) !important; }
html.dark footer.bg-gray-900 hr { border-color:#1e242b !important; }
html.dark footer.bg-gray-900 .fab { color:#e2e6ea; }
html.dark footer.bg-gray-900 .fab:hover { color:#ffffff; }

/* Contact phone card dark adjustments */
html.dark .contact-phone-card { background:#1d2228 !important; box-shadow:0 2px 6px -2px rgba(0,0,0,.55), 0 1px 1px rgba(255,255,255,0.04) inset; }
html.dark .contact-phone-card h3 { color:#e2e6ea !important; }
html.dark .contact-phone-card .text-gray-600 { color:#9fa9b3 !important; }
html.dark .contact-phone-card a { color:#cdd3d9 !important; }
html.dark .contact-phone-card a:hover { color:#ffffff !important; }
html.dark .contact-phone-card .bg-purple-100 { background:rgba(139,92,246,0.18) !important; }
html.dark .contact-phone-card .text-gray-800 { color:#d1d5db !important; }
html.dark .contact-phone-card .text-purple-600 { color:#b995ff !important; }
html.dark .contact-phone-card i.fas { filter: none; }

/* Oblacila page dark mode – "Izdelava po meri" box */
html.dark .bg-purple-50 { background:rgba(139,92,246,0.12) !important; }
html.dark .bg-purple-50 h4 { color:#e2e6ea !important; }
html.dark .bg-purple-50 .text-gray-700 { color:#c8cdd3 !important; }
html.dark .bg-purple-50 .border-purple-600 { border-color:#8b5cf6 !important; }

/* Avtovleka page CTA (dark mode) */
html.dark .avtovleka-cta-btn { background:#182028 !important; color:#e6edf3 !important; border:1px solid #2a3640; box-shadow:0 2px 4px -1px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,0.04) inset; }
html.dark .avtovleka-cta-btn .number, html.dark .avtovleka-cta-btn .email { font-weight:600; color:#ffffff; }
html.dark .avtovleka-cta-btn:hover { background:#22303a !important; border-color:#33424f; }
html.dark .avtovleka-cta-btn i { color:#facc15 !important; text-shadow:0 0 4px rgba(250,204,21,0.45); }
/* Optional: tone down bright yellow panel in dark for readability */
html.dark .bg-yellow-500 { background:#d4a306 !important; }

/* Naravna mila page dark mode */
html.dark .naravna-mila-page { background:#0d1117; }
html.dark .naravna-mila-page .bg-white { background:#12181f !important; }
html.dark .naravna-mila-page .bg-gray-50 { background:#12181f !important; }
html.dark .naravna-mila-page .bg-brand-50 { background:#1d242b !important; }
html.dark .naravna-mila-page .bg-brand-100 { background:#24313a !important; }
html.dark .naravna-mila-page .text-gray-700 { color:#dbe2e7 !important; }
html.dark .naravna-mila-page h1,
html.dark .naravna-mila-page h2,
html.dark .naravna-mila-page h3,
html.dark .naravna-mila-page h4 { color:#eef2f4 !important; }
html.dark .naravna-mila-page .border-gray-200 { border-color:#2c3943 !important; }
html.dark .naravna-mila-page .shadow-md,
html.dark .naravna-mila-page .shadow-sm { box-shadow:0 2px 4px -2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,0.03) inset !important; }
html.dark .naravna-mila-page .text-brand-100 { color:#c9d5cc !important; }
html.dark .naravna-mila-page .text-brand-600 { color:#88b27a !important; }
html.dark .naravna-mila-page .text-brand-700 { color:#9cc58d !important; }
html.dark .naravna-mila-page .text-brand-800 { color:#b3d9aa !important; }
html.dark .naravna-mila-page .bg-brand-600 { background:#5f7f54 !important; }
html.dark .naravna-mila-page .hover\:bg-brand-700:hover { background:#6c8d60 !important; }
html.dark .naravna-mila-page .bg-brand-100 .fas,
html.dark .naravna-mila-page .bg-brand-100 .fa { color:#88b27a !important; }
/* CTA banner */
html.dark .naravna-mila-page .bg-brand-50.p-6.flex { background:#1e262d !important; border:1px solid #2d3943; }
/* Warning panel */
html.dark .naravna-mila-page .border-l-4.border-brand-600 { background:#1d242b !important; border-left-color:#5f7f54 !important; }
html.dark .naravna-mila-page .border-l-4.border-brand-600 h4 { color:#f3f6f7 !important; }
/* FAQ accordion */
html.dark .naravna-mila-page #faq-accordion .bg-brand-50 { background:#1d242b !important; }
html.dark .naravna-mila-page #faq-accordion .bg-brand-100 { background:#24313a !important; }
html.dark .naravna-mila-page #faq-accordion [data-faq-button] .text-lg { color:#e3e9ec !important; }
html.dark .naravna-mila-page #faq-accordion [data-faq-panel] { color:#d6dde1 !important; }
html.dark .naravna-mila-page #faq-accordion [data-faq-icon] { background:#1d242b !important; color:#88b27a !important; transition: transform .3s ease, color .3s ease, background-color .3s ease; }
html.dark .naravna-mila-page #faq-accordion [data-faq-icon].open { transform: rotate(45deg); color:#a3d98f !important; }
html.dark .naravna-mila-page #faq-accordion [data-faq-button]:hover .text-lg { color:#9cc58d !important; }

/* FAQ persistent separator: add bottom border on expanded button */
#faq-accordion [data-faq-button][aria-expanded="true"] { border-bottom:1px solid #1e293b; }
html.dark #faq-accordion [data-faq-button][aria-expanded="true"] { border-bottom:1px solid #2c3943; }
/* Remove panel top spacing border approach to avoid duplicate lines */
#faq-accordion [data-faq-panel] { border-top:none; margin-top:0; padding-top:12px; }

/* Cookie banner */
html.dark #cookie-banner .bg-white\/95 { background-color: rgba(27,31,36,0.96) !important; }
html.dark #cookie-banner p { color: #c9d1d9 !important; }
html.dark #cookie-banner button { color: #d1d5db; }
html.dark #cookie-banner button:hover { background-color: #2a3037; }

/* FAQ items */
html.dark [data-faq-item] { background-color: #1d2228 !important; border-color: #2c333b !important; }
html.dark [data-faq-icon] { background-color: #232a31 !important; color: #9ca3af !important; }
html.dark [data-faq-icon].open { color: #60a5fa !important; }

/* Lightbox adjustments (text colors already mostly white) */
html.dark #lightbox-caption { color: #d1d5db !important; }

/* Utility: subtle surface hover */
html.dark .hover\:bg-gray-100:hover { background-color: #242b33 !important; }
/* Prevent white hover flash on elements that use hover:bg-gray-50 in dark mode (stats cards, etc.) */
html.dark .hover\:bg-gray-50:hover { background-color:#1d2228 !important; box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset; }

/* Inputs (if any appear later) */
html.dark input, html.dark textarea, html.dark select { background-color: #1b1f24; color: #e4e7ec; border-color: #2c333b; }
html.dark input:focus, html.dark textarea:focus, html.dark select:focus { outline: 2px solid #3b82f6; }

/* Gradient button slight tweak */
html.dark .from-blue-500 { --tw-gradient-from: #3b82f6; }
html.dark .to-purple-600 { --tw-gradient-to: #7c3aed; }

/* Transition smoothing */
html.dark *, body * { transition-property: background-color, color, border-color, fill, stroke; transition-duration: 200ms; transition-timing-function: ease; }

.font-space {
    font-family: 'Space Grotesk', sans-serif;
}

.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('slike/back.png');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.service-card {
    transition: all 0.3s ease;
    transform: perspective(1000px) rotateY(0deg);
}

.service-card:hover {
    transform: perspective(1000px) rotateY(5deg) translateY(-10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Yellow gradient for Avtovleka page */
.yellow-gradient-text {
    background: linear-gradient(90deg, #eab308, #fbbf24);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cookie-banner {
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* FAQ icon rotating plus */
[data-faq-icon] {
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    transition: transform .3s ease, color .3s ease, background-color .3s ease;
}
[data-faq-icon].open {
    transform: rotate(45deg); /* plus becomes X */
    color: var(--brand-700, #7b886f);
}

/* ===================== Theme Switcher (Refined Weather Style) ===================== */
.theme-switcher-grid {
    position: relative;
    width: 92px; /* smaller to align with nav link height visual weight */
    height: 36px;
    cursor: pointer;
    border-radius: 999px;
    background: linear-gradient(115deg,#e7f5ff,#d9efff 58%,#d0e7fa);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 3px -2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 2px rgba(255,255,255,.55);
    transition: background .7s ease, border-color .5s ease, box-shadow .6s ease;
    overflow: hidden;
}
html.dark .theme-switcher-grid {
    background: linear-gradient(125deg,#171c24,#10151c 55%,#141b23);
    border-color: rgba(255,255,255,.07);
    box-shadow: 0 2px 4px -2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
}
.theme-switcher-grid:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* Sun */
.theme-switcher-grid .sun {
    position: absolute;
    left: 8px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 38% 38%,#fffbe3 0 45%,#f8d959 62%,#f3b809 85%);
    box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 10px 3px rgba(255,205,0,.28);
    transition: transform 1.1s cubic-bezier(.65,-0.35,.25,1.35), opacity .55s ease .55s;
    z-index: 4;
}
.theme-switcher-grid .sun::before,
.theme-switcher-grid .sun::after {
    content:""; position:absolute; inset:-6px; border-radius:50%;
    background:
       repeating-conic-gradient(from 0deg, rgba(255,200,0,.55) 0deg 8deg, transparent 8deg 20deg),
       radial-gradient(circle at 50% 50%, rgba(255,211,70,.25), transparent 60%);
    mix-blend-mode: plus-lighter;
    filter: blur(2px) saturate(120%);
    opacity:.9;
    animation: sun-rotate 18s linear infinite;
    mask: radial-gradient(circle at center, black 60%, transparent 62%);
}
.theme-switcher-grid .sun::after { inset:-10px; opacity:.35; animation-duration: 28s; }
@keyframes sun-rotate { to { transform: rotate(360deg); } }
.theme-switcher-grid.night-theme .sun::before,
.theme-switcher-grid.night-theme .sun::after { opacity:0; transition: opacity .4s ease; }
/* Sun travels fully across then fades */
.theme-switcher-grid.night-theme .sun {
    transform: translate(44px,-50%) scale(.55) rotate(25deg);
    opacity: 0;
}

/* Moon */
.theme-switcher-grid .moon-overlay {
    position:absolute;
    right: 8px; top:50%; transform: translate(20px,-50%) scale(.4) rotate(-25deg);
    width:26px; height:26px; border-radius:50%;
    background: radial-gradient(circle at 55% 48%,#ffffff 0 55%,#ececec 60%,#d2d2d2 76%,#b5b5b5 92%);
    box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 12px 4px rgba(255,255,255,.25), inset -4px -4px 6px -2px rgba(0,0,0,.18);
    opacity:0; z-index:4;
    transition: opacity .55s ease .35s, transform 1.05s cubic-bezier(.65,-0.35,.25,1.35);
}
.theme-switcher-grid .moon-overlay::before,
.theme-switcher-grid .moon-overlay::after {
    content:""; position:absolute; inset:0; border-radius:50%;
    background:
      radial-gradient(circle at 32% 38%, rgba(220,220,220,.85) 0 11%, transparent 12%),
      radial-gradient(circle at 62% 62%, rgba(205,205,205,.7) 0 9%, transparent 10%),
      radial-gradient(circle at 50% 72%, rgba(225,225,225,.65) 0 7%, transparent 8%),
      radial-gradient(circle at 70% 40%, rgba(215,215,215,.55) 0 6%, transparent 7%),
      radial-gradient(circle at 40% 60%, rgba(215,215,215,.5) 0 5%, transparent 6%);
    mix-blend-mode: normal;
    opacity:.9;
    mask: radial-gradient(circle at center, black 70%, transparent 71%);
    filter: contrast(105%);
}
.theme-switcher-grid .moon-overlay::after { inset:-6px; opacity:.28; filter: blur(3px); }
.theme-switcher-grid.night-theme .moon-overlay::before { animation: moon-pulse 6s ease-in-out infinite; }
@keyframes moon-pulse { 0%,100% { transform: scale(1); opacity:.9; } 50% { transform: scale(1.04); opacity:1; } }
.theme-switcher-grid.night-theme .moon-overlay { opacity:1; transform: translate(0,-50%) scale(1) rotate(0deg); }

/* Clouds */
.theme-switcher-grid .cloud-ball { position:absolute; background: linear-gradient(145deg,#ffffff,#f2f5f7); border-radius:50%; box-shadow:0 2px 4px -1px rgba(0,0,0,.18); transition: opacity .55s ease, transform .7s ease; }
.theme-switcher-grid .cloud-ball-left  { left:40px; top:50%; width:16px; height:16px; transform: translateY(-48%); }
.theme-switcher-grid .cloud-ball-middle{ left:52px; top:51%; width:20px; height:20px; transform: translateY(-50%); }
.theme-switcher-grid .cloud-ball-right { left:70px; top:49%; width:14px; height:14px; transform: translateY(-50%); }
.theme-switcher-grid .cloud-ball-top   { left:48px; top:40%; width:12px; height:12px; }
.theme-switcher-grid.night-theme .cloud-ball { opacity:0; transform: translateY(-18px) scale(.55); }

/* Stars (statične 5-krake) */
.theme-switcher-grid .star {
    --star-size: 8px;
    position:absolute; width:var(--star-size); height:var(--star-size);
    clip-path: polygon(50% 0%, 61% 38%, 100% 38%, 69% 59%, 81% 100%, 50% 75%, 19% 100%, 31% 59%, 0% 38%, 39% 38%);
    background: radial-gradient(circle at 50% 45%, #fff 0 40%, #ffe9b8 55%, #d6a132 78%);
    filter: drop-shadow(0 0 4px rgba(255,240,200,.9)) drop-shadow(0 0 6px rgba(255,200,100,.4));
    opacity:0; transform: scale(.4);
    transition: opacity .7s ease, transform .7s ease;
    z-index:3;
}
.theme-switcher-grid .star--1 { left:28px; top:8px;  --star-size:4px; }
.theme-switcher-grid .star--2 { left:40px; top:12px;  --star-size:5px; }
.theme-switcher-grid .star--3 { left:36px; top:22px; --star-size:6px; }
.theme-switcher-grid .star--4 { left:25px; top:18px; --star-size:4px; }

.theme-switcher-grid .star--5 { left:12px; top:9px; --star-size:6px; }
.theme-switcher-grid .star--6 { left:15px; top:25px; --star-size:3px; }

.theme-switcher-grid.night-theme .star { opacity:1; transform:scale(1); }

/* Hover */
.theme-switcher-grid:hover { box-shadow: 0 3px 6px -2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 2px rgba(255,255,255,.55); }
html.dark .theme-switcher-grid:hover { box-shadow: 0 3px 6px -2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.07); }

/* Clothing card white top band for dark mode alignment */
html.dark .clothing-image-wrapper {
    background:#ffffff !important;
    position:relative;
}
html.dark .clothing-image-wrapper::after {
    /* subtle fade / separator at bottom like other cards but keeping white sides */
    content:""; position:absolute; left:0; right:0; bottom:0; height:42px;
    background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.75));
    pointer-events:none;
}
html.dark .clothing-image-wrapper img { object-position:center top; }

@media (prefers-reduced-motion: reduce) { .theme-switcher-grid *, .theme-switcher-grid { transition:none !important; animation:none !important; } }