/* ==========================================================================
   TGC foundation
   --------------------------------------------------------------------------
   Shared responsive, focus and motion baseline for every page that carries the
   site chrome. It is linked last so it settles the historical override layers
   without needing !important of its own.

   Breakpoint scale — these are the only widths the project should use:

     480px   small phone
     760px   phone
     1024px  tablet / desktop navigation threshold
     1120px  wide tablet
     1280px  container maximum

   The 1024px navigation threshold is measured, not guessed: the header needs
   903px of inline space and a 1024px viewport supplies 960px inside the
   container padding. Below that the hamburger takes over. tools/measure-nav.mjs
   reproduces the measurement, and tools/check-responsive.mjs probes 1024px
   explicitly so a longer label cannot quietly reintroduce the overflow.
   ========================================================================== */

:root {
  --tgc-nav-h: 76px;
  --tgc-tap-min: 44px;
  --tgc-focus-ring: #0b5c7a;
  --tgc-focus-ring-contrast: #ffffff;
  /* 6.4:1 on white, so validation text passes AA on its own. */
  --tgc-danger: #b42318;
  --tgc-danger-soft: #fef3f2;
  --tgc-danger-border: #fda29b;
  /* Phase 11 layout aliases — canonical values live in tgc-page-system.css */
  --tgc-content-max: var(--container, 1280px);
  --tgc-section-y: clamp(48px, 6vw, 88px);
  --tgc-grid-gap: 20px;
  --tgc-grid-gap-lg: 28px;
  --tgc-card-pad: 18px;
  --tgc-radius-card: 14px;
  --tgc-radius-media: 12px;
}

/* --------------------------------------------------------------------------
   1. Overflow safety
   Replaces the previous `html, body { overflow-x: hidden !important }` mask.
   Media and embedded content can no longer exceed their column, and long
   unbroken technical strings wrap instead of widening the page.
   -------------------------------------------------------------------------- */

:where(img, svg, video, canvas, iframe, table) {
  max-width: 100%;
}

:where(img, svg, video, canvas) {
  height: auto;
}

/* Grid and flex children default to min-width:auto, which lets long content
   push a track wider than its share of the row. */
:where(.grid-2, .grid-3, .grid-4, .grid-asym, .variant-grid, .stats-grid) > * {
  min-width: 0;
}

:where(.card, .product-card, .variant, .feature-panel, .dark-panel, .spec-table td, .spec-table th) {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   2. Navigation threshold
   Previously the desktop nav was revealed at 769px but did not fit until
   ~1024px, so every page below 1024px overflowed horizontally.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Only the link list collapses. The call to action stays in the header down to
     600px; assets/css/tgc-components.css owns its labels and breakpoints. */
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: inline-flex;
  }

  .nav-inner {
    justify-content: space-between;
    gap: 16px;
  }

  /* The hover dropdown has no place behind a hamburger. */
  .nav-dropdown-menu {
    display: none;
  }

  .logo {
    min-width: 0;
  }
}

/* Stated explicitly so that no page-specific layer can leave both the link list
   and the hamburger on screen at the same time. */
@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }

  .nav-hamburger {
    display: none;
  }
}

@media (max-width: 760px) {
  :root {
    --tgc-nav-h: 64px;
  }

  .topbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. Mobile menu
   Anchored to the header instead of a hard-coded `top: 76px`, so it always
   meets the header edge regardless of which layer sized the header.
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
}

