/* =========================================================
   SMALL TOWN MAHJ — HALF-CREST HEADER ALIGNMENT
   Mobile/tablet retain the approved centered-crest composition.
   Desktop moves the crest to the right and keeps navigation visible.
   Loaded last as the final authority for header geometry only.
   ========================================================= */

: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 is intentionally different: its shuffle-photo hero may begin
   immediately at the cobalt header edge and sit behind the lower half of the crest. */
.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 crest no longer hangs through the center of page content. */
    --site-header-logo-clearance: 0px;
    --desktop-nav-gap: clamp(1.2rem, 1.7vw, 2rem);
  }

  /* The desktop crest behaves like a brand seal at the right edge instead
     of a divider splitting navigation into two unrelated groups. */
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: -3px !important;
    right: clamp(20px, 2.6vw, 44px) !important;
    left: auto !important;
    width: 108px !important;
    max-width: 108px !important;
    transform: none !important;
    transform-origin: 100% 22% !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: min(1500px, calc(100% - 48px)) !important;
    max-width: none !important;
  }

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

  .header-book-tile {
    left: 0 !important;
  }

  /* Home / Story / Availability / Contact become one continuous visible row.
     The existing two ULs remain in the DOM so approved mobile behavior and
     menu structure do not change. */
  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 20px !important;
    right: clamp(118px, 9vw, 150px) !important;
    left: clamp(118px, 9vw, 150px) !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--desktop-nav-gap) !important;
  }

  .site-header.mat-header .site-nav__group {
    display: flex !important;
    align-items: center !important;
    gap: var(--desktop-nav-gap) !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: rgba(255, 250, 241, .84) !important;
    font-size: clamp(.66rem, .68vw, .74rem) !important;
    letter-spacing: .14em !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: #fffaf1 !important;
  }

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

  /* With the crest out of the center, generic interior heroes no longer need
     a second large clearance band. This affects Availability/Contact desktop
     only; About owns its own desktop hero and mobile remains unchanged. */
  .page-hero {
    padding: clamp(2.7rem, 3.8vw, 4.1rem) 0 clamp(3.1rem, 4.5vw, 4.8rem) !important;
  }
}

/* Compact desktop/laptop header: retain visible navigation without allowing
   the BOOK tile, four links, and crest to crowd one another at 981–1180px. */
@media (min-width: 981px) and (max-width: 1180px) {
  :root {
    --desktop-nav-gap: clamp(.9rem, 1.35vw, 1.15rem);
  }

  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: 1px !important;
    right: 14px !important;
    width: 92px !important;
    max-width: 92px !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: calc(100% - 32px) !important;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    right: 102px !important;
    left: 108px !important;
  }

  .site-header.mat-header .site-nav .rack-tile {
    font-size: .64rem !important;
    letter-spacing: .105em !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;
  }
}