/**
 * Greco Theme - Dark Mode Styles
 * Wszystkie kolory pochodzą z assets/css/theme-tokens.css (--greco-* tokens).
 * Light mode pozostaje nietknięty — definiowany w innych arkuszach.
 */

/* ========================================
   Dark Mode Transitions
   ======================================== */

/* Dark mode color transition - only on toggle, not on scroll */
html.transitioning-theme {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode {
    --wp--preset--color--white: var(--greco-bg-solid);
    --wp--preset--color--off-white: var(--greco-surface-elevated);
    --wp--preset--color--dark: var(--greco-text);
    --wp--preset--color--gray: var(--greco-text-muted);
    --wp--preset--color--gray-light: var(--greco-border-subtle);
    --wp--preset--color--sand-light: var(--greco-surface-elevated);
    --wp--preset--color--sand: var(--greco-border-subtle);
}

/* Globalne tło dark mode — paleta z theme-tokens.css */
.dark-mode body {
    background: var(--greco-bg-gradient);
    color: var(--greco-text);
}

/* Header transparentny u góry strony — tło/blur pojawia się dopiero po scrollu */
.dark-mode .site-header:not(.header-scrolled) {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom-color: transparent;
}

.dark-mode .site-header:not(.header-scrolled) .header-wrapper {
    background: transparent !important;
    background-color: transparent !important;
}

.dark-mode .site-header.header-scrolled {
    background: rgba(42, 52, 64, 0.98) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--greco-border-subtle);
    box-shadow: 0 1px 3px var(--greco-shadow);
}

/* ========================================
   Dark Mode: Stats Bar
   ======================================== */

.dark-mode .greco-stats-bar {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dark-mode .greco-stat-number {
    color: var(--greco-text);
}

.dark-mode .greco-stat-separator {
    background-color: var(--greco-border-subtle);
}

/* ========================================
   Dark Mode: Featured Dishes
   ======================================== */

.dark-mode .greco-featured-card {
    background: var(--greco-surface-elevated);
    border: 1px solid var(--greco-border-subtle);
}

.dark-mode .greco-featured-title {
    color: var(--greco-text);
}

.dark-mode .greco-featured-price {
    color: var(--greco-accent);
}

/* ========================================
   Dark Mode: Location Dropdown
   ======================================== */

.dark-mode .dropdown-trigger {
    background: var(--greco-surface-elevated);
    border-color: var(--greco-border-subtle);
    color: var(--greco-text);
}

.dark-mode .dropdown-menu {
    background: rgba(42, 52, 64, 0.97);
    border: 1px solid var(--greco-border-subtle);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dark-mode .dropdown-menu [role="option"] {
    color: var(--greco-text);
}

.dark-mode .dropdown-menu [role="option"]:hover,
.dark-mode .dropdown-menu [role="option"]:focus {
    background: var(--greco-accent-glow);
}

.dark-mode .dropdown-menu [role="option"].is-selected {
    color: var(--greco-accent);
}

/* ========================================
   Dark Mode: Menu Switcher
   ======================================== */

.dark-mode .menu-tabs {
    background: var(--greco-surface-elevated);
    border-color: var(--greco-border-subtle);
}

.dark-mode .menu-tab {
    color: var(--greco-text-muted);
}

.dark-mode .menu-tab:hover {
    color: var(--greco-text);
}

.dark-mode .menu-tab.active,
.dark-mode .menu-tab[aria-selected="true"] {
    background: var(--greco-accent-glow);
    color: var(--greco-accent);
}

.dark-mode .menu-items-grid .menu-item {
    background: var(--greco-surface-elevated);
    border: 2px solid var(--greco-border-subtle);
    box-shadow: 0 4px 16px var(--greco-shadow);
}

.dark-mode .menu-items-grid .menu-item:hover {
    border-color: var(--greco-border-strong);
    box-shadow: 0 8px 24px var(--greco-shadow);
}

.dark-mode .menu-item-title {
    color: var(--greco-text);
}

.dark-mode .menu-item-description {
    color: var(--greco-text-muted);
}

/* ========================================
   Dark Mode: Hero Location Pill
   ======================================== */

.dark-mode .hero-location-pill {
    background: var(--greco-surface-elevated);
    border-color: var(--greco-border-strong);
    color: var(--greco-text);
}

/* ========================================
   Dark Mode: Section Link
   ======================================== */

.dark-mode .section-link {
    color: var(--greco-accent);
}

.dark-mode .section-link:hover {
    background: var(--greco-accent-glow);
}

/* ========================================
   Dark Mode: Buttons
   ======================================== */

.dark-mode .btn-primary {
    color: #ffffff !important;
}

.dark-mode .btn-secondary {
    background: var(--greco-surface-elevated);
    color: var(--greco-text);
    border-color: var(--greco-border-subtle);
}

.dark-mode .btn-secondary:hover {
    background: var(--greco-accent-glow);
    border-color: var(--greco-border-strong);
    color: var(--greco-text);
}

.dark-mode .btn-outline {
    background: transparent;
    border-color: var(--greco-border-strong);
    color: var(--greco-text);
}

.dark-mode .btn-outline:hover {
    border-color: var(--greco-accent);
    color: var(--greco-accent);
    background: var(--greco-accent-glow);
}

/* ========================================
   Dark Mode: Location buttons (archive grid + global modal)
   Tokeny --greco-* z theme-tokens.css.
   ======================================== */

.dark-mode .locations-archive .btn-primary,
.dark-mode .locations-page-grid .btn-primary,
.dark-mode .locations-preview-grid .btn-primary,
.dark-mode .greco-location-modal .btn-primary {
    background: linear-gradient(135deg, var(--greco-accent) 0%, var(--greco-accent-soft) 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--greco-accent) 30%, transparent);
    border-color: color-mix(in srgb, var(--greco-accent) 40%, transparent);
}

.dark-mode .locations-archive .btn-primary:hover,
.dark-mode .locations-page-grid .btn-primary:hover,
.dark-mode .locations-preview-grid .btn-primary:hover,
.dark-mode .greco-location-modal .btn-primary:hover {
    background: linear-gradient(135deg, var(--greco-accent-soft) 0%, var(--greco-accent) 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--greco-accent) 38%, transparent);
}

