/* ==========================================================================
   Styling for the standalone legal pages (/terms/, /privacy/).

   These pages are plain static HTML, not part of the Next.js build, so they
   cannot rely on the compiled Tailwind bundle containing any given utility
   class (it only ships classes the original site actually used). Everything
   here is hand-written against the site's own tokens: #000 ground, #fff text,
   #ff3e3e brand, Geist via the bundle's --font-geist-sans.
   ========================================================================== */

.legal-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}
/* The glass is a pseudo-element rather than the nav's own background because
   `backdrop-filter` on the nav would make it the containing block for every
   fixed descendant, and the drawer below is one: `inset: 0` on it would resolve
   to the header bar instead of the viewport. On the ::before the blur reaches
   the same pixels and the nav stays a plain positioned box. */
.legal-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.legal-nav__inner {
  max-width: var(--page-max, 80rem);
  margin-inline: auto;
  padding: 1rem var(--page-pad, 1rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  /* Positioned, but deliberately without a z-index: that would make this a
     stacking context and the drawer inside it would paint over the logo and
     the close X whatever they were given. Left at `auto`, the three order
     themselves in the nav's context, where the z-indexes below decide it. */
  position: relative;
}
.legal-nav__logo {
  flex: 0 0 auto;
  display: block;
  width: 120px;
  height: 48px;
  /* Over the drawer (z-index 1), so the bar stays legible while it is open. */
  position: relative;
  z-index: 2;
}
.legal-nav__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.legal-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-left: auto;
}
.legal-nav__links a {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #d1d5db;
  text-decoration: none;
  transition: color 0.2s;
}
.legal-nav__links a:hover {
  color: #ff3e3e;
}
.legal-nav__cta {
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  background: #ff3e3e;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 0 15px rgb(255 62 62 / 50%);
}
.legal-nav__cta:hover {
  background: #b91c1c;
}

/* --- The hand-written pages' drawer -------------------------------------
   Six pages (/terms/, /privacy/, /locations/, /faq/, /inquiry/, /programs/)
   are static HTML and carry their own header, so they never saw the app's
   mobile menu. Their link row simply wrapped, and by the time enhance.js had
   added Programs, Locations and FAQ it wrapped onto three lines and pushed the
   page down by 150px on a phone.

   Below the width at which the app's own nav switches (its drawer is
   `xl:hidden`, so 1280px), the row becomes the same drawer: full screen, links
   in a column, a hamburger that turns into an X. enhance.js injects the button
   and owns `.legal-nav.is-open`.

   Sizes match overrides.css's drawer, and for the same reason: twelve links and
   a CTA have to fit a phone in portrait without the menu scrolling. */
