/**
 * Responsive CSS - Mobile and tablet fixes
 * Breakpoint: 768px (matches main.css)
 *
 * @package MKRST
 */

/* -------------------------------------------------------------------------
 * 1. Fix Horizontal Scroll on Mobile
 * ------------------------------------------------------------------------- */
html {
    overflow-x: clip;
}

body {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .page-frame {
        overflow-x: hidden;
        max-width: 100%;
    }

    .hero {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .site-main > *:first-child {
        padding-top: var(--space-6);
    }
}

/* -------------------------------------------------------------------------
 * 2. Two-Column Modules: Full-Width Stack on Mobile
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .content-block--2_columns .content-block__inner,
    .content-block__inner {
        grid-template-columns: 1fr !important;
    }

    .featured__inner {
        grid-template-columns: 1fr !important;
        direction: ltr;
    }

    .featured--image-right .featured__inner {
        direction: ltr;
    }

    .featured--image-right .featured__inner > * {
        direction: ltr;
    }

    .services-grid__items {
        grid-template-columns: 1fr !important;
    }

    .service-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .service-card__illustration {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .process-steps {
        padding-bottom: var(--space-32);
    }

    .process-step__illustration-wrapper,
    .process-step__illustration {
        max-width: 100%;
    }
}

/* -------------------------------------------------------------------------
 * 3. Max-Width Classes: 100% on Mobile
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .mw-40,
    .mw-60 {
        max-width: 100% !important;
    }
}

/* -------------------------------------------------------------------------
 * 4. Mobile Header: Logo Left, Menu Button Right
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header__inner {
        grid-template-columns: 1fr auto;
        gap: var(--space-4);
    }

    .header-nav--left,
    .header-nav--right {
        display: none !important;
    }

    .site-branding {
        justify-content: flex-start;
        order: 1;
    }

    .site-logo__img {
        width: 188px;
        max-width: 100%;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        background: transparent;
        border: var(--border-thin) solid var(--color-border);
        border-radius: var(--radius-full);
        color: var(--color-text);
        font-family: var(--font-sans);
        font-size: var(--text-sm);
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        cursor: pointer;
        order: 2;
        transition: color var(--transition-fast), border-color var(--transition-fast);
    }

    .menu-toggle:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .menu-toggle .screen-reader-text {
        position: static !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        clip-path: none !important;
        overflow: visible !important;
    }

    .menu-toggle .menu-toggle__icon {
        display: none;
    }
}

/* -------------------------------------------------------------------------
 * 5. Mobile Menu Drawer
 * ------------------------------------------------------------------------- */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 100vw);
    background-color: var(--color-bg);
    border-left: var(--border-thin) solid var(--color-border);
    z-index: calc(var(--z-fixed) + 10);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    padding: var(--space-8);
}

.mobile-menu-drawer--open {
    transform: translateX(0);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
}

.mobile-menu-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-fixed) + 9);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.mobile-menu-drawer__backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-drawer__nav ul,
.mobile-menu-drawer__nav .mobile-menu-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-menu-drawer__nav a {
    display: block;
    padding: var(--space-3) 0;
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: var(--border-thin) solid var(--color-border);
}

.mobile-menu-drawer__nav a:hover {
    color: var(--color-primary);
}

.mobile-menu-drawer__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-2);
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
}

.mobile-menu-drawer__close:hover {
    color: var(--color-primary);
}

.mobile-menu-drawer__footer {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: var(--border-thin) solid var(--color-border);
}

/* Only show drawer/backdrop on mobile */
@media (min-width: 769px) {
    .mobile-menu-drawer,
    .mobile-menu-drawer__backdrop {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
 * 6. Form Textarea: Full Width on Mobile (fix narrow "How can we help?" field)
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Form grid: allow children to shrink and use full width */
    .form-embed__form .gform_fields {
        min-width: 0;
    }

    .form-embed__form .gform_fields .gfield {
        min-width: 0;
    }

    /* Force textarea field to full width - override left_label layout */
    .form-embed__form .gfield.gfield--type-textarea,
    .form-embed__form .gform_fields .gfield:has(.ginput_container_textarea) {
        display: block !important;
        width: 100% !important;
        min-width: 0;
    }

    /* Ensure textarea container takes full width */
    .form-embed__form .ginput_container_textarea,
    .form-embed__form .ginput_container.ginput_container_textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    /* Textarea itself - full width and visible */
    .form-embed__form .ginput_container_textarea textarea,
    .form-embed__form .ginput_container.ginput_container_textarea textarea,
    .form-embed__form textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    /* If form uses left_label, stack label above on mobile */
    .form-embed__form.left_label .gfield:has(.ginput_container_textarea),
    .form-embed__form.right_label .gfield:has(.ginput_container_textarea) {
        display: flex !important;
        flex-direction: column !important;
    }

    .form-embed__form.left_label .gfield:has(.ginput_container_textarea) .gfield_label,
    .form-embed__form.right_label .gfield:has(.ginput_container_textarea) .gfield_label {
        width: 100%;
    }

    .form-embed__form.left_label .gfield:has(.ginput_container_textarea) .ginput_container_textarea,
    .form-embed__form.right_label .gfield:has(.ginput_container_textarea) .ginput_container_textarea {
        width: 100% !important;
    }
}