/*
 * Amanah Theme — Mobile Responsive Fix  v3.0
 * ══════════════════════════════════════════════════════════════
 * File:    assets/css/am-mobile-fix.css
 *
 * KEY CHANGE FROM v2:
 *   • No horizontal pill strip on mobile — ToC stays as a compact
 *     vertical list, identical to desktop but with tighter padding.
 *     User preference: readable contents, sticky while scrolling.
 *   • The 2459px aside explosion is caused by `position: sticky`
 *     computing against the wrong containing block when `overflow`
 *     is set on a parent. Fix: containment via `max-width` + 
 *     `box-sizing` on the aside itself, not overflow manipulation.
 *   • Grid collapse now uses `display: block` instead of 
 *     `grid-template-columns: 1fr` — removes the grid formatting
 *     context entirely so column sizing cannot interfere.
 *
 * @package Amanah
 * ══════════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════════════════
   BASE CONTAINMENT — scoped, never touches html/body
   Prevents the legal page wrapper from creating horizontal scroll.
   Uses max-width + box-sizing, NOT overflow:hidden (which breaks
   position:sticky on child elements in Safari/Chrome).
══════════════════════════════════════════════════════════════ */

.am-legal,
.am-legal-body,
.am-legal-layout,
.am-legal-toc,
.am-legal-content,
.am-legal-toc-inner {
    box-sizing: border-box;
    max-width: 100%;
}

/* Grid children must be able to shrink below their content size */
.am-legal-toc,
.am-legal-content {
    min-width: 0;
}


