/* =========================================================
   SMALL TOWN MAHJ — SIDE-FRAME SITE SHELL
   Keep the Chinoiserie/Talavera artwork as a signature side treatment,
   remove the top/bottom frame, and let the center behave like a normal site.
   Loaded last so it intentionally replaces the earlier full-mat viewport shell.
   ========================================================= */

:root {
  --site-side-frame: clamp(18px, 4.5vw, 34px);
  --site-paper: #fffaf1;
  --site-paper-deep: #f6efe4;
  --site-cobalt: #083477;
  --site-header-cobalt: #062e68;
  --site-header-height: 100px;
}

html,
body {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
  background: var(--site-paper) !important;
}

body {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 var(--site-side-frame) !important;
  box-sizing: border-box !important;
}

.mat-edge-frame {
  position: fixed !important;
  z-index: 500 !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.mat-edge--top,
.mat-edge--bottom,
.mat-corner {
  display: none !important;
}

.mat-edge--left,
.mat-edge--right {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--site-side-frame) !important;
  min-width: var(--site-side-frame) !important;
  max-width: var(--site-side-frame) !important;
  height: 100vh !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  background-color: var(--mat-porcelain-ivory) !important;
  background-image: var(--mat-frame-art) !important;
  background-repeat: repeat !important;
  background-position: center !important;
  background-size: var(--mat-frame-art-size) !important;
  transform: none !important;
}

.mat-edge--left { left: 0 !important; right: auto !important; }
.mat-edge--right { right: 0 !important; left: auto !important; }

.mat-edge-frame::before {
  position: fixed !important;
  z-index: 4 !important;
  inset: 0 !important;
  display: block !important;
  content: '' !important;
  pointer-events: none !important;
  background:
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(var(--site-side-frame) - var(--mat-rule-width)) 0 / var(--mat-rule-width) 100% no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(100% - var(--site-side-frame)) 0 / var(--mat-rule-width) 100% no-repeat !important;
}

.mat-edge-frame::after { display: none !important; }

body > .tabletop-shell {
  position: relative !important;
  z-index: 100 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding-top: var(--site-header-height) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  background: var(--site-paper) !important;
  box-shadow: none !important;
}

.tabletop-shell > main {
  padding-top: 0 !important;
  background: var(--site-paper) !important;
}

.site-header.mat-header,
.site-header.mat-header[data-scrolled] {
  position: fixed !important;
  z-index: 900 !important;
  top: 0 !important;
  right: var(--site-side-frame) !important;
  left: var(--site-side-frame) !important;
  width: auto !important;
  height: var(--site-header-height) !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,249,238,.34) !important;
  background: var(--site-header-cobalt) !important;
  box-shadow: 0 10px 24px rgba(4,30,70,.12) !important;
  pointer-events: auto !important;
  transform: none !important;
}

.site-header.mat-header::before,
.site-header.mat-header::after,
.site-header.mat-header[data-scrolled]::before,
.site-header.mat-header[data-scrolled]::after {
  display: none !important;
  content: none !important;
}

.site-header.mat-header .site-header__inner,
.site-header.mat-header[data-scrolled] .site-header__inner {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: min(1180px, calc(100% - 28px)) !important;
  height: var(--site-header-height) !important;
  min-height: var(--site-header-height) !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.site-header.mat-header > .mat-crest,
.site-header.mat-header[data-scrolled] > .mat-crest {
  position: absolute !important;
  z-index: 2000 !important;
  top: 3px !important;
  left: 50% !important;
  width: 154px !important;
  max-width: 154px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  outline: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
}

.site-header.mat-header > .mat-crest::before,
.site-header.mat-header > .mat-crest::after,
.site-header.mat-header[data-scrolled] > .mat-crest::before,
.site-header.mat-header[data-scrolled] > .mat-crest::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.site-header.mat-header > .mat-crest img,
.site-header.mat-header[data-scrolled] > .mat-crest img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  transition: none !important;
  animation: none !important;
}

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

/* ---------------------------------------------------------
   Unified Mahjong button system
   All primary booking buttons share identical geometry, typography,
   inset detail, depth, and interaction. Only their color tokens differ.
   --------------------------------------------------------- */
