/* ==========================================================================
   layout.css: page shell and chrome
   Layer: layout

   Contents
   1. Container and section shells (+ --alt, --dark, --tight), ridge divider
   2. Site header (state A top / state B scrolled), desktop nav, phone, menu toggle
   3. Mobile menu dialog (full-screen sheet)
   4. Site footer (grid, link columns, social, bottom bar, wordmark)
   5. Mobile action bar

   Breakpoints: min-width 40rem, 64rem and 80rem (header, desktop nav, footer); max-width 23.4375rem for the
   narrowest phones. The header also has a container query (max-width 60rem).
   Note: .btn display lives in base.css so layout can hide buttons per breakpoint.
   ========================================================================== */

@layer layout {
  /* ---- 1. Container and sections ---- */
  .container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .section {
    position: relative;
    padding-block: var(--section-pad);
    background: var(--color-bg);
    background-image: var(--grain-light);
    background-size: var(--grain-size);
    background-repeat: repeat;
    color: var(--color-text);
  }

  .section--alt {
    --color-bg: var(--color-bg-alt);
    --tile-bg: var(--white);
  }

  /* Dark sections re-map the semantic variables so components adapt on their own. */
  .section--dark {
    --color-bg: var(--ink-900);
    --color-text: var(--dark-text);
    --color-text-muted: var(--dark-text-muted);
    --color-heading: var(--white);
    --color-border: var(--dark-border);
    --color-border-strong: var(--white-a20);
    --color-surface: var(--dark-surface);
    --color-accent: var(--dark-accent);
    --color-focus: var(--color-focus-on-dark);
    --error-text: var(--danger-300);
    --tile-bg: var(--white-a07);
    --tile-fg: var(--amber-400);
    background-image: var(--grain-dark);
    background-size: var(--grain-size);
    background-repeat: repeat;
  }

  /* Ridge of a dark section: same tile as its section. */
  .section--dark > .ridge {
    background-image: var(--grain-dark);
  }

  .section--dark .accent {
    color: var(--amber-300);
  }

  /* Roof-peak divider: filled with the current section color, poking into the section above.
     The base overlaps the section by 1px (bottom edge at 1px below the section top, no transform), so no sub-pixel
     gap can show the previous section's color as a seam. The extra 1px is a band at the base of the clip-path:
     the triangle keeps its size and slope. */
  .ridge {
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(100% - 1px);
    block-size: calc(clamp(1.125rem, 3vw, 2.75rem) + 1px);
    background: var(--color-bg);
    background-image: var(--grain-light);
    background-size: var(--grain-size);
    background-repeat: repeat;
    clip-path: polygon(0 calc(100% - 1px), 50% 0, 100% calc(100% - 1px), 100% 100%, 0 100%);
    pointer-events: none;
  }

  /* ---- 2. Site header ---- */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-header);
    block-size: var(--header-h);
    background: transparent;
    color: var(--hdr-text);
    --hdr-text: var(--dark-text);
    --hdr-muted: var(--dark-text);
    --hdr-accent: var(--amber-400);
    --hdr-surface: var(--white-a12);
    --logo-h: 2.375rem;
    transition:
      block-size var(--dur-3) var(--ease-in-out),
      background-color var(--dur-3) var(--ease-in-out),
      box-shadow var(--dur-3) var(--ease-in-out),
      color var(--dur-3) var(--ease-in-out);
  }

  /* Focus ring is light on the transparent header over the video. */
  .site-header:not(.is-scrolled) {
    --color-focus: var(--color-focus-on-dark);
  }

  @media (min-width: 64rem) {
    .site-header:not(.is-scrolled) {
      --logo-h: 2.75rem;
    }
  }

  .site-header.is-scrolled {
    block-size: var(--header-h-condensed);
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow:
      0 1px 0 var(--sand-200),
      var(--shadow-sm);
    color: var(--ink-900);
    --hdr-text: var(--ink-900);
    --hdr-muted: var(--color-text-muted);
    --hdr-accent: var(--terracotta-600);
    --hdr-surface: var(--sand-100);
    --logo-h: 2.375rem;
  }

  /* If the scripts never ran (see the safety net in index.html), the header never gets is-scrolled: give the
     transparent header a solid dark background so its light text stays readable over the light folds. */
  html[data-js-failed] .site-header:not(.is-static):not(.is-scrolled) {
    background-color: var(--ink-900);
  }

  /* Legal pages and 404: always the scrolled look, in normal flow. */
  .site-header.is-static {
    position: relative;
    inset-block-start: auto;
  }

  .site-header__inner {
    container: site-header / inline-size;
    block-size: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .site-header__brand {
    position: relative;
    display: block;
    flex: none;
    block-size: var(--logo-h);
    inline-size: calc(var(--logo-h) * 356 / 72);
  }

  .site-header__logo {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    transition: opacity var(--dur-3) var(--ease-in-out);
  }

  .site-header__logo--dark {
    opacity: 0;
  }

  .site-header.is-scrolled .site-header__logo--light,
  .site-header.is-static .site-header__logo--light {
    opacity: 0;
  }

  .site-header.is-scrolled .site-header__logo--dark,
  .site-header.is-static .site-header__logo--dark {
    opacity: 1;
  }

  .site-nav {
    display: none;
  }

  .site-nav__list {
    display: flex;
    gap: clamp(0.6rem, 1.6vw, 2rem);
  }

  .site-nav__link {
    position: relative;
    display: inline-block;
    padding: 0.5rem 0.2rem;
    color: var(--hdr-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Underline indicator: scales in on hover, stays on the scrollspy's current section. */
  .site-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0.2rem;
    inset-block-end: 0.1rem;
    block-size: 2px;
    background: var(--gradient-sunset);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-2) var(--ease-out);
  }

  .site-nav__link[aria-current="true"]::after {
    transform: scaleX(1);
  }

  @media (hover: hover) {
    .site-nav__link:hover::after {
      transform: scaleX(1);
    }
  }

  /* Reduced motion: the header and its wordmark change state instantly. */
  @media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header__logo {
      transition: none;
    }
  }

  /* Narrow phones (320px): the wordmark shrinks so brand + phone + menu fit the 280px content box. */
  @media (max-width: 23.4375rem) {
    .site-header .site-header__brand {
      block-size: 2rem;
      inline-size: calc(2rem * 356 / 72);
    }

    .site-header__inner {
      gap: var(--space-3);
    }
  }

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

  .site-header__phone {
    display: none;
    align-items: center;
    gap: 0.6rem;
    color: var(--hdr-text);
    text-decoration: none;
  }

  .site-header__phone .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--hdr-accent);
  }

  .site-header__phone-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  .site-header__phone-number {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Hours caption only where there is room for it (wide desktops). */
  .site-header__phone-hours {
    display: none;
  }

  @media (min-width: 80rem) {
    .site-header__phone-hours {
      display: block;
    }
  }

  .site-header__phone-hours {
    color: var(--hdr-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
  }

  .site-header__cta {
    display: none;
    white-space: nowrap;
  }

  /* Mobile phone button: round, 44px, sits beside the menu toggle. */
  .site-header__call {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--hdr-surface);
    color: var(--hdr-text);
  }

  .site-header__call .icon {
    inline-size: 1.2rem;
    block-size: 1.2rem;
  }

  .menu-toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--hdr-surface);
    color: var(--hdr-text);
    transition: background-color var(--dur-1) var(--ease-out);
  }

  /* Two-line icon that morphs into an X while the menu is open. */
  .menu-toggle__bars {
    position: relative;
    inline-size: 1.25rem;
    block-size: 0.875rem;
  }

  .menu-toggle__bars > span {
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    transition:
      translate var(--dur-2) var(--ease-out),
      rotate var(--dur-2) var(--ease-out);
  }

  .menu-toggle__bars > span:first-child {
    inset-block-start: 0;
  }

  .menu-toggle__bars > span:last-child {
    inset-block-end: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars > span:first-child {
    translate: 0 0.375rem;
    rotate: 45deg;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars > span:last-child {
    translate: 0 -6px;
    rotate: -45deg;
  }

  @media (hover: hover) {
    .menu-toggle:hover {
      background: color-mix(in srgb, currentColor 14%, transparent);
    }
  }

  /* Scroll progress along the header bottom edge (scroll-driven, progressive). */
  .site-header__progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--gradient-sunset);
    transform: scaleX(0);
    transform-origin: 0 50%;
    display: none;
  }

  @supports (animation-timeline: scroll()) {
    .site-header__progress {
      display: block;
      animation: header-progress linear both;
      animation-timeline: scroll(root block);
    }
  }

  @media (min-width: 64rem) {
    .site-nav {
      display: block;
      margin-inline-start: auto;
    }

    .site-header__phone {
      display: inline-flex;
    }

    .site-header__cta {
      display: inline-flex;
      inline-size: max-content;
      white-space: nowrap;
    }

    .site-header__call,
    .menu-toggle {
      display: none;
    }

    .site-header__actions {
      gap: var(--space-6);
      margin-inline-start: 0;
    }
  }

  /* Text scaled up (200% or zoom): the header makes room in steps instead of clipping. The thresholds are in rem, so
     they grow with the text size; at 100% the desktop header is never narrower than 64rem, so nothing changes there. */
  @container site-header (max-width: 60rem) {
    .site-header__phone-hours {
      display: none;
    }
  }

  @container site-header (max-width: 52rem) {
    .site-header__phone-text {
      display: none;
    }
  }

  @container site-header (max-width: 48rem) {
    .site-header__actions {
      margin-inline-start: auto;
    }

    .site-nav,
    .site-header__cta,
    .site-header__phone {
      display: none;
    }

    .site-header__call,
    .menu-toggle {
      display: inline-grid;
    }
  }

  /* ---- 3. Mobile menu (dialog.mobile-menu) ---- */
  .mobile-menu {
    --color-text: var(--dark-text);
    --color-text-muted: var(--dark-text-muted);
    --color-border: var(--dark-border);
    --color-heading: var(--white);
    --color-accent: var(--amber-400);
    --color-focus: var(--color-focus-on-dark);
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100vh;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ink-900);
    color: var(--dark-text);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transition:
      opacity var(--dur-2) var(--ease-out),
      display var(--dur-2) allow-discrete,
      overlay var(--dur-2) allow-discrete;
  }

  .mobile-menu[open] {
    display: flex;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }

  .mobile-menu__top {
    display: flex;
    justify-content: flex-end;
    padding: calc(1rem + env(safe-area-inset-top)) var(--container-pad) 1rem;
  }

  .mobile-menu__close {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--dark-border);
    border-radius: 50%;
    color: var(--dark-text);
  }

  .mobile-menu__close .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  /* The five links take the free height and stay centred; the bottom block stays pinned (margin-block-start: auto). */
  .mobile-menu__nav {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    padding-inline: var(--container-pad);
  }

  .mobile-menu__list {
    border-block-start: 1px solid var(--dark-border);
  }

  .mobile-menu__list > li {
    border-block-end: 1px solid var(--dark-border);
  }

  .mobile-menu__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    min-block-size: 2.75rem;
    padding-block: 1.05rem;
    color: var(--dark-text);
    font-size: clamp(2rem, 9vw, 2.6rem);
    font-weight: 760;
    font-stretch: 88%;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-decoration: none;
  }

  .mobile-menu__index {
    inline-size: 2.2ch;
    color: var(--amber-400);
    font-size: var(--fs-xs);
    font-stretch: 100%;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  @media (hover: hover) {
    .mobile-menu__link:hover {
      color: var(--amber-300);
    }
  }

  .mobile-menu__foot {
    display: grid;
    gap: 0.75rem;
    margin-block-start: auto;
    padding: 1.5rem var(--container-pad) calc(1.5rem + env(safe-area-inset-bottom));
  }

  .mobile-menu__hours {
    color: var(--dark-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
  }

  .mobile-menu__social {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-block-start: 0.5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .mobile-menu[open] .mobile-menu__list > li {
      animation: menu-item-in var(--dur-4) var(--ease-out) backwards;
      animation-delay: calc(140ms + var(--i, 0) * 60ms);
    }

    .mobile-menu__list > li:nth-child(1) {
      --i: 0;
    }

    .mobile-menu__list > li:nth-child(2) {
      --i: 1;
    }

    .mobile-menu__list > li:nth-child(3) {
      --i: 2;
    }

    .mobile-menu__list > li:nth-child(4) {
      --i: 3;
    }

    .mobile-menu__list > li:nth-child(5) {
      --i: 4;
    }

    .mobile-menu__foot {
      animation: menu-item-in var(--dur-4) var(--ease-out) 500ms backwards;
    }
  }

  /* ---- 4. Site footer ---- */
  .site-footer {
    position: relative;
    overflow-x: clip;
    padding-block-start: clamp(3.5rem, 6vw, 5rem);
    background: var(--ink-950);
    background-image: var(--grain-dark);
    background-size: var(--grain-size);
    background-repeat: repeat;
    color: var(--dark-text);
    --color-text: var(--dark-text);
    --color-text-muted: var(--dark-text-muted);
    --color-border: var(--dark-border);
    --color-focus: var(--color-focus-on-dark);
  }

  @media (max-width: 63.9375rem) {
    .site-footer {
      padding-block-end: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + var(--space-4));
    }
  }

  .site-footer__top {
    padding-block-end: var(--space-10);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 3.5rem) var(--space-8);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 1.25rem;
  }

  .site-footer__logo {
    block-size: 3rem;
    inline-size: calc(3rem * 356 / 72);
  }

  .site-footer__blurb {
    max-inline-size: 36ch;
    color: var(--dark-text-muted);
  }

  .site-footer__contact {
    display: grid;
    gap: 0.7rem;
    font-size: var(--fs-sm);
  }

  .site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--dark-text-muted);
  }

  .site-footer__contact-item .icon {
    margin-block-start: 0.15em;
    color: var(--amber-400);
  }

  .site-footer__contact-item a {
    color: var(--dark-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    /* 44px hit area (WCAG 2.5.8 / 2.5.5) without moving the layout: the padding is cancelled by the margin. */
    padding-block: 0.875rem;
    margin-block: -14px;
  }

  .site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .site-social-link {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--dark-border);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.04);
    color: var(--dark-text);
    text-decoration: none;
    transition:
      background-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out);
  }

  .site-social-link .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }

  @media (hover: hover) {
    .site-social-link:hover {
      background: var(--white-a14);
      color: var(--amber-300);
    }
  }

  .site-footer__col {
    min-inline-size: 0;
  }

  .site-footer__title {
    margin-block-end: 1.1rem;
    color: var(--dark-text);
    font-size: var(--fs-xs);
    font-stretch: 100%;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .site-footer__links {
    display: grid;
    gap: 0.25rem;
  }

  .site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 2.75rem;
    padding-block: 0.25rem;
    color: var(--dark-text-muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-out);
  }

  .site-footer__links .icon {
    inline-size: 1em;
    block-size: 1em;
  }

  @media (hover: hover) {
    .site-footer__links a:hover {
      color: var(--white);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-block: 1.5rem;
    border-block-start: 1px solid var(--dark-border);
    color: var(--dark-text-muted);
    font-size: var(--fs-xs);
  }

  /* Decorative outlined wordmark closing the footer; never announced or selected. */
  .site-footer__wordmark {
    margin: 0;
    padding-block-start: var(--space-2);
    overflow: hidden;
    color: transparent;
    font-size: clamp(2.25rem, 10.4vw, 10rem);
    font-stretch: 75%;
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: uppercase;
    -webkit-text-stroke: 1px var(--white-a07);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
  }

  @media (min-width: 40rem) {
    .site-footer__top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .site-footer__top {
      grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
      gap: var(--space-12);
    }

    .site-footer__brand {
      grid-column: auto;
    }
  }

  /* ---- 5. Mobile action bar ---- */
  .action-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-floating);
    padding-block-end: env(safe-area-inset-bottom);
    background: var(--ink-900);
    background: color-mix(in srgb, var(--ink-900) 92%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 -1px 0 var(--dark-border);
    color: var(--dark-text);
    visibility: hidden;
    transition: visibility var(--dur-3) allow-discrete;
  }

  .action-bar.is-visible {
    visibility: visible;
  }

  .action-bar__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 0.6rem;
    min-block-size: var(--mobile-bar-h);
    padding: 0.6rem var(--container-pad);
  }

  @media (min-width: 64rem) {
    .action-bar {
      display: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .action-bar {
      translate: 0 110%;
      transition:
        translate var(--dur-3) var(--ease-out),
        visibility var(--dur-3) allow-discrete;
    }

    .action-bar.is-visible {
      translate: 0 0;
    }
  }
}

/* Keyframes (top level of the layer, referenced above) */
@layer layout {
  @keyframes header-progress {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }

  @keyframes menu-item-in {
    from {
      opacity: 0;
      translate: 0 1.5rem;
    }

    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}