.dark-mode .locations-archive .btn-primary.is-selected,
.dark-mode .locations-archive .btn-primary:disabled,
.dark-mode .locations-page-grid .btn-primary.is-selected,
.dark-mode .locations-page-grid .btn-primary:disabled,
.dark-mode .locations-preview-grid .btn-primary.is-selected,
.dark-mode .locations-preview-grid .btn-primary:disabled,
.dark-mode .greco-location-modal .btn-primary.is-selected,
.dark-mode .greco-location-modal .btn-primary:disabled {
    background: linear-gradient(135deg, var(--greco-accent) 0%, var(--greco-accent-soft) 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--greco-accent) 32%, transparent);
}

.dark-mode .locations-archive .btn-outline,
.dark-mode .locations-page-grid .btn-outline,
.dark-mode .locations-preview-grid .btn-outline,
.dark-mode .greco-location-modal .btn-outline {
    border-color: color-mix(in srgb, var(--greco-accent) 35%, transparent);
    color: var(--greco-text);
}

.dark-mode .locations-archive .btn-outline:hover,
.dark-mode .locations-page-grid .btn-outline:hover,
.dark-mode .locations-preview-grid .btn-outline:hover,
.dark-mode .greco-location-modal .btn-outline:hover {
    border-color: var(--greco-accent);
    color: var(--greco-accent);
    background: color-mix(in srgb, var(--greco-accent) 10%, transparent);
}

.dark-mode .locations-archive .btn-secondary,
.dark-mode .locations-page-grid .btn-secondary,
.dark-mode .locations-preview-grid .btn-secondary,
.dark-mode .greco-location-modal .btn-secondary {
    background: var(--greco-card-bg);
    border-color: var(--greco-card-border);
    color: var(--greco-text);
    backdrop-filter: var(--greco-card-blur);
    -webkit-backdrop-filter: var(--greco-card-blur);
}

.dark-mode .locations-archive .btn-secondary:hover,
.dark-mode .locations-page-grid .btn-secondary:hover,
.dark-mode .locations-preview-grid .btn-secondary:hover,
.dark-mode .greco-location-modal .btn-secondary:hover {
    border-color: var(--greco-accent);
    color: var(--greco-accent);
    background: color-mix(in srgb, var(--greco-accent) 12%, var(--greco-card-bg));
}

.dark-mode .location-card-badge {
    background: linear-gradient(135deg, var(--greco-accent) 0%, var(--greco-accent-soft) 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--greco-accent) 35%, transparent);
}

/* Location cards dark mode handled via --greco-* tokens (theme-tokens.css) */

