/* client-styles.css
   Custom styles for this restaurant's public-facing site.
   Toggle on/off via the demo toolbar (superadmin only).

   Naming convention: <element>-<page>-<description>
   Base (global) classes apply to all instances of that element type.
   Page-specific classes let you target individual elements.

   Order:
     1. Global  — typography, background, colors
     2. Layout  — nav, hero, footer
     3. Headings
     4. Buttons
     5. Components  — pagination, badges
     6. Pages   — home, about, menu, gallery, contact
*/

/* ─────────────────────────────────────────────────────────────────────
   1. GLOBAL — Typography & colors
   ───────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
}
.bg-light {
  background-color: var(--brand-bg-light) !important;
}
.text-brand-accent {
  color: var(--brand-accent);
}
.bg-brand-dark {
  background-color: var(--brand-dark);
}
.bg-brand-light {
  background-color: var(--brand-bg-light);
}

/* ─────────────────────────────────────────────────────────────────────
   2. LAYOUT — Nav, hero, footer
   ───────────────────────────────────────────────────────────────────── */
.public-nav,
.public-footer {
  background-color: var(--brand-dark) !important;
}
.public-footer {
  color: var(--brand-accent) !important;
}
.footer-muted {
  opacity: 0.72;
}
.footer-link {
  color: var(--brand-accent) !important;
}
.footer-link:hover {
  color: var(--brand-text-light) !important;
}
.footer-social-icon {
  color: var(--brand-accent) !important;
}
.public-nav .navbar-brand {
  font-family: var(--font-display);
  color: var(--brand-accent) !important;
}
.nav-link {
  font-family: var(--font-accent);
  color: var(--brand-accent) !important;
  font-size: var(--size-nav-link, 1.5rem);
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
  color: var(--brand-text-light) !important;
}

