/**
 * Tax Solutions SA - Responsive Styles
 * Breakpoints: Mobile < 576px, Tablet 576-992px, Desktop > 992px
 */

/* ============================================
   TABLET (max-width: 992px)
   ============================================ */
@media (max-width: 992px) {
    :root {
        --header-height: 70px;
    }

    /* Typography */
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }

    /* Navigation */
    .mobile-menu-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 400px;
        height: 100vh;
        background: white;
        flex-direction: column;
        padding: var(--space-20) var(--space-8) var(--space-8);
        box-shadow: var(--shadow-xl);
        transition: right var(--transition-base);
        z-index: 200;
    }

    .main-nav.active {
        right: 0;
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .nav-link {
        padding: var(--space-4);
        font-size: var(--text-lg);
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: var(--space-6);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base);
    }

    .nav-item.dropdown-open .dropdown-menu {
        max-height: 500px;
    }

    .nav-cta {
        margin: var(--space-6) 0 0;
        width: 100%;
        justify-content: center;
    }

    /* Mobile menu overlay - must be inside header for shared stacking context */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all var(--transition-base);
        z-index: 150;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Mobile menu close button */
    .mobile-menu-close {
        position: absolute;
        top: var(--space-6);
        right: var(--space-6);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-2xl);
        color: var(--neutral-600);
        z-index: 10;
        cursor: pointer;
        background: none;
        border: none;
    }

    /* Ensure nav links are clickable */
    .main-nav.active .nav-menu {
        position: relative;
        z-index: 5;
        pointer-events: auto;
    }

    .main-nav.active .nav-link {
        pointer-events: auto;
    }

    /* Hamburger animation */
    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Hero */
    .hero {
        min-height: 500px;
    }

    .hero-title {
        font-size: var(--text-4xl);
    }

    .hero-features {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    /* Grids */
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }

    .footer-col:first-child {
        grid-column: span 2;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        order: -1;
    }

    .about-intro {
        grid-template-columns: 1fr;
    }

    .about-image {
        order: -1;
    }

    .service-detail {
        grid-template-columns: 1fr;
    }

    .service-sidebar {
        position: static;
    }

    /* Newsletter */
    .newsletter-content {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-input-group {
        flex-direction: column;
    }

    .newsletter-input-group input {
        width: 100%;
    }

    /* Mega Menu - convert to mobile dropdown */
    .mega-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0 var(--space-4);
        min-width: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base);
    }

    .nav-item.dropdown-open .mega-menu {
        max-height: 1000px;
    }

    .mega-menu-3col,
    .mega-menu-2col {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .mega-menu-grid a {
        padding: var(--space-2) var(--space-3);
    }

    /* Industry grid tablet */
    .industry-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--space-4);
    }

    /* Capability grid tablet */
    .capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Detail layout */
    .detail-layout {
        grid-template-columns: 1fr;
    }

    .detail-sidebar {
        position: static;
    }

    /* Footer nav row */
    .footer-nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }

    /* Support grid tablet */
    .support-grid {
        grid-template-columns: 1fr;
    }

    /* Segment grid tablet */
    .segment-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    /* Capability detail grids tablet */
    .service-items-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .industry-application-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE (max-width: 576px)
   ============================================ */
@media (max-width: 576px) {
    :root {
        --header-height: 60px;
    }

    /* Base */
    .container {
        padding: 0 var(--space-4);
    }

    .section {
        padding: var(--space-12) 0;
    }

    /* Typography */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    h4 { font-size: var(--text-lg); }

    .section-header {
        margin-bottom: var(--space-8);
    }

    .section-header p {
        font-size: var(--text-base);
    }

    /* Top Bar */
    .top-bar {
        display: none;
    }

    /* Header */
    .logo img {
        height: 40px;
    }

    /* Hero */
    .hero {
        min-height: 450px;
        padding: var(--space-12) 0;
    }

    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-subtitle {
        font-size: var(--text-base);
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-features {
        flex-direction: column;
        gap: var(--space-6);
    }

    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }

    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base);
    }

    /* Cards */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: var(--space-6);
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .resources-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-col:first-child {
        grid-column: span 1;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }

    /* Contact */
    .contact-form-card,
    .contact-info-card {
        padding: var(--space-6);
    }

    /* Page Headers */
    .page-header {
        padding: var(--space-10) 0;
    }

    .breadcrumb {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Toast */
    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
        top: var(--space-4);
    }

    .toast {
        max-width: none;
    }

    /* Back to Top */
    .back-to-top {
        bottom: var(--space-4);
        right: var(--space-4);
        width: 45px;
        height: 45px;
    }

    /* CTA Section */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Legal Pages */
    .legal-content {
        padding: var(--space-6);
    }

    /* Testimonials */
    .testimonial-quote {
        font-size: var(--text-lg);
    }

    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    /* Industry grid mobile */
    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .industry-card {
        padding: var(--space-4);
    }

    .industry-card-icon {
        width: 44px;
        height: 44px;
    }

    .industry-card p {
        display: none;
    }

    /* Capability grid mobile */
    .capability-grid {
        grid-template-columns: 1fr;
    }

    /* Philosophy grid mobile */
    .philosophy-grid {
        grid-template-columns: 1fr;
    }

    .philosophy-card {
        padding: var(--space-6);
    }

    /* Insights grid mobile */
    .insights-grid {
        grid-template-columns: 1fr;
    }

    /* Footer nav row mobile */
    .footer-nav-links {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    /* Support grid mobile */
    .support-grid {
        grid-template-columns: 1fr;
    }

    .support-card {
        flex-direction: column;
        text-align: center;
    }

    .support-card-icon {
        margin: 0 auto;
    }

    /* Segment grid mobile */
    .segment-grid {
        grid-template-columns: 1fr;
    }

    /* Capability detail grids mobile */
    .service-items-grid {
        grid-template-columns: 1fr;
    }

    .industry-application-grid {
        grid-template-columns: 1fr;
    }

    .process-step {
        gap: var(--space-4);
    }

    .process-step-number {
        width: 40px;
        height: 40px;
        font-size: var(--text-base);
    }

    /* Insight card image mobile */
    .insight-card-image {
        height: 140px;
    }
}

/* ============================================
   LARGE DESKTOP (min-width: 1400px)
   ============================================ */
@media (min-width: 1400px) {
    :root {
        --container-max: 1400px;
    }

    h1 { font-size: var(--text-6xl); }

    .hero {
        min-height: 700px;
    }

    .hero-title {
        font-size: 4rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .top-bar,
    .main-header,
    .newsletter-section,
    .main-footer,
    .back-to-top,
    .toast-container {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
        background: none;
        color: #000;
    }

    .hero::before {
        display: none;
    }

    .hero-title,
    .hero h1 {
        color: #000;
    }

    .btn {
        border: 1px solid #000;
        background: none;
        color: #000;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --primary-600: #1A1A1A;
        --accent-500: #B8860B;
        --neutral-600: #4A4A4A;
    }

    .btn-primary {
        background: var(--accent-500);
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   DARK MODE PREFERENCE (Future Enhancement)
   ============================================ */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --neutral-50: #1a1a1a;
        --neutral-100: #2d2d2d;
        --neutral-200: #404040;
        --neutral-800: #e0e0e0;
        --neutral-900: #f5f5f5;
    }
}
*/