/**
 * nuclear-global-mobile.css
 *
 * THE SINGLE SOURCE OF TRUTH FOR ALL MOBILE RULES — TRUTHFORGE NUCLEAR
 *
 * This file governs:
 *   - Typography scale (h1–h4, p, small, utility text)
 *   - Section & container spacing
 *   - Alignment of headings, content, and UI elements
 *   - Horizontal padding / safe-zone insets
 *   - Global breadcrumb sizing
 *   - Utility overrides (no-overflow, safe scroll)
 *
 * CANONICAL BREAKPOINTS (Nuclear Standard — 3 values only):
 *   MOBILE  : ≤ 480px   — small phones (320px–480px)
 *   PHABLET : ≤ 768px   — large phones / phablets
 *   TABLET  : ≤ 1024px  — tablets and landscape phones
 *
 * LOADING ORDER: This file MUST load last (highest priority).
 *   It is registered with the handle 'tf-global-mobile' and
 *   depends on all other theme stylesheets.
 *
 * RULE: If alignment is X on this file, ALL pages on TruthForge Nuclear are X.
 *       If spacing is Y on this file, ALL pages on TruthForge Nuclear are Y.
 *       No page-specific file may contradict these global rules without
 *       explicit scoped override and a comment explaining the exception.
 *
 * @package Truthforge_Nuclear
 * @version 1.0.0
 */

/* ============================================================
   0. GLOBAL MOBILE DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */

:root {
    /* Spacing Scale */
    --tf-mobile-space-xs:  8px;
    --tf-mobile-space-sm:  12px;
    --tf-mobile-space-md:  16px;
    --tf-mobile-space-lg:  24px;
    --tf-mobile-space-xl:  32px; /* Matched to Cart Master Gap */
    --tf-mobile-space-2xl: 64px;

    /* Section Vertical Rhythm */
    --tf-section-padding-v-mobile:  48px;
    --tf-section-padding-v-small:   32px;

    /* Container Horizontal Safe-Zone */
    --tf-container-px-mobile: 16px;
    --tf-container-px-small:  12px;

    /* Typography */
    --tf-font-h1-mobile:    clamp(2rem, 9vw, 3.2rem);
    --tf-font-h2-mobile:    clamp(1.5rem, 6vw, 2.2rem);
    --tf-font-h3-mobile:    clamp(1.1rem, 4.5vw, 1.5rem);
    --tf-font-h4-mobile:    1.1rem;
    --tf-font-body-mobile:  15px;
    --tf-font-small-mobile: 13px;
    --tf-font-micro-mobile: 11px;

    /* Line Heights */
    --tf-lh-heading: 1.1;
    --tf-lh-body:    1.6;

    /* Letter Spacing */
    --tf-ls-utility: 0.1em;
    --tf-ls-label:   0.15em;
}


/* ============================================================
   1. TABLET — max-width: 1024px
   Applies to: tablets, landscape phones
   ============================================================ */

@media (max-width: 1024px) {

    /* --- Container Safe-Zone --- */
    .tf-container,
    .site-main,
    .entry-content {
        padding-left: var(--tf-container-px-mobile) !important;
        padding-right: var(--tf-container-px-mobile) !important;
        box-sizing: border-box !important;
    }

    /* --- Section Rhythm --- */
    section,
    .tf-section {
        padding-top: var(--tf-section-padding-v-mobile);
        padding-bottom: var(--tf-section-padding-v-mobile);
    }
}


/* ============================================================
   2. PHABLET — max-width: 768px
   THE PRIMARY MOBILE BREAKPOINT.
   Rules here apply to all phones ≤ 768px wide.
   ============================================================ */