.header-book-tile,
.home-photo-hero__cta,
.physical-cta {
  --mahj-btn-bg-top: rgba(255,255,255,.9);
  --mahj-btn-bg-mid: rgba(255,252,244,.82);
  --mahj-btn-bg-bottom: rgba(236,227,210,.96);
  --mahj-btn-base: #fff9ee;
  --mahj-btn-border: #4c6f9f;
  --mahj-btn-text: #123f78;
  --mahj-btn-accent: #174b8f;
  --mahj-btn-depth: #c9bca7;
  --mahj-btn-depth-blue: rgba(7,39,84,.16);
  --mahj-btn-shadow: rgba(3,28,65,.16);
  --mahj-btn-inset: rgba(23,75,143,.24);

  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 48px !important;
  border: 1px solid var(--mahj-btn-border) !important;
  border-radius: 7px 7px 9px 8px !important;
  background:
    linear-gradient(180deg, var(--mahj-btn-bg-top) 0%, var(--mahj-btn-bg-mid) 52%, var(--mahj-btn-bg-bottom) 100%),
    var(--mahj-btn-base) !important;
  box-shadow:
    0 3px 0 var(--mahj-btn-depth),
    0 5px 0 var(--mahj-btn-depth-blue),
    0 9px 15px var(--mahj-btn-shadow),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10) !important;
  color: var(--mahj-btn-text) !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  gap: 0 !important;
  padding: 0 1rem !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: none;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.header-book-tile::before,
.home-photo-hero__cta::before,
.physical-cta::before {
  position: absolute;
  inset: 4px;
  border: 1px solid var(--mahj-btn-inset);
  border-radius: 4px 4px 6px 5px;
  content: '';
  pointer-events: none;
}

.header-book-tile::after,
.home-photo-hero__cta::after,
.physical-cta::after {
  content: '◆';
  margin-left: .48rem;
  color: var(--mahj-btn-accent);
  font-size: .48rem;
  opacity: .82;
}

.header-book-tile:hover,
.home-photo-hero__cta:hover,
.physical-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 4px 0 var(--mahj-btn-depth),
    0 6px 0 var(--mahj-btn-depth-blue),
    0 11px 17px rgba(3,28,65,.18),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10) !important;
}

.header-book-tile:active,
.home-photo-hero__cta:active,
.physical-cta:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 1px 0 var(--mahj-btn-depth),
    0 3px 7px rgba(3,28,65,.14),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10) !important;
}

.header-book-tile:focus-visible,
.home-photo-hero__cta:focus-visible,
.physical-cta:focus-visible {
  outline: 3px solid rgba(233,163,45,.78) !important;
  outline-offset: 3px !important;
}

/* Cobalt variants use the exact same physical button styling. */
.home-photo-hero__cta,
.physical-cta {
  --mahj-btn-bg-top: rgba(34,91,165,.98);
  --mahj-btn-bg-mid: rgba(18,70,139,.98);
  --mahj-btn-bg-bottom: rgba(7,47,103,.99);
  --mahj-btn-base: #0d4488;
  --mahj-btn-border: #062f68;
  --mahj-btn-text: #fffaf1;
  --mahj-btn-accent: #fffaf1;
  --mahj-btn-depth: #05275a;
  --mahj-btn-depth-blue: rgba(2,24,58,.36);
  --mahj-btn-shadow: rgba(2,22,54,.25);
  --mahj-btn-inset: rgba(255,250,241,.34);
}

@media (min-width: 981px) {
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    width: 168px !important;
    max-width: 168px !important;
  }
}

@media (max-width: 680px) {
  :root {
    --site-side-frame: 18px;
    --site-header-height: 94px;
  }

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

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

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

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

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle { right: 10px !important; }

  .header-book-tile,
  .home-photo-hero__cta,
  .physical-cta {
    min-height: 44px !important;
    font-size: .62rem !important;
    letter-spacing: .105em !important;
    padding-inline: .7rem !important;
  }

  .header-book-tile::before,
  .home-photo-hero__cta::before,
  .physical-cta::before {
    inset: 3px;
  }
}