/* ============================================================
   Refinements layered over the original theme styles.
   Loaded last. Covers: readable contrast, consistent buttons,
   responsive fixes, focus states, and the new components
   (menu search, lightbox, form states, booking summary).
   ============================================================ */

:root {
  /* Gold dark enough for text on cream/white (4.9:1). The brighter gold stays for dark backgrounds. */
  --salt-gold-deep: #7A6433;
  --salt-error: #A3352B;
  --text-soft: rgba(var(--salt-ink-rgb), 0.74);
}

@media (max-width: 767px) {
  :root { --header-height: 76px; }
}

[hidden] { display: none !important; }

/* ---------- Links, focus, helpers ---------- */
a:hover,
a:focus-visible { color: var(--salt-gold-deep); }

:focus-visible { outline: 2px solid var(--salt-gold-deep); outline-offset: 3px; }
.site-header--transparent :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.cta-banner :focus-visible,
.mobile-menu :focus-visible,
.lightbox :focus-visible { outline-color: var(--salt-gold-light); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 3000;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary-dark);
  color: var(--salt-white);
  font-size: 0.85rem;
  transition: top var(--duration) var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--salt-white); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.label-text { color: var(--salt-gold-deep); }

/* ---------- Buttons: one gold style, readable text ---------- */
.btn {
  justify-content: center;
  min-height: 46px;
  border-radius: 2px;
  text-align: center;
}
.btn--primary,
.wp-block-button__link {
  background-color: var(--salt-gold);
  border-color: var(--salt-gold);
  color: var(--color-primary-dark);
}
.btn--primary:hover,
.btn--primary:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background-color: var(--salt-gold-light);
  border-color: var(--salt-gold-light);
  color: var(--color-primary-dark);
  box-shadow: 0 4px 20px rgba(var(--salt-gold-rgb), 0.35);
}
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: var(--space-lg);
}
.section-actions--start { justify-content: flex-start; margin-top: var(--space-md); }

.section-header--left { text-align: left; }
.section-header--left .section-header__line { margin-left: 0; }

/* ---------- Scroll reveal: content stays visible if JS never runs ---------- */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal { opacity: 0; transform: translateY(40px); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.5rem);
  list-style: none;
}
.site-header__nav a { font-size: 0.78rem; letter-spacing: 0.16em; padding-block: 0.5rem; }
.site-header__nav .current-menu-item > a::after { width: 100%; left: 0; }
.site-header__phone { font-size: 0.8rem; }
.site-header__cta { min-height: 0; }

/* Full navigation from 992px, as on the original. Between 992 and 1240px the phone number
   gives way and the gaps tighten so all seven links and the button fit on one line. */
@media (min-width: 992px) and (max-width: 1239px) {
  .site-header__phone { display: none; }
  .site-header__menu { gap: 1.1rem; }
  .site-header__nav a { font-size: 0.72rem; letter-spacing: 0.12em; }
  .site-header__cta { padding-inline: 1.1rem; }
}

@media (max-width: 767px) {
  .site-header__logo img,
  .site-header--solid .site-header__logo img { height: 60px; }
}

.menu-toggle { width: 44px; height: 44px; padding: 6px; }

/* Mobile menu is a native <dialog>: focus is trapped and Esc closes it. */
.mobile-menu {
  display: none;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 5rem 1.5rem 2rem;
  gap: 1.5rem;
  overflow-y: auto;
}
.mobile-menu[open] { display: flex; animation: salt-slide-in 0.35s var(--ease); }
@keyframes salt-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@media (max-height: 640px) { .mobile-menu { justify-content: flex-start; } }

.mobile-menu__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mobile-menu a { font-size: clamp(1.6rem, 6.5vw, 2.25rem); }
.mobile-menu .current-menu-item > a { color: var(--salt-gold-light); }
.mobile-menu .btn--primary { font-family: var(--font-body); margin-top: 0.5rem; }
.mobile-menu .btn--primary:hover { color: var(--color-primary-dark); }
.mobile-menu a.mobile-menu__phone {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: rgba(var(--salt-cream-rgb), 0.8);
}
.mobile-menu__close { min-width: 48px; min-height: 48px; }

/* ---------- Home ---------- */
.hero__tagline-text { color: rgba(var(--salt-cream-rgb), 0.85); }
.hero__scroll-hint { color: var(--salt-gold-light); padding: 0.75rem; }
.hero__scroll-hint:hover { color: var(--salt-white); }