.mobile-menu {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  max-height: calc(100dvh - var(--tgc-nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Scroll lock while the menu is open, applied by assets/js/tgc.js. */
body.tgc-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Touch targets
   WCAG 2.5.8 asks for 24px minimum; 44px is the platform convention and the
   size the previous layout missed on almost every primary control.
   -------------------------------------------------------------------------- */

.btn,
.tgc-btn,
.nav-cta,
.nav-link,
.mobile-menu a,
.datasheet-btn,
.card-link,
.product-card-title-link,
.tank-card-body h3 a,
.tank-card-actions a,
.tank-mini-list a,
.footer-contact-row a {
  min-height: var(--tgc-tap-min);
}

/* `display` is deliberately not set on `.nav-cta` or `.nav-links` here: those
   are shown and hidden by the navigation threshold above, and re-declaring
   display would undo it. */
.card-link,
.product-card-title-link,
.tank-card-body h3 a,
.footer-contact-row a {
  display: inline-flex;
  align-items: center;
}

.btn,
.tgc-btn {
  align-items: center;
}

.logo,
.nav-hamburger {
  min-width: var(--tgc-tap-min);
  min-height: var(--tgc-tap-min);
}

.mobile-menu a {
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Focus visibility
   No stylesheet defined :focus-visible before, and form fields cleared their
   outline outright. Keyboard users had no indicator anywhere on the site.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--tgc-focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Dark surfaces need the light ring to stay visible. */
.footer a:focus-visible,
.topbar a:focus-visible,
.cta a:focus-visible,
.tgc-final-cta a:focus-visible,
.dark-panel a:focus-visible,
.section-dark a:focus-visible,
.tgc-dark a:focus-visible {
  outline-color: var(--tgc-focus-ring-contrast);
}

/* Mouse and touch interaction keeps the pre-existing look. */
:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   6. Reduced motion
   The site sets `scroll-behavior: smooth` globally and animates transforms on
   hover; both are honoured as preferences now.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   7. Wide data tables
   Engineering tables are legitimately wider than a phone. They scroll inside a
   labelled, keyboard-reachable region instead of widening the page.
   -------------------------------------------------------------------------- */

.tgc-table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.tgc-table-scroll:focus-visible {
  outline: 3px solid var(--tgc-focus-ring);
  outline-offset: 2px;
}

.tgc-table-scroll > table {
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Utilities
   -------------------------------------------------------------------------- */

.tgc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tgc-skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: 0;
  z-index: 300;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #0a2540;
  border-radius: 0 0 6px 6px;
  transform: translate(-50%, -110%);
  transition: transform 0.15s ease-in-out;
}

.tgc-skip-link:focus {
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   9. Colour contrast

   Five text colours sat below the 4.5:1 WCAG AA ratio for body text. They are
   corrected here rather than in the layers that declare them, because those are
   versioned override files that nothing else should have to touch, and because
   collecting them makes the set reviewable. Each replacement is the smallest
   change along the same hue that clears the ratio, so the palette still reads
   the same. `check:a11y` measures all of them against what is actually painted
   behind the text.
   -------------------------------------------------------------------------- */

/* 4.20:1 → 4.64:1 on the #061827 footer. */
.footer-bottom {
  color: #6585a0;
}

/* 2.56:1 → 4.65:1 on white. Was --gray-400, a fill colour used as text. */
.industry-card-rank {
  color: #6b7584;
}

/* 3.99:1 → 4.61:1 on white. */
.tank-card-en {
  color: #677788;
}

/* The accent reads 4.77:1 on white but only 4.16:1 on its own tinted chip
   background, which is where it is used at 11px. */
.industry-card-tags span,
.ball-config-kicker {
  color: #0d7595;
}

/* --------------------------------------------------------------------------
   10. Header logo

   The approved wordmark is `assets/brand/tgc-identity-v4/logo-primary-navy.svg`,
   560 × 180, an aspect ratio of 3.111 : 1. Six layers each pinned the element to
   a different fixed box — 96×44, 104×40, 108×40, 112×40, 88×42, 112×40 — and not
   one of them matched that ratio, so `object-fit: contain` letterboxed the
   artwork inside its own slot and it rendered about 10% smaller than the header
   reserved for it, sitting off the intended optical centre.

   Below 760px the header turns navy and the mark was being recoloured with
   `filter: brightness(0) invert(1)`, which flattens the two-colour wordmark to a
   pure white silhouette. The identity set already ships a reversed master for
   exactly this, so the header now serves `logo-mono-white.svg` there and the
   filter is switched off.

   The artwork itself is untouched: no redraw, no re-proportioning, no new file.
   -------------------------------------------------------------------------- */

body > .nav .logo-mark-img,
.nav .logo-mark-img,
.logo-mark-img {
  width: 112px !important;
  min-width: 112px !important;
  /* Height follows the artwork instead of being pinned, so nothing letterboxes. */
  height: auto !important;
  aspect-ratio: 560 / 180;
  object-fit: contain !important;
  /* An SVG is resolution-independent; nothing may rasterise or recolour it. */
  filter: none !important;
}

@media (max-width: 760px) {
  body > .nav .logo-mark-img,
  .nav .logo-mark-img,
  .logo-mark-img {
    width: 84px !important;
    min-width: 84px !important;
    filter: none !important;
  }

  /* The homepage mobile header makes `.logo` a two-column grid. `<picture>`
     is the actual grid item; positioning only the nested `<img>` collapses the
     wrapper into the text column and clips almost the whole mark off-canvas. */
  body > .nav .logo picture,
  .nav .logo picture,
  .logo picture {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 84px !important;
    min-width: 84px !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }
}

/* `.logo` is a flex row; the picture wrapper must not become a flex item that
   collapses the mark. */
.logo picture {
  display: inline-flex;
  align-items: center;
  flex: none;
}