/* ==========================================================================
   Mobile navigation
   A drill down panel, dark, full height. Kept in its own file because it owes
   nothing to the rest of the sheet and replaces Astra's menu outright.
   ========================================================================== */

.enm-nav {
  position: fixed;
  inset: 0;
  z-index: 9999;
  -webkit-tap-highlight-color: transparent;
}

/* The dim lives on a pseudo element rather than on the panel itself. Fading the
   container faded the sheet along with it, so on the way out the slide was
   never visible and the whole thing simply blinked away. */
.enm-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 11, 8, 0.55);
  opacity: 0;
  transition: opacity 260ms var(--enm-ease);
}

.enm-nav[hidden] { display: none; }
.enm-nav:not(.is-open) { pointer-events: none; }
.enm-nav.is-open::before { opacity: 1; }

.enm-nav__sheet {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  flex-direction: column;
  background: var(--enm-surface);
  transform: translateX(-100%);
  transition: transform 260ms var(--enm-ease-out);
  max-width: 26rem;
  box-shadow: 0 0 40px rgba(23, 20, 15, 0.18);
}

.enm-nav.is-open .enm-nav__sheet { transform: none; }

/* --- Bar ----------------------------------------------------------------- */

.enm-nav__bar {
  display: flex;
  align-items: center;
  gap: var(--enm-s-4);
  padding: var(--enm-s-4) var(--enm-s-5);
  padding-top: calc(var(--enm-s-4) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--enm-line);
  flex: 0 0 auto;
}

.enm-nav__close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--enm-line-strong);
  border-radius: var(--enm-r-sm);
  background: transparent;
  color: var(--enm-ink-muted);
  cursor: pointer;
}

.enm-nav__close svg { width: 17px; height: 17px; }
.enm-nav__close:active { background: var(--enm-surface-sunk); }

.enm-nav__brand { display: block; }
.enm-nav__brand .enm-logo { gap: 0.625rem; padding-bottom: 0.3125rem; }
.enm-nav__brand .enm-logo__mark { font-size: 1.375rem; }
.enm-nav__brand .enm-logo__place { font-size: 0.6875rem; color: var(--enm-ink-soft); }
.enm-nav__brand .enm-logo__rule { height: 1.25rem; background: var(--enm-line-strong); }
.enm-nav__brand .enm-logo::after,
.enm-nav__brand .enm-logo::before { display: none; }

/* --- Stage --------------------------------------------------------------- */

.enm-nav__stage {
  position: relative;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.enm-nav__panel {
  padding-bottom: calc(var(--enm-s-6) + env(safe-area-inset-bottom, 0px));
}

.enm-nav__panel[hidden] { display: none; }

.enm-nav__panel.is-entering {
  opacity: 0;
  transform: translateX(1.25rem);
}

.enm-nav__panel.is-current {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--enm-ease), transform 240ms var(--enm-ease-out);
}

/* --- Level one ----------------------------------------------------------- */

.enm-nav__list { list-style: none; margin: 0; padding: 0; }

.enm-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-4);
  width: 100%;
  padding: 1.125rem var(--enm-s-5);
  border: 0;
  border-bottom: 1px solid var(--enm-line);
  background: transparent;
  color: var(--enm-ink);
  font-family: var(--enm-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.enm-nav__link svg { width: 17px; height: 17px; color: var(--enm-gold); flex: 0 0 auto; }
.enm-nav__link:active { background: var(--enm-gold-veil); }

/* --- Foot ---------------------------------------------------------------- */

.enm-nav__foot { padding: var(--enm-s-6) var(--enm-s-5) 0; }

.enm-nav__call {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid rgba(176, 137, 79, 0.45);
  border-radius: var(--enm-r);
}

.enm-nav__call:active { background: var(--enm-gold-veil); }

.enm-nav__call-label {
  font-size: 0.6875rem;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  color: var(--enm-gold);
}

.enm-nav__call-num {
  font-family: var(--enm-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--enm-ink);
}

.enm-nav__hours {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--enm-ink-soft);
}

/* --- Level two ----------------------------------------------------------- */

