/**
 * Dark Mode — Palilula.info
 *
 * Pristup: prepisujemo Blocksy CSS varijable na html.dark-mode.
 * Pošto tema koristi ove varijable za SVE boje (tekst, pozadine, borderi,
 * linkovi, dugmad, forme...), prepisivanje varijabli automatski menja
 * celu temu — uključujući Elementor blokove koji nasleđuju iste varijable.
 * Individualni selektori se dodaju samo tamo gde varijable nisu dovoljne.
 */


/* ============================================================
   1. IKONE DUGMETA
   Svetli mod → mesec | Tamni mod → zlatno sunce
   ============================================================ */
.palilula-dark-toggle {
    background-color: #f3f3f3;
    border: none;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    vertical-align: middle;
}

.palilula-dark-toggle .sun-icon              { display: none; }
.palilula-dark-toggle .moon-icon             { display: inline-flex; color: #1e293b; }
.palilula-dark-toggle:hover .moon-icon       { color: #0f172a; }

html.dark-mode .palilula-dark-toggle         { background-color: #18181b; }
html.dark-mode .palilula-dark-toggle .moon-icon { display: none; }
html.dark-mode .palilula-dark-toggle .sun-icon  { display: inline-flex; color: #fec000; }
html.dark-mode .palilula-dark-toggle:hover .sun-icon { color: #d4a000; }


/* ============================================================
   2. BLOCKSY CSS VARIJABLE — srce dark mode-a
   Sve što tema koristi prepisujem ovde. Blocksy čita ove
   varijable na svakom elementu, pa nema potrebe za
   individualnim selektorima za standardne komponente teme.
   ============================================================ */
html.dark-mode {
    color-scheme: dark;

    /* Paleta boja — Blocksy koristi ovih 8 za sve */
    --theme-palette-color-1: #de0e3f;   /* Crvena — akcent, ostaje ista */
    --theme-palette-color-2: #c00b35;   /* Tamnija crvena za hover */
    --theme-palette-color-3: #e2e8f0;   /* Svetli tekst */
    --theme-palette-color-4: #1e293b;   /* Dropdown pozadine */
    --theme-palette-color-5: #334155;   /* Borderi, separatori */
    --theme-palette-color-6: #1a1a1a;   /* Pozadina blokova koda */
    --theme-palette-color-7: #f1f5f9;   /* Naslovi */
    --theme-palette-color-8: #ffffff;   /* Čisto bela */

    /* Tekst */
    --theme-text-color:       #e2e8f0;
    --theme-headings-color:   #f1f5f9;
    --theme-heading-1-color:  #f1f5f9;
    --theme-heading-2-color:  #f1f5f9;
    --theme-heading-3-color:  #f1f5f9;
    --theme-heading-4-color:  #f1f5f9;
    --theme-heading-5-color:  #f1f5f9;
    --theme-heading-6-color:  #f1f5f9;

    /* Linkovi */
    --theme-link-initial-color: #e2e8f0;
    --theme-link-hover-color:   #ffffff;
    --theme-link-active-color:  #de0e3f;

    /* Ikone */
    --theme-icon-color:       #e2e8f0;
    --theme-icon-hover-color: #ffffff;

    /* Borderi */
    --theme-border-color:     #2a2a2a;
    --theme-border:           1px solid #2a2a2a;

    /* Forme */
    --theme-form-field-border-initial-color:  #374151;
    --theme-form-field-border-focus-color:    #de0e3f;
    --theme-form-field-background-initial-color: #1e293b;
    --theme-form-field-background-focus-color:   #1e293b;
    --theme-form-text-initial-color:          #e2e8f0;
    --theme-form-selection-field-initial-color: #374151;
    --theme-form-selection-field-active-color:  #de0e3f;

    /* Dugmad */
    --theme-button-background-initial-color: #de0e3f;
    --theme-button-background-hover-color:   #c00b35;
    --theme-button-text-initial-color:       #ffffff;
    --theme-button-text-hover-color:         #ffffff;

    /* Selekcija teksta */
    --theme-selection-text-color:       #ffffff;
    --theme-selection-background-color: #de0e3f;

    /* Dropdown (sub-menu) */
    --dropdown-background-color: #1e293b;

    /* Prilagođene varijable za child temu */
    --pinfo-bg-card:       #1a1a1a;
    --pinfo-bg-card-hover: #222222;
    --pinfo-border-color:  #2a2a2a;
    --pinfo-text-main:     #ffffff;
    --pinfo-text-muted:    #aaaaaa;
}


/* ============================================================
   3. GLOBALNA POZADINA — jedini selektor koji varijable ne mogu
   ============================================================ */
html.dark-mode,
html.dark-mode body {
    background-color: #121212 !important;
}

/* Sve Elementor sekcije, widgeti i blokovi koji imaju belu pozadinu */
html.dark-mode .elementor-section,
html.dark-mode .elementor-widget-wrap,
html.dark-mode .elementor-widget-container,
html.dark-mode .e-con,
html.dark-mode .e-con-inner,
html.dark-mode section,
html.dark-mode .wp-block-group,
html.dark-mode [class*="wp-block-"] {
    background-color: transparent !important;
}


/* ============================================================
   4. HEADER
   ============================================================ */
html.dark-mode header [data-row="top"],
html.dark-mode .ct-header-bar[data-id="top-bar"] {
    background-color: #18181b !important;
    --header-row-background: #18181b !important;
}

html.dark-mode header [data-row="middle"],
html.dark-mode .ct-header-bar[data-id="main-header"] {
    background-color: #121212 !important;
    --header-row-background: #121212 !important;
    --header-background-color: #121212 !important;
}

/* Menu linkovi */
html.dark-mode header [data-row="middle"] .ct-menu-link,
html.dark-mode header [data-row="middle"] .menu-item a {
    --theme-menu-link-initial-color: #e2e8f0 !important;
}

/* Dropdown */
html.dark-mode .ct-main-nav .sub-menu {
    background-color: #1e293b !important;
    border-color: #2a2a2a !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}


/* ============================================================
   5. KARTICE, ARTIKLI I POST LISTE
   ============================================================ */
html.dark-mode article,
html.dark-mode .article-card,
html.dark-mode .hero-wrapper-grid,
html.dark-mode .hero-articles-side,
html.dark-mode .ct-post,
html.dark-mode [class*="post-card"],
html.dark-mode .entry,
html.dark-mode .ct-card {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

html.dark-mode .article-card .content {
    background-color: #1a1a1a !important;
}

/* Overlay gradijent na hero slici — pojačan za bolju čitljivost */
html.dark-mode .hero-overlay-gradient {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.4) 50%,
        transparent 100%
    ) !important;
}


/* ============================================================
   6. SIDEBAR I WIDGETI
   ============================================================ */
html.dark-mode .ct-sidebar,
html.dark-mode .widget {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}


/* ============================================================
   7. FOOTER
   ============================================================ */
html.dark-mode .ct-footer,
html.dark-mode footer {
    background-color: #0a0a0a !important;
    border-top-color: #2a2a2a !important;
}


/* ============================================================
   8. PINFO POST KARTICE (.pinfo-post-card)
   ============================================================ */
html.dark-mode .pinfo-post-card {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

html.dark-mode .pinfo-card-body {
    background-color: #1a1a1a !important;
}

/* Naslov — nema inline stil, ali može biti crn zbog nasledjivanja */
html.dark-mode .pinfo-card-title a {
    color: #f1f5f9 !important;
}

html.dark-mode .pinfo-card-title a:hover {
    color: #ffffff !important;
}

/* Vreme — ima inline color: #64748b, mora !important */
html.dark-mode .pinfo-card-time {
    color: #94a3b8 !important;
}

html.dark-mode .pinfo-card-time span {
    color: #94a3b8 !important;
}

/* Kategorija — ima inline color: #e63946, ostaje crvena */
html.dark-mode .pinfo-card-category {
    color: #de0e3f !important;
}

/* Grid kontejner */
html.dark-mode .pinfo-posts-grid {
    background-color: transparent !important;
}


/* ============================================================
   8b. NAJČITANIJE (.pinfo-trending-*)
   ============================================================ */
html.dark-mode .pinfo-trending-widget {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

html.dark-mode .pinfo-trending-header {
    background-color: #1a1a1a !important;
}

html.dark-mode .pinfo-trending-title {
    color: #f1f5f9 !important;
}

html.dark-mode .pinfo-trending-line {
    background-color: #de0e3f !important;
}

html.dark-mode .pinfo-trending-item {
    border-bottom-color: #2a2a2a !important;
}

html.dark-mode .pinfo-trending-num {
    background-color: #0f0f0f !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

html.dark-mode .pinfo-trending-link {
    color: #e2e8f0 !important;
}

html.dark-mode .pinfo-trending-link:hover {
    color: #ffffff !important;
}


/* ============================================================
   8c. EDS & BVK ISKLJUČENJA
   ============================================================ */
html.dark-mode .eds-modern-card {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.6) !important;
}

/* Zaglavlje kartice */
html.dark-mode .eds-header-flex {
    background-color: #1a1a1a !important;
}

html.dark-mode .eds-title-group {
    background-color: transparent !important;
}

/* Ikona (voda = plava, struja = žuta) — tamna pozadina */
html.dark-mode .eds-icon-wrapper {
    background-color: #2a2a2a !important;
    color: #e2e8f0 !important;
}

html.dark-mode .water-card .eds-icon-wrapper {
    background-color: #1e3a4a !important;
    color: #38bdf8 !important;
}

html.dark-mode .electricity-card .eds-icon-wrapper {
    background-color: #3a3a1e !important;
    color: #fbbf24 !important;
}

/* Naslovi i podnaslov */
html.dark-mode .eds-main-title  { color: #f1f5f9 !important; }
html.dark-mode .eds-sub-title   { color: #94a3b8 !important; }

/* Status pill — alert (crvena/narandžasta za kvar) */
html.dark-mode .eds-status-pill.alert {
    background-color: rgba(222, 14, 63, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(222, 14, 63, 0.3) !important;
}

/* Status pill — success (zelena za stabilnu mrežu) */
html.dark-mode .eds-status-pill.success {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Pulsna tačka */
html.dark-mode .eds-status-pill.alert .eds-pulse-dot {
    background-color: #f87171 !important;
}

html.dark-mode .eds-status-pill.success .eds-pulse-dot {
    background-color: #4ade80 !important;
}

/* Kartice ulica */
html.dark-mode .eds-item-card {
    background-color: #0f0f0f !important;
    border-color: #2a2a2a !important;
}

html.dark-mode .eds-street-text { color: #e2e8f0 !important; }
html.dark-mode .eds-time-tag {
    background-color: rgba(255,255,255,0.06) !important;
    color: #e2e8f0 !important;
}

/* Prazno stanje */
html.dark-mode .eds-empty-banner {
    background-color: #0f0f0f !important;
    border-color: #2a2a2a !important;
}
html.dark-mode .eds-empty-title { color: #f1f5f9 !important; }
html.dark-mode .eds-empty-desc  { color: #94a3b8 !important; }

/* Footer kartice */
html.dark-mode .eds-footer-flex {
    border-top-color: #2a2a2a !important;
    color: #94a3b8 !important;
}

html.dark-mode .eds-footer-link {
    color: #e2e8f0 !important;
}

html.dark-mode .eds-footer-link:hover {
    color: #ffffff !important;
}


/* ============================================================
   9. TABELE
   ============================================================ */
html.dark-mode table         { border-color: #2a2a2a !important; background-color: #1a1a1a !important; }
html.dark-mode th            { background-color: #111111 !important; border-color: #2a2a2a !important; }
html.dark-mode td            { border-color: #2a2a2a !important; }
html.dark-mode tr:nth-child(even) { background-color: #161616 !important; }


/* ============================================================
   10. PAGINATION
   ============================================================ */
html.dark-mode .ct-pagination a,
html.dark-mode .page-numbers {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
html.dark-mode .page-numbers.current,
html.dark-mode .ct-pagination .current {
    background-color: #de0e3f !important;
    border-color: #de0e3f !important;
    color: #ffffff !important;
}


/* ============================================================
   11. META PODACI VESTI
   ============================================================ */
html.dark-mode .palilula-meta-bottom {
    border-top-color: #2a2a2a !important;
}


/* ============================================================
   12. WEATHER WIDGET
   ============================================================ */
html.dark-mode #palilula-weather-widget {
    color: #e2e8f0 !important;
}


/* ============================================================
   13. TRANZICIJA (accessibility-friendly)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    body,
    header,
    footer,
    main,
    article,
    section,
    aside {
        transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease;
    }
}