/* =========================================================
   SMALL TOWN MAHJ — FINAL HEADER ALIGNMENT
   Mobile/tablet retain the approved centered-crest composition.
   Desktop keeps BOOK at left, centers the crest, and places the full
   navigation row to the right in the brand's warm orange/coral.
   Loaded late as the final authority for shared header geometry.
   ========================================================= */

:root {
  /* 3px crest offset + half of the 139px default crest. */
  --site-header-height: 73px;
  --site-header-logo-clearance: 76px;
}

.site-header.mat-header,
.site-header.mat-header[data-scrolled],
.site-header.mat-header .site-header__inner,
.site-header.mat-header[data-scrolled] .site-header__inner {
  height: var(--site-header-height) !important;
  min-height: var(--site-header-height) !important;
}

body > .tabletop-shell {
  padding-top: calc(var(--site-header-height) + var(--site-header-logo-clearance)) !important;
}

/* The homepage may begin immediately beneath the cobalt header. */
.tabletop-shell > main > .home-photo-hero:first-child {
  margin-top: calc(-1 * var(--site-header-logo-clearance)) !important;
}

.site-header.mat-header > .mat-crest,
.site-header.mat-header[data-scrolled] > .mat-crest {
  width: 139px !important;
  max-width: 139px !important;
}

.header-book-tile,
.site-header.mat-header .nav-toggle,
.site-header.mat-header[data-scrolled] .nav-toggle {
  top: 12px !important;
}

@media (min-width: 981px) {
  :root {
    --site-header-height: 79px;
    /* The 160px centered crest hangs roughly half its height below the header.
       Reserve that overhang plus a small breathing buffer on every interior
       page so headings and controls can never sit beneath the logo. */
    --site-header-logo-clearance: 92px;
    --desktop-nav-gap: clamp(.8rem, 1.15vw, 1.4rem);
    --desktop-header-inset: clamp(34px, 3vw, 58px);
  }

  /* The official crest is deliberately larger on desktop. Its midpoint sits
     exactly on the bottom edge of the 79px header: 79px - (160px / 2) = -1px. */
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: -1px !important;
    right: auto !important;
    left: 50% !important;
    width: 160px !important;
    max-width: 160px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    transform-origin: 50% 50% !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: 100% !important;
    max-width: 1760px !important;
    margin-inline: auto !important;
  }

  .header-book-tile,
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 15px !important;
  }

  /* Pull the controls away from the viewport edges so the cobalt header reads
     as a composed frame around the centered crest rather than edge-pinned UI. */
  .header-book-tile {
    left: var(--desktop-header-inset) !important;
  }

  /* Four desktop links become one right-aligned row. The two existing UL
     groups remain intact in the DOM so <=980px menu behavior is untouched. */
  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 20px !important;
    right: var(--desktop-header-inset) !important;
    left: calc(50% + 104px) !important;
    width: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--desktop-nav-gap) !important;
    margin: 0 !important;
  }

  .site-header.mat-header .site-nav__group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--desktop-nav-gap) !important;
    margin: 0 !important;
  }

  .site-header.mat-header .site-nav__group--left,
  .site-header.mat-header .site-nav__group--right {
    grid-column: auto !important;
    justify-self: auto !important;
    padding: 0 !important;
  }

  .site-header.mat-header .site-nav .rack-tile {
    min-height: 38px !important;
    color: #f3a078 !important;
    font-size: clamp(.63rem, .66vw, .72rem) !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-shadow: none !important;
  }

  .site-header.mat-header .site-nav .rack-tile:hover,
  .site-header.mat-header .site-nav .rack-tile[aria-current='page'] {
    color: #ffc09f !important;
  }

  .site-header.mat-header .site-nav .rack-tile::before {
    background: #f18f72 !important;
  }

  /* Interior page heroes now sit below the reserved crest clearance supplied
     by the shared shell, so this padding can remain focused on page rhythm. */
  .page-hero {
    padding: clamp(2.7rem, 3.8vw, 4.1rem) 0 clamp(3.1rem, 4.5vw, 4.8rem) !important;
  }
}

/* Compact desktop/laptop: preserve the same centered-logo/right-nav structure
   without crowding at 981–1180px. The midpoint of the 140px crest also lands
   on the 79px header edge: 79px - 70px = 9px. */
@media (min-width: 981px) and (max-width: 1180px) {
  :root {
    /* 70px crest overhang + a small safe gap for compact desktop content. */
    --site-header-logo-clearance: 82px;
    --desktop-nav-gap: clamp(.5rem, .82vw, .78rem);
    --desktop-header-inset: clamp(20px, 2.2vw, 28px);
  }

  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: 9px !important;
    left: 50% !important;
    right: auto !important;
    width: 140px !important;
    max-width: 140px !important;
    transform: translateX(-50%) !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: 100% !important;
    max-width: none !important;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    left: calc(50% + 88px) !important;
    right: var(--desktop-header-inset) !important;
  }

  .site-header.mat-header .site-nav .rack-tile {
    font-size: .57rem !important;
    letter-spacing: .075em !important;
  }

  .page-hero {
    padding-top: 2.45rem !important;
    padding-bottom: 3.2rem !important;
  }
}

@media (max-width: 680px) {
  :root {
    /* 3px crest offset + half of the 128px mobile crest. */
    --site-header-height: 67px;
    --site-header-logo-clearance: 70px;
  }

  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    width: 128px !important;
    max-width: 128px !important;
  }

  .header-book-tile,
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 11px !important;
  }
}