/* ═══════════════════════════════════════════════
   RESPONSIVE: TABLET (768px - 1200px)
   ═══════════════════════════════════════════════ */

@media (max-width: 1200px) {

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

    .mega-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-primary);
        flex-direction: column;
        padding: 4rem var(--space-lg) var(--space-lg);
        overflow-y: auto;
        z-index: 9999;
    }

    .mega-menu.mobile-open {
        display: flex;
    }

    .mega-menu-item > a {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-size: 1.0625rem;
    }

    .mega-menu-panel {
        position: static;
        box-shadow: none;
        border-top: none;
        background: rgba(255,255,255,0.05);
        padding: 0 var(--space-md);
    }

    .mega-menu-list {
        grid-template-columns: 1fr;
    }

    .mega-menu-subitem a {
        color: rgba(255,255,255,0.85);
        padding: 0.5rem 0;
        font-size: 0.9375rem;
    }

    .mega-menu-subitem a:hover {
        background: rgba(255,255,255,0.1);
        color: var(--color-gold);
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 10000;
    }

    body.menu-open {
        overflow: hidden;
    }

    /* Layout adjustments */
    .page-layout {
        grid-template-columns: 1fr;
    }

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

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .footer-col-1 {
        grid-column: 1 / -1;
    }

    .links-directory {
        column-count: 1;
    }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE: MOBILE (< 768px)
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Typography */
    h1, .page-title { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }

    /* Hero */
    .hero-carousel { height: 350px; }
    .carousel-tagline { font-size: 1.375rem; }
    .carousel-ctas {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }
    .carousel-ctas .btn {
        width: 200px;
    }
    .carousel-prev,
    .carousel-next {
        display: none;
    }

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

    /* Events */
    .event-item {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .event-date-badge {
        flex-direction: row;
        gap: var(--space-sm);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

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

    /* Logo */
    .logo-bar .custom-logo-link img {
        max-height: 80px;
    }

    /* Utility bar */
    .utility-social {
        display: none;
    }

    /* Full width template */
    .page-layout-full {
        padding: var(--space-md);
    }

    /* Logo grid */
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Join CTA */
    .join-cta h2 { font-size: 1.5rem; }
    .join-cta p { font-size: 1rem; }

    /* Events Calendar */
    .events-hero { padding: var(--space-xl) var(--space-md); }
    .events-hero h1 { font-size: 1.5rem; }
    .cal-subscribe-grid { grid-template-columns: 1fr 1fr; }

    /* ── Member Bar ── */
    .member-bar__welcome { display: none; }
    .member-bar__inner { gap: 0.15rem; }
    .member-bar__link { font-size: 0.72rem; padding: 0.2rem 0.35rem; }

    /* ── Hub Landing Pages ── */
    .hub-grid { grid-template-columns: 1fr; }
    .hub-hero h1 { font-size: 1.3rem; }
    .hub-card { padding: 1rem; }
    .hub-card__icon { width: 40px; height: 40px; }

    /* ── Mountain Flying Hub ── */
    .mf-grid { grid-template-columns: 1fr; }
    .mf-card { padding: 1rem; }

    /* ── Fly-In Hub ── */
    .flyin-resource-grid { grid-template-columns: 1fr; }
    .flyin-season-grid { grid-template-columns: 1fr; }
    .flyin-welcome-grid { grid-template-columns: 1fr; }
    .flyin-sub-nav__list { gap: 0.25rem; }
    .flyin-sub-nav__item { font-size: 0.78rem; padding: 0.35rem 0.6rem; }

    /* ── Registration Form ── */
    .event-rsvp__fields { grid-template-columns: 1fr; }
    .reg-payment-options { gap: 0.5rem; }
    .reg-payment-option { padding: 0.75rem; }

    /* ── Event Management ── */
    .mgmt-tabs { flex-wrap: wrap; gap: 0.25rem; }
    .mgmt-tab { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
    .mgmt-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .mgmt-expense-form { grid-template-columns: 1fr; }
    .mgmt-table { font-size: 0.78rem; }
    .mgmt-table th, .mgmt-table td { padding: 0.3rem 0.4rem; }

    /* ── Chair Dashboard ── */
    .chair-tabs { flex-wrap: wrap; gap: 0.25rem; }
    .chair-tab { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
    /* Overridden by the template's own <style>; see template-flyin-chair.php. */
    .chair-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .chair-financial-row { grid-template-columns: 1fr 1fr; font-size: 0.78rem; }

    /* ── Leaderboard ── */
    .lb-blocks { grid-template-columns: 1fr; }
    .lb-block--wide { grid-column: auto; }
    .lb-block__header { padding: 1rem; }
    .lb-block__stat { font-size: 1.4rem; }
    .lb-stats-bar { gap: 1rem; }
    .lb-stats-bar__value { font-size: 1.5rem; }

    /* ── Ride Board / Safety Pilot ── */
    .rb-tabs { gap: 0; }
    .rb-tab { padding: 0.5rem 1rem; font-size: 0.82rem; }
    .rb-ride { flex-direction: column; gap: 0.5rem; }
    .rb-ride__date { align-self: flex-start; }

    /* ── Mountain Pass Status ── */
    .mp-grid { grid-template-columns: 1fr; }
    .mp-card__header { flex-direction: column; gap: 0.25rem; }
    .mp-card__links { flex-direction: column; }

    /* ── DA Calculator ── */
    .da-inputs { grid-template-columns: 1fr; }
    .da-presets { gap: 0.3rem; }
    .da-preset { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
    .da-result__value { font-size: 2rem; }

    /* ── Accidents Page ── */
    .acc-causes { grid-template-columns: 1fr; }
    .acc-links { grid-template-columns: 1fr; }
    #acc-map { height: 300px; }

    /* ── Practice Areas ── */
    .pa-controls { gap: 0.3rem; }
    .pa-toggle { font-size: 0.72rem; padding: 0.25rem 0.5rem; }
    .pa-area-btn { font-size: 0.78rem; padding: 0.3rem 0.7rem; }
    #pa-map { height: 50vh; min-height: 300px; }

    /* ── Tracker ── */
    .tracker-content { flex-direction: column; }

    /* ── My Account ── */
    .cpa-my-account .event-rsvp__fields { grid-template-columns: 1fr; }
    .cpa-my-account form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* ── Homepage ── */
    .home-content-grid { grid-template-columns: 1fr; }
    .home-content-sidebar { margin-top: var(--space-lg); }
    .home-merch-fb-grid { grid-template-columns: 1fr !important; }
    .home-media-row { flex-direction: column; }
    .home-media-card--presents { flex-direction: column; }

    /* ── Fly Together & Community sections ── */
    .flyin-community-grid { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE: SMALL MOBILE (< 480px)
   ═══════════════════════════════════════════════ */

@media (max-width: 480px) {
    .member-bar__link { font-size: 0.68rem; padding: 0.15rem 0.3rem; }
    .da-presets { gap: 0.2rem; }
    .da-preset { font-size: 0.65rem; }
    .lb-block__stat { font-size: 1.2rem; }
    .lb-stats-bar { gap: 0.75rem; }
    .lb-stats-bar__value { font-size: 1.2rem; }
    .mgmt-stat-grid { grid-template-columns: 1fr; }
    .chair-stat-grid { grid-template-columns: 1fr; } /* see template-flyin-chair.php */
    .flyin-sub-nav__item { font-size: 0.72rem; padding: 0.3rem 0.5rem; }

    /* User Menu */
    .user-menu__toggle { font-size: 0.72rem; padding: 0.25rem 0.5rem; }
    .user-menu__dropdown { right: 0; min-width: 170px; }
    .user-menu__login { font-size: 0.72rem; }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE: HORIZONTAL OVERFLOW GUARDS
   ═══════════════════════════════════════════════

   Measured on a 390px viewport (iPhone 14/15) against staging. Each rule
   below fixes a page that scrolled sideways, which on a phone reads as a
   broken page: the reader drags the whole layout left and right to read a
   line. Kept together so the next audit can re-run the same measurements.
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* The compass-rose watermark sits 60px outside its column and is 300px
       wide, so on a phone it dragged roughly 30px of empty space onto every
       page built with .page-content — the guides, the FAQ, the newsletter,
       CPA Presents, the corporate members page, join-today. Decoration is
       not worth a sideways scroll on the whole site. */
    /* moved to its own query below — it overflows on tablets too */

    /* Filter bars are a flex row that never wrapped: 597px wide on the
       classifieds and 511px on the calendar. Let them wrap and let the
       controls use the width they have. */
    .events-filters {
        flex-wrap: wrap;
        width: 100%;
    }
    .events-filters select,
    .events-filters input,
    .events-filters .search-input {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .events-filters button { flex: 0 0 auto; }

    /* Wide data tables scroll inside their own box rather than pushing the
       page sideways. The DPE directory was 421px on a 390px screen. */
    .dpe-table,
    .cdash-table,
    .cpa-guide__table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Belt and braces: nothing should be able to drag the page sideways.
       Individual overflows are still worth fixing — this only stops one
       from breaking the whole layout. */
    html, body { overflow-x: hidden; }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE: CRAMPED LAYOUTS ON A PHONE
   ═══════════════════════════════════════════════

   These do not scroll sideways; they squeeze. A two-column form field on a
   390px screen leaves ~180px per input, a three-column one ~113px, and the
   six-column icon picker on GPS Art ~62px. Below 600px they stack.
   ═══════════════════════════════════════════════ */

@media (max-width: 600px) {

    /* Twenty-six grids across the member pages are written as inline style
       attributes on the div — the ride board, event submission, the volunteer
       log, ground school, the DPE listing, the migration wizard, the Flying
       Hub, and the contact-host form that appears on every event page. An
       inline attribute outranks any stylesheet, so overriding it needs
       !important. Below 600px a second column is not worth having: two
       columns leave ~180px each, three ~113px.

       Grids that size themselves with auto-fit or auto-fill already collapse
       on their own and are left alone. */
    [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
        grid-template-columns: 1fr !important;
    }

    /* Named grids whose own mobile rules are shadowed by the template's
       inline <style> block, which the browser reads after this file. */
    .wings-links,
    .da-inputs,
    .gpsart-presets,
    .mm-stats { grid-template-columns: 1fr !important; }

    /* Icons stay in a grid, just a reachable one. */
    .gpsart-icon-grid { grid-template-columns: repeat(4, 1fr) !important; }

    /* Stat rows that stop at two columns and never reach one. */
    .apn-stats,
    .ar-stats,
    .cv-stats,
    .lf-stats,
    .leg-stats,
    .gs-pricing { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    /* The rest of the wide tables. Each is a plain <table> with no scrolling
       wrapper, so a long cell pushed the page sideways. */
    .pa-freq-table,
    .ltf-cost-table,
    .schol-res-table,
    .vol-table,
    .dir-table,
    .admin-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* A route or a date is not worth a sideways drag. */
    .vol-table td,
    .mgmt-table th,
    .mgmt-table td { white-space: normal; }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE: TABLET AND NARROW-PHONE GUARDS
   ═══════════════════════════════════════════════ */

/* The compass-rose watermark is 300px wide and sits 60px outside its column,
   so it overflows wherever the page is narrower than the desktop layout it
   was drawn for — measured at 834px and 1024px as well as on a phone. It is
   decoration; it stays on the desktop widths it was designed for. */
@media (max-width: 1200px) {
    .page-content::before { display: none; }
}

/* An email address, a tail number joined to a route, or any other long
   unbreakable string forced My Account wider than a 360px screen. Let those
   break rather than widen the page. */
@media (max-width: 480px) {
    .page-content,
    .cpa-my-account,
    .entry-content { overflow-wrap: anywhere; }
}

/* A grid or flex child defaults to min-width:auto, which lets its contents
   push it wider than the column it sits in — that is why My Account was
   370px inside a 313px column on a 360px screen. Letting these shrink is the
   standard fix and costs nothing at wider sizes. */
@media (max-width: 768px) {
    .page-layout,
    .page-layout > *,
    .site-container,
    .site-container > *,
    .page-layout-full,
    .page-layout-full > *,
    .page-content,
    .entry-content,
    .cpa-my-account,
    .cpa-account-section { min-width: 0; }

    .cpa-my-account img,
    .cpa-my-account table,
    .cpa-my-account input,
    .cpa-my-account select,
    .cpa-my-account textarea { max-width: 100%; }
}

/* A grid column is sized to its contents, so min-width:0 on the item is not
   enough — the column itself stays wide. These wrappers are a single column
   on a phone anyway, where grid buys nothing, so let them lay out as blocks
   and inherit the viewport width. My Account was 370px inside a 313px column
   on a 360px Android screen because of this. */
@media (max-width: 600px) {
    .site-container.page-layout-full,
    .page-layout-full { display: block; }
}

/* The business-card preview is deliberately a true-size 3.5in print preview
   (336px), so it cannot shrink without lying about what will be printed. It
   scrolls inside its own section instead of setting the width of My Account.
   Only chairs and admins see this section, which is why an ordinary member's
   My Account never showed the overflow. */
@media (max-width: 600px) {
    #business-cards { overflow-x: auto; }
    #bcard-preview { margin: 0; }
}

/* Every table on a chair or admin dashboard scrolls in its own box rather
   than setting the width of the page. These are dense financial and roster
   tables; on a phone they are read by scrolling the table, not the layout. */
@media (max-width: 768px) {
    .cdash-section table,
    .admin-section table,
    .mgmt-panel table,
    .sdash-section table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cdash-section,
    .admin-section,
    .mgmt-panel { min-width: 0; }
}

/* Dashboard section headers put a title and an action button on one flex
   row that never wrapped, so the row's own width set the page's. */
@media (max-width: 768px) {
    .cdash-section__head,
    .admin-section__header,
    .mgmt-header,
    .chair-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        min-width: 0;
    }
}