/**
 * Dark Mode Styles
 * @package Ezustfonal
 * @version 1.4.0
 * 
 * Design system based on ezustfonal_dark_new.html
 */

/* ======================
   CSS VARIABLES
   ====================== */
html.dark-mode {
    /* Core colors - Warm dark palette */
    --color-bg: #1c1917;           /* Stone 900 - Main background (matches header) */
    --color-surface: #1c1917;      /* Stone 900 - Cards, modals */
    --color-border: rgba(255, 255, 255, 0.08); /* Subtle borders */
    
    /* Text colors */
    --color-text: #e7e5e4;         /* Stone 200 - Primary text */
    --color-text-muted: #a8a29e;   /* Stone 400 - Secondary text */
    --color-text-dim: #78716c;     /* Stone 500 - Tertiary text */
    
    /* Accent */
    --color-accent: #C4A484;       /* Gold/Bronze - Links, highlights */
    --color-accent-hover: #d4b494;
    
    /* UI Elements */
    --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ======================
   BASE ELEMENTS
   ====================== */
html.dark-mode body {
    background-color: var(--color-bg);
    color: var(--color-text);
    /* Subtle radial gradient overlay */
    background-image: radial-gradient(circle at center top, rgba(196, 164, 132, 0.08), transparent 40%);
}

html.dark-mode ::selection {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

/* ======================
   NAVIGATION
   ====================== */
html.dark-mode .site-header,
html.dark-mode nav:not(.scroll-navigator) {
    background-color: rgba(12, 10, 9, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Scroll navigator - NO background */
html.dark-mode .scroll-navigator {
    background-color: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
}

html.dark-mode .site-branding a,
html.dark-mode .menu a {
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

html.dark-mode .site-branding a:hover,
html.dark-mode .menu a:hover {
    color: var(--color-text);
}

html.dark-mode .menu-item.current-menu-item > a,
html.dark-mode .menu-item-has-children:hover > a {
    color: var(--color-text);
}

/* Underline animation */
html.dark-mode .menu a span {
    background-color: var(--color-accent);
}

/* Submenu / Dropdown Dark Mode */
html.dark-mode .sub-menu,
html.dark-mode .dropdown-menu,
html.dark-mode .ef-submenu,
html.dark-mode ul.ef-submenu,
html.dark-mode .menu-item-has-children .ef-submenu {
    background-color: rgba(28, 25, 23, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

/* Override Tailwind bg-white class */
html.dark-mode .bg-white.ef-submenu {
    background-color: rgba(28, 25, 23, 0.95) !important;
}

html.dark-mode .sub-menu li,
html.dark-mode .dropdown-menu li,
html.dark-mode .ef-submenu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .sub-menu li:last-child,
html.dark-mode .dropdown-menu li:last-child,
html.dark-mode .ef-submenu li:last-child {
    border-bottom: none !important;
}

html.dark-mode .sub-menu a,
html.dark-mode .dropdown-menu a,
html.dark-mode .ef-submenu a {
    color: var(--color-text-muted) !important;
    background-color: transparent !important;
}

html.dark-mode .sub-menu a:hover,
html.dark-mode .dropdown-menu a:hover,
html.dark-mode .ef-submenu a:hover,
html.dark-mode .ef-submenu a:focus {
    color: var(--color-text) !important;
    background-color: rgba(196, 164, 132, 0.15) !important;
}

/* Override any Tailwind hover classes */
html.dark-mode .ef-submenu .hover\:bg-stone-50:hover,
html.dark-mode .ef-submenu li:hover {
    background-color: rgba(196, 164, 132, 0.15) !important;
}

/* CTA Button */
html.dark-mode .bg-brand-accent,
html.dark-mode a[href*="kapcsolat"] {
    background-color: #e7e5e4 !important;
    color: #0c0a09 !important;
}

html.dark-mode .bg-brand-accent:hover {
    background-color: var(--color-accent) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(196, 164, 132, 0.2);
}

/* ======================
   SECTIONS & CARDS
   ====================== */
html.dark-mode section {
    background-color: var(--color-bg);
}

/* Alternate backgrounds */
html.dark-mode .bg-stone-50 {
    background-color: var(--color-surface) !important;
}

html.dark-mode .bg-white {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border);
}

html.dark-mode .bg-stone-100 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .bg-stone-900 {
    background-color: var(--color-bg) !important;
}

/* Cards */
html.dark-mode [class*="rounded-"][class*="bg-stone"] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

html.dark-mode [class*="hover:shadow"]:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* ======================
   TYPOGRAPHY
   ====================== */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: #fafaf9 !important; /* Stone 50 */
}

html.dark-mode .text-stone-800,
html.dark-mode .text-stone-900 {
    color: var(--color-text) !important;
}

html.dark-mode .text-stone-600,
html.dark-mode .text-stone-700 {
    color: var(--color-text-muted) !important;
}

html.dark-mode .text-stone-400,
html.dark-mode .text-stone-500 {
    color: var(--color-text-dim) !important;
}

html.dark-mode .text-stone-200,
html.dark-mode .text-stone-300 {
    color: var(--color-text-muted) !important;
}

html.dark-mode .text-brand-accent {
    color: var(--color-accent) !important;
}

html.dark-mode a:not([class*="bg-"]) {
    color: var(--color-accent);
}

html.dark-mode a:not([class*="bg-"]):hover {
    color: var(--color-accent-hover);
}

/* Quote blocks */
html.dark-mode .border-l-2 {
    border-left-color: var(--color-accent) !important;
}

html.dark-mode blockquote {
    border-left-color: var(--color-accent);
    color: var(--color-text-muted);
}

/* ======================
   IMAGES & MEDIA
   ====================== */
html.dark-mode img {
    opacity: 0.9;
}

html.dark-mode img:hover {
    opacity: 1;
}

/* Image containers */
html.dark-mode [class*="rounded-"][class*="overflow-hidden"] {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(255, 255, 255, 0.03);
}

/* ======================
   FORMS
   ====================== */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="tel"],
html.dark-mode textarea,
html.dark-mode select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 1px var(--color-accent) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--color-text-dim) !important;
}

html.dark-mode button[type="submit"] {
    background-color: var(--color-accent) !important;
    color: white !important;
}

/* ======================
   BORDERS
   ====================== */
html.dark-mode .border,
html.dark-mode .border-stone-100,
html.dark-mode .border-stone-200 {
    border-color: var(--color-border) !important;
}

html.dark-mode .border-t,
html.dark-mode .border-b {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ======================
   DARK MODE TOGGLE
   ====================== */
.dark-mode-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(120, 113, 108, 0.3);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon injected by JS - no emoji needed */
.dark-mode-toggle iconify-icon {
    color: var(--color-text-muted);
    transition: color 0.3s ease, transform 0.3s ease;
}

html.dark-mode .dark-mode-toggle iconify-icon {
    color: var(--color-accent);
}

.dark-mode-toggle:hover {
    border-color: #C4A484;
    transform: rotate(20deg);
}

/* ======================
   BLOG STYLES
   ====================== */
html.dark-mode .prose {
    color: var(--color-text-muted);
}

html.dark-mode .prose h1,
html.dark-mode .prose h2,
html.dark-mode .prose h3 {
    color: #fafaf9 !important;
}

html.dark-mode .prose a {
    color: var(--color-accent);
}

html.dark-mode .prose strong {
    color: var(--color-text);
}

/* ======================
   FOOTER
   ====================== */
html.dark-mode footer {
    background-color: var(--color-surface) !important;
    border-top: 1px solid var(--color-border);
}

html.dark-mode footer .text-stone-500,
html.dark-mode footer .text-stone-400 {
    color: var(--color-text-dim) !important;
}

/* ======================
   SHADOWS
   ====================== */
html.dark-mode [class*="shadow"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode [class*="shadow-lg"] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode [class*="shadow-xl"] {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7) !important;
}

/* ======================
   SMOOTH TRANSITIONS
   ====================== */
html.dark-mode * {
    transition-property: background-color, border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* ======================
   UI FIXES v1.5.0
   ====================== */

/* Navigation - Single color, no gradient */
html.dark-mode nav,
html.dark-mode .site-header {
    background-color: rgba(12, 10, 9, 1) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Hover effects for cards - Diagnosis/Icon Grid */
html.dark-mode .icon-grid-item,
html.dark-mode [class*="diagnosis-card"],
html.dark-mode [class*="bg-stone-50"]:hover {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

html.dark-mode .icon-grid-item:hover,
html.dark-mode [class*="diagnosis-card"]:hover,
html.dark-mode [class*="hover:shadow-lg"]:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(196, 164, 132, 0.3) !important;
    box-shadow: 0 8px 24px rgba(196, 164, 132, 0.15) !important;
}

/* Service cards hover */
html.dark-mode .service-card:hover,
html.dark-mode [class*="service-"]:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 164, 132, 0.3);
    box-shadow: 0 12px 32px rgba(196, 164, 132, 0.2);
}

/* Service card text hover */
html.dark-mode .service-card:hover h4,
html.dark-mode [class*="service-"]:hover h4 {
    color: rgba(196, 164, 132, 1) !important;
}

html.dark-mode .service-card:hover p,
html.dark-mode [class*="service-"]:hover p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Floating/overlay cards (like diagnosis popup) */
html.dark-mode [class*="absolute"][class*="bg-white"],
html.dark-mode .floating-card,
html.dark-mode [class*="backdrop-blur"] {
    background-color: rgba(28, 25, 23, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer links */
html.dark-mode footer a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

html.dark-mode footer a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* Impresszum specific */
html.dark-mode footer [href*="impresszum"],
html.dark-mode footer [href*="privacy"] {
    opacity: 0.7;
    font-size: 0.875rem;
}

html.dark-mode footer [href*="impresszum"]:hover,
html.dark-mode footer [href*="privacy"]:hover {
    opacity: 1;
}

/* Mobile white bar fix */
html.dark-mode header,
html.dark-mode main > header,
html.dark-mode section:first-child {
    background-color: var(--color-bg) !important;
}

/* Ensure no white gaps - AGGRESSIVE */
html.dark-mode body,
html.dark-mode #page,
html.dark-mode .site,
html.dark-mode main,
html.dark-mode #content {
    background-color: var(--color-bg) !important;
    min-height: 100vh;
}

/* Remove any section backgrounds that might show white */
html.dark-mode section {
    background-color: transparent !important;
}

html.dark-mode section.bg-white,
html.dark-mode section.bg-stone-50 {
    background-color: var(--color-bg) !important;
}

/* Footer link background removal - AGGRESSIVE */
html.dark-mode footer a,
html.dark-mode footer button,
html.dark-mode footer .footer-menu a,
html.dark-mode .site-footer a {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

html.dark-mode footer .text-stone-400,
html.dark-mode footer .text-stone-500,
html.dark-mode footer p,
html.dark-mode footer nav {
    background: none !important;
    background-color: transparent !important;
}

/* Service cards - Better dark mode styling */
html.dark-mode .service-card,
html.dark-mode [class*="service-"],
html.dark-mode .diagnozis-card,
html.dark-mode [class*="diagnozis-"],
html.dark-mode .bg-stone-50[class*="rounded-"],
html.dark-mode .bg-white[class*="rounded-"],
html.dark-mode .card,
html.dark-mode [class*="-card"] {
    background-color: rgba(28, 25, 23, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
}

html.dark-mode .service-card:hover,
html.dark-mode [class*="service-"]:hover,
html.dark-mode .diagnozis-card:hover,
html.dark-mode [class*="-card"]:hover,
html.dark-mode .bg-white[class*="rounded-"]:hover,
html.dark-mode .bg-stone-50[class*="rounded-"]:hover {
    background-color: rgba(28, 25, 23, 0.9) !important;
    border-color: rgba(196, 164, 132, 0.3) !important;
    box-shadow: 0 8px 20px rgba(196, 164, 132, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Service card icons */
html.dark-mode .service-card iconify-icon,
html.dark-mode .service-card .icon {
    color: var(--color-accent) !important;
    opacity: 0.9;
}

/* Service card text */
html.dark-mode .service-card h3,
html.dark-mode .service-card .title {
    color: #fafaf9 !important;
}

html.dark-mode .service-card p,
html.dark-mode .service-card .description {
    color: var(--color-text-muted) !important;
}

/* ======================
   ALL SECTIONS - DARK MODE COMPREHENSIVE
   ====================== */

/* Hero sections */
html.dark-mode [class*="hero"],
html.dark-mode header[class*="pt-"] {
    background-color: var(--color-bg) !important;
    background-image: radial-gradient(circle at center top, rgba(196, 164, 132, 0.08), transparent 40%);
}

/* All section backgrounds */
html.dark-mode section.bg-white,
html.dark-mode section.bg-stone-50,
html.dark-mode section[class*="bg-"] {
    background-color: var(--color-bg) !important;
}

html.dark-mode section:nth-child(even) {
    background-color: var(--color-surface) !important;
}

/* Icon grid items */
html.dark-mode .icon-grid-item,
html.dark-mode [class*="icon-"][class*="grid"] > div {
    background-color: rgba(28, 25, 23, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Testimonial cards */
html.dark-mode .testimonial-card,
html.dark-mode [class*="testimonial"] {
    background-color: var(--color-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Pricing cards */
html.dark-mode .pricing-card,
html.dark-mode [class*="pricing"] {
    background-color: var(--color-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Team cards */
html.dark-mode .team-card,
html.dark-mode [class*="team-member"] {
    background-color: var(--color-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Biography/About sections */
html.dark-mode [class*="biography"],
html.dark-mode [class*="about-"] {
    background-color: var(--color-bg) !important;
}

/* Qualifications cards */
html.dark-mode [class*="qualification"],
html.dark-mode [class*="cert-"] {
    background-color: rgba(28, 25, 23, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Contact form sections */
html.dark-mode [class*="contact-"] form,
html.dark-mode .contact-form {
    background-color: var(--color-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Quote/Banner sections */
html.dark-mode .quote-banner,
html.dark-mode [class*="quote-"] {
    background-color: var(--color-bg) !important;
}

/* All rounded cards - universal fix */
html.dark-mode [class*="rounded-"][class*="lg"],
html.dark-mode [class*="rounded-"][class*="2xl"],
html.dark-mode [class*="rounded-"][class*="3xl"] {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Badge/Tag elements */
html.dark-mode [class*="badge"],
html.dark-mode [class*="tag-"],
html.dark-mode .inline-flex[class*="bg-"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-text-muted) !important;
}


/* ======================
   SCROLL NAVIGATOR - DARK MODE OVERRIDE
   ====================== */
html.dark-mode .scroll-line {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(196, 164, 132, 0.05) 5%,
        rgba(196, 164, 132, 0.15) 12%,
        rgba(196, 164, 132, 0.3) 20%,
        rgba(196, 164, 132, 0.5) 30%,
        rgba(196, 164, 132, 0.7) 50%,
        rgba(196, 164, 132, 0.5) 70%,
        rgba(196, 164, 132, 0.3) 80%,
        rgba(196, 164, 132, 0.15) 88%,
        rgba(196, 164, 132, 0.05) 95%,
        transparent 100%
    ) !important;
}

html.dark-mode .scroll-dot {
    background: rgba(196, 164, 132, 0.7) !important;
    border: 1px solid rgba(196, 164, 132, 0.5) !important;
}

html.dark-mode .scroll-dot:hover {
    background: rgba(196, 164, 132, 0.9) !important;
    border-color: rgba(196, 164, 132, 0.7) !important;
}

html.dark-mode .scroll-dot.active {
    background: #C4A484 !important;
    border-color: #C4A484 !important;
    box-shadow: 0 0 35px rgba(196, 164, 132, 1),
                0 0 70px rgba(196, 164, 132, 0.6) !important;
}

html.dark-mode .scroll-tooltip {
    background: rgba(250, 250, 249, 0.98) !important;
    color: #1c1917 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode .scroll-tooltip::after {
    border-left-color: rgba(250, 250, 249, 0.98) !important;
}

/* ======================
   TAILWIND BG-WHITE OVERRIDE - AGGRESSIVE
   ====================== */
/* Target the exact Tailwind class on submenu */
html.dark-mode .ef-submenu.bg-white,
html.dark-mode ul.bg-white.ef-submenu,
html.dark-mode .bg-white.shadow-lg.rounded-md {
    background-color: rgba(28, 25, 23, 0.95) !important;
}

/* Extra specificity for walker-generated classes */
html.dark-mode .absolute.left-0.top-full.bg-white {
    background-color: rgba(28, 25, 23, 0.95) !important;
}