.hero-section {
  background-color: var(--hero-bg);
}
.hero-has-image .navbar {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 100%);
  background-color: transparent !important;
}
.btn-hero-cta {
}
.public-nav .dropdown-menu {
  background-color: var(--brand-dark);
  border-top-color: var(--brand-accent);
}
.public-nav .dropdown-item {
  color: var(--brand-accent);
  font-family: var(--font-accent);
  font-size: calc(var(--size-nav-link, 1.5rem) * 0.83);
  letter-spacing: 0.02em;
}
.public-nav .dropdown-item:hover,
.public-nav .dropdown-item:focus {
  background-color: color-mix(in srgb, var(--brand-accent) 10%, transparent);
  color: var(--brand-text-light);
  box-shadow: inset 3px 0 0 var(--brand-accent);
}
.public-nav .dropdown-item:active {
  background-color: color-mix(in srgb, var(--brand-accent) 16%, transparent);
  color: var(--brand-text-light);
}
.public-nav .dropdown-divider {
  border-color: color-mix(in srgb, var(--brand-accent) 20%, transparent);
}
.public-nav .dropdown-item-text {
  color: color-mix(in srgb, var(--brand-accent) 45%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────
   3. HEADINGS
   ───────────────────────────────────────────────────────────────────── */
.site-heading {
  font-family: var(--font-display);
  color: var(--brand-heading) !important;
}
.site-page-heading {
  font-size: var(--size-page-heading, 5rem);
  font-weight: normal !important;
}
.site-section-heading {
  font-size: var(--size-section-heading, 3rem);
  font-weight: normal !important;
}
.site-card-heading {
  font-family: var(--font-display);
  font-size: var(--size-card-heading, 1.5rem);
}
.heading-hero-headline {
  line-height: 4rem;
  color: var(--hero-headline-color) !important;
}
.heading-hero-subtext {
  font-family: var(--font-accent);
  font-size: var(--size-hero-subtext, 2.75rem);
  color: var(--hero-subtext-color) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   4. BUTTONS
   ───────────────────────────────────────────────────────────────────── */
.site-btn {
  font-family: var(--font-accent);
  font-size: var(--size-btn, 1.4rem);
  letter-spacing: 0.05rem;
  line-height: var(--size-btn, 1.4rem);
  border-radius: 3px;
}
.site-btn.btn-sm {
  font-family: var(--font-accent);
  font-size: 1rem;
  letter-spacing: 0.15rem;
  padding: 5px 1rem;
  line-height: 1rem;
}
.btn-dark {
  --bs-btn-color: var(--brand-text-light);
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--brand-text-light);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: var(--brand-text-light);
  --bs-btn-active-bg: var(--brand-primary-hover);
  --bs-btn-active-border-color: var(--brand-primary-hover);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--brand-text-light);
  --bs-btn-disabled-bg: #995c2e;
  --bs-btn-disabled-border-color: #995c2e;
}
.btn-outline-dark,
.btn-outline-secondary {
  --bs-btn-color: var(--brand-outline);
  --bs-btn-border-color: var(--brand-outline);
  --bs-btn-hover-color: var(--brand-text-light);
  --bs-btn-hover-bg: var(--brand-outline);
  --bs-btn-hover-border-color: var(--brand-outline);
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: var(--brand-text-light);
  --bs-btn-active-bg: var(--brand-outline);
  --bs-btn-active-border-color: var(--brand-outline);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #995c2e;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #995c2e;
  --bs-gradient: none;
}
.site-btn-primary {
}
.site-btn-secondary {
}
/* Standard Bootstrap buttons — harmonised with the active theme.
   btn-primary maps fully to the brand primary token.
   Semantic buttons (success/danger/warning/info/secondary) blend 20% of
   --brand-primary into their standard Bootstrap hue via color-mix(), giving
   a warm on-brand cast without losing their meaning. */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-color: var(--brand-text-light);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-hover-color: var(--brand-text-light);
  --bs-btn-active-bg: var(--brand-primary-hover);
  --bs-btn-active-border-color: var(--brand-primary-hover);
  --bs-btn-active-color: var(--brand-text-light);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  --bs-btn-disabled-color: var(--brand-text-light);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--brand-text-light);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-active-color: var(--brand-text-light);
}
.btn-secondary {
  --bs-btn-bg: color-mix(in srgb, #6c757d 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #6c757d 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #5c636a 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #565e64 80%, var(--brand-primary) 20%);
}
.btn-success {
  --bs-btn-bg: color-mix(in srgb, #198754 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #198754 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #157347 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #146c43 80%, var(--brand-primary) 20%);
}
.btn-outline-success {
  --bs-btn-color: color-mix(in srgb, #198754 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #198754 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #198754 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #198754 80%, var(--brand-primary) 20%);
  --bs-btn-hover-color: #fff;
}
.btn-danger {
  --bs-btn-bg: color-mix(in srgb, #dc3545 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #dc3545 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #bb2d3b 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #b02a37 80%, var(--brand-primary) 20%);
}
.btn-outline-danger {
  --bs-btn-color: color-mix(in srgb, #dc3545 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #dc3545 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #dc3545 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #dc3545 80%, var(--brand-primary) 20%);
  --bs-btn-hover-color: #fff;
}
.btn-warning {
  --bs-btn-bg: color-mix(in srgb, #ffc107 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #ffc107 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #ffca2c 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #ffc720 80%, var(--brand-primary) 20%);
}
.btn-outline-warning {
  --bs-btn-color: color-mix(in srgb, #ffc107 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #ffc107 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #ffc107 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #ffc107 80%, var(--brand-primary) 20%);
  --bs-btn-hover-color: #000;
}
.btn-info {
  --bs-btn-bg: color-mix(in srgb, #0dcaf0 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #0dcaf0 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #31d2f2 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #25cff2 80%, var(--brand-primary) 20%);
}
.btn-outline-info {
  --bs-btn-color: color-mix(in srgb, #0dcaf0 80%, var(--brand-primary) 20%);
  --bs-btn-border-color: color-mix(in srgb, #0dcaf0 80%, var(--brand-primary) 20%);
  --bs-btn-hover-bg: color-mix(in srgb, #0dcaf0 80%, var(--brand-primary) 20%);
  --bs-btn-hover-border-color: color-mix(in srgb, #0dcaf0 80%, var(--brand-primary) 20%);
  --bs-btn-hover-color: #000;
}
/* Theme-aware hero buttons — visible on dark backgrounds, override via CSS vars */
/* .btn specificity raised to 0,2,0 to guarantee override of Bootstrap's .btn defaults */
.btn.btn-hero-accent {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-color: var(--brand-dark);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: var(--brand-text-light);
  --bs-btn-hover-color: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-text-light);
  --bs-btn-active-bg: var(--brand-text-light);
  --bs-btn-active-color: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-text-light);
  --bs-btn-disabled-bg: var(--brand-accent);
  --bs-btn-disabled-color: var(--brand-dark);
  --bs-btn-disabled-border-color: var(--brand-accent);
}
.btn.btn-hero-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: var(--brand-accent);
  --bs-btn-hover-color: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-accent);
  --bs-btn-active-bg: var(--brand-accent);
  --bs-btn-active-color: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-accent);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: var(--brand-accent);
  --bs-btn-disabled-border-color: var(--brand-accent);
}

/* ─────────────────────────────────────────────────────────────────────
   5. COMPONENTS — Pagination, badges
   ───────────────────────────────────────────────────────────────────── */
.site-pagination {
}
.site-pagination .site-page-link {
}
.site-pagination .page-item.active .site-page-link {
}
.site-pagination .page-item.disabled .site-page-link {
}

.pp-pill {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-text-light);
}
.pp-pill:hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--brand-text-light);
}
.pp-pill--active {
  background-color: var(--brand-heading);
  border-color: var(--brand-heading);
  color: var(--brand-text-light);
  box-shadow: 0 3px 10px rgba(83, 38, 5, 0.4);
}
.pp-pill--active:hover {
  background-color: var(--brand-heading);
  border-color: var(--brand-heading);
}
.pp-pill--disabled {
  background-color: transparent;
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.menu-item-card .badge.bg-success-subtle,
.menu-item-modal .badge.bg-success-subtle {
  background-color: #fff9c3 !important;
  color: #6d3810 !important;
  border-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────────────
   6a. HOME — About section
   ───────────────────────────────────────────────────────────────────── */
.heading-about-section {
}

/* ─────────────────────────────────────────────────────────────────────
   6b. HOME — Menu preview section
   ───────────────────────────────────────────────────────────────────── */
.heading-home-menu {
}
.heading-home-menu-item {
}
.btn-home-view-menu {
}

/* ─────────────────────────────────────────────────────────────────────
   6c. HOME — Gallery preview section
   ───────────────────────────────────────────────────────────────────── */
.btn-home-view-gallery {
}

/* ─────────────────────────────────────────────────────────────────────
   6d. ABOUT page
   ───────────────────────────────────────────────────────────────────── */
.heading-about-page {
}

/* ─────────────────────────────────────────────────────────────────────
   6e. MENU page
   ───────────────────────────────────────────────────────────────────── */
.heading-menu-page {
}
.heading-menu-category {
}
.heading-menu-item {
}
.btn-menu-filter-all {
}
.btn-menu-filter-cat {
}
.btn-menu-search-clear {
}
.btn-menu-no-results {
}

/* ─────────────────────────────────────────────────────────────────────
   6f. GALLERY page
   ───────────────────────────────────────────────────────────────────── */
.heading-gallery-page {
}
.btn-gallery-lightbox-prev {
}
.btn-gallery-lightbox-next {
}

/* ─────────────────────────────────────────────────────────────────────
   6g. CONTACT page
   ───────────────────────────────────────────────────────────────────── */
.heading-contact-page {
}
.btn-contact-submit {
}
.btn-contact-cancel {
}