.enm-nav__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem var(--enm-s-5);
  border: 0;
  border-bottom: 1px solid var(--enm-line);
  background: transparent;
  color: var(--enm-ink-soft);
  font-family: var(--enm-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
  cursor: pointer;
}

.enm-nav__back svg { width: 16px; height: 16px; color: var(--enm-gold); }
.enm-nav__back:active { background: var(--enm-surface-sunk); }

.enm-nav__all {
  display: block;
  padding: 1rem var(--enm-s-5);
  border-bottom: 1px solid var(--enm-line);
  color: var(--enm-gold);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--enm-track-caps);
  text-transform: uppercase;
}

.enm-nav__all:active { background: var(--enm-gold-veil); }

.enm-nav__groups { padding: var(--enm-s-5) 0 0; }
.enm-nav__group { margin-bottom: var(--enm-s-5); }

.enm-nav__letter {
  margin: 0 0 0.375rem;
  padding: 0 var(--enm-s-5);
  font-family: var(--enm-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--enm-gold);
}

.enm-nav__terms { list-style: none; margin: 0; padding: 0; }

.enm-nav__terms a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enm-s-4);
  padding: 0.8125rem var(--enm-s-5);
  color: var(--enm-ink-muted);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--enm-line);
}

.enm-nav__terms a:active { background: var(--enm-gold-veil); }

