/* ==========================================================================
   responsive.css — tablet and mobile behaviour for the whole site.

   Loaded LAST, after sectors.css / guides.css / forms.css and after each
   page's inline <style>, so its media queries win on equal specificity.

   THE BUG THIS PRIMARILY FIXES
   sectors.css hides .nav-links at <=767px and shows .nav-hamburger instead.
   Only 9 of 26 pages actually HAVE a hamburger — the sector pages, /solution/
   and the presentation deck. On the other 17 the rule hid the navigation and
   put nothing in its place, so a phone got a logo and no way to go anywhere.

   Rather than add hamburger markup and JavaScript to 17 static pages with no
   shared header, the nav becomes a horizontally scrollable row on exactly
   those pages. :has() scopes it: pages that own a hamburger keep the menu they
   already have.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tablet — 768px to 1199px
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1099px) {
    /* Seven nav items plus a CTA are laid out for a 1200px bar. At tablet width
       the 32px gaps push the row into the logo and the labels wrap to two lines
       ("The / Problem"). Tighten the row and stop the wrap. */
    .nav-links { gap: 1.15rem; }
    .nav-links a { font-size: .8rem; white-space: nowrap; }
    .nav-brand { flex: 0 0 auto; margin-right: 1rem; }
    .nav-brand .brand-name, .nav-brand span { white-space: nowrap; }
    .nav-inner { gap: .75rem; }
}

@media (min-width: 768px) and (max-width: 899px) {
    /* Below ~900px the row still will not take the CTA. Every page carries a
       demo button in the body, so the bar is the safe thing to drop it from. */
    .nav-cta.desktop-only { display: none; }
}

@media (max-width: 1199px) {
    /* Multi-column grids on the newer pages collapse to two, then one below. */
    .seven,
    .qtype-grid,
    .domain-grid,
    .roles,
    .why-grid,
    .tenant-contrast {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    /* Long-form measures are set in ch and already fluid; the containers are
       what need to give. */
    .rg-lead, .cp-body, .plat-lead, .rg-sub, .cp-sub, .plat-sub { max-width: none; }
}

/* --------------------------------------------------------------------------
   2. Below the nav breakpoint — <=767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* ---- Navigation ------------------------------------------------------
       Only for pages with no hamburger. The selector is deliberately more
       specific than sectors.css's `.nav-links { display: none }` so it wins
       without !important. */
    .navbar:not(:has(.nav-hamburger)) .nav-links {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 1.1rem;
        margin: 0;
        padding: .15rem .25rem .55rem;
        list-style: none;

        /* The row scrolls rather than wrapping: seven items stacked would push
           the page content below the fold on every load.

           align-self/max-width/min-width are what MAKE it scroll. .nav-inner
           is a column flex container with align-items:flex-start below 768px,
           so this row would otherwise size to its content — measured 557px in
           a 500px viewport. At that size nothing overflows the row itself, so
           overflow-x:auto never engages and body{overflow-x:hidden} silently
           crops the last two items with no way to reach them. Pinning it to
           the container width puts the overflow back inside this box. */
        align-self: stretch;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .navbar:not(:has(.nav-hamburger)) .nav-links::-webkit-scrollbar { display: none; }

    /* The scrollbar is hidden, so without this the row just looks like a menu
       that has been cut off. The fade reads as "there is more this way".
       Guarded because an unsupported mask-image would hide the whole row. */
    @supports (mask-image: linear-gradient(#000, #000)) {
        .navbar:not(:has(.nav-hamburger)) .nav-links {
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        }
    }

    .navbar:not(:has(.nav-hamburger)) .nav-links li { flex: 0 0 auto; }
    .navbar:not(:has(.nav-hamburger)) .nav-links a {
        font-size: .82rem;
        white-space: nowrap;
    }

    /* The demo button is reachable from the page body on every template, so it
       does not need to survive in a cramped scrolling row. */
    .navbar:not(:has(.nav-hamburger)) .nav-cta.desktop-only { display: none; }

    /* Stack the bar so the logo keeps its size and the row sits beneath it. */
    .navbar:not(:has(.nav-hamburger)) .nav-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }

    /* ---- Layout ---------------------------------------------------------- */
    .seven,
    .qtype-grid,
    .domain-grid,
    .roles,
    .why-grid,
    .tenant-contrast,
    .guide-page [class$="-grid"],
    .guide-page .stats-bar,
    .guide-page .hero-stats {
        grid-template-columns: 1fr;
    }

    /* ---- Type ------------------------------------------------------------
       The clamp() minimums were chosen for desktop and are still large on a
       phone, where a serif headline at 33px eats the viewport. */
    .rg-title, .cp-title, .plat-title,
    .guide-page > .container > header h1,
    .guide-page .guides-header h1 { font-size: 1.75rem; line-height: 1.18; }

    .rg-h2, .cp-h2, .plat-h2,
    .guide-page h2 { font-size: 1.3rem; }

    .rg-sub, .cp-sub, .plat-sub { font-size: 1rem; }

    /* ---- Wide content must scroll in its own box, never widen the page ---- */
    .compare-wrap,
    .rg-table-wrap,
    .cp-table-wrap,
    .guide-page .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Guide tables were authored without a scroll wrapper. Making the table a
       block lets it scroll on its own rather than stretching the document. */
    .guide-page table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* ---- Hero actions ---------------------------------------------------- */
    .rg-hero-actions { flex-direction: column; align-items: stretch; }
    .rg-hero-actions .btn { width: 100%; text-align: center; }

    /* ---- Modals ---------------------------------------------------------- */
    .modal { padding: 0; }
    .modal-content {
        margin: 0;
        min-height: 100%;
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .modal-header { padding: 1.1rem 1.25rem; }
    .modal-body { padding: 1.25rem; }
    /* Two-up name fields are unusable at this width. */
    .demo-form .form-row { grid-template-columns: 1fr; }
    /* 16px minimum stops iOS Safari zooming the page on focus. */
    .demo-form input,
    .demo-form textarea { font-size: 16px; }

    /* ---- Video ----------------------------------------------------------- */
    .rg-video { border-radius: 8px; }

    /* ---- Footer ---------------------------------------------------------- */
    .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .footer-links { flex-wrap: wrap; gap: .6rem 1rem; }
}

/* --------------------------------------------------------------------------
   3. Small phones — <=420px
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
    .rg-title, .cp-title, .plat-title,
    .guide-page > .container > header h1 { font-size: 1.55rem; }

    .container,
    .guide-page > .container,
    .guide-page .guides-container { padding-left: 1.1rem; padding-right: 1.1rem; }

    .rg-block, .cp-block, .plat-block { padding: 2.5rem 0; }

    /* Card padding is generous by design; at this width it costs content. */
    .seven-card, .qtype-card, .domain-card, .why-card, .tenant-side,
    .guide-page [class$="-card"], .guide-page .card { padding: 1.15rem; }
}

/* --------------------------------------------------------------------------
   4. Fallback for browsers without :has()
   Safari <15.4 and Firefox <121. Without :has() the nav rules above never
   match, which would leave those users back at "no navigation". Showing the
   row unconditionally is the safer failure: on a page that also has a
   hamburger the visitor sees both, which is redundant but never a dead end.
   -------------------------------------------------------------------------- */
@supports not selector(:has(*)) {
    @media (max-width: 767px) {
        .navbar .nav-links {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 1.1rem;
            padding-bottom: .5rem;
        }
        .navbar .nav-links a { font-size: .82rem; white-space: nowrap; }
    }
}