/* One shared header system for all child pages. Must stay loaded after app.css. */
:root {
  --shared-brand-font: "Segoe UI", Inter, Arial, sans-serif;
  --shared-hero-height: 388px;
  --shared-logo-size: 96px;
  --shared-welcome-size: 23px;
  --shared-category-size: 26px;
  --shared-name-size: 44px;
  --shared-message-size: 16px;
  --shared-halo-width: min(520px, calc(100vw - 84px));
  --shared-halo-height: 230px;
  --shared-halo-bg:
    radial-gradient(ellipse at center,
      rgba(8, 7, 5, 0.50) 0%,
      rgba(8, 7, 5, 0.38) 46%,
      rgba(8, 7, 5, 0.18) 72%,
      rgba(8, 7, 5, 0) 100%);
  --shared-halo-shadow: 0 24px 70px rgba(0, 0, 0, 0.20);
  --shared-welcome-color: #ffe98f;
  --shared-category-color: #fff3c7;
  --shared-name-color: #ffffff;
  --shared-message-color: #ffffff;
  --shared-shadow-strong:
    0 2px 1px rgba(0, 0, 0, 0.98),
    0 0 13px rgba(0, 0, 0, 0.92),
    0 0 20px rgba(255, 218, 90, 0.40);
  --shared-shadow-soft:
    0 2px 1px rgba(0, 0, 0, 0.92),
    0 0 12px rgba(0, 0, 0, 0.85);
}

html[data-theme="light"] {
  --shared-halo-bg:
    radial-gradient(ellipse at center,
      rgba(8, 7, 5, 0.53) 0%,
      rgba(8, 7, 5, 0.41) 46%,
      rgba(8, 7, 5, 0.20) 72%,
      rgba(8, 7, 5, 0) 100%);
  --shared-halo-shadow: 0 24px 72px rgba(0, 0, 0, 0.24);
  --shared-welcome-color: #ffe98f;
  --shared-category-color: #fff3c7;
  --shared-name-color: #ffffff;
  --shared-message-color: #ffffff;
  --shared-shadow-strong:
    0 2px 1px rgba(0, 0, 0, 0.98),
    0 0 13px rgba(0, 0, 0, 0.94),
    0 0 20px rgba(255, 218, 90, 0.42);
  --shared-shadow-soft:
    0 2px 1px rgba(0, 0, 0, 0.94),
    0 0 12px rgba(0, 0, 0, 0.88);
}

html[data-theme="dark"] {
  --shared-halo-bg:
    radial-gradient(ellipse at center,
      rgba(8, 7, 5, 0.53) 0%,
      rgba(8, 7, 5, 0.41) 46%,
      rgba(8, 7, 5, 0.20) 72%,
      rgba(8, 7, 5, 0) 100%);
  --shared-halo-shadow: 0 24px 72px rgba(0, 0, 0, 0.24);
  --shared-welcome-color: #ffe98f;
  --shared-category-color: #fff3c7;
  --shared-name-color: #ffffff;
  --shared-message-color: #ffffff;
  --shared-shadow-strong:
    0 2px 1px rgba(0, 0, 0, 0.98),
    0 0 13px rgba(0, 0, 0, 0.94),
    0 0 20px rgba(255, 218, 90, 0.42);
  --shared-shadow-soft:
    0 2px 1px rgba(0, 0, 0, 0.94),
    0 0 12px rgba(0, 0, 0, 0.88);
}

.hero,
.menu-hero,
.contact-hero {
  min-height: var(--shared-hero-height) !important;
  height: var(--shared-hero-height) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
}

.hero-top,
.menu-hero-top {
  position: absolute !important;
  z-index: 5 !important;
  top: 22px !important;
  right: 28px !important;
  left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

.hero-brand,
.menu-brand,
.contact-brand,
.settings-brand,
.login-hero-card {
  position: relative !important;
  z-index: 2 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  grid-area: 1 / 1 !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(470px, calc(100% - 40px)) !important;
  max-width: min(470px, calc(100% - 40px)) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 20px 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  isolation: isolate !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.login-hero-card {
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.82)),
    var(--contact-header-image, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.hero-brand::before,
.menu-brand::before,
.contact-brand::before,
.settings-brand::before,
.login-hero-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--shared-halo-width) !important;
  height: var(--shared-halo-height) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  background: var(--shared-halo-bg) !important;
  box-shadow: var(--shared-halo-shadow) !important;
}

