/*
 * Low-priority menu hero fallback preset, based on Neon1.
 *
 * This file must load before the client stylesheets. All selectors use :where()
 * so any rule supplied by a client's styles.css overrides the fallback.
 */
:root {
  --menu-hero-font-family: Georgia, "Times New Roman", serif;
  --menu-hero-font-size: clamp(1.58rem, 6.3vw, 2rem);
  --menu-hero-font-weight: 500;
  --menu-hero-line-height: 1.02;
  --menu-hero-overlay: rgba(7, 8, 9, 0.42);
  --menu-hero-text: #ffffff;
  --menu-hero-text-shadow: 0 2px 16px rgba(0, 0, 0, 0.72);
}

:where(.photo-card) {
  position: relative;
  display: grid;
  align-content: space-between;
  isolation: isolate;
  overflow: hidden;
  background-color: #070809;
  background-image: var(--card-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

:where(.photo-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--menu-hero-overlay);
  pointer-events: none;
}

:where(.photo-card) > :where(.card-cover-image) {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(.photo-card) :where(h2, p, .card-footer, .menu-preview-list) {
  position: relative;
  z-index: 2;
}

:where(.photo-card) :where(h2) {
  max-width: none;
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
  color: var(--menu-hero-text);
  font-family: var(--menu-hero-font-family);
  font-size: var(--menu-hero-font-size);
  font-weight: var(--menu-hero-font-weight);
  line-height: var(--menu-hero-line-height);
  letter-spacing: 0;
  text-wrap: balance;
  white-space: normal;
  text-shadow: var(--menu-hero-text-shadow);
}

:where(.photo-card) :where(p) {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.72);
}