/* ============================================================================
 * BluePadel website — shared CSS.
 *
 * Linked from every page's <head>, BEFORE that page's inline <style> block,
 * so per-page rules continue to win on specificity tie. Rules here apply
 * site-wide; selectors that only exist on hero pages (`.foot-brand`, the
 * full `.nav-links` button) silently no-op on doc pages.
 *
 * What lives here:
 *   - Mobile-responsive defences (overflow-x: clip, nav crowding fix at
 *     ≤540 px, footer paragraph cap).
 *
 * What does NOT live here (yet):
 *   - CSS variables (:root). Each page still defines its own to avoid the
 *     refactor risk of unifying variable sets that differ subtly between
 *     hero and doc pages.
 *   - Brand mark, nav, footer, eyebrow, callout, etc. Page-local for now.
 *
 * If you make a site-wide visual tweak, add the rule here instead of
 * editing nine inline blocks. Future maintenance gets cheaper as more
 * shared rules migrate in.
 * ========================================================================= */


/* ---------------------------------------------------------------------------
 * Horizontal-scroll defence
 *
 * Prevents the body from establishing a horizontal scrollbar when any
 * descendant (absolute-positioned hero device, footer copy block, etc.)
 * extends past the viewport on narrow phones. `clip` is preferred over
 * `hidden` so it doesn't create a containing block / affect `position:
 * sticky` on the nav.
 * ------------------------------------------------------------------------- */
html, body { overflow-x: clip; }


/* ---------------------------------------------------------------------------
 * Mobile nav crowding (≤540 px)
 *
 * Below ~540 px, the brand + right-side CTA on hero pages can hug each
 * other because both are at near-default size. Tighten the gutter padding
 * slightly and shrink the CTA button so there's visible breathing room
 * between the BluePadel wordmark and the pill button. The selectors don't
 * match on doc pages (no `.nav-links` with a `.btn`), so this rule is a
 * silent no-op there.
 * ------------------------------------------------------------------------- */
@media (max-width: 540px) {
  .nav-inner { padding: 12px 14px; }
  .brand { font-size: 1.05rem; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .nav-links .btn { padding: 9px 14px; font-size: .88rem; }
}


/* ---------------------------------------------------------------------------
 * Footer brand paragraph cap
 *
 * `min(320px, 100%)` so on a narrow viewport (320-360 px phones) the
 * paragraph is capped at container width minus padding instead of
 * insisting on 320 px and tipping the body past its viewport. Only matches
 * hero pages; no-op elsewhere.
 * ------------------------------------------------------------------------- */
.foot-brand p { max-width: min(320px, 100%); color: #8993A8; }