.legal-nav__toggle {
  display: none;
  position: relative;
  z-index: 2;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  /* Pull back the added bulk so the icon stays optically on the gutter. */
  margin-right: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.legal-nav__toggle:hover {
  color: #ff3e3e;
}
.legal-nav__toggle svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 1279.98px) {
  .legal-nav__toggle {
    display: inline-flex;
  }
  .legal-nav.is-open .legal-nav__toggle {
    background: rgb(255 255 255 / 8%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
  }

  /* The body is pinned while the drawer is open (see the lock below), so a
     sticky bar would be carried off the top of the screen along with it and
     take the close X with it. Fixed while open, which is where sticky was
     putting it anyway. */
  html.gt-drawer-open .legal-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .legal-nav__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    margin-left: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    /* `safe` degrades to flex-start if the links ever do overflow, so the first
       one stays reachable; plain `center` puts it above the scrollable area. */
    justify-content: flex-start;
    justify-content: safe center;
    align-items: center;
    gap: clamp(0.15rem, 0.7dvh, 0.6rem);
    padding: clamp(4.25rem, 10.5dvh, 6rem) 1.5rem
      max(1rem, env(safe-area-inset-bottom));
    background: rgb(0 0 0 / 95%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }
  .legal-nav.is-open .legal-nav__links {
    transform: none;
  }
  /* Nothing to animate for a visitor who asked for no animation, but the drawer
     still has to move, so only the easing goes. */
  @media (prefers-reduced-motion: reduce) {
    .legal-nav__links {
      transition: none;
    }
  }

  .legal-nav__links a {
    width: 100%;
    /* overrides.css makes these flex under a coarse pointer, for the 44px
       minimum, and a flex item ignores text-align, so centre both ways. */
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: clamp(0.95rem, 2.1dvh, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.25;
    padding-block: clamp(0.4rem, 1.5dvh, 0.8rem);
  }
  /* overrides.css floors these at 44px under a coarse pointer, which is right
     for a row of links but is the one thing that cannot hold here: twelve rows
     at 44px plus the CTA and the bar do not fit a 667px-tall phone, and the
     menu went back to scrolling. Scale the floor with the viewport instead, so
     it is still 44px on a normal phone and ~38px on a short one — above the
     24px WCAG 2.5.8 asks for either way. Two classes deep to outrank that rule,
     which wins on load order at equal specificity. */
  .legal-nav .legal-nav__links a {
    min-height: clamp(2.35rem, 5.6dvh, 2.75rem);
  }
  /* Scoped past `.legal-nav__links a` above, which is a class and an element
     and would otherwise keep the CTA stretched to the full row. */
  .legal-nav__links .legal-nav__cta {
    width: auto;
    min-width: 12rem;
    margin-top: clamp(0.5rem, 1.8dvh, 1.25rem);
    padding-block: clamp(0.45rem, 1.4dvh, 0.85rem);
    font-size: clamp(0.95rem, 2.1dvh, 1.125rem);
  }

  /* Same split as the app's drawer, at the same heights and for the same
     reason: below ~580px of viewport thirteen items in one column do not fit,
     and between there and ~700px they fit only by a hair. See overrides.css. */
  @media (max-height: 720px) {
    .legal-nav__links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 0.75rem;
      justify-items: center;
      align-content: flex-start;
      align-content: safe center;
    }
    .legal-nav__links .legal-nav__cta {
      grid-column: 1 / -1;
    }
  }

  @media (max-height: 460px) {
    .legal-nav__links {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

/* Lock the page behind the open drawer. enhance.js mirrors the open state onto
   <html>, the same class the app's own drawer sets, so one rule covers both, and
   it pins the body as well, which is the lock iOS Safari actually honours; this
   copy is here because the static pages do not load overrides.css first in every
   case. Behaviour, not decoration, so it is not gated on motion. */
html.gt-drawer-open,
html.gt-drawer-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.legal-wrap {
  max-width: var(--page-max, 80rem);
  margin-inline: auto;
  padding-inline: var(--page-pad, 1rem);
}

.legal-hero {
  padding: 5rem 0 3rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.legal-hero__eyebrow {
  color: #ff3e3e;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.legal-hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 1.5rem;
}
.legal-hero__meta {
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The draft/review notice. Deliberately loud, this content is unreviewed. */
.legal-notice {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgb(255 62 62 / 35%);
  border-left: 3px solid #ff3e3e;
  border-radius: 0.75rem;
  background: rgb(255 62 62 / 7%);
  color: #e5e7eb;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.legal-notice strong {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
}

.legal-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  /* padding-block, not the `padding` shorthand: this class shares an element
     with .legal-wrap, and the shorthand would reset its horizontal gutter to
     zero, pulling the contents list flush against the viewport edge. */
  padding-block: 3.5rem 6rem;
}
@media (min-width: 1024px) {
  .legal-body {
    grid-template-columns: 16rem 1fr;
    gap: 4rem;
  }
}

.legal-toc {
  align-self: start;
  font-size: 0.875rem;
}
@media (min-width: 1024px) {
  .legal-toc {
    position: sticky;
    top: 6rem;
  }
}
.legal-toc h2 {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.legal-toc li {
  counter-increment: toc;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.legal-toc a {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s;
}
.legal-toc a::before {
  content: counter(toc) ".";
  color: #4b5563;
  margin-right: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.legal-toc a:hover {
  color: #fff;
}

.legal-article {
  max-width: 48rem;
  color: #d1d5db;
  font-size: 1rem;
  line-height: 1.75;
}
.legal-article > section {
  padding-top: 1rem;
  margin-bottom: 3rem;
}
.legal-article h2 {
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1rem;
  scroll-margin-top: 6rem;
}
.legal-article h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 1.75rem 0 0.5rem;
}
.legal-article p {
  margin: 0 0 1rem;
}
.legal-article ul {
  margin: 0 0 1rem;
  padding-left: 1.125rem;
}
.legal-article li {
  margin-bottom: 0.5rem;
}
.legal-article a {
  color: #ff3e3e;
  text-decoration: none;
}
.legal-article a:hover {
  text-decoration: underline;
}
.legal-article strong {
  color: #fff;
}

/* Business detail the operator still has to supply. These contain whole
   sentences, so they must wrap, box-decoration-break keeps the highlight
   looking right across line breaks. */
.legal-article mark,
.legal-notice mark {
  background: rgb(255 62 62 / 18%);
  color: #ffb4b4;
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  font-weight: 700;
  font-size: 0.9em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.legal-contact {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 4%);
}
.legal-contact p {
  margin: 0 0 0.25rem;
}
.legal-contact strong {
  display: block;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}