@media (max-width: 768px) {

    /* --------------------------------------------------------
       2A. TYPOGRAPHY — Global Heading & Body Scale
       -------------------------------------------------------- */

    /* Base body */
    body {
        font-size: var(--tf-font-body-mobile) !important;
        line-height: var(--tf-lh-body) !important;
        -webkit-text-size-adjust: 100%; /* Prevent iOS font inflation */
    }

    /* Heading hierarchy */
    h1,
    .tf-h1 {
        font-size: var(--tf-font-h1-mobile) !important;
        line-height: var(--tf-lh-heading) !important;
    }

    h2,
    .tf-h2 {
        font-size: var(--tf-font-h2-mobile) !important;
        line-height: var(--tf-lh-heading) !important;
    }

    h3,
    .tf-h3 {
        font-size: var(--tf-font-h3-mobile) !important;
        line-height: 1.2 !important;
    }

    h4,
    .tf-h4 {
        font-size: var(--tf-font-h4-mobile) !important;
    }

    /* Body paragraph text */
    p {
        font-size: var(--tf-font-body-mobile) !important;
        line-height: var(--tf-lh-body) !important;
    }

    /* Small / caption / utility text */
    small,
    .tf-utility-text,
    .tf-label,
    .card-meta-line,
    .tf-breadcrumb-item,
    .tf-cart-subtitle {
        font-size: var(--tf-font-micro-mobile) !important;
        letter-spacing: var(--tf-ls-utility) !important;
    }

    /* --------------------------------------------------------
       2B. LAYOUT — Container & Section Spacing
       -------------------------------------------------------- */

    /* Horizontal safe-zone — enforced on all main containers */
    /* NUCLEAR EXEMPTION: Homepage and Shop/Archives use edge-to-edge grids */
    .site-main,
    .entry-content,
    .woocommerce,
    .woocommerce-page {
        padding-left: var(--tf-container-px-mobile) !important;
        padding-right: var(--tf-container-px-mobile) !important;
        box-sizing: border-box !important;
        max-width: 100vw !important;
    }

    body.home .site-main,
    body.home .entry-content,
    body.woocommerce-shop .site-main,
    body.woocommerce-archive .site-main,
    body.woocommerce-shop .woocommerce,
    body.woocommerce-archive .woocommerce {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Global horizontal scroll lockout */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Section vertical rhythm */
    section,
    .tf-section {
        padding-top: var(--tf-section-padding-v-mobile) !important;
        padding-bottom: var(--tf-section-padding-v-mobile) !important;
    }

    /* --------------------------------------------------------
       2C. ALIGNMENT — Nuclear Global Standard
       All section headings, page titles, and breadcrumbs
       are LEFT-aligned on mobile by default.
       Product card content is CENTER-aligned (handled in
       nuclear-shared-grid.css — not overridden here).
       -------------------------------------------------------- */

    /* Page-level headings */
    .tf-page-title,
    .page-title,
    .entry-title:not(.card-product-title) {
        text-align: left !important;
    }

    /* Section headings within content blocks */
    .tf-section-heading,
    .tf-grid-heading,
    .tf-collection-title {
        text-align: center !important; /* Collections & grids: centered for premium feel */
    }

    /* --------------------------------------------------------
       2D. BREADCRUMBS — Global Mobile Standard
       -------------------------------------------------------- */

    .tf-product-breadcrumb-strict,
    .shop-breadcrumbs-nuclear,
    nav.woocommerce-breadcrumb,
    .tf-breadcrumb-row {
        font-size: var(--tf-font-micro-mobile) !important;
        letter-spacing: var(--tf-ls-utility) !important;
        flex-wrap: wrap !important;
        row-gap: 4px !important;
        text-align: left !important;
    }

    .tf-breadcrumb-item,
    .tf-breadcrumb-separator {
        font-size: var(--tf-font-micro-mobile) !important;
    }

    /* --------------------------------------------------------
       2E. IMAGES — Responsive Defaults
       -------------------------------------------------------- */

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --------------------------------------------------------
       2F. BUTTONS — Global Mobile Touch Target
       All interactive buttons must meet 44px minimum height
       for comfortable touch interaction (Apple HIG standard).
       Page-specific button colours remain in their own files.
       -------------------------------------------------------- */

    .tf-button,
    .button,
    button:not(.toggle-btn):not(.qty-btn) {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* --------------------------------------------------------
       2G. TABLES — Force horizontal scroll on small screens
       -------------------------------------------------------- */

    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
}


/* ============================================================
   3. MOBILE — max-width: 480px
   Tighter values for small phones (320px–480px).
   ============================================================ */

@media (max-width: 480px) {

    /* --- Tighter horizontal safe-zone on small phones --- */
    .tf-container,
    .site-main,
    .entry-content,
    .woocommerce,
    .woocommerce-page {
        padding-left: var(--tf-container-px-small) !important;
        padding-right: var(--tf-container-px-small) !important;
    }

    /* --- Tighter section rhythm on small phones --- */
    section,
    .tf-section {
        padding-top: var(--tf-section-padding-v-small) !important;
        padding-bottom: var(--tf-section-padding-v-small) !important;
    }

    /* --- Body font: smallest screen — scale down slightly --- */
    body {
        font-size: 14px !important;
    }

    p {
        font-size: 14px !important;
    }

    /* --- Utility text: smallest readable size --- */
    small,
    .tf-utility-text,
    .tf-label,
    .card-meta-line,
    .tf-breadcrumb-item {
        font-size: 10px !important;
    }
}

/* ============================================================
 * 4. NUCLEAR GRID SYMMETRY LOCKDOWN (Fail-safe)
 * Enforces absolute edge-to-edge alignment for all commerce loops.
 * ============================================================ */

@media (max-width: 768px) {
    body.home .site-main,
    body.home .entry-content,
    body.home .container,
    body.home .tf-section,
    body.woocommerce-shop #primary,
    body.woocommerce-shop .container,
    body.woocommerce-archive #primary,
    body.woocommerce-archive .container,
    body.woocommerce-shop .site-main,
    body.woocommerce-archive .site-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Feature Highlight section reuses the .container class but is not a
       commerce grid — it needs its own horizontal safe-zone, not the
       edge-to-edge treatment above (which was flattening its CTA button
       flush against the screen edges). */
    body.home .container.feature-grid-wrapper-rebuilt {
        padding-left: var(--tf-container-px-mobile) !important;
        padding-right: var(--tf-container-px-mobile) !important;
    }
}