@media (max-width: 480px) {
  .hero__badge { gap: 0.75rem; margin-bottom: var(--space-md); }
  .hero__badge-line { width: 28px; }
  .hero__badge-text { font-size: 0.66rem; letter-spacing: 0.22em; }
  .hero__actions .btn { width: 100%; }
}

.intro { padding-block: var(--space-xl); }
.intro__text { color: rgba(var(--salt-ink-rgb), 0.82); }
@media (max-width: 767px) {
  .intro__image-col img { aspect-ratio: 4 / 3; }
  .intro__text { font-size: 1.02rem; }
}

/* Dishes: cards are links to the menu; text can never spill out of the photo. */
.bento__grid { grid-template-columns: 1fr; }
@media (min-width: 600px) { .bento__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .bento__grid { grid-template-columns: repeat(3, 1fr); } }

.bento__card {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-primary-dark);
  color: var(--salt-white);
}
.bento__card img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.bento__card-overlay {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  background: linear-gradient(to top, rgba(var(--salt-green-dark-rgb), 0.94) 0%, rgba(var(--salt-green-dark-rgb), 0.6) 38%, rgba(var(--salt-green-dark-rgb), 0) 72%);
}
.bento__card:hover .bento__card-overlay,
.bento__card:focus-visible .bento__card-overlay {
  background: linear-gradient(to top, rgba(var(--salt-green-dark-rgb), 0.96) 0%, rgba(var(--salt-green-dark-rgb), 0.7) 45%, rgba(var(--salt-green-dark-rgb), 0.1) 80%);
}
.bento__card-title { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.bento__card-desc {
  color: rgba(var(--salt-cream-rgb), 0.88);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.bento__card-price { color: var(--salt-gold-light); font-weight: 600; }

/* Opening hours card */
.hours-card { background: rgba(var(--salt-green-dark-rgb), 0.5); border-color: rgba(var(--salt-cream-rgb), 0.22); }
.hours-card__subtitle { color: var(--salt-gold-light); margin-bottom: var(--space-sm); }
.hours-card__status {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding: 0.35rem 1rem;
  border: 1px solid rgba(var(--salt-cream-rgb), 0.35);
  border-radius: 99px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hours-card__status.is-open { border-color: #9BD8B1; color: #C4F0D2; }
.hours-card__row { color: rgba(var(--salt-cream-rgb), 0.92); border-bottom-color: rgba(var(--salt-cream-rgb), 0.14); gap: 1rem; }
.hours-card__row dt, .hours-card__row dd { margin: 0; }
.hours-card__row--today { color: var(--salt-gold-light); }

.footer__hours-list .is-today { color: var(--salt-gold-light); font-weight: 600; }
.contact-info .footer__hours-list { max-width: 340px; font-size: 0.95rem; color: var(--text-soft); }
.contact-info .footer__hours-list .is-today { color: var(--color-primary); }

a.gallery-strip__scroller { color: inherit; }

.cta-banner__text { color: rgba(var(--salt-cream-rgb), 0.82); }
.location__address { color: rgba(var(--salt-ink-rgb), 0.8); }
.location__map { height: 100%; min-height: 380px; }
.reviews__source { color: var(--text-soft); }
.newsletter__text { color: rgba(var(--salt-ink-rgb), 0.8); }
.newsletter__input { border-color: rgba(var(--salt-ink-rgb), 0.4); min-height: 48px; }
.newsletter__input:focus { border-color: var(--salt-gold-deep); box-shadow: 0 0 0 3px rgba(var(--salt-gold-rgb), 0.35); }
.newsletter .salt-form__error { margin-top: 0.75rem; }

/* ---------- Footer ---------- */
.site-footer { color: rgba(var(--salt-cream-rgb), 0.8); }
.site-footer a { color: rgba(var(--salt-cream-rgb), 0.8); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--salt-gold-light); }
.footer__heading { color: var(--salt-gold-light); }
.footer__social { margin-top: 1.5rem; }
.footer__social a:hover { color: var(--color-primary-dark); }
.footer__links--extra { margin-top: 0.5rem; }
.footer__links a { display: inline-block; padding-block: 0.15rem; }

@media (min-width: 600px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); } }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; } }
@media (max-width: 767px) {
  .site-footer__accent-line { margin-bottom: var(--space-lg); }
  .footer__bottom { text-align: center; }
}

/* ---------- Page hero & editable page content ---------- */
.page-hero__subtitle,
.menu-hero__subtitle { color: var(--text-soft); }

