/*
 * LEGACY BROWSER FALLBACK — Soriano for Quantico
 *
 * The main stylesheet is built with Tailwind v4, which relies on CSS cascade
 * layers, oklch() colors, and color-mix(). Browsers older than Safari 16.4 /
 * iOS 16.4 drop those rules, which leaves the site rendering as unstyled HTML.
 *
 * Everything below is plain, widely supported CSS (hex colors, no layers,
 * no nesting, no color-mix) and is gated behind an @supports test so modern
 * browsers ignore the entire file. It does not try to reproduce the full
 * design — it guarantees a clean, readable, correctly sized single-column
 * version of the campaign site on older phones.
 */

@supports not (color: oklch(0 0 0)) {
  :root {
    --navy: #17263a;
    --navy-deep: #1d2f45;
    --ivory: #f4efe3;
    --paper: #fbf8f1;
    --red: #b3202c;
    --brass: #a98243;
    --slate: #4d5a68;
    --charcoal: #22262b;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background-color: #fbf8f1;
    color: #22262b;
    font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  img,
  svg,
  video {
    max-width: 100%;
    height: auto;
  }

  /* Header / navigation ------------------------------------------------ */

  header {
    position: static !important;
    display: block;
    background-color: #17263a;
    padding: 12px 18px;
  }

  header nav {
    display: block;
  }

  header img {
    max-height: 48px;
    width: auto;
    display: block;
  }

  header a,
  header button {
    color: #f4efe3;
    font-size: 15px;
  }

  header ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
  }

  header li a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(244, 239, 227, 0.15);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 14px;
  }

  /* Layout -------------------------------------------------------------- */

  main {
    display: block;
  }

  section {
    display: block;
    padding: 40px 0;
  }

  .shell,
  .shell-narrow {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
  }

  .navy-panel {
    background-color: #17263a;
    color: #f4efe3;
  }

  .paper-grain,
  .canvas-grain {
    background-color: #fbf8f1;
    background-image: none;
  }

  /* Typography ---------------------------------------------------------- */

  h1,
  h2,
  h3,
  .display-xl,
  .display-lg,
  .display-md {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0 0 14px;
  }

  h1,
  .display-xl {
    font-size: 34px;
  }

  h2,
  .display-lg {
    font-size: 27px;
  }

  h3,
  .display-md {
    font-size: 21px;
  }

  p {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.7;
  }

  .eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a98243;
  }

  .lede {
    font-size: 18px;
    line-height: 1.75;
  }

  a {
    color: inherit;
  }

  /* Buttons -------------------------------------------------------------- */

  .btn-base {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin: 0 0 12px;
    padding: 15px 20px;
    border-radius: 2px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
    font-weight: 600;
  }

  .btn-red {
    background-color: #b3202c;
    color: #fbf8f1;
    border: 1px solid #b3202c;
  }

  .btn-navy {
    background-color: #17263a;
    color: #f4efe3;
    border: 1px solid #17263a;
  }

  .btn-outline-dark {
    border: 1px solid rgba(23, 38, 58, 0.5);
    color: #17263a;
    background-color: transparent;
  }

  .btn-outline-light {
    border: 1px solid rgba(244, 239, 227, 0.6);
    color: #f4efe3;
    background-color: transparent;
  }

  /* Footer and stacked content ------------------------------------------ */

  footer {
    display: block;
    background-color: #17263a;
    color: #f4efe3;
    padding: 36px 0 90px;
  }

  footer img {
    max-height: 56px;
    width: auto;
  }

  footer ul {
    list-style: none;
    margin: 12px 0 24px;
    padding: 0;
  }

  footer li {
    margin-bottom: 10px;
  }

  footer a {
    color: #f4efe3;
    font-size: 15px;
  }

  footer hr {
    border: 0;
    border-top: 1px solid rgba(244, 239, 227, 0.2);
    margin: 24px 0;
  }

  /* Mobile action bar ----------------------------------------------------- */

  .mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: table;
    width: 100%;
    background-color: #17263a;
    z-index: 40;
  }

  .mobile-action-bar > * {
    display: table-cell;
    width: 33%;
    margin: 0;
    max-width: none;
    padding: 14px 8px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
  }

  /* Hide decorative-only layers that lose their styling ------------------- */

  [aria-hidden="true"][class*="animate"],
  [class*="bird"] {
    display: none !important;
  }
}