/* CREx shared brand stylesheet
   Loaded by every page. Holds cross-page fixes that aren't worth
   duplicating in each page's <style> block. */

/* ============================================
   Hide the design-system "Tweaks" debug button
   that's still embedded in many page templates.
   Targeted by its inline style signature so we
   don't have to edit each HTML file.
   ============================================ */
button[style*="position:fixed"][style*="right:20px"][style*="bottom:20px"],
.tweaks {
  display: none !important;
}

/* ============================================
   Responsive overrides
   The page <style> blocks set their grids via
   inline `style="grid-template-columns:..."` so
   we have to use !important to win specificity.
   ============================================ */

/* Container padding tightens earlier than the
   page-level CSS does so content stops hugging
   the viewport edge on phones. */
@media (max-width: 880px) {
  .container,
  .container-wide {
    padding: 0 20px !important;
  }
  .nav-inner {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 12px 0;
    gap: 12px !important;
  }
  .nav-links {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
    font-size: 13px !important;
  }
  .nav-cta { width: 100%; }
  .nav-cta .btn { width: 100%; justify-content: center; }
  .nav-item .mega { display: none !important; }

  .section { padding: 56px 0 !important; }
  .section-loose { padding: 72px 0 !important; }
  .section-tight { padding: 40px 0 !important; }

  .h-display { font-size: clamp(34px, 9vw, 48px) !important; }
  .h-section { font-size: clamp(26px, 7vw, 36px) !important; }
  .lede { font-size: 16px !important; }
}

/* Collapse multi-column grids on phones.
   These attribute selectors match the inline
   `grid-template-columns:repeat(N, 1fr)` syntax
   used throughout the templates. */
@media (max-width: 720px) {
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns:repeat(7"] {
    grid-template-columns: 1fr !important;
  }
  /* Two-column "label / content" rails (eyebrow on
     left, headline on right) — stack on mobile. */
  [style*="grid-template-columns:160px 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1.3fr 1fr"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* When grids collapse, internal column borders
     create awkward verticals. Swap them to a
     bottom hairline so dividers still read. */
  [style*="border-right:1px solid var(--hairline)"] {
    border-right: none !important;
    border-bottom: 1px solid var(--hairline) !important;
  }
  [style*="border-right:1px solid var(--hairline-strong)"] {
    border-right: none !important;
    border-bottom: 1px solid var(--hairline-strong) !important;
  }

  /* Footer mega-grid */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

/* Phone-specific tightening */
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .nav-links { gap: 10px 14px !important; font-size: 12.5px !important; }
}

/* Prevent horizontal scroll caused by long
   unbreakable strings in stat boxes etc. */
html, body { overflow-x: hidden; }