/* Deliberate deviations from the design canvas.
 *
 * Everything else in this port reproduces the canvas exactly, and the parity harness
 * holds it to that. Changes we have decided to make on purpose live here instead of in
 * the extracted markup, so re-running the extraction cannot quietly undo them — and so
 * the list of things we do differently is one short, reviewable file.
 *
 * Each rule states what it changes and why.
 */

/* Footer content width — align it with the header and the page sections.
 *
 * The footer element is self-contained (it deliberately depends on no design-system
 * token), and it caps its inner container at the same 1200px as everything else but then
 * adds its own 48px side padding. That puts its content 48px further in on each side than
 * the header or any section: content edges at 168…1272 instead of 120…1320 on a 1440
 * viewport. Widening the container by exactly those two gutters lines the columns up with
 * the rest of the page, and because the padding stays, the footer keeps its gutter on
 * narrow screens — below ~1296px both it and the sections resolve to the same 48px inset.
 */
gain-footer .gfx-in {
  max-width: calc(var(--container-max, 1200px) + 96px);
}

/* Pricing's content container — align it with the header, the footer and every other page.
 *
 * The pricing page's markup predates the shared container: its `.wrap` is 1240px wide with
 * its own 48px padding, so its content sits at 148…1292 on a 1440 viewport while every other
 * page — and the header and footer — sit at 120…1320. On the canvas that was consistent,
 * because the page also carried its own full-width nav; this port gives it the site header
 * instead, which is what leaves the 28px step visible down both edges. Widening the container
 * by its own two gutters lines the content up, and keeps the gutter on narrow screens.
 */
main .wrap {
  max-width: calc(var(--container-max, 1200px) + 96px);
}

/* One smooth-scroll implementation, not two.
 *
 * The pricing and policy sheets ask the browser for `scroll-behavior: smooth`, which on the
 * canvas was those routes' whole smooth-scrolling story: the shell names no motion entry
 * point for them, so Lenis never ran there. This port runs the motion layer on every page,
 * and the two smoothing layers fight — five 200px wheel notches travel 844px on a policy page
 * against 1000px on a page without the CSS rule, and the difference is visible as sluggish,
 * stalling scroll. Lenis' own documentation says to remove the CSS rule when it is in use.
 */
html {
  scroll-behavior: auto;
}

/* Give the mobile drawer a height its containing block cannot.
 *
 * The drawer is `position: fixed; top: 68px; bottom: 0` inside `header.site-header`, which
 * carries `backdrop-filter: blur(20px)` for the frosted chrome. A filtered element becomes
 * the containing block for its fixed descendants, so those insets resolve against the 68px
 * header rather than the viewport: `bottom: 0` left the drawer 0px of content, 48px of
 * padding, and every menu clipped to a sliver — the whole mobile nav, on every page.
 *
 * Stating a height instead of a bottom inset is the smallest fix that keeps the frosted
 * header. `100%` is that same containing block, so this stays correct if the header's own
 * height changes, and `dvh` follows the mobile browser's collapsing toolbars where it is
 * supported. The panels run past the viewport now that they list real pages — the Solutions
 * one is about 1000px tall — so the drawer scrolls, and keeps that scroll to itself.
 */
header.site-header .gain-drawer {
  bottom: auto;
  height: calc(100vh - 100%);
  height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Opaque, because the frosted look cannot work here.
   *
   * The drawer asks for `background: rgba(251,253,251,.92)` over `backdrop-filter:
   * blur(22px)`, and the blur is inert: a filtered ancestor starts a new backdrop root, so
   * the drawer blurs the header's content rather than the page behind it. What is left is
   * an 8% window onto unblurred body copy, and the hero heading reads straight through the
   * menu. craft.css already states this same solid colour where it turns transparency off
   * for reduced-transparency and forced-colours, so the drawer uses it unconditionally. */
  background: #fbfdfb;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Keep the "not yet designed" note out of the drawer, as it already is everywhere else.
 *
 * site-nav.js labels every `.nav-unbuilt` item with that note and then hides it again for
 * the desktop nav, the mainnav and the footer — the three places a visitor sees. The drawer
 * is not in that list because it was never visible to check: its containing block collapsed
 * it to 48px. With a height it is, and a phone would read "Email ticketing NOT YET DESIGNED"
 * in the live menu. Specificity has to beat that script's own injected sheet, which is
 * appended to the head after this file.
 */
header.site-header .gain-drawer .nav-unbuilt::after {
  display: none;
}

/* One header on every page: switch to the burger globally, not once per route sheet.
 *
 * The captured header carries `display` inline on both navs — `nav-desktop` flex, the
 * `nav-mobile` burger none — so the mobile swap has to be an `!important` rule to beat them.
 * The canvas put that rule inside nine route stylesheets, one identical copy each
 * (home, blog, post, cases, case-study, privacy, terms, cookie, product-page), and
 * pricing.css is the one that never got a copy. So /pricing alone showed the full desktop
 * nav on a phone with no way to open a menu, which is the same header markup behaving
 * differently on one route.
 *
 * Stated once here, where every redesigned page already links it last, the swap cannot be
 * missed by a route again. The nine copies are the same declarations at the same breakpoint,
 * so they stay harmless where they are — this file is loaded after all of them.
 */
@media (max-width: 1000px) {
  .nav-desktop {
    display: none !important;
  }

  .nav-mobile {
    display: inline-flex !important;
  }
}