/* .mobile-menu — the full-screen menu below 1120px (spec decisions 37, 56
   item 5, 60, 61 item 19). Hidden with the `hidden` attribute until ☰ opens
   it. The toggle under ✕ (decision 67 item 10), links, quote button last. No phone
   number: it goes in the footer on phones (decision 67 item 8). */
/* A fixed full-screen layer: no composition positions a panel over the page. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-overlay);
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  padding-inline: var(--space-md);  /* 24px on a phone; the header matches (decision 67 item 5) */
  padding-block-end: calc(var(--space-lg) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg-base);
  color: var(--color-white);
}

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

/* .cluster: brand left, ✕ right, at least --space-lg apart (decision 67 item 5) */
.mobile-menu__top {
  --cluster-horizontal-alignment: space-between;
  --cluster-space: var(--space-lg);
  container: brand-row / inline-size;
  flex-wrap: nowrap;
  min-block-size: var(--header-height);
}

/* ✕ drawn with two lines like ☰ (our fonts have no ✕ of their own), so it
   looks the same on every phone. The 44px tap area reaches past the lines;
   the negative margin puts the lines' right end on the page edge, in line
   with the language and quote buttons (decision 67 item 12). The ✕ is
   20px across, a little smaller than ☰'s 24px (item 13). */
.mobile-menu__close {
  --close-size: calc(var(--space-md) - var(--space-3xs));
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--space-xl);
  block-size: var(--space-xl);
  margin-inline-end: calc((var(--close-size) - var(--space-xl)) / 2);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Each line is the ✕'s width times √2, less its thickness (which adds width
   once turned), so the ✕ spans exactly --close-size. */
.mobile-menu__close span {
  grid-area: 1 / 1;
  inline-size: calc(var(--close-size) * 1.414 - var(--border-2));
  block-size: var(--border-2);
  background: var(--color-white);
  rotate: 45deg;
}

.mobile-menu__close span + span {
  rotate: -45deg;
}

/* The language button: small and right-aligned under ✕, where someone looking
   to switch language looks first (decision 67 item 10). Smaller than the
   header's v23 size so it does not outweigh the logo or the links. */
.mobile-menu > .language-toggle {
  align-self: flex-end;
  padding: var(--space-4xs);
  font-size: var(--step--2);
}

.mobile-menu > .language-toggle a {
  inline-size: var(--space-md);
  block-size: var(--space-md);
}

/* .stack: no gap; the hairlines separate the links */
.mobile-menu__links {
  --stack-space: 0;
  margin-block: var(--space-lg);
}

.mobile-menu__links a {
  display: block;
  /* Tight, so "Request a Quote" shows without scrolling on most phones
     (decision 67 items 7–9): each link about 57px tall on a phone. */
  line-height: var(--heading-line-height);
  padding-block: var(--space-s);
  border-bottom: var(--border-1) solid var(--hairline-color);
  /* Red Hat Text 700: Display is kept for 800 headlines only (decision 67 item 15) */
  font-size: var(--step-2);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
}

/* .stack, pushed to the bottom */
.mobile-menu__bottom {
  --stack-space: var(--space-md);
  margin-block-start: auto;
}

.mobile-menu__bottom .btn {
  inline-size: 100%;
  min-block-size: var(--space-2xl);
  font-size: var(--step-0);          /* as the hero button, same height (decision 67 item 11) */
}

/* Scroll lock while the menu is open (decision 56 item 5; set on <html>,
   decision 61 item 19). */
html.is-scroll-locked {
  overflow: hidden;
}