/* ==========================================================================
   RESPONSIVE.CSS — Global Responsive Layout & Dark Mode for Yistar Theme
   ========================================================================== */

/* Dark mode toggle button base styles */
.dark-mode-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--secondary);
    padding: 4px 6px;
    border-radius: var(--border-radius);
    transition: var(--transition);
    line-height: 1;
    margin-left: 4px;
}
.dark-mode-toggle:hover { opacity: 0.75; }

/* ==========================================================================
   DARK MODE
   All elements explicitly targeted so variables alone aren't enough
   ========================================================================== */

/* Apply saved dark mode immediately (via body class set by JS) */
body.dark-mode {
    background-color: #1A202C;
    color: #E2E8F0;
}

/* Header */
body.dark-mode .site-header {
    background-color: #1E293B;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
body.dark-mode .site-logo a          { color: #F7FAFC; }
body.dark-mode .site-logo span       { color: var(--primary); }
body.dark-mode .header-contact-link  { color: #A0AEC0; }
body.dark-mode .menu-toggle          { color: #E2E8F0; }

/* Navigation links */
body.dark-mode .main-navigation a                       { color: #CBD5E0; }
body.dark-mode .main-navigation a:hover,
body.dark-mode .main-navigation li.current-menu-item > a { color: var(--primary); }
body.dark-mode .main-navigation li > ul                 { background-color: #2D3748; border-top-color: var(--primary); }
body.dark-mode .main-navigation li > ul a               { color: #CBD5E0; }
body.dark-mode .main-navigation li > ul a:hover         { background-color: #374151; color: var(--primary); }

/* Headings */
body.dark-mode h1, body.dark-mode h2,
body.dark-mode h3, body.dark-mode h4,
body.dark-mode h5, body.dark-mode h6 { color: #F7FAFC; }

/* Background sections */
body.dark-mode .section-bg-light,
body.dark-mode .quote-steps-container,
body.dark-mode .contact-banner      { background-color: #1E293B; }

/* Cards & boxes */
body.dark-mode .service-card,
body.dark-mode .benefit-card,
body.dark-mode .faq-item,
body.dark-mode .contact-form-box,
body.dark-mode .contact-info-card,
body.dark-mode .materials-switcher-box,
body.dark-mode .author-box-card     { background-color: #2D3748; border-color: #4A5568; }

/* Form elements */
body.dark-mode .form-group label    { color: #E2E8F0; }
body.dark-mode .form-group input[type="text"],
body.dark-mode .form-group input[type="email"],
body.dark-mode .form-group input[type="tel"],
body.dark-mode .form-group input[type="number"],
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background-color: #1A202C;
    border-color: #4A5568;
    color: #E2E8F0;
}
body.dark-mode .form-group select option { background-color: #2D3748; }
body.dark-mode .file-upload-dragdrop {
    background-color: #1A202C;
    border-color: #4A5568;
}
body.dark-mode .file-upload-dragdrop:hover  { background-color: #2D3748; }
body.dark-mode .file-upload-dragdrop i      { color: #A0AEC0; }
body.dark-mode .file-upload-dragdrop h4     { color: #E2E8F0; }
body.dark-mode .file-upload-dragdrop p      { color: #A0AEC0; }

/* Tables */
body.dark-mode .specs-table                         { background-color: #2D3748; }
body.dark-mode .specs-table td                      { color: #E2E8F0; border-color: #4A5568; }
body.dark-mode .specs-table tr:nth-child(even)      { background-color: #374151; }

/* FAQ */
body.dark-mode .faq-question            { color: #E2E8F0; }
body.dark-mode .faq-question:hover      { background-color: #374151; }
body.dark-mode .faq-answer-content      { color: #CBD5E0; }

/* Switcher tabs */
body.dark-mode .switcher-tabs           { border-color: #4A5568; }
body.dark-mode .switcher-tab            { color: #A0AEC0; }
body.dark-mode .switcher-tab.active,
body.dark-mode .switcher-tab:hover      { color: var(--primary); }
body.dark-mode .switcher-content-info p { color: #A0AEC0; }

/* Quote steps */
body.dark-mode .quote-step             { color: #A0AEC0; }
body.dark-mode .quote-step.active      { color: var(--primary); }
body.dark-mode .quote-step-num         { background-color: #4A5568; color: #E2E8F0; }

/* Step section headings */
body.dark-mode .contact-form-box h3 { color: #F7FAFC; }
body.dark-mode .contact-info-card h4 { color: #F7FAFC; }
body.dark-mode .contact-info-item h5 { color: #E2E8F0; }
body.dark-mode .contact-info-item p  { color: #A0AEC0; }

/* Misc */
body.dark-mode .breadcrumbs             { color: #A0AEC0; }
body.dark-mode .article-content-body blockquote { background-color: #2D3748; color: #E2E8F0; }
body.dark-mode .btn-secondary           { border-color: #CBD5E0; color: #CBD5E0; }
body.dark-mode .btn-secondary:hover     { background-color: #CBD5E0; color: #1A202C; }
body.dark-mode .service-card-content h3 { color: #F7FAFC; }
body.dark-mode .service-card-content p  { color: #A0AEC0; }
body.dark-mode .benefit-card h3         { color: #F7FAFC; }
body.dark-mode .benefit-card p          { color: #A0AEC0; }
body.dark-mode .text-muted, body.dark-mode [style*="color: var(--text-muted)"] { color: #A0AEC0 !important; }

/* Mobile nav dark mode */
body.dark-mode .main-navigation {
    background-color: #1E293B;
}
body.dark-mode .main-navigation > ul > li  { border-color: #4A5568; }
body.dark-mode .submenu-toggle              { color: #A0AEC0; border-color: #4A5568; }
body.dark-mode .main-navigation li > ul    { background-color: #2D3748; }
body.dark-mode .main-navigation li > ul li { border-color: #4A5568; }

/* Dark mode toggle button color */
body.dark-mode .dark-mode-toggle { color: #E2E8F0; }

/* ==========================================================================
   HIDE SUBMENU TOGGLE ARROW ON DESKTOP (only needed on mobile)
   ========================================================================== */
@media (min-width: 769px) {
    .submenu-toggle { display: none !important; }
}

/* ==========================================================================
   MOBILE NAVIGATION  (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Show hamburger button */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Hide phone number text on small screens */
    .header-right-action .header-contact-link span { display: none; }

    /* Main nav panel — fixed overlay below sticky header */
    .main-navigation {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: 9999;
        background-color: var(--bg-white);
        border-top: 3px solid var(--primary);
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Show when .nav-open is added by JS */
    .main-navigation.nav-open { display: block; }

    /* Top-level <ul> */
    .main-navigation > ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        padding: 0 !important;
        height: auto !important;
        gap: 0 !important;
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Top-level <li> — flex row so link + arrow sit side by side */
    .main-navigation > ul > li {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        height: auto !important;
        border-bottom: 1px solid var(--border-color);
        position: relative;
    }

    /* Top-level links */
    .main-navigation > ul > li > a {
        flex: 1;
        padding: 14px 20px !important;
        font-weight: 600;
        font-size: 1rem;
        border-bottom: none !important;
        color: var(--secondary);
    }

    /* Chevron toggle button (injected by JS) */
    .submenu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        background: none;
        border: none;
        border-left: 1px solid var(--border-color);
        cursor: pointer;
        color: var(--text-muted);
        font-size: 0.85rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .submenu-toggle:hover         { background-color: var(--bg-light); color: var(--primary); }
    .submenu-toggle i             { transition: transform 0.25s ease; }
    .submenu-open > .submenu-toggle i { transform: rotate(180deg); }
    .submenu-open > .submenu-toggle   { color: var(--primary); }

    /* Submenus — hidden by default */
    .main-navigation li > ul {
        display: none !important;
        flex-basis: 100%;
        width: 100%;
        position: static !important;
        top: auto !important;
        left: auto !important;
        box-shadow: none !important;
        border-top: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        height: auto !important;
        background-color: var(--bg-light);
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Show submenu when parent .li has .submenu-open */
    .main-navigation li.submenu-open > ul { display: block !important; }

    /* Submenu items */
    .main-navigation li > ul > li {
        display: block !important;
        width: 100%;
        height: auto !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .main-navigation li > ul > li > a {
        padding: 11px 20px 11px 40px !important;
        font-size: 0.9rem;
        display: block;
    }
}

/* ==========================================================================
   QUOTE PAGE — override inline grid style so it collapses on mobile
   ========================================================================== */
.quote-page-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 50px;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .quote-page-grid {
        display: block !important;
    }
    .quote-page-grid > * {
        width: 100%;
        margin-bottom: 30px;
    }

    /* Override any .grid with inline column styles (e.g. quote page) */
    .section > .container > .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   TABLET  (≤ 1024px) — All pages
   ========================================================================== */
@media (max-width: 1024px) {
    /* Hero */
    .hero-section .container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-actions { justify-content: center; }
    .hero-video-frame { max-width: 600px; margin: 0 auto; }

    /* Grids */
    .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

    /* Contact page */
    .contact-grid { grid-template-columns: 1fr; margin-top: 20px; }
    .contact-banner { height: 200px; }

    /* Article */
    .article-hero-grid { grid-template-columns: 1fr; gap: 30px; }

    /* Alternating rows */
    .alt-row { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .alt-row:nth-child(even) .alt-row-img-col { order: 0; }
}

/* ==========================================================================
   MOBILE  (≤ 768px) — All pages
   ========================================================================== */
@media (max-width: 768px) {
    .section { padding: 50px 0; }

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }

    .page-hero { padding: 40px 0; }
    .page-hero h1 { font-size: 1.75rem; }

    /* All 2/3/4-col grids collapse to 1 col */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

    /* Form rows */
    .form-row-2 { grid-template-columns: 1fr; gap: 0; }

    /* Switcher */
    .switcher-content { grid-template-columns: 1fr; gap: 20px; }
    .switcher-content-info ul { grid-template-columns: 1fr; }

    /* Hero content */
    .hero-content h1 { font-size: 2rem; }
    .hero-actions { flex-direction: column; align-items: center; gap: 12px; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr !important; }
    .contact-form-box { padding: 25px 20px; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* Single article */
    .article-hero-grid { grid-template-columns: 1fr !important; }
    .article-title-row h1 { font-size: 1.75rem; }
    .article-content-body { font-size: 1rem; }

    /* Quote steps — stack vertically */
    .quote-steps { flex-direction: column; align-items: flex-start; gap: 15px; }

    /* Section title */
    .section-title-wrap h2 { font-size: 1.6rem; }

    /* CTA banner */
    .cta-banner-content h2 { font-size: 1.6rem; }
    .cta-banner-section { padding: 50px 0; }

    /* Hide header phone link text */
    .header-right-action .header-contact-link { display: none; }

    /* CTA button shrink */
    .header-right-action .btn-sm { padding: 8px 14px; font-size: 0.85rem; }
}

/* ==========================================================================
   SMALL MOBILE  (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .container { padding: 0 15px; }
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.4rem; }
    .btn { padding: 11px 20px; font-size: 0.95rem; }
    .btn-lg { padding: 13px 25px; font-size: 1rem; }
    .section { padding: 40px 0; }
    .contact-form-box { padding: 20px 15px; }
    .contact-info-card { padding: 20px 15px; }
    .quote-step-num { width: 28px; height: 28px; font-size: 0.8rem; }
}