.entry-content { padding-block: var(--space-sm) var(--space-xl); }
.entry-content > * + * { margin-top: var(--space-sm); }
.entry-content p, .entry-content li { font-size: 1.05rem; line-height: 1.9; color: rgba(var(--salt-ink-rgb), 0.85); }
.entry-content h2, .entry-content h3 { margin-top: var(--space-md); }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content a:not(.wp-block-button__link) { text-decoration: underline; text-underline-offset: 3px; }
.entry-content figure { margin-block: var(--space-md); }
.entry-content img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 2px; }
.entry-content hr.wp-block-separator {
  width: 240px;
  height: 1px;
  margin: var(--space-md) auto;
  border: 0;
  background: linear-gradient(to right, transparent, var(--salt-gold), transparent);
}
.entry-content .wp-block-buttons { margin-top: var(--space-lg); }
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.875rem 2rem;
  border: 2px solid var(--salt-gold);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  transition: all var(--duration) var(--ease);
}
.post-summary + .post-summary { margin-top: var(--space-lg); }

/* ---------- Menu pages ---------- */
.admin-bar .menu-nav { top: calc(var(--header-height) + 32px); }
.menu-nav { padding-block: 0.5rem; }
.menu-nav__list {
  padding-inline: 1.25rem;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}
/* Centred when it fits; scrolls sideways (never wraps) when it doesn't. */
.menu-nav__list { justify-content: safe center; }
.menu-nav__list li a { font-size: 0.72rem; padding: 0.6rem 0.9rem; }
.menu-nav__list li a[aria-current="true"] { background: var(--color-primary-dark); color: var(--salt-white); }

.menu-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  padding-top: var(--space-md);
}
.menu-tools__search { flex: 1 1 260px; max-width: 380px; }
.menu-tools__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.menu-tools__status { flex-basis: 100%; min-height: 1.5em; text-align: center; font-size: 0.85rem; color: var(--text-soft); }

.chip {
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(var(--salt-green-dark-rgb), 0.4);
  border-radius: 99px;
  background: transparent;
  color: var(--color-primary-dark);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.chip:hover { background: rgba(var(--salt-green-rgb), 0.08); }
.chip[aria-pressed="true"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--salt-white); }

.menu-section { padding-block: var(--space-lg); scroll-margin-top: calc(var(--header-height) + 64px); }
.menu-sections .menu-section:nth-child(even) { background: var(--salt-surface); }
.menu-sections .menu-section:nth-child(odd) { background: transparent; }
.menu-section__note { color: var(--text-soft); font-size: 0.9rem; }
.menu-section__footnote { color: var(--text-soft); font-size: 0.82rem; }
.menu-section__divider { color: var(--salt-gold); opacity: 1; }

.menu-group + .drinks-group, .drinks-group + .drinks-group { margin-top: var(--space-md); }
.salt-item__name { font-size: 1.2rem; }
.salt-item__description { color: var(--text-soft); font-size: 0.9rem; }
.salt-item__adds li { color: var(--text-soft); font-size: 0.82rem; }
.salt-item__tag { font-size: 0.65rem; letter-spacing: 0.06em; padding: 0.2rem 0.45rem; text-decoration: none; cursor: help; }
.salt-item__tag--gf { color: #6B5626; }

.salt-item__price,
.salt-item__prices .price-cell,
.drink-inline__price,
.salt-item__adds li::before { color: var(--salt-gold-deep); }
.salt-item__price, .salt-item__prices .price-cell { font-size: 1.15rem; }
.salt-item__prices .price-cell--empty { color: transparent; }
.menu-section__price-head .price-cell,
.drinks-subhead,
.menu-hero__badge-text,
.menu-hero__switch a,
.menu-hero__switch a:hover { color: var(--salt-gold-deep); }
.menu-section__price-head .price-cell { font-size: 0.65rem; }
.menu-hero__switch a { display: inline-block; padding-block: 0.5rem; font-size: 0.78rem; }

.drink-inline { list-style: none; display: flex; flex-wrap: wrap; gap: 0 0.6rem; line-height: 2.1; }
.drink-inline__item + .drink-inline__item::before { content: "·"; margin-right: 0.6rem; color: var(--salt-gold); }

@media (max-width: 520px) {
  .salt-item__prices .price-cell::before { color: var(--salt-gold-deep); font-size: 0.65rem; }
}

.menu-empty { padding-block: var(--space-lg); text-align: center; color: var(--text-soft); }
.menu-empty .btn { margin-top: var(--space-sm); }
.menu-download__note { color: var(--text-soft); }

/* ---------- Gallery (native Gallery block) + lightbox ---------- */
.gallery-content { padding-block: var(--space-md) var(--space-xl); }
.gallery-content .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) { .gallery-content .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); } }
.gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image {
  width: auto !important;
  margin: 0 !important;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
}
.gallery-content .wp-block-gallery figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.6s var(--ease);
}
.gallery-content .wp-block-gallery figure.wp-block-image img:hover { transform: scale(1.05); }
.gallery-content .wp-block-gallery figure.wp-block-image img:focus-visible { outline-offset: -4px; outline-color: var(--salt-gold-light); }

