/* assets/css/responsive.css */

@media (max-width: 1100px) {
    .site-header {
        padding: 15px 4%;
    }

    .navigation-pill {
        padding: 10px 20px;
    }

    .nav-menu {
        gap: 15px;
    }

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

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 grid layout on tablets */
        gap: 40px;
    }

    .footer-heading {
        margin-bottom: 20px;
    }

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

    .corporate-container {
        gap: 40px;
    }

    .section-main-heading {
        font-size: 2.3rem;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* Forces the popular package to match width scales underneath if odd counts occur */
    .premium-featured-card {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .mobile-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .mobile-nav-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: var(--text-primary);
        border-radius: 10px;
        transition: var(--transition-smooth);
    }

    /* Transform hamburger to custom 'X' close state */
    .mobile-nav-toggle.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .mobile-nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav-toggle.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .navigation-pill {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        height: 100vh;
        border-radius: 0;
        background: rgba(26, 30, 38, 0.98);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-left: 1px solid var(--glass-border);
        border-top: none;
        border-bottom: none;
        padding: 120px 40px;
        transition: var(--transition-smooth);
    }

    .navigation-pill.active {
        right: 0;
    }

    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

    .nav-menu li a {
        font-size: 1.4rem;
    }

    .header-action {
        margin-right: 50px;
    }

    .hero-section {
        padding-top: 150px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        /* Stacks the two columns vertically on tablet screens */
        gap: 50px;
    }

    .hero-stats-panel {
        flex-direction: row;
        /* Horizontal cards for crisp tablet viewing layouts */
        flex-wrap: wrap;
    }

    .stat-card {
        flex: 1 1 calc(50% - 10px);
    }

    .hero-form-panel {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        /* Perfectly centers the form card once layout switches to a single column */
    }

    .corporate-container {
        grid-template-columns: 1fr;
        /* Collapses seamlessly into a single balanced column flow */
        gap: 60px;
    }

    .context-sticky-column {
        position: relative;
        top: 0;
        /* Clear sticky hooks on tablet viewports */
    }

    .split-container {
        grid-template-columns: 1fr;
        /* Collapses asymmetric split columns down cleanly */
        gap: 50px;
        padding: 0 20px;
    }

    .sticky-content-wrapper {
        position: relative;
        top: 0;
    }

    .sticky-content-wrapper h2 {
        font-size: 2.2rem;
    }

    .service-split-card {
        padding: 30px;
    }

    .disbursement-grid-matrix {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .contact-split-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-info-panel {
        text-align: center;
    }

    .communications-matrix {
        align-items: center;
    }

    .comms-node {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .faq-assistance-callout {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
        gap: 30px;
        max-width: 378px;
        ;
    }

    .callout-actions-matrix {
        width: 100%;
        flex-direction: column;
    }

    .btn-callout-action {
        width: 100%;
        /* Stacks beautifully full-width on tablet viewports */
    }

    .faq-assistance-callout {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
        gap: 30px;
    }

    .callout-actions-matrix {
        width: 100%;
        flex-direction: column;
    }

    .btn-callout-action {
        width: 100%;
        /* Stacks beautifully full-width on tablet viewports */
    }

    .legal-layout-split-grid {
        grid-template-columns: 1fr;
        /* Stacks column framework completely horizontal on tablet fields */
        gap: 40px;
    }

    .legal-sidebar-nav-wrapper {
        position: relative;
        top: 0;
    }

    .legal-sticky-menu {
        flex-direction: row;
        overflow-x: auto;
        /* Transforms sidebar index menu to a clean horizontal swipe carousel bar */
        padding: 10px;
        white-space: nowrap;
        gap: 8px;
    }

    .menu-title-header {
        display: none;
        /* Conceals vertical context label */
    }

    .menu-nav-link {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .legal-text-body-panel {
        padding: 35px 30px;
    }

    .portal-split-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 30px;
    }

    .calc-container-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 30px;
    }

}

@media (max-width: 767px) {
    .header-action {
        display: none;
        /* Hide phone pill on tiny screens to avoid layout overlap */
    }

    .section-title {
        font-size: 2rem;
    }
    
    .button-cta {
        display:none !important;
    }

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

    .footer-container {
        grid-template-columns: 1fr;
        /* Clean single row list stack on phones */
        gap: 35px;
    }

    .brand-info {
        align-items: flex-start;
    }

    .bottom-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .email-value {
        font-size: 0.9rem;
        /* Prevent layout clipping overflow text lines on smaller viewports */
    }

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

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .hero-cta-group {
        flex-direction: column;
        /* Buttons stack to full width dynamically on phones */
        gap: 12px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        text-align: center;
        width: 100%;
    }

    .form-card {
        padding: 25px 20px;
        /* Gives smaller screens extra room for text inputs */
    }

    .strike-off-section {
        padding: 80px 0;
    }

    .section-main-heading {
        font-size: 1.9rem;
    }

    .reason-premium-card {
        padding: 25px;
        gap: 15px;
    }

    .wa-chat-widget {
        bottom: 20px;
        right: 20px;
    }

    .wa-chat-window {
        width: calc(100vw - 40px);
        /* Extends nicely inside the mobile display bounding areas */
        bottom: 75px;
    }

    .back-to-top-btn {
        bottom: 95px;
        /* Shifts cleanly closer to bottom-corner zones on smartphones */
        right: 25px;
        width: 44px;
        height: 44px;
    }

    .procedural-timeline {
        padding-left: 0;

        ::before {
            display: none;
            /* Strip out timeline lines on small screen grids */
        }
    }

    .node-marker-box {
        position: relative;
        left: 0;
        margin-bottom: 15px;
    }

    .node-circle {
        display: none;
    }

    .node-content-card {
        padding: 25px;
    }

    .timeline-action-card {
        padding: 30px 20px;
    }

    .action-buttons-flex {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-action,
    .btn-secondary-action {
        width: 100%;
        box-sizing: border-box;
    }

    .timeline-header h2 {
        font-size: 1.9rem;
    }

    .urgency-banner {
        font-size: 0.95rem;
    }

    .pricing-matrix-section {
        padding: 80px 0;
    }

    .pricing-header h2 {
        font-size: 2rem;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .premium-featured-card {
        grid-column: span 1;
        order: -1;
        /* Pushes the popular card up top on mobile devices */
    }

    .pricing-card {
        padding: 35px 25px;
    }

    .statutory-notice-box {
        padding: 25px 20px;
    }

    .disbursement-grid-matrix {
        grid-template-columns: 1fr;
        /* Flattens down directly on mobile layout rows */
        gap: 20px;
    }

    .corporate-faq-section {
        padding: 70px 0;
    }

    .faq-header h2 {
        font-size: 1.85rem;
    }

    .faq-trigger {
        padding: 20px;
    }

    .faq-question {
        font-size: 1.05rem;
    }

    .faq-panel-inner {
        padding: 0 20px 20px 20px;
    }

    .corporate-testimonials-section {
        padding: 80px 0;
    }

    .testimonials-header h2 {
        font-size: 1.95rem;
    }

    .testimonial-slide {
        padding: 0 10px;
    }

    .testimonial-feedback {
        font-size: 1.1rem;
        line-height: 1.5;
        margin-bottom: 25px;
    }

    .slider-navigation-controls {
        gap: 15px;
    }

    .split-inputs {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-form-panel {
        padding: 30px 20px;
    }

    .contact-info-panel h2 {
        font-size: 2rem;
    }

    .legal-hero-banner {
        padding: 60px 0;
    }

    .legal-hero-banner h1 {
        font-size: 1.95rem;
    }

    .legal-meta-timeline {
        flex-direction: column;
        gap: 8px;
        border-radius: 16px;
        padding: 12px 20px;
    }

    .meta-divider {
        display: none;
    }

    .rights-interactive-grid {
        grid-template-columns: 1fr;
    }

    .card-entry-row {
        flex-direction: column;
        gap: 4px;
    }

    .entry-label,
    .entry-value {
        width: 100%;
    }

    .calc-hero-banner h1 {
        font-size: 1.8rem;
    }

    .calc-card {
        padding: 25px;
    }

    .cart-table thead {
        display: none;
    }

    .cart-table tr {
        display: block;
        margin-bottom: 15px;
        background: var(--glass-bg);
        padding: 10px;
        border-radius: 10px;
    }

    .cart-table td {
        display: flex;
        justify-content: space-between;
        padding: 8px;
    }

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

}