/* Fonts: Cormorant Garamond (display, incl. italics) + DM Sans (body / UI).
   @import must stay the first rule in this file. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

/* ============================================================
   CUSTOM — Eating Sushi (Winnipeg). Loaded after style.css.
   Dark look after Ocean Bites: black #0A0A0A / charcoal #141210 /
   raised #1E1B18, cream headings #F5F0E6, warm-grey body #A5A09A,
   one yellow accent #FFE352 (dark text on yellow buttons), salmon
   #E8735A from the logo's centre as a tiny secondary accent only.
   PM shipped as a light-cream template, so the light surfaces and
   the places that used --ink as a DARK fill are re-pointed below.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — re-point the derived palette from style.css
   ------------------------------------------------------------ */
:root {
  color-scheme: dark;

  --black: #0a0a0a;
  --charcoal: #141210;
  --raised: #1e1b18;
  --salmon: #e8735a;
  --grey: #a5a09a; /* body text: 7.6:1 black, 7.2:1 charcoal, 6.6:1 raised */
  --grey-muted: #8a8580; /* small/secondary text: 5.4 / 5.1 / 4.7 */

  --bg: var(--black); /* was #ffffff */
  --dark: var(--black); /* was var(--ink) (now cream) */
  --cream: var(--canvas); /* charcoal sections */
  --olive: var(--brand-2); /* raised charcoal panels */

  --ink-75: var(--grey);
  --ink-55: var(--grey-muted);
  --ink-45: var(--grey-muted);
  --line: rgba(245, 240, 230, 0.14);
  --line-soft: rgba(245, 240, 230, 0.08);
  --gold-line: color-mix(in srgb, var(--gold) 42%, transparent);
  --gold-faint: color-mix(in srgb, var(--gold) 20%, transparent);
  --gold-tint: color-mix(in srgb, var(--gold) 7%, transparent);
  --olive-30: color-mix(in srgb, var(--gold) 30%, transparent);
  --cream-line: rgba(245, 240, 230, 0.13);
  --cream-75: #c9c3ba; /* 11.3:1 black, 9.8:1 raised */
  --cream-55: var(--grey);
  --cream-30: color-mix(in srgb, var(--cream-text) 30%, transparent);
  --overlay: rgba(0, 0, 0, 0.65);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui: "DM Sans", "Segoe UI", system-ui, sans-serif;

  --text-dark: var(--ink);
  --text-light: var(--grey);
  --white: var(--cream-text);
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
html,
body {
  background-color: var(--black);
}
body {
  color: var(--grey);
}
::selection {
  background: var(--gold);
  color: var(--black);
}
/* Cormorant is lighter and smaller on the x-height than Baskervville */
h1,
h2,
h3,
h4,
h5,
.display {
  font-weight: 500;
  color: var(--cream-text);
}
h1,
.h1 {
  font-weight: 500;
}
h1 em,
h2 em,
h3 em,
h4 em {
  font-weight: 500;
}
strong {
  color: var(--cream-text);
}
/* every white heading / label in PM's dark bands reads cream instead */
.band-dark :is(h1, h2, h3, h4, h5, .display),
.band-olive :is(h1, h2, h3, h4, h5, .display),
.band-dark strong,
.band-olive strong,
.page-title h1,
.hero-home__copy h1,
.hero-card__panel strong,
.dish-meta__no,
.dish-feature h3,
.dish-card__no,
.dish-card h4,
.service-card h4,
.foot-cta-half h3,
.foot-contact a,
.foot-social-text a,
.social-links a,
.nav-overlay__links a,
.nav-overlay__phone,
.label-grid > div,
.counter-block__num,
.stat__num,
.quote-card blockquote,
.band-dark .quote-card blockquote,
.band-olive .quote-card blockquote {
  color: var(--cream-text);
}
/* section labels: small, uppercase, yellow, with a salmon spark */
.eyebrow,
h6,
.h6 {
  font-family: var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow {
  font-size: 0.8125rem;
  color: var(--gold);
}
.eyebrow::before,
.eyebrow--both::after,
.foot-cta-half__inner .eyebrow::after {
  background: var(--salmon);
}
.band-olive h2 em {
  color: var(--gold);
}

/* ------------------------------------------------------------
   3. BANDS — black / charcoal / raised (no light surfaces left)
   ------------------------------------------------------------ */
.band-dark {
  background: var(--black);
}
.band-cream {
  background: var(--charcoal);
  color: var(--grey);
}
.band-olive {
  background: var(--raised);
  color: var(--grey);
}
.band-dark,
.band-olive {
  color: var(--grey);
}
.lede {
  color: var(--grey);
}

/* ------------------------------------------------------------
   4. BUTTONS — solid yellow primary, dark text; line = ghost
   ------------------------------------------------------------ */
.btn,
.btn--cream,
.btn--fill,
.btn--dark,
.band-dark .btn:not(.btn--fill):not(.btn--dark),
.band-olive .btn:not(.btn--fill):not(.btn--dark),
.page-title .btn {
  --btn-c: var(--black);
  --btn-bd: var(--gold);
  --btn-ghost: color-mix(in srgb, var(--gold) 38%, transparent);
  background: var(--gold);
  font-weight: 700;
}
.btn:hover,
.btn--fill:hover {
  --btn-c: var(--black) !important;
  --btn-bd: var(--cream-text) !important;
  background: var(--cream-text) !important;
}
.btn-line,
.btn-line--light,
.band-dark .btn-line,
.band-olive .btn-line,
.page-title .btn-line,
.reviews-score .btn-line,
.quote-card--cta .btn-line {
  --btn-c: var(--cream-text);
  --btn-bd: var(--gold-line);
  --btn-ghost: var(--cream-line);
  background: transparent;
}
@media (max-width: 400px) {
  /* PM's 4rem side padding pushes longer labels past a 320px screen */
  .btn:not(.btn--sm),
  .btn-line {
    padding-inline: 1.6rem;
  }
}
.btn-line:hover {
  --btn-c: var(--gold);
  --btn-bd: var(--gold);
}
.btn-line--gold {
  --btn-c: var(--gold);
}
.link-arrow,
.band-dark .link-arrow,
.band-olive .link-arrow,
.link-arrow--light {
  color: var(--cream-text);
}
.arrow-btn,
.band-dark .arrow-btn,
.band-olive .arrow-btn {
  color: var(--cream-text);
}
.arrow-btn:hover,
.qa[open] .qa-ico,
.to-top:hover,
.foot-social a:hover,
.nav-overlay__social a:hover,
.foot-badge:hover .foot-badge__center,
.nav-overlay__close:hover {
  color: var(--black);
}
.chip,
.band-dark .chip,
.band-olive .chip {
  color: var(--cream-text);
}

/* ------------------------------------------------------------
   5. HEADER, OVERLAY MENU, PRELOADER, FLOATING BAR
   ------------------------------------------------------------ */
.site-header {
  color: var(--cream-text);
}
.site-nav a {
  color: var(--cream-text);
}
.site-nav a::before {
  background: var(--gold);
}
.site-nav a:hover,
.site-nav a.active {
  color: var(--gold);
}
.site-header.is-fixed {
  background: color-mix(in srgb, var(--black) 96%, transparent);
  color: var(--cream-text);
  border-bottom: 1px solid var(--cream-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
@media (max-width: 1199px) {
  .site-header,
  .site-header.is-fixed,
  .site-header.is-fixed.is-shown {
    background: var(--black);
    color: var(--cream-text);
    border-bottom: 1px solid var(--cream-line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}
/* redrawn logo: horizontal bowl + wordmark lockup, 710x160 (4.44:1), sized by height */
.brand img {
  height: 3.5rem;
  width: auto;
}
.site-header.is-fixed .brand img {
  height: 3.1rem;
}
@media (max-width: 1199px) {
  .brand img,
  .site-header.is-fixed .brand img {
    height: 2.75rem;
  }
}
@media (max-width: 600px) {
  .brand img,
  .site-header.is-fixed .brand img {
    height: 2.3rem;
  }
}
@media (max-width: 374px) {
  /* 320-374px phones: logo + Order + burger don't fit one row; the fixed
     bottom order bar (every page but 404) carries the Order button */
  body:has(.floating-btn-wrapper) .header-cta__order {
    display: none;
  }
  .brand img,
  .site-header.is-fixed .brand img {
    height: 2.4rem;
  }
}
.foot-brand img {
  height: auto;
  width: min(100%, 17rem);
}
.nav-overlay__brand img {
  height: 3.25rem;
  width: auto;
}
.nav-overlay__panel {
  background: var(--raised);
  color: var(--cream-75);
  border-right: 1px solid var(--cream-line);
}
.nav-overlay__close {
  background: #2c2824;
  color: var(--cream-text);
}
.nav-overlay__close:hover {
  background: var(--gold);
}
.nav-overlay__links a:hover,
.nav-overlay__links a.active {
  color: var(--gold);
}
.nav-overlay__meta a:not(.btn):hover {
  color: var(--gold);
}
.nav-overlay__social a {
  color: var(--cream-text);
}
.breadcrumb-container {
  background: var(--black);
}
.breadcrumb {
  color: var(--grey);
}
.preloader__half {
  background: var(--black);
}
.preloader__line {
  background: var(--gold);
}
.floating-btn-wrapper {
  background: color-mix(in srgb, var(--black) 94%, transparent) !important;
}
.to-top {
  background: color-mix(in srgb, var(--black) 85%, transparent);
}
.cursor-follower {
  color: var(--black);
}
.cursor-follower.is-label {
  background: var(--gold);
}

/* ------------------------------------------------------------
   6. PAGE TITLE + HOME HERO (photo overlays were ink = now cream)
   ------------------------------------------------------------ */
.page-title::before {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.8) 0%,
    rgba(10, 10, 10, 0.62) 45%,
    rgba(10, 10, 10, 0.94) 100%
  );
}
.page-title h1,
.page-title .eyebrow,
.page-title .lede,
.page-title__crumb,
.page-title__side {
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}
.page-title .eyebrow,
.page-title__side strong {
  color: var(--gold);
}
.page-title .lede,
.page-title__side,
.page-title__side a,
.page-title__side span {
  color: var(--cream-text);
}
.hero-card__panel {
  background: var(--raised);
  color: var(--cream-text);
  border: 1px solid var(--cream-line);
  border-top: 0;
}
.hero-card__tel {
  color: var(--cream-text);
}
.hero-card__tel .ico,
.hero-card__tel:hover {
  color: var(--gold);
}
.hero-home__meta a:hover,
.page-title__crumb a:hover,
.insta-band__handle:hover,
.foot-col a:hover,
.foot-legal a:hover {
  color: var(--gold);
}

/* ------------------------------------------------------------
   7. CARDS, REVIEWS, FAQ, MARQUEE, LISTS
   ------------------------------------------------------------ */
.service-card__overlay {
  background: linear-gradient(180deg, transparent 20%, rgba(10, 10, 10, 0.88) 100%);
}
.service-card__name,
.band-dark .service-card__name {
  color: var(--cream-text);
}
.service-card__icon {
  color: var(--gold);
  border-color: var(--gold-line);
}
.quote-card {
  background: color-mix(in srgb, var(--raised) 55%, transparent);
  border-color: var(--cream-line);
}
.quote-card:hover,
.band-dark .quote-card:hover,
.band-olive .quote-card:hover {
  background: var(--raised);
  border-color: var(--gold-line);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}
.quote-card .q-by {
  border-top-color: var(--cream-line);
}
.q-by strong,
.band-dark .q-by strong,
.band-olive .q-by strong {
  color: var(--cream-text);
}
.q-by span,
.band-dark .q-by span,
.band-olive .q-by span {
  color: var(--grey);
}
.reviews-score {
  background: var(--raised);
  color: var(--cream-text);
  border: 1px solid var(--cream-line);
}
.reviews-score .eyebrow,
.reviews-score .stars {
  color: var(--gold);
}
.reviews-score__num {
  color: var(--cream-text);
}
.reviews-score p {
  color: var(--grey);
}
.quote-card--cta {
  background: var(--raised);
  border-color: var(--gold-line);
}
.quote-card--cta .eyebrow {
  color: var(--gold);
}
.quote-card--cta blockquote {
  color: var(--cream-text);
}
.quote-card--cta:hover {
  background: var(--black);
  border-color: var(--gold);
}
.stars {
  color: var(--gold);
}
.marquee--text .marquee__item:nth-child(odd),
.band-dark .marquee--text .marquee__item:nth-child(odd),
.band-olive .marquee--text .marquee__item:nth-child(odd) {
  color: var(--cream-text);
}
.qa summary,
.band-dark .qa summary {
  color: var(--cream-text);
  font-weight: 500;
}
.qa summary:hover,
.qa[open] summary {
  color: var(--gold);
}
.qa-ico {
  color: var(--gold);
}
.qa-body {
  color: var(--grey);
}
.qa-body a,
.band-dark .qa-body a,
.lede a,
.prose a,
.legal a,
.area a,
.band-dark .lede a,
.band-olive .lede a,
.page-title .lede a {
  color: var(--cream-text);
  text-decoration-color: var(--gold);
}
.qa-body a:hover,
.lede a:hover,
.prose a:hover,
.legal a:hover,
.area a:hover {
  color: var(--gold);
}
.link-card,
.band-dark .link-card,
.band-olive .link-card {
  color: var(--cream-text);
  background: color-mix(in srgb, var(--raised) 45%, transparent);
}
.link-card:hover,
.cat-tile:hover,
a.info-card:hover {
  background: var(--raised);
  color: var(--cream-text);
  border-color: var(--gold);
}
.link-card:hover small {
  color: var(--gold);
}
a.info-card:hover strong,
a.info-card:hover .ic {
  color: var(--gold);
  border-color: var(--gold-line);
}
.cat-tile {
  color: var(--cream-text);
}
.info-card,
.value-card,
.area {
  background: color-mix(in srgb, var(--raised) 45%, transparent);
  border-color: var(--cream-line);
}
.info-card strong {
  color: var(--cream-text);
}
.offer-row__text strong {
  color: var(--cream-text);
}
.v-ico img {
  /* recolour the line icons to the yellow accent */
  filter: brightness(0) saturate(100%) invert(87%) sepia(52%) saturate(708%) hue-rotate(357deg) brightness(104%) contrast(101%);
}
.chapter-dot {
  color: var(--grey-muted);
}
.chapter-dot:hover,
.chapter-dot.is-active {
  color: var(--cream-text);
}
.chapter-dot.is-active::before,
.chapters__nav-fill,
.timeline__progress {
  background: var(--gold);
}
.timeline-dot.is-active::before {
  background: var(--gold);
  border-color: var(--gold);
}
.timeline-dot.is-active {
  color: var(--cream-text);
}
.dish-card__text,
.dish-feature__text,
.service-card p,
.hero-home__copy .lede,
.hero-home__meta > *,
.hero-card__meta,
.foot-cta-half,
.site-footer {
  color: var(--cream-75);
}
.marquee--dishes p,
.band-dark .marquee--dishes p,
.band-olive .marquee--dishes p {
  color: var(--grey);
}
.rating-count {
  color: var(--grey);
}

/* ------------------------------------------------------------
   8. MENU PAGE (script.js renders tabs, rows, prices from menu.js)
   ------------------------------------------------------------ */
.menu-heading {
  background: var(--black);
  border-bottom-color: var(--cream-line);
}
.menu-title {
  color: var(--cream-text);
}
.menu-search {
  background: var(--raised);
  border-color: var(--cream-line);
}
.menu-search:hover,
.menu-search:focus-within {
  border-color: var(--gold);
  background: var(--raised);
}
.menu-search input,
.mobile-menu-controls input {
  color: var(--cream-text);
}
.menu-search input::placeholder,
.mobile-menu-controls input::placeholder,
.field::placeholder {
  color: var(--grey-muted);
}
.menu-buttons {
  border-left-color: var(--cream-line);
}
.menu-button {
  color: var(--grey);
}
.menu-button:hover,
.menu-button.active-button {
  color: var(--gold);
}
.menu-buttons.is-searching .menu-button,
.menu-buttons.is-searching .menu-button.active-button {
  color: var(--grey);
}
.menu-item {
  border-bottom-color: var(--cream-line);
}
.item-name,
.menu-row__name {
  color: var(--cream-text);
  font-weight: 500;
}
.item-name::after {
  border-bottom-color: var(--cream-line);
}
.item-desc,
.menu-row__desc,
.menu-empty {
  color: var(--grey);
}
.item-price,
.menu-row__price,
.category-header {
  color: var(--gold);
}
.category-header {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
}
.category-header::after {
  background: var(--cream-line);
}
/* the group title masks the centre rule, so it must match its own band */
.menu-group__title {
  background: var(--charcoal);
  color: var(--cream-text);
}
.band-dark .menu-group__title {
  background: var(--black);
}
.band-olive .menu-group__title {
  background: var(--raised);
}
@media (max-width: 768px) {
  .mobile-menu-controls {
    background: var(--black);
    border-bottom-color: var(--cream-line);
  }
  .mobile-menu-controls input {
    background: var(--raised);
    border-color: var(--cream-line);
  }
  .mobile-menu-controls input:focus {
    background: var(--raised);
    border-color: var(--gold);
  }
  .dropbtn {
    background: var(--raised);
    color: var(--cream-text);
    border-color: var(--cream-line);
  }
  .dropdown-content {
    background: var(--raised);
    border-color: var(--cream-line);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  }
  .dropdown-content a {
    color: var(--cream-text);
    border-bottom-color: var(--cream-line);
  }
}

/* ------------------------------------------------------------
   9. FORMS
   ------------------------------------------------------------ */
input,
textarea,
select,
.field {
  color: var(--cream-text);
  background-color: transparent;
}
.field {
  border-bottom-color: var(--cream-line);
}
.arch-card {
  border-color: var(--gold-line);
  background: color-mix(in srgb, var(--raised) 45%, transparent);
}
select option {
  background: var(--raised);
  color: var(--cream-text);
}

/* ------------------------------------------------------------
   10. CONTACT / MAPS / HOURS
   ------------------------------------------------------------ */
/* Google map tiles are light: invert + hue-turn keeps road colours and the
   red pin while matching the dark page */
.map-wrap iframe,
iframe[src*="google.com/maps"] {
  filter: invert(90%) hue-rotate(180deg) saturate(0.6) brightness(0.95) contrast(0.95);
}
.map-guard span {
  background: rgba(10, 10, 10, 0.85);
  color: var(--cream-text);
}
.hours-table li {
  color: var(--cream-text);
  border-bottom-color: var(--cream-line);
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.15rem;
}
.hours-table li span + span {
  color: var(--gold);
  margin-left: auto;
  text-align: right;
}
/* keep each time range in one piece; the row wraps day / time instead */
.hours-table li span,
.foot-hours li span {
  white-space: nowrap;
}
.foot-hours li {
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.1rem;
}
.foot-hours li span + span {
  margin-left: auto;
  text-align: right;
  color: var(--cream-text);
}
.foot-hours li span + span {
  font-size: 0.92rem;
}
@media (min-width: 1101px) {
  /* widen the hours column so the split weekday range holds one line */
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.7fr) minmax(0, 0.8fr) minmax(0, 1fr);
  }
}
@media (max-width: 1100px) {
  /* the split weekday hours need the full row in the footer's narrow columns */
  .foot-col:has(.foot-hours) {
    grid-column: span 2;
  }
}
@media (max-width: 640px) {
  .foot-col:has(.foot-hours) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 380px) {
  /* 320px phones: the long split range may break at its comma rather than
     push the page sideways */
  .hours-table li span + span,
  .foot-hours li span + span {
    white-space: normal;
    margin-left: 0;
    text-align: left;
  }
  .hours-table li,
  .foot-hours li {
    display: grid;
  }
}

/* ------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------ */
.foot-cta-half::before {
  background: rgba(10, 10, 10, 0.8);
}
.foot-cta-half + .foot-cta-half::before {
  background: color-mix(in srgb, var(--raised) 88%, transparent);
}
.foot-main {
  background: var(--black);
  border-top: 1px solid var(--cream-line);
}
.foot-col h6 {
  color: var(--gold);
}
.foot-social a {
  color: var(--cream-text);
}
.foot-badge {
  color: var(--cream-75);
}
.foot-wordmark__text {
  color: color-mix(in srgb, var(--cream-text) 92%, transparent);
  font-weight: 500;
}
.foot-legal {
  color: var(--grey);
}

/* ------------------------------------------------------------
   12. LEGAL PAGES
   ------------------------------------------------------------ */
.legal,
.legal p,
.legal li {
  color: var(--grey);
}
.legal h2,
.legal h3 {
  color: var(--cream-text);
}