/* Shared public customer navigation. Keep every customer-facing page aligned. */
:root {
  --customer-nav-red: #c9141e;
  --customer-nav-ink: #252525;
  --customer-nav-muted: #6d6767;
  --customer-nav-border: rgba(27, 27, 27, 0.11);
  --customer-nav-paper: rgba(255, 253, 250, 0.96);
}

/* Prevent a browser/user-agent or page-specific rule from leaving a blank
   strip above the shared navigation. */
html,
body,
body.minimal-customer,
body.customer-account-page,
body.customer-orders-page,
body.checkout-page,
body.confirmation-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.site-header,
.order-header,
.account-header,
.orders-header {
  margin-top: 0 !important;
  top: 0 !important;
}

.site-header,
.order-header,
.account-header,
.orders-header,
.confirmation-page > .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  min-height: 96px !important;
  background: var(--customer-nav-paper) !important;
  border-bottom: 1px solid var(--customer-nav-border) !important;
  box-shadow: 0 3px 14px rgba(27, 27, 27, 0.04) !important;
  backdrop-filter: blur(16px);
}

.navbar,
.order-header,
.account-header,
.orders-header,
.confirmation-page > .site-header {
  padding: 0 max(28px, calc((100vw - 1700px) / 2)) !important;
}

.navbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: min(1700px, 100%) !important;
  min-height: 96px !important;
  margin-inline: auto !important;
  gap: 28px !important;
}

.order-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 28px !important;
  width: 100% !important;
}

.account-header,
.orders-header,
.confirmation-page > .site-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center;
  width: 100% !important;
  min-height: 96px !important;
}

.brand,
.header-logo,
.account-brand,
.orders-brand,
.confirmation-page > .site-header > .brand {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  color: var(--customer-nav-ink);
  white-space: nowrap;
}

.brand img,
.header-logo img,
.account-brand img,
.orders-brand img,
.confirmation-page > .site-header > .brand img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain;
}

.brand .minimal-wordmark,
.header-logo .minimal-wordmark,
.account-brand > span,
.orders-brand > span,
.confirmation-page > .site-header > .brand > .minimal-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
}

.brand .minimal-wordmark strong,
.header-logo .minimal-wordmark strong,
.account-brand > span strong,
.orders-brand > span strong,
.confirmation-page > .site-header > .brand .minimal-wordmark strong {
  font-size: 1.05rem;
  font-weight: 900;
}

.brand .minimal-wordmark small,
.header-logo .minimal-wordmark small,
.account-brand > span small,
.orders-brand > span small,
.confirmation-page > .site-header > .brand .minimal-wordmark small {
  color: var(--customer-nav-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.header-navigation,
.account-navigation,
.orders-navigation,
.header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px !important;
}

.navbar .nav-links,
.navbar .nav-actions { min-width: 0; }

.navbar .nav-links,
.order-header .header-navigation,
.account-header .account-navigation,
.orders-header .orders-navigation,
.confirmation-page > .site-header .header-actions {
  justify-self: center;
}

.navbar .nav-actions { justify-self: end; }

.nav-link,
.header-navigation a,
.account-navigation a,
.orders-navigation a,
.header-actions .header-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 16px 16px !important;
  color: var(--customer-nav-ink) !important;
  background: transparent;
  border-radius: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.nav-link:hover,
.nav-link.active,
.header-navigation a:hover,
.header-navigation a.active,
.account-navigation a:hover,
.account-navigation a.active,
.orders-navigation a:hover,
.orders-navigation a.active,
.header-actions .header-link:hover,
.header-actions .header-link.active {
  color: var(--customer-nav-red) !important;
  background: #fbe9e7 !important;
  transform: translateY(-1px);
}

.nav-link.active::before,
.nav-link:hover::before { opacity: 0 !important; }

.nav-link.active,
.header-navigation a.active,
.account-navigation a.active,
.orders-navigation a.active,
.header-actions .header-link.active {
  box-shadow: inset 0 -3px 0 var(--customer-nav-red) !important;
}

.header-navigation a::after { display: none !important; }

.customer-nav-account,
#reservation-account-link { order: 2; }

.customer-nav-account[hidden],
#reservation-account-link[hidden] { display: none !important; }

/* The Account destination is now always available in the shared nav. */
#customer-nav-account,
#reservation-account-link { display: none !important; }

.customer-nav-guest { display: flex; align-items: center; gap: 8px; }

@media (max-width: 980px) {
  .navbar,
  .order-header,
  .account-header,
  .orders-header,
  .confirmation-page > .site-header { padding-inline: 18px !important; }

  .nav-links,
  .header-navigation,
  .account-navigation,
  .orders-navigation,
  .header-actions { gap: 2px !important; }

  .nav-link,
  .header-navigation a,
  .account-navigation a,
  .orders-navigation a,
  .header-actions .header-link { padding-inline: 9px !important; font-size: 0.76rem !important; }
}

@media (max-width: 700px) {
  .navbar,
  .order-header,
  .account-header,
  .orders-header,
  .confirmation-page > .site-header { min-height: 68px !important; }

  .navbar { min-height: 68px !important; }

  .account-header,
  .orders-header,
  .confirmation-page > .site-header { grid-template-columns: 1fr !important; gap: 6px !important; padding-block: 8px !important; }

  .account-header nav,
  .orders-header nav,
  .confirmation-page > .site-header nav { grid-column: 1 !important; justify-self: start !important; overflow-x: auto; max-width: 100%; }

  .brand img,
  .header-logo img,
  .account-brand img,
  .orders-brand img,
  .confirmation-page > .site-header > .brand img { width: 42px !important; height: 42px !important; }
}