/* ========================================
   Dark Mode: Location Filter
   ======================================== */

.dark-mode .filter-input {
    background: var(--greco-surface-elevated);
    border-color: var(--greco-border-subtle);
    color: var(--greco-text);
}

.dark-mode .filter-input::placeholder {
    color: var(--greco-text-muted);
}

.dark-mode .filter-input:focus {
    border-color: var(--greco-accent);
}

.dark-mode .filter-select {
    background-color: var(--greco-surface-elevated);
    border-color: var(--greco-border-subtle);
    color: var(--greco-text);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23F4ECD8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

.dark-mode .filter-select:focus {
    border-color: var(--greco-accent);
}

/* ========================================
   Dark Mode: Single Location Page
   --------------------------------------------------
   Większość styli dla strony pojedynczej lokalizacji
   (.location-contact-card, .location-map-section,
   .location-gallery-section, .contact-*, .delivery-*)
   jest zarządzana przez assets/css/lokalizacja-single.css
   za pomocą zmiennych --greco-* (light/dark). Tutaj
   pozostawiamy tylko reguły, których selektory nie są
   pokryte tamtym arkuszem.
   ======================================== */

/* Tabela godzin (wiersz dnia) — używana przez aktywny shortcode lokalizacji */
.dark-mode .hours-row {
    color: var(--greco-text-muted);
}

/* Rezerwacja stolika — dark mode (gold gradient z palety motywu) */
.dark-mode .delivery-btn--reserve {
    background: linear-gradient(135deg, var(--greco-accent) 0%, var(--greco-accent-soft) 100%);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--greco-accent) 70%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--greco-accent) 40%, transparent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dark-mode .delivery-btn--reserve:hover {
    background: linear-gradient(135deg, var(--greco-accent-soft) 0%, var(--greco-accent) 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--greco-accent) 55%, transparent);
}

.dark-mode .delivery-btn--reserve svg {
    stroke: #ffffff;
}

/* Hero "Zarezerwuj stolik" na pojedynczej lokalizacji */
.dark-mode .location-hero__btn--primary,
.dark-mode .location-hero__btn--primary:hover {
    color: #ffffff;
}

.dark-mode .location-hero__btn--primary svg {
    stroke: #ffffff;
}

/* ========================================
   Dark Mode: Hero Background
   ======================================== */

/* Hero background - dark mode desktop */
.dark-mode .hero-animated-bg {
    background-image: url('../images/hero/hero-dark-desktop.webp');
}

/* Hero background - dark mode mobile */
@media (max-width: 781px) {
    .dark-mode .hero-animated-bg {
        background-image: url('../images/hero/hero-dark-mobile.webp');
    }
}

/* Overlay nad obrazem hero — świadomy ciemny gradient dla czytelności tekstu */
.dark-mode .hero-animated-bg::after {
    background:
        linear-gradient(to bottom, rgba(5, 12, 20, 0.5) 0%, rgba(5, 12, 20, 0.2) 15%, transparent 30%),
        rgba(5, 12, 20, 0.3);
}

/* ========================================
   Dark Mode: Footer
   Footer celowo zachowuje oryginalną paletę (ciemny granat + legacy gold)
   niezależnie od reszty dark mode — pozostawione na życzenie.
   ======================================== */

.dark-mode .site-footer {
    background: #0A1420 !important;
}