/* ══════════════════════════════════════════════════════════════
   DESKTOP (≥ 1025px) — no changes, use existing page-content.css
   These rules only activate below 1024px.
══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   TABLET + MOBILE (≤ 1024px)
   Stack layout: ToC above content, both full width.
   ToC remains as a compact vertical list — NO horizontal pills.
   Users can follow it whilst scrolling, exactly as on desktop.
══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* 1. Replace the 2-col grid with stacked blocks.
       Use `display: block` not `grid-template-columns: 1fr`
       — removes the grid formatting context entirely so the
       column sizing engine can't interfere with child widths. */
    .am-legal-layout {
        display: block !important;
        width: 100% !important;
    }

    /* 2. ToC sidebar: full width block, not sticky.
       Do NOT set overflow on this element — it breaks sticky
       on children in WebKit. Width containment via max-width only. */
    .am-legal-toc {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin-bottom: 32px !important;
        /* Remove the sticky top offset */
        top: auto !important;
    }

    /* 3. ToC inner container: vertical column, compact */
    .am-legal-toc-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Compact border treatment for mobile */
        background: var(--am-white);
        border: 1px solid rgba(201, 168, 76, 0.12);
        border-radius: var(--am-radius);
        overflow: hidden;
        padding: 0;
    }

    /* 4. Contents label — show it, style it as a compact header */
    .am-legal-toc-label {
        display: block !important;
        font-size: 9px !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase !important;
        color: var(--am-gold) !important;
        font-weight: 700 !important;
        padding: 14px 16px 12px !important;
        border-bottom: 1px solid rgba(201, 168, 76, 0.1) !important;
        margin-bottom: 0 !important;
    }

    /* 5. Nav: vertical list, compact links
       This stays as a column — no pills, no horizontal scroll. */
    .am-legal-toc nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        gap: 0 !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 6. Individual ToC links — compact, full width rows */
    .am-legal-toc-link {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* allow wrapping on very long labels */
        border: none !important;
        border-left: 2px solid transparent !important;
        border-radius: 0 !important;
        padding: 8px 16px !important;
        font-size: 12px !important;
        color: var(--am-grey) !important;
        text-decoration: none !important;
        background: transparent !important;
        transition: all 0.2s ease;
        line-height: 1.4 !important;
    }

    .am-legal-toc-link:hover,
    .am-legal-toc-link.active {
        color: var(--am-black) !important;
        background: var(--am-off-white) !important;
        border-left-color: var(--am-gold) !important;
        border-radius: 0 !important;
    }

    /* 7. Hide the CTA button — not useful on mobile */
    .am-legal-toc-cta {
        display: none !important;
    }

    /* 8. Legal content: full width */
    .am-legal-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   COMPACT MOBILE (≤ 640px) — tighten ToC further on phones
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    .am-legal-toc {
        margin-bottom: 24px !important;
    }

    .am-legal-toc-link {
        font-size: 11px !important;
        padding: 7px 14px !important;
    }

    .am-legal-toc-label {
        font-size: 8px !important;
        padding: 12px 14px 10px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   META STRIP — wrap on narrow phones
══════════════════════════════════════════════════════════════ */

.am-legal-meta-inner {
    flex-wrap: wrap !important;
}

.am-legal-meta-item {
    flex: 1 1 140px;
    min-width: 120px;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .am-legal-meta-inner {
        flex-direction: column !important;
    }
    .am-legal-meta-item {
        width: 100%;
        flex: none;
        min-width: 0;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(201, 168, 76, 0.06);
    }
    .am-legal-meta-item:last-child {
        border-bottom: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   INFO TABLE — long values on narrow phones
══════════════════════════════════════════════════════════════ */

.am-legal-info-table {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 600px) {
    .am-legal-info-row {
        flex-direction: column !important;
        gap: 3px;
        padding: 12px 16px;
    }
    .am-legal-info-row strong {
        text-align: left !important;
        word-break: break-word;
    }
}


/* ══════════════════════════════════════════════════════════════
   CONTACT STRIP — button stack on mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .am-legal-contact-inner {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

.am-legal-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 480px) {
    .am-legal-contact-actions {
        flex-direction: column;
    }
    .am-legal-contact-actions .am-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════════════════════
   PAGE NAV GRID — correct breakpoints for mid Android
══════════════════════════════════════════════════════════════ */

@media (min-width: 481px) and (max-width: 767px) {
    .am-about-pagenav-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 480px) {
    .am-about-pagenav-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   ABOUT FIG — ghost border bleed on Safari mobile
══════════════════════════════════════════════════════════════ */

@media (max-width: 850px) {
    .am-about-fig::after {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   HERO — landscape short screens
══════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
    .am-legal-hero,
    .am-about-hero,
    .am-vault-hero,
    .am-auth-hero,
    .am-faq-hero,
    .am-charity-hero,
    .am-shipping-hero,
    .am-contact-hero,
    .am-refunds-hero,
    .am-awp-hero,
    .am-history-hero,
    .am-hallmark-hero {
        min-height: auto !important;
        padding: 36px 20px 24px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   CART PANEL — narrow phone overflow
══════════════════════════════════════════════════════════════ */

.am-cart-panel {
    width: min(420px, calc(100vw - 20px));
    max-width: 92vw;
}


/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT — iOS sticky gallery jank
══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .am-sp-gallery,
    .am-product-gallery {
        position: static !important;
        top: auto !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   TRUST BAR — Safari 15 visibility bug
══════════════════════════════════════════════════════════════ */

.am-duplicate {
    display: none;
    visibility: hidden;
}
@media (max-width: 850px) {
    .am-duplicate {
        display: flex !important;
        visibility: visible !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   SAFE AREA INSETS — notched iPhones
══════════════════════════════════════════════════════════════ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .am-footer-bottom {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
    @media (max-width: 768px) {
        .am-nav {
            padding-left: max(20px, env(safe-area-inset-left));
            padding-right: max(20px, env(safe-area-inset-right));
        }
    }
}


/* ══════════════════════════════════════════════════════════════
   iOS INPUT ZOOM PREVENTION — scoped to am-page wrappers
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .am-page input[type="text"],
    .am-page input[type="email"],
    .am-page input[type="tel"],
    .am-page input[type="number"],
    .am-page input[type="password"],
    .am-page input[type="search"],
    .am-page textarea,
    .am-page select,
    .am-contact-field input,
    .am-contact-field textarea,
    .am-contact-field select,
    .am-contact-cf7-wrap input,
    .am-contact-cf7-wrap textarea,
    .am-contact-cf7-wrap select {
        font-size: 16px !important;
        touch-action: manipulation;
    }
    .am-cart-qty-val,
    .am-sp-atc .quantity input[type="number"] {
        font-size: 16px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   TOUCH TARGETS — 44px minimum (WCAG 2.5.5)
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .am-nav-icon {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .am-cart-qty-btn {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ══════════════════════════════════════════════════════════════
   HERO PARTICLES — off on mobile for paint performance
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .am-hero-particle,
    .am-hero-coin-glow,
    .am-hero-scroll {
        display: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .am-ticker-track,
    .am-hero-coin,
    .am-hero-coin-glow,
    .am-hero-particle,
    .am-hero-scroll-line,
    .am-hallmark-headline-gold,
    .am-vault-headline-city,
    .am-auth-headline-accent,
    .am-awp-headline-mid {
        animation: none !important;
    }
}