/* styles/chrome.css
 * Site chrome: skip link, header, Product and Solutions menus, mobile menu, footer.
 * Markup: components/header.html and components/footer.html. Behaviour: js/site-chrome.js.
 * The footer lives in styles/chrome-footer.css, imported here so every page that links
 * chrome.css gets it.
 * Spec: website.pen Orek7 (components), WWTMI (states), cQCwU (responsive 320 to 1920).
 * Only the 900px breakpoint switches structure (compact bar and menu sheet below it).
 * Between the board's frame widths, gutters and gaps interpolate with clamp(), and the
 * footer reflows intrinsically (flex-wrap plus clamp() switches on its own width), so the
 * 1024 and 768 frames come out without extra breakpoints.
 * Frame values with no token are written with color-mix() over tokens; see REBUILD.md.
 * Icons and glyphs are Pencil exports in /assets/figures/chrome/, drawn as CSS masks so
 * they take currentcolor. */
@import url("/styles/chrome-footer.css") layer(components);

@layer components {
  :root {
    --chrome-nav-h: var(--nav-h);
  }

  .site-header,
  .site-footer {
    /* M: 20 at 390, 32 at 768 (left); the bar's right side sits 10px tighter. */
    --chrome-gutter: clamp(20px, 3.175vw + 7.62px, 32px);
    --chrome-hover-bar: color-mix(in srgb, var(--ink) 20%, transparent);
  }

  .site-header a,
  .site-footer a {
    text-decoration: none;
  }

  /* The mount only wraps the header; without this the sticky header cannot outlive it. */
  #header {
    display: contents;
  }

  /* Pencil-exported icons drawn as masks so they take currentcolor. */
  .site-nav__chevron,
  .site-header__toggle-icon,
  .site-menu__promo-arrow::before,
  .site-footer__ai-glyph,
  .site-footer__social-icon {
    flex: none;
    background: currentcolor;
    mask: var(--icon) center / contain no-repeat;
  }

  /* Invisible hit areas; each control sets its own inset. */
  .site-header__toggle::before,
  .site-nav__link::before,
  .site-nav__trigger::before,
  .site-menu__promo-link::before,
  .site-footer__ai-link::before,
  .site-footer__bottom a::before,
  .site-footer__cookie::before {
    content: "";
    position: absolute;
  }

  /* Skip link: .site-skip-link shares the site's one skip-link style with .skip-link in
     utilities.css (look, position 8px below this header, show and hide). */

  /* ---------- Header bar ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--chrome-nav-h);
    padding-inline: var(--chrome-gutter) calc(var(--chrome-gutter) - 10px);
    border-bottom: 1px solid var(--line-2);
  }

  .site-header__logo {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    border-radius: var(--radius-sm);
  }

  .site-header__logo img {
    display: block;
    width: 111px;
    max-width: 100%;
    height: auto;
  }

  .site-header__compact {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-6);
  }

  /* Menu button: 40px visual, 44px target. Hover is a paper chip; open swaps to the X. */
  .site-header__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 2px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--dur-fast);
  }

  .site-header__toggle::before {
    inset: -2px;
  }

  .site-header__toggle-icon {
    --icon: url("/assets/figures/chrome/menu.svg");

    width: 24px;
    height: 24px;
  }

  .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
    --icon: url("/assets/figures/chrome/close.svg");
  }

  @media (hover: hover) {
    .site-header__toggle:hover {
      background: var(--paper);
    }

    .site-header__toggle[aria-expanded="true"]:hover {
      background: transparent;
    }
  }

  .site-header__actions,
  .site-header__scrim {
    display: none;
  }

  /* The header's Book a demo buttons (bar, compact bar and mobile sheet) keep the shared .btn--primary
     states from the actions board (r9m4P): hover, press and focus as every other button on the site
     (BRI-7805 J52, which overrides the chrome states board WWTMI here). */

  /* ---------- Shared nav and menu parts ---------- */
  .site-nav__list,
  .site-menu ul,
  .site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav__link,
  .site-nav__trigger {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font: 500 18px/1.2 var(--font-body);
    text-align: start;
    cursor: pointer;
    transition: color var(--dur-fast), background-color var(--dur-fast);
  }

  /* The label reserves its 600 width: an invisible bold copy (data-label, out of the
     accessibility tree with visibility: hidden) sets the box, so the open, current and
     current-section weights never move the neighbouring items (BRI-7805 J53). */
  .site-nav__label {
    display: inline-flex;
    flex-direction: column;
  }

  .site-nav__label::after {
    content: attr(data-label);
    height: 0;
    overflow: hidden;
    font-weight: 600;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
  }

  .site-nav__chevron {
    --icon: url("/assets/figures/chrome/chevron-down.svg");

    width: 18px;
    height: 18px;
    color: var(--ink-55);
  }

  .site-nav__trigger[aria-expanded="true"] .site-nav__chevron {
    --icon: url("/assets/figures/chrome/chevron-up.svg");
  }

  .site-nav__link[aria-current],
  .site-nav__trigger[data-current-section] {
    color: var(--fern);
    font-weight: 600;
  }

  .site-menu[hidden] {
    display: none;
  }

  .site-menu__row,
  .site-menu__card {
    position: relative;
    display: flex;
    color: var(--ink-2);
    transition: color var(--dur-fast), background-color var(--dur-fast);
  }

  .site-menu__num {
    flex: none;
    color: var(--ink-55);
    font: 400 12px/1.2 var(--font-mono);
  }

  /* Current page is not a link target: default cursor everywhere in the chrome. */
  .site-header [aria-current="page"],
  .site-footer [aria-current="page"] {
    cursor: default;
  }

  /* ---------- Mobile sheet (below 900px) ---------- */
  @media (max-width: 899.98px) {
    .site-header__panel {
      position: fixed;
      inset: var(--chrome-nav-h) 0 0;
      z-index: 99;
      display: none;
      flex-direction: column;
      gap: var(--space-24);
      padding: var(--space-8) var(--space-20) 28px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--white);
    }

    .site-header__panel[data-open] {
      display: flex;
    }

    body.site-nav-open {
      overflow: hidden;
    }

    /* Inner rule, as on the board: rows stay 56px. */
    .site-nav__item {
      box-shadow: inset 0 -1px 0 var(--line-2);
    }

    /* Rows bleed 12px into the gutter on both sides, so the label and chevron keep the
       list's edges while fills and the focus ring get the board's 12px padding. */
    .site-nav__link,
    .site-nav__trigger {
      justify-content: space-between;
      width: calc(100% + 24px);
      height: 56px;
      margin-inline: -12px;
      padding-inline: 12px;
    }

    /* Current page row: mist fill, 3px fern rule. */
    .site-nav__link[aria-current] {
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      background: var(--mist);
      box-shadow: inset 3px 0 0 var(--fern);
    }

    .site-nav__link:active:not([aria-current]),
    .site-nav__trigger:active,
    .site-menu__row:active:not([aria-current]),
    .site-menu__card:active:not([aria-current]) {
      background: var(--paper);
    }

    .site-header__panel-actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-10);
    }

    /* Hs6Cw: 48px, 16/500 labels (the shared button is 44px, 15/600). */
    .site-header__panel-actions .btn {
      width: 100%;
      min-height: 48px;
      font-size: 16px;
      font-weight: 500;
    }

    /* Menus inside the sheet: accordion groups of 44px rows. */
    .site-menu__inner,
    .site-menu__columns {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .site-menu__inner {
      padding-bottom: var(--space-20);
    }

    .site-menu__promo,
    .site-menu__group--cards .site-menu__heading,
    .site-menu__card-role,
    .site-menu__card-copy {
      display: none;
    }

    .site-menu__group,
    .site-menu__index,
    .site-menu__cards {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .site-menu__heading {
      margin: 0;
      padding: var(--space-8) var(--space-12) var(--space-6);
      color: var(--ink-55);
      font: 700 11px/1.2 var(--font-body);
      letter-spacing: 1.3px;
      text-transform: uppercase;
    }

    .site-menu__row,
    .site-menu__card {
      align-items: center;
      gap: var(--space-14);
      min-height: 44px;
      padding: 0 var(--space-12);
      border-radius: var(--radius-sm);
      font: 400 15px/1.2 var(--font-body);
    }

    .site-menu__row[aria-current="page"],
    .site-menu__card[aria-current="page"] {
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      background: var(--mist);
      box-shadow: inset 3px 0 0 var(--fern);
      color: var(--fern);
      font-weight: 600;
    }
  }

  /* ---------- Desktop (900px and up) ---------- */
  @media (min-width: 900px) {
    .site-header,
    .site-footer {
      /* 40 at 1024, 80 at 1440; past that the content caps at 1280 (320 at 1920). */
      --chrome-gutter: max(clamp(40px, 9.615vw - 58.46px, 80px), (100% - 1280px) / 2);
      /* logo to links: 40 at 1024, 56 at 1440. Link gap: 24 at 1024, 32 at 1440. */
      --chrome-logo-gap: clamp(40px, 3.846vw + 0.62px, 56px);
      --chrome-link-gap: clamp(24px, 1.923vw + 4.31px, 32px);
    }

    .site-header__bar {
      justify-content: flex-start;
      padding-inline: var(--chrome-gutter);
      border-bottom-color: color-mix(in srgb, var(--black-35) 17%, transparent);
    }

    .site-header__logo img {
      width: 119px;
    }

    .site-header__compact,
    .site-header__panel-actions {
      display: none;
    }

    .site-header__panel {
      display: flex;
      align-items: center;
      height: 100%;
      margin-inline-start: calc(var(--chrome-logo-gap) - 6px);
    }

    .site-nav,
    .site-nav__list,
    .site-nav__item {
      height: 100%;
    }

    .site-nav__list {
      display: flex;
      gap: calc(var(--chrome-link-gap) - 12px);
    }

    .site-nav__item {
      display: flex;
      align-items: center;
    }

    /* 40px box (the focus ring wraps it), 72px hit area, 2px bar on the header's bottom edge. */
    .site-nav__link,
    .site-nav__trigger {
      gap: var(--space-6);
      height: 40px;
      padding: 0 var(--space-6);
      font-size: 15px;
      font-weight: 500;
    }

    .site-nav__link::before,
    .site-nav__trigger::before {
      inset: calc((40px - var(--chrome-nav-h)) / 2) 0;
    }

    .site-nav__link::after,
    .site-nav__trigger::after {
      content: "";
      position: absolute;
      right: var(--space-6);
      bottom: calc((40px - var(--chrome-nav-h)) / 2 - 0.5px);
      left: var(--space-6);
      height: 2px;
      background: transparent;
      transition: background-color var(--dur-fast);
    }

    .site-nav__trigger::after {
      right: 9.5px;
    }

    .site-nav__chevron {
      width: 12px;
      height: 12px;
    }

    @media (hover: hover) {
      .site-nav__link:hover:not([aria-current])::after,
      .site-nav__trigger:hover::after {
        background: var(--chrome-hover-bar);
      }
    }

    .site-nav__trigger[aria-expanded="true"] {
      color: var(--fern);
      font-weight: 600;
    }

    .site-nav__link[aria-current]::after,
    .site-nav__trigger[data-current-section]::after,
    .site-nav__trigger[aria-expanded="true"]::after {
      background: var(--fern);
    }

    .site-nav__trigger[data-current-section] .site-nav__chevron,
    .site-nav__trigger[aria-expanded="true"] .site-nav__chevron {
      color: var(--fern);
    }

    .site-header__actions {
      display: flex;
      flex: none;
      align-items: center;
      gap: var(--space-28);
      margin-inline-start: auto;
    }

    /* Orek7 Nav (gJIG7) and every cQCwU instance: 15/400 ink-2 text at rest. Hover, press and focus
       are the shared .btn--secondary states on a .btn box (44px, 20px sides with the 1px border,
       radius sm), as every other button on the site (BRI-7805 J52); the negative margins keep
       the label where the frames draw it, 36px from Book a demo. */
    .site-header__signin {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      margin-inline: -11px -11px;
      padding: 0 19px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      color: var(--ink-2);
      font: 400 15px/1.2 var(--font-body);
      transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
    }

    @media (hover: hover) {
      .site-header__signin:hover {
        background: var(--paper);
        border-color: var(--ink);
        box-shadow: var(--elevation-subtle);
        color: var(--ink);
      }
    }

    .site-header__signin:active {
      background: var(--mist);
      border-color: var(--ink);
      box-shadow: inset 0 2px 4px var(--line);
      color: var(--ink);
    }

    /* Floating menu panel: a four-column grid (promo rail plus three), 302 each at 1280
       and 218 each at 1024. */
    .site-menu {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      z-index: 1;
      background: var(--white);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 12%, transparent);
    }

    .site-menu__inner {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-24);
      padding: var(--space-40) var(--chrome-gutter);
    }

    .site-menu__overview {
      display: none;
    }

    .site-menu__promo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-12);
    }

    /* Same Piazzolla width gap as the footer tagline: 16px of the column gap keeps the
       board's single line. */
    .site-menu__promo-title {
      width: calc(100% + 16px);
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: clamp(20px, 0.9615vw + 10.15px, 24px);
      font-weight: 400;
      line-height: normal;
    }

    /* The Solutions title stays 24px at 1024 on the board; only Product's steps down. */
    .site-menu__promo--tight .site-menu__promo-title {
      font-size: 24px;
      line-height: 1.2;
    }

    .site-menu__promo-copy {
      margin: 0;
      color: var(--ink-55);
      font: 400 14px/1.5 var(--font-body);
    }

    /* Text link with arrow: the arrow sits in a 20px circle that fills fern on hover. */
    .site-menu__promo-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: var(--space-6);
      margin-top: var(--space-8);
      border-radius: var(--radius-sm);
      color: var(--fern);
      font: 600 14px/1.2 var(--font-body);
    }

    .site-menu__promo--tight .site-menu__promo-link {
      margin-top: 2px;
    }

    .site-menu__promo-link::before {
      inset: -12px 0;
    }

    .site-menu__promo-arrow {
      display: inline-flex;
      flex: none;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      color: var(--fern);
      transition: background-color var(--dur-fast), color var(--dur-fast);
    }

    .site-menu__promo-arrow::before {
      --icon: url("/assets/figures/chrome/arrow-right.svg");

      content: "";
      width: 13px;
      height: 13px;
    }

    .site-menu__group {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      gap: var(--space-16);
    }

    .site-menu__heading {
      margin: 0;
      padding: 0 var(--space-12);
      color: var(--ink);
      font: 400 24px/normal var(--font-display);
    }

    .site-menu__columns,
    .site-menu__cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-24);
    }

    .site-menu__columns {
      align-items: start;
    }

    .site-menu__index {
      border-top: 1px solid var(--line-2);
    }

    .site-menu__row {
      align-items: flex-start;
      gap: var(--space-16);
      height: 56px;
      padding: var(--space-16) var(--space-12) 0;
      border-bottom: 1px solid var(--line-2);
      border-radius: 2px;
      color: var(--ink);
    }

    .site-menu__num {
      width: 16px;
      padding-top: 1px;
      font-size: 13px;
      line-height: 20px;
    }

    .site-menu__title {
      position: relative;
      font: 500 16px/1.25 var(--font-body);
    }

    /* 2px current bar, 3px under the title. */
    .site-menu__title::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -5px;
      left: 0;
      height: 2px;
      background: transparent;
    }

    /* Hover arrow after the title. */
    .site-menu__row::after,
    .site-menu__card .site-menu__title::before {
      content: "";
      flex: none;
      width: 16px;
      height: 16px;
      margin-top: 3.5px;
      background: var(--fern);
      mask: url("/assets/figures/chrome/arrow-right.svg") center / contain no-repeat;
      opacity: 0;
      transition: opacity var(--dur-fast), transform var(--dur-fast);
    }

    .site-menu__card {
      flex-direction: column;
      container-type: inline-size;
      gap: var(--space-6);
      height: 100%;
      padding: 18px var(--space-12) var(--space-20);
      border-top: 1px solid var(--line-2);
      border-bottom: 1px solid var(--line-2);
      border-radius: 2px;
      color: var(--ink);
    }

    /* The title row keeps room for its 2px bar, 3px down. From the 1024 frame's card
       (194px of content) up, the title may use the card's right padding, as h0HgK draws it
       (one-line titles at 1024). Narrower, it reserves the hover arrow's 32px (16px gap,
       16px arrow) and wraps, so the arrow stays inside the card's ruled box. */
    .site-menu__card .site-menu__title {
      align-self: flex-start;
      margin-bottom: 5px;
      margin-inline-end: clamp(-12px, (193.95px - 100cqi) * 999, 32px);
      line-height: 1.2;
    }

    .site-menu__card .site-menu__title::before {
      /* 16px after the title. Where a one-line title already fills the card (the AI card
         from 1024 to about 1180) the arrow sits at most 4px past the card's edge, as the
         1024 frame places its Arrow Wrap (x222 in a 218px card). */
      position: absolute;
      top: 1.5px;
      left: min(100% + var(--space-16), 100cqi + 16px);
    }

    .site-menu__card-role {
      margin-inline-end: -12px;
      color: var(--ink-55);
      font: 400 13px/1.2 var(--font-body);
    }

    .site-menu__card-copy {
      color: var(--ink-2);
      font: 400 14px/1.5 var(--font-body);
    }

    @media (hover: hover) {
      .site-menu__row:hover:not([aria-current]),
      .site-menu__card:hover:not([aria-current]) {
        background: var(--mist);
        color: var(--fern);
      }

      .site-menu__row:hover:not([aria-current])::after,
      .site-menu__card:hover:not([aria-current]) .site-menu__title::before {
        opacity: 1;
      }

      .site-menu__promo-link:hover .site-menu__promo-arrow {
        background: var(--fern);
        color: var(--white);
      }
    }

    .site-menu__row:active:not([aria-current]),
    .site-menu__card:active:not([aria-current]) {
      background: var(--mist);
    }

    .site-menu__row[aria-current="page"],
    .site-menu__card[aria-current="page"] {
      color: var(--fern);
    }

    .site-menu__row[aria-current="page"] .site-menu__title,
    .site-menu__card[aria-current="page"] .site-menu__title {
      font-weight: 600;
    }

    .site-menu__row[aria-current="page"] .site-menu__title::after,
    .site-menu__card[aria-current="page"] .site-menu__title::after {
      background: var(--fern);
    }

    /* Page scrim under an open menu: 16% ink. A click on it closes the menu. */
    .site-header__scrim:not([hidden]) {
      position: fixed;
      inset: var(--chrome-nav-h) 0 0;
      z-index: 0;
      display: block;
      background: color-mix(in srgb, var(--ink) 16%, transparent);
    }
  }

  /* ---------- Wide chrome (1680px and up, opt-in) ----------
     The chrome follows its page's container. Pages whose wide frame draws the 1680 body
     (workflow and essay pages: DAu7Y, W6doM, DHIxx) set body.chrome-wide, and the header,
     menus and footer sit on .container's wide gutter (120 at 1920). Other pages keep the
     centred 1280 (c09ZZd, cQCwU Pzmnw). Menu columns stay the frame's 302. */
  @media (min-width: 1680px) {
    .chrome-wide :is(.site-header, .site-footer) {
      --chrome-gutter: max(var(--page-gutter), (100% - var(--container-max)) / 2);
    }

    .chrome-wide .site-menu__inner {
      grid-template-columns: repeat(4, minmax(0, 302px));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-menu__row::after,
    .site-menu__card .site-menu__title::before,
    .site-menu__promo-arrow {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .site-nav__chevron,
    .site-header__toggle-icon,
    .site-footer__ai-glyph,
    .site-footer__social-icon,
    .site-menu__row::after,
    .site-menu__card .site-menu__title::before {
      background: CanvasText;
      forced-color-adjust: none;
    }

    .site-nav__link[aria-current]::after,
    .site-nav__trigger[data-current-section]::after,
    .site-nav__trigger[aria-expanded="true"]::after,
    .site-menu__title::after,
    .site-footer__links a::after {
      background: CanvasText;
    }
  }
}