.dark-mode .site-footer .footer-animated-bg {
    background: linear-gradient(135deg, #0A1420 0%, #0F1E2E 40%, #0A1824 70%, #132A3E 100%);
}

.dark-mode .site-footer,
.dark-mode .site-footer h3,
.dark-mode .site-footer p,
.dark-mode .site-footer a,
.dark-mode .site-footer nav a {
    color: #E2E8F0 !important;
}

.dark-mode .site-footer .has-gray-color,
.dark-mode .site-footer .has-gray-light-color {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Dark mode footer bottom */
.dark-mode .site-footer .greco-footer-bottom .has-gray-color,
.dark-mode .site-footer .greco-footer-bottom a.has-gray-color {
    color: rgba(255, 255, 255, 0.45) !important;
}

.dark-mode .site-footer .greco-footer-bottom a.has-gray-color:hover {
    color: #C9A227 !important;
}

.dark-mode .site-footer a:hover {
    color: #C9A227 !important;
}

.dark-mode .site-footer .footer-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .site-footer .footer-social a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark-mode .site-footer .footer-social a:hover {
    color: #C9A227 !important;
}

/* Footer icons — kolor zarządzany w components.css (.site-footer .footer-icon), identyczny w light/dark */

/* ========================================
   Dark Mode: Header Toggles (theme/location/lang) — gold accent zamiast niebieskiego
   ======================================== */

.dark-mode .theme-toggle {
    border-color: var(--greco-border-subtle);
    color: var(--greco-text);
}

.dark-mode .theme-toggle:hover {
    background: var(--greco-accent-glow);
    border-color: var(--greco-accent);
    color: var(--greco-accent);
}

.dark-mode .theme-toggle:focus,
.dark-mode .theme-toggle:focus-visible {
    outline-color: var(--greco-accent);
}

.dark-mode .dropdown-trigger:focus,
.dark-mode .dropdown-trigger:focus-visible {
    outline-color: var(--greco-accent);
}

.dark-mode .dropdown-trigger:hover {
    border-color: var(--greco-accent);
}

/* ========================================
   Dark Mode: Mobile Theme Toggle ("Zmień motyw")
   ======================================== */

.dark-mode .mobile-theme-toggle {
    color: var(--greco-text);
    border-color: var(--greco-border-subtle);
    background: transparent;
}

.dark-mode .mobile-theme-toggle .theme-toggle-text,
.dark-mode .mobile-theme-toggle svg {
    color: var(--greco-text);
}

.dark-mode .mobile-theme-toggle:hover,
.dark-mode .mobile-theme-toggle:focus,
.dark-mode .mobile-theme-toggle:focus-visible {
    background: var(--greco-accent-glow);
    color: var(--greco-accent);
    outline-color: var(--greco-accent);
    border-color: var(--greco-accent);
}

.dark-mode .mobile-theme-toggle:hover .theme-toggle-text,
.dark-mode .mobile-theme-toggle:focus .theme-toggle-text,
.dark-mode .mobile-theme-toggle:hover svg,
.dark-mode .mobile-theme-toggle:focus svg {
    color: var(--greco-accent);
}

/* ========================================
   Dark Mode: Global focus-visible outline
   Override globalnej reguly *:focus-visible w style.css (linie 30-33)
   ktora uzywa --wp--preset--color--aegean (#1E4D6B granatowy).
   W dark mode outline ma byc zloty (token --greco-accent = #D4A752).
   ======================================== */
html.dark-mode *:focus-visible {
    outline-color: var(--greco-accent);
}

/* Override dla WP global styles inline rule:
   :root :where(a:where(:not(.wp-element-button)):focus) { outline-color: aegean }
   Specyficznosc tej reguly = (0,2,0). Nasza html.dark-mode + a:focus = (0,2,2).
   Bez tego po prawym klikiniu na linki nawigacji widac granatowy outline. */
html.dark-mode a:focus,
html.dark-mode a:focus-visible {
    outline-color: var(--greco-accent);
}

/* ========================================
   Dark Mode: Aktywna kategoria menu (filter chip + tab link)
   Override gradientu z menu.css (linie 917-922 i 1052-1057),
   ktory uzywa niebieskiego gradientu #1E4D6B -> #2A7AB8.
   Zlote ::after underline (menu.css 925-935 i 1060-1070) pozostaje bez zmian.
   ======================================== */
html.dark-mode .greco-menu-wrapper .greco-filter-chip.active,
html.dark-mode .greco-tab-link.active {
    background: linear-gradient(135deg, var(--greco-accent) 0%, var(--greco-accent-soft) 100%);
    color: var(--greco-accent-on);
    box-shadow: 0 4px 16px var(--greco-accent-glow);
}

/* ========================================
   Dark Mode: Sekcja "Nasze menu" na home (menu-switcher)
   Override paska 2px pod aktywna zakladka z animations.css linia 236-246,
   ktory uzywa --wp--preset--color--aegean (granatowy).
   Komponent: .menu-tab w .menu-switcher (homepage), nie greco-menu-wrapper.
   ======================================== */
html.dark-mode .menu-tab::before {
    background: var(--greco-accent);
}

/* Focus-visible dla menu controls w dark mode (override z menu.css linie 2052-2059) */
html.dark-mode .greco-filter-chip:focus-visible,
html.dark-mode .greco-tab-link:focus-visible,
html.dark-mode .greco-modal-close:focus-visible,
html.dark-mode #greco-menu-search:focus-visible,
html.dark-mode #greco-menu-sort:focus-visible {
    outline-color: var(--greco-accent);
}