.lightbox {
  display: none;
  opacity: 1;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(var(--salt-green-dark-rgb), 0.97);
}
.lightbox[open] { display: flex; }
.lightbox__figure { margin: 0; text-align: center; }
.lightbox__img { max-height: 80vh; margin-inline: auto; }
.lightbox__caption { margin-top: 0.75rem; padding-inline: 1rem; color: rgba(var(--salt-cream-rgb), 0.85); font-size: 0.9rem; }
.lightbox__btn {
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--salt-white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--salt-gold); color: var(--color-primary-dark); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 0.75rem; }
.lightbox__next { right: 0.75rem; }

/* ---------- Forms ---------- */
.form-section { padding-bottom: var(--space-xl); }
.salt-form__input,
.salt-form__select,
.salt-form__textarea {
  width: 100%;
  min-height: 48px;
  border-color: rgba(var(--salt-ink-rgb), 0.4);
  border-radius: 2px;
}
.salt-form__input:focus,
.salt-form__select:focus,
.salt-form__textarea:focus {
  border-color: var(--salt-gold-deep);
  box-shadow: 0 0 0 3px rgba(var(--salt-gold-rgb), 0.35);
}
.salt-form [aria-invalid="true"] { border-color: var(--salt-error); }
.salt-form__label span[aria-hidden] { color: var(--salt-error); }
.salt-form__optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-soft); }
.salt-form__error { margin: 0; font-size: 0.875rem; color: var(--salt-error); }
.salt-form__hint { margin: 0; font-size: 0.875rem; color: var(--text-soft); }
.salt-form__hint:empty { display: none; }
.form-note { margin-top: var(--space-md); font-size: 0.9rem; color: var(--text-soft); }
.form-note a, .salt-notice a { text-decoration: underline; text-underline-offset: 3px; }

.salt-notice {
  margin-bottom: var(--space-md);
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--salt-green);
  border-radius: 2px;
  background: var(--salt-surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.salt-notice h2, .salt-notice h3 { font-size: 1.5rem; }
.salt-notice p { margin-top: 0.35rem; }
.salt-notice--error { border-left-color: var(--salt-error); }
.salt-notice--muted { border-left-color: rgba(var(--salt-ink-rgb), 0.35); }
.newsletter .salt-notice { text-align: center; border-left: 0; border-top: 3px solid var(--salt-green); }

.booking-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem 2rem;
  margin-block: var(--space-md);
}
.booking-summary dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--salt-gold-deep); }
.booking-summary dd { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-primary-dark); }

/* ---------- Contact ---------- */
.contact-page { padding-block: var(--space-sm) 0; }
.contact-info__item h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.contact-info__item p, .contact-info__item address { color: rgba(var(--salt-ink-rgb), 0.8); }
.contact-page__map { margin-bottom: var(--space-lg); }
.contact-page .form-section { margin-inline: auto; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* Hero: a little more scrim behind the headline so it stays readable over bright photos. */
.hero__overlay {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(var(--salt-green-dark-rgb), 0.5) 0%, rgba(var(--salt-green-dark-rgb), 0.15) 70%),
    linear-gradient(180deg, rgba(var(--salt-green-dark-rgb), 0.8) 0%, rgba(var(--salt-green-dark-rgb), 0.3) 32%, rgba(var(--salt-green-dark-rgb), 0.3) 60%, rgba(var(--salt-green-dark-rgb), 0.7) 100%);
}

/* Decorative SVGs follow the palette. */
.hero__wave-divider { color: var(--salt-gold-light); }
.olive-divider { color: var(--salt-gold); background: var(--salt-surface); }

.form-intro { margin-bottom: var(--space-md); font-size: 1.05rem; color: rgba(var(--salt-ink-rgb), 0.85); }

/* ============================================================
   Contrast pass: text that sits on photographs.
   Each scrim is strong enough that the text still passes WCAG AA
   if the photo behind it were pure white, so swapping images in
   the Customizer can't make the text unreadable.
   ============================================================ */