.company-logo,
.menu-company-logo,
.contact-logo,
.login-logo,
.settings-company-logo {
  width: var(--shared-logo-size) !important;
  height: var(--shared-logo-size) !important;
  max-width: var(--shared-logo-size) !important;
  max-height: var(--shared-logo-size) !important;
  margin: 0 auto 8px !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.70))
    drop-shadow(0 0 10px rgba(255, 213, 74, 0.44)) !important;
}

html[data-theme="light"] .company-logo,
html[data-theme="light"] .menu-company-logo,
html[data-theme="light"] .contact-logo,
html[data-theme="light"] .login-logo,
html[data-theme="light"] .settings-company-logo {
  filter:
    drop-shadow(0 2px 1px rgba(255, 255, 255, 0.80))
    drop-shadow(0 2px 8px rgba(67, 42, 0, 0.28)) !important;
}

.hero-brand .welcome,
.hero-brand .restaurant-label,
.hero-brand h1,
.hero-brand .tagline,
.hero-brand .brand-message,
.menu-brand .restaurant-label,
.menu-brand .brand-small,
.menu-brand .tagline,
.menu-brand .brand-message,
.contact-brand .welcome,
.contact-brand .restaurant-label,
.contact-brand .brand-small,
.contact-brand .tagline,
.contact-brand .brand-message,
.settings-brand .restaurant-label,
.settings-brand .brand-small,
.settings-brand .tagline,
.settings-brand .brand-message,
.login-hero-card .restaurant-label,
.login-hero-card .brand-small {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: var(--shared-brand-font) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-stroke: 0 transparent !important;
  paint-order: normal !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.hero-brand .welcome,
.contact-brand .welcome {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: var(--shared-welcome-size) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  color: var(--shared-welcome-color) !important;
  -webkit-text-fill-color: var(--shared-welcome-color) !important;
  text-shadow: var(--shared-shadow-soft) !important;
}

.hero-brand .restaurant-label,
.menu-brand .restaurant-label,
.contact-brand .restaurant-label,
.settings-brand .restaurant-label,
.login-hero-card .restaurant-label {
  display: block !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  font-size: var(--shared-category-size) !important;
  line-height: 1.06 !important;
  font-weight: 850 !important;
  color: var(--shared-category-color) !important;
  -webkit-text-fill-color: var(--shared-category-color) !important;
  text-shadow: var(--shared-shadow-soft) !important;
}

.hero-brand h1,
.menu-brand .brand-small,
.contact-brand .brand-small,
.settings-brand .brand-small,
.login-hero-card .brand-small {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: var(--shared-name-size) !important;
  line-height: 0.98 !important;
  font-weight: 900 !important;
  color: var(--shared-name-color) !important;
  -webkit-text-fill-color: var(--shared-name-color) !important;
  text-shadow: var(--shared-shadow-strong) !important;
}

.hero-brand .tagline,
.hero-brand .brand-message,
.menu-brand .tagline,
.menu-brand .brand-message,
.contact-brand .tagline,
.contact-brand .brand-message,
.settings-brand .tagline,
.settings-brand .brand-message {
  display: block !important;
  max-width: 390px !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  font-size: var(--shared-message-size) !important;
  line-height: 1.22 !important;
  font-weight: 760 !important;
  color: var(--shared-message-color) !important;
  -webkit-text-fill-color: var(--shared-message-color) !important;
  text-shadow: var(--shared-shadow-soft) !important;
}

.hero-brand h1::before,
.hero-brand h1::after,
.brand-small::before,
.brand-small::after,
.restaurant-label::before,
.restaurant-label::after {
  content: none !important;
  display: none !important;
}

@supports (-webkit-touch-callout: none) {
  .hero-brand .welcome,
  .hero-brand .restaurant-label,
  .hero-brand h1,
  .hero-brand .tagline,
  .hero-brand .brand-message,
  .menu-brand .restaurant-label,
  .menu-brand .brand-small,
  .menu-brand .tagline,
  .menu-brand .brand-message,
  .contact-brand .welcome,
  .contact-brand .restaurant-label,
  .contact-brand .brand-small,
  .contact-brand .tagline,
  .contact-brand .brand-message,
  .settings-brand .restaurant-label,
  .settings-brand .brand-small,
  .settings-brand .tagline,
  .settings-brand .brand-message,
  .login-hero-card .restaurant-label,
  .login-hero-card .brand-small {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-stroke: 0 transparent !important;
  }
}

@media (max-width: 760px) {
  :root {
    --shared-hero-height: 300px;
    --shared-logo-size: 78px;
    --shared-welcome-size: 17px;
    --shared-category-size: 18px;
    --shared-name-size: 30px;
    --shared-message-size: 12px;
    --shared-halo-width: min(340px, calc(100vw - 48px));
    --shared-halo-height: 184px;
  }

  .hero,
  .menu-hero,
  .contact-hero {
    min-height: var(--shared-hero-height) !important;
    height: var(--shared-hero-height) !important;
  }

  .hero-top,
  .menu-hero-top {
    top: 14px !important;
    right: 14px !important;
  }

  .hero-brand,
  .menu-brand,
  .contact-brand,
  .settings-brand {
    width: min(330px, calc(100% - 22px)) !important;
    max-width: min(330px, calc(100% - 22px)) !important;
    padding: 15px 10px 16px !important;
  }

  .company-logo,
  .menu-company-logo,
  .contact-logo,
  .login-logo,
  .settings-company-logo {
    margin-bottom: 5px !important;
  }

  .hero-brand .welcome,
  .contact-brand .welcome {
    margin-bottom: 5px !important;
  }

  .hero-brand .tagline,
  .hero-brand .brand-message,
  .menu-brand .tagline,
  .menu-brand .brand-message,
  .contact-brand .tagline,
  .contact-brand .brand-message,
  .settings-brand .tagline,
  .settings-brand .brand-message {
    max-width: 286px !important;
    margin-top: 6px !important;
  }
}

/* Final shared message color lock: all child headers use the same source. */
.hero-brand .brand-message,
.menu-brand .brand-message,
.contact-brand .brand-message,
.settings-brand .brand-message,
html[data-theme="dark"] .hero-brand .brand-message,
html[data-theme="dark"] .menu-brand .brand-message,
html[data-theme="dark"] .contact-brand .brand-message,
html[data-theme="dark"] .settings-brand .brand-message,
html:not([data-theme="light"]) .hero-brand .brand-message,
html:not([data-theme="light"]) .menu-brand .brand-message,
html:not([data-theme="light"]) .contact-brand .brand-message,
html:not([data-theme="light"]) .settings-brand .brand-message {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: var(--shared-shadow-soft) !important;
}

/* Settings page has no brand header. Keep content high and compact. */
.settings-body {
  padding-top: 12px !important;
}

.settings-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-right: 26px !important;
}

.settings-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  align-items: start !important;
}

.settings-header h1 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.settings-header-actions {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding-right: 54px !important;
  flex-wrap: nowrap !important;
}

.settings-theme-select {
  min-width: 128px !important;
  gap: 6px !important;
}

.settings-theme-select select {
  min-height: 48px !important;
  font-size: 16px !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
}

.settings-user-logout {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 16px 0 10px !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
}

.settings-user-avatar {
  width: 32px !important;
  height: 32px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #d29a35, #edbd5c) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(213, 154, 52, .24) !important;
}

@media (max-width: 760px) {
  .settings-body {
    padding-top: 10px !important;
  }

  .settings-page {
    padding-right: 10px !important;
  }

  .settings-header {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
  }

  .settings-header-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    padding-right: 0 !important;
    flex-wrap: wrap !important;
  }

  .settings-theme-select {
    min-width: 132px !important;
  }
}