.enm-nav__count {
  font-size: 0.75rem;
  color: var(--enm-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* --- Page behind ---------------------------------------------------------- */

body.enm-nav-open { overflow: hidden; }

/* Astra's own mobile menu is replaced outright. */
@media (max-width: 921px) {
  .main-header-bar-navigation { display: none !important; }
}

@media (min-width: 922px) {
  .enm-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .enm-nav,
  .enm-nav__sheet,
  .enm-nav__panel { transition: none !important; }
}

/* ==========================================================================
   Colour, pinned

   Two things upstream reach in here. `.enm a { color: inherit }` scores
   (0,1,1) and beat the link class at (0,1,0), so the anchor items rendered
   near black on black while the button items were fine. And Astra paints its
   accent onto every bare <button>, which turned the close control blue.

   Every rule below carries two classes so neither can win.
   ========================================================================== */

.enm-nav .enm-nav__close,
.enm-nav .enm-nav__close:hover,
.enm-nav .enm-nav__close:focus,
.enm-nav .enm-nav__close:active {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--enm-line-strong) !important;
  color: var(--enm-ink-muted) !important;
  -webkit-text-fill-color: var(--enm-ink-muted);
  box-shadow: none !important;
}

.enm-nav .enm-nav__close:active { background: var(--enm-surface-sunk) !important; }

.enm-nav a.enm-nav__link,
.enm-nav a.enm-nav__link:link,
.enm-nav a.enm-nav__link:visited,
.enm-nav button.enm-nav__link {
  color: var(--enm-ink) !important;
  -webkit-text-fill-color: var(--enm-ink);
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.enm-nav a.enm-nav__link:active,
.enm-nav button.enm-nav__link:active {
  background: var(--enm-gold-veil) !important;
}

.enm-nav .enm-nav__back,
.enm-nav .enm-nav__back:hover,
.enm-nav .enm-nav__back:focus {
  background: transparent !important;
  background-image: none !important;
  color: var(--enm-ink-soft) !important;
  -webkit-text-fill-color: var(--enm-ink-soft);
  box-shadow: none !important;
}

.enm-nav a.enm-nav__all,
.enm-nav a.enm-nav__all:link,
.enm-nav a.enm-nav__all:visited {
  color: var(--enm-gold) !important;
  -webkit-text-fill-color: var(--enm-gold);
}

.enm-nav .enm-nav__terms a,
.enm-nav .enm-nav__terms a:link,
.enm-nav .enm-nav__terms a:visited {
  color: var(--enm-ink-muted) !important;
  -webkit-text-fill-color: var(--enm-ink-muted);
}

.enm-nav .enm-nav__terms a .enm-nav__count {
  color: var(--enm-ink-faint) !important;
  -webkit-text-fill-color: var(--enm-ink-faint);
}

.enm-nav a.enm-nav__call,
.enm-nav a.enm-nav__call:link,
.enm-nav a.enm-nav__call:visited { color: var(--enm-ink) !important; }

.enm-nav .enm-nav__call-num {
  color: var(--enm-ink) !important;
  -webkit-text-fill-color: var(--enm-ink);
}

.enm-nav .enm-nav__call-label,
.enm-nav .enm-nav__letter {
  color: var(--enm-gold) !important;
  -webkit-text-fill-color: var(--enm-gold);
}

/* Astra draws a blue focus ring on buttons. Inside a dark panel that reads as
   a stray line under whatever was last pressed. Gold, and only for keyboard. */
.enm-nav button:focus,
.enm-nav a:focus {
  outline: none;
  box-shadow: none !important;
  border-color: var(--enm-line-strong);
}

.enm-nav button:focus-visible,
.enm-nav a:focus-visible {
  outline: 2px solid var(--enm-gold);
  outline-offset: -3px;
  border-radius: var(--enm-r-xs);
}

.enm-nav .enm-nav__back:focus,
.enm-nav .enm-nav__all:focus,
.enm-nav .enm-nav__link:focus {
  border-bottom-color: var(--enm-line) !important;
}

/* Belt and braces on the focus ring. WebKit will draw its own on a control
   that receives focus programmatically, and it does not always show up in
   computed styles, so every route to a ring is closed here. */
.enm-nav *:focus,
.enm-nav *:focus-within {
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-focus-ring-color: transparent;
}

.enm-nav *::-moz-focus-inner { border: 0; }

/* Reinstated only for genuine keyboard use, which the script flags. */
body.enm-using-keys .enm-nav button:focus,
body.enm-using-keys .enm-nav a:focus {
  outline: 2px solid var(--enm-gold) !important;
  outline-offset: -3px;
}

/* ==========================================================================
   Focus rings, final word

   Astra ships `a:focus { outline: thin dotted }` in its accessibility styles.
   That scores the same as a single-class rule, so on some load orders it can
   win. These carry three classes each, which nothing upstream matches, and the
   separator colour is restated so a focused row cannot brighten its own edge.
   ========================================================================== */

.enm-nav .enm-nav__list a.enm-nav__link:focus,
.enm-nav .enm-nav__list button.enm-nav__link:focus,
.enm-nav .enm-nav__stage a:focus,
.enm-nav .enm-nav__stage button:focus,
.enm-nav .enm-nav__bar button:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border-bottom-color: var(--enm-line) !important;
  -webkit-tap-highlight-color: transparent;
}

.enm-nav .enm-nav__stage a:focus:not(:focus-visible),
.enm-nav .enm-nav__stage button:focus:not(:focus-visible) {
  outline: 0 !important;
}

/* Keyboard users still get a ring, in gold, and only then. */
body.enm-using-keys .enm-nav .enm-nav__stage a:focus,
body.enm-using-keys .enm-nav .enm-nav__stage button:focus,
body.enm-using-keys .enm-nav .enm-nav__bar button:focus {
  outline: 2px solid var(--enm-gold) !important;
  outline-offset: -3px !important;
}

/* ==========================================================================
   Tap highlight

   iOS paints a translucent blue wash over whatever you touch. Setting the
   property on the container is not reliable once a child declares its own, so
   it is cleared on every element in the panel, in every state.

   The panel supplies its own pressed feedback through :active backgrounds,
   so nothing is lost by removing the system one.
   ========================================================================== */

.enm-nav,
.enm-nav *,
.enm-nav *::before,
.enm-nav *::after {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.enm-nav a,
.enm-nav button,
.enm-nav a:active,
.enm-nav button:active,
.enm-nav a:focus,
.enm-nav button:focus,
.enm-nav a:hover,
.enm-nav button:hover {
  outline: 0 !important;
  -webkit-focus-ring-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* The trigger in the header is outside the panel and gets the same treatment. */
.menu-toggle,
.menu-toggle:focus,
.menu-toggle:active {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  outline: 0 !important;
}


/* ==========================================================================
   Astra button colours

   Astra styles every <button> on the site as a themed button. Its inline CSS
   sets background-color and border-color on :hover and :focus, and main.min.css
   sets border-color on :active, all to the theme accent. iOS leaves :hover
   stuck on whatever you last touched, which is where the blue edge under a
   tapped row came from. Every control in the panel pins its own colours in
   every state so nothing leaks through.
   ========================================================================== */

.enm-nav .enm-nav__link,
.enm-nav .enm-nav__link:hover,
.enm-nav .enm-nav__link:focus,
.enm-nav .enm-nav__link:active,
.enm-nav .enm-nav__back,
.enm-nav .enm-nav__back:hover,
.enm-nav .enm-nav__back:focus,
.enm-nav .enm-nav__back:active,
.enm-nav .enm-nav__all,
.enm-nav .enm-nav__all:hover,
.enm-nav .enm-nav__all:focus,
.enm-nav .enm-nav__all:active {
  border-color: var(--enm-line) !important;
}

.enm-nav .enm-nav__terms a,
.enm-nav .enm-nav__terms a:hover,
.enm-nav .enm-nav__terms a:focus,
.enm-nav .enm-nav__terms a:active {
  border-color: var(--enm-line) !important;
}

.enm-nav .enm-nav__close,
.enm-nav .enm-nav__close:hover,
.enm-nav .enm-nav__close:focus,
.enm-nav .enm-nav__close:active {
  border-color: var(--enm-line-strong) !important;
}

.enm-nav .enm-nav__call,
.enm-nav .enm-nav__call:hover,
.enm-nav .enm-nav__call:focus,
.enm-nav .enm-nav__call:active {
  border-color: rgba(176, 137, 79, 0.45) !important;
}

/* Astra paints a background on hover and focus too. Cleared here, then the
   panel puts its own pressed state back below. */
.enm-nav a:hover,
.enm-nav a:focus,
.enm-nav button:hover,
.enm-nav button:focus {
  background-color: transparent !important;
}

.enm-nav .enm-nav__link:active,
.enm-nav .enm-nav__back:active,
.enm-nav .enm-nav__all:active,
.enm-nav .enm-nav__terms a:active {
  background-color: var(--enm-surface-sunk) !important;
}

.enm-nav .enm-nav__close:active {
  background-color: var(--enm-surface-sunk) !important;
  transform: scale(0.92);
  transition: transform 90ms var(--enm-ease);
}

/* Champagne at full strength is thin against white for small type. The links
   and the A to Z markers take the deeper gold so they stay legible; the icons
   keep the brighter tone. */
.enm-nav .enm-nav__all,
.enm-nav .enm-nav__all:link,
.enm-nav .enm-nav__all:visited,
.enm-nav .enm-nav__letter,
.enm-nav .enm-nav__call-label {
  color: var(--enm-gold-deep) !important;
  -webkit-text-fill-color: var(--enm-gold-deep);
}

/* --- Bookings card ------------------------------------------------------- */

/* The one thing in the panel actually worth reaching for, so it gets a warm
   fill and a firmer edge rather than the flat reset every other link takes.
   The rules above clear backgrounds on hover across the board, so these need
   the extra class to outscore them. */
.enm-nav a.enm-nav__call {
  transition: background-color 200ms var(--enm-ease),
              border-color 200ms var(--enm-ease),
              box-shadow 200ms var(--enm-ease),
              transform 120ms var(--enm-ease);
}

.enm-nav a.enm-nav__call:hover,
.enm-nav a.enm-nav__call:focus {
  background-color: var(--enm-gold-tint) !important;
  border-color: var(--enm-gold) !important;
  box-shadow: 0 4px 18px rgba(176, 137, 79, 0.22) !important;
}

.enm-nav a.enm-nav__call:active {
  background-color: var(--enm-gold-veil) !important;
  border-color: var(--enm-gold-deep) !important;
  box-shadow: 0 1px 6px rgba(176, 137, 79, 0.18) !important;
  transform: scale(0.985);
}

/* The number lifts to the deep gold alongside the fill so the card reads as a
   single object rather than a box that changed colour behind fixed text. */
.enm-nav a.enm-nav__call:hover .enm-nav__call-num,
.enm-nav a.enm-nav__call:focus .enm-nav__call-num,
.enm-nav a.enm-nav__call:active .enm-nav__call-num {
  color: var(--enm-gold-deep) !important;
  -webkit-text-fill-color: var(--enm-gold-deep);
}