/* Hero: even scrim behind the text block, lighter towards the edges so the photo still reads.
   --hero-scrim comes from Customize → Homepage: hero → "Photo darkening". */
.hero__overlay {
  background:
    linear-gradient(180deg, rgba(var(--salt-green-dark-rgb), 0.85) 0%, rgba(var(--salt-green-dark-rgb), 0) 28%),
    radial-gradient(ellipse 75% 85% at 50% 55%,
      rgba(var(--salt-green-dark-rgb), var(--hero-scrim, 0.75)) 0%,
      rgba(var(--salt-green-dark-rgb), var(--hero-scrim, 0.75)) 55%,
      rgba(var(--salt-green-dark-rgb), calc(var(--hero-scrim, 0.75) * 0.6)) 100%);
}
.hero__title { color: var(--salt-white); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
.hero__subtitle { color: var(--salt-white); font-weight: 400; }
.hero__tagline-text { color: var(--salt-cream); }
/* Small gold text can't reach AA on a mid-green scrim: the badge text goes cream, the gold stays in the lines and wave. */
.hero__badge-text { color: var(--salt-cream); }
.hero__badge-line { opacity: 1; background: var(--salt-gold-light); }
.hero__wave-divider { opacity: 0.9; }
.hero__actions .btn--outline { background-color: rgba(var(--salt-green-dark-rgb), 0.75); border-color: rgba(var(--salt-cream-rgb), 0.85); }
.hero__actions .btn--outline:hover,
.hero__actions .btn--outline:focus-visible { background-color: var(--salt-cream); border-color: var(--salt-cream); color: var(--color-primary-dark); }

/* Header over the hero, and the solid header once scrolled. */
.site-header--transparent .site-header__phone { color: var(--salt-cream); }
.site-header--solid { background-color: rgba(var(--salt-cream-rgb), 0.94); }

/* Opening hours card. */
.hours-section__overlay { background: rgba(var(--salt-green-dark-rgb), 0.65); }
.hours-card { background: rgba(var(--salt-green-dark-rgb), 0.72); }
.hours-card__row { color: var(--salt-cream); }
.hours-card__status { color: var(--salt-cream); border-color: rgba(var(--salt-cream-rgb), 0.5); }

/* Dish cards: the text band is solidly dark, fading out above the title. */
.bento__card-overlay,
.bento__card:hover .bento__card-overlay,
.bento__card:focus-visible .bento__card-overlay {
  background: linear-gradient(to top,
    rgba(var(--salt-green-dark-rgb), 0.96) 0%,
    rgba(var(--salt-green-dark-rgb), 0.86) 42%,
    rgba(var(--salt-green-dark-rgb), 0) 82%);
}
.bento__card-desc { color: var(--salt-cream); }

/* Stars and other gold marks on white cards. */
.reviews__stars { color: var(--salt-gold-deep); }
.hours-card__row--today { color: var(--salt-gold-light); }

/* On phones the text spans the full width, so the scrim is even edge to edge. */
@media (max-width: 767px) {
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(var(--salt-green-dark-rgb), 0.85) 0%, rgba(var(--salt-green-dark-rgb), 0) 25%),
      rgba(var(--salt-green-dark-rgb), var(--hero-scrim, 0.75));
  }
}

/* ---------- Layout options (Customize → Header / Homepage: hero) ---------- */
.header-static .site-header { position: absolute; }
.header-static .menu-nav { top: 0; }
.admin-bar.header-static .menu-nav { top: 32px; }

@media (min-width: 768px) {
  .hero-left .hero { text-align: left; justify-content: flex-start; }
  .hero-left .hero__content { max-width: 1100px; padding-inline: clamp(2rem, 7vw, 6rem); }
  .hero-left .hero__badge,
  .hero-left .hero__wave-divider,
  .hero-left .hero__actions { justify-content: flex-start; }
  .hero-left .hero__subtitle { margin-inline: 0; }
  .hero-left .hero__overlay {
    background:
      linear-gradient(180deg, rgba(var(--salt-green-dark-rgb), 0.85) 0%, rgba(var(--salt-green-dark-rgb), 0) 28%),
      linear-gradient(90deg,
        rgba(var(--salt-green-dark-rgb), var(--hero-scrim, 0.75)) 0%,
        rgba(var(--salt-green-dark-rgb), var(--hero-scrim, 0.75)) 55%,
        rgba(var(--salt-green-dark-rgb), calc(var(--hero-scrim, 0.75) * 0.45)) 100%);
  }
}