/* Header and disclosure panel share the page's actual content edges. */
:root { --content-gutter: max(6vw, 24px); }

.site-header {
  left: var(--content-gutter);
  right: var(--content-gutter);
  width: auto;
  max-width: none;
  transform: none;
}

#mobile-menu {
  left: var(--content-gutter);
  right: var(--content-gutter);
  width: auto;
  max-width: none;
}

.site-header .theme-toggle,
.site-header .menu-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
}
.site-header .theme-toggle { padding: 10px; }
.site-header .menu-button { padding: 8px; }

@media (max-width: 700px) {
  /* The page uses fixed 24px padding at its mobile breakpoint. */
  :root { --content-gutter: 24px; }
  .site-header .logo { width: 108px; }
}

@media (max-width: 420px) {
  .site-header .header-booking-full { display: none; }
  .site-header .header-booking-short { display: inline; }
}

@media (max-width: 360px) {
  .site-header .logo { width: 80px; }
}

/* Keep the booking action at the outer right edge, with controls before it. */
.site-header nav { margin-left: auto; margin-right: auto; }
.site-header .theme-toggle { margin-left: auto; }
.site-header .button { margin-left: 0; flex-shrink: 0; }

/* The legal text keeps its narrower reading column and the same inner gutter. */
.legal-page .site-header {
  left: calc(max(0px, 50% - 660px) + var(--content-gutter));
  right: calc(max(0px, 50% - 660px) + var(--content-gutter));
  width: auto;
}