/* ============================================================
   CUSTOM — Per-store overrides for Template TF
   Add store-specific tweaks here. Loaded last so it wins
   over theme.css and style.css.
   ============================================================ */

/* ============================================================
   YAFACAFE.COM SKIN
   ------------------------------------------------------------
   Everything in this block re-dresses the template so it reads
   as the live yafacafe.ca: Raleway type, flat square blocks,
   teal #13abb9 pill buttons, orange #f37648 nav + review band,
   neutral #f2f2f2 quiet sections, and the keffiyeh net that the
   real site uses as its hero backdrop (rebuilt as an SVG tile
   so nothing is hot-linked).
   ============================================================ */

:root {
  /* type — the live site is Raleway top to bottom */
  --font-display: "Raleway", "Segoe UI", sans-serif;
  --font-body: "Raleway", "Segoe UI", sans-serif;

  /* neutral greys instead of the template's warm sand mixes */
  --sand: #f2f2f2;
  --sand-2: #e7e7e7;
  --muted: #5b5b5b;
  --line: #e3e3e3;

  /* semantic aliases pinned to the live palette */
  --chili: #13abb9;
  --chili-dark: #0e7b85;
  --chili-soft: #e2f4f6;
  --basil: #13abb9;
  --basil-deep: #0f8f99;
  --gold: #f37648;

  /* the live site is flat — square blocks, pill buttons only */
  --r-xl: 0px;
  --r-lg: 0px;
  --r-md: 0px;

  /* flatter shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.14);

  /* component icons, as mask sources */
  --ico-google: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.344-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24Z'/%3E%3C/svg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");

  /* keffiyeh net — the backdrop of the real homepage */
  --keffiyeh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' fill='%23f5f4f0'/%3E%3Cg fill='none' stroke='%23cfcec8' stroke-width='1.3'%3E%3Cpath d='M22 -2 L46 22'/%3E%3Cpath d='M-2 22 L22 46'/%3E%3Cpath d='M22 46 L46 22'/%3E%3Cpath d='M-2 22 L22 -2'/%3E%3C/g%3E%3Cg fill='none' stroke='%231c1c1c' stroke-width='2.3' stroke-dasharray='4.5 5.5' opacity='0.86'%3E%3Cpath d='M-3 -3 L47 47'/%3E%3Cpath d='M-3 47 L47 -3'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='1.5' fill='%231c1c1c' opacity='0.65'/%3E%3C/svg%3E");
}

body {
  font-family: var(--font-body);
  line-height: 1.55;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3,
h4,
.display {
  letter-spacing: -0.01em;
}

/* the live site tints emphasis orange, not teal */
h1 em,
h2 em,
h3 em,
.display em {
  color: var(--gold);
}

/* ---------- mask icons for the header/footer components ----------
   components/header.html and components/footer.html deliberately carry no
   inline <svg>: a dev server that injects a reload snippet targets closing
   svg tags in any file without a closing body tag and shreds the fragment.
   These masks give the same currentColor-aware icons with zero svg markup.
   ---------------------------------------------------------------- */

.ico--google,
.ico--pin,
.ico--phone {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ico--google {
  -webkit-mask-image: var(--ico-google);
  mask-image: var(--ico-google);
}

.ico--pin {
  -webkit-mask-image: var(--ico-pin);
  mask-image: var(--ico-pin);
}

.ico--phone {
  -webkit-mask-image: var(--ico-phone);
  mask-image: var(--ico-phone);
}

/* ---------- keffiyeh helper ---------- */

.keffiyeh-bg {
  background-color: #f5f4f0;
  background-image: var(--keffiyeh);
  background-size: 156px 156px;
  background-repeat: repeat;
}

/* ---------- buttons: teal pill, flat, generous ---------- */

.btn,
.btn-line,
.btn-ghost {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  padding: 1.05rem 2rem;
  border-radius: 200px;
}

.btn {
  background: var(--chili);
  color: #fff;
  box-shadow: none;
}

.btn:hover {
  background: var(--basil-deep);
  box-shadow: none;
  transform: none;
}

.btn--butter {
  background: #fff;
  color: var(--chili-dark);
  box-shadow: none;
}

.btn--butter:hover {
  background: #fff;
  color: var(--gold);
}

.btn-line {
  background: var(--gold);
  color: #fff;
}

.btn-line:hover {
  background: #dd5f31;
  color: #fff;
  transform: none;
}

/* the oversized centred CTA the live homepage uses */
.btn--xl {
  font-size: 1.125rem;
  padding: 1.55rem 2.5rem;
}

/* ---------- header ---------- */

/* the live site has nothing above the logo bar */
.site-topline {
  display: none;
}

.site-header {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.site-header .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding-block: 0.5rem;
}

.brand img {
  height: 62px;
  border-radius: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}

.site-nav {
  justify-content: center;
  gap: clamp(0.15rem, 1vw, 0.6rem);
}

/* orange nav links, no pill hover */
.site-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--gold);
  padding: 0.5rem 0.85rem;
  border-radius: 0;
}

.site-nav a:hover {
  background: none;
  color: var(--chili);
}

.site-nav a.active {
  background: none;
  color: var(--chili);
  font-weight: 700;
}

/* pull the order pill into the middle of the nav, like the live header */
@media (min-width: 901px) {
  .nav-extra {
    display: flex;
    align-items: center;
    order: -1;
    margin-right: 0.35rem;
  }

  .nav-extra__tel {
    display: none;
  }

  .nav-extra .btn {
    padding: 0.8rem 1.4rem;
    font-size: 0.95rem;
  }

  /* the right-hand slot becomes the social row */
  .header-cta > .btn {
    display: none;
  }
}

/* the orange nav-link colour must never bleed into the pill (either breakpoint) */
.site-nav .nav-extra .btn,
.site-nav .nav-extra .btn:hover {
  color: #fff;
}

@media (max-width: 900px) {
  /* keep the template's larger mobile tap targets */
  .site-nav a {
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
  }

  .site-nav a.active {
    background: var(--chili-soft);
  }
}

.header-social {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.header-social a {
  color: var(--gold);
  font-size: 1.05rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.header-social a:hover {
  color: var(--chili);
}

@media (max-width: 900px) {
  .header-social {
    display: none;
  }

  .site-header .wrap {
    display: flex;
    justify-content: space-between;
  }
}

/* ---------- hero ---------- */

.hero-full {
  min-height: clamp(500px, 74vh, 720px);
}

/* Re-stack the hero positively (photo → scrim → copy) instead of relying on
   negative z-index inside an isolated stacking context, and paint the same
   file as the section background: the absolutely-positioned <picture>/<img>
   pair does not reliably produce a paint on first load. The <picture> stays
   in the markup for its alt text — same URL, so still one fetch. */
.hero-full {
  isolation: auto;
  background-image: url("assets/backgrounds/palestinian-restaurant-winnipeg-yafa-cafe.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-full__bg {
  display: block;
  z-index: 0;
}

/* one absolute layer, not two — the doubled absolute picture/img never
   invalidated its paint on first load */
.hero-full__bg img {
  position: static;
  z-index: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-full::before {
  z-index: 1;
}

.hero-full__content,
.hero-full__foot {
  position: relative;
  z-index: 2;
}

.hero-full::before {
  background: linear-gradient(
    180deg,
    rgba(8, 30, 33, 0.42) 0%,
    rgba(8, 30, 33, 0.28) 45%,
    rgba(8, 30, 33, 0.6) 100%
  );
}

/* keep the headline readable now that the photo actually shows through */
.hero-full__content {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-full h1 {
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  letter-spacing: -0.02em;
}

.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.kicker--light::before {
  background: var(--gold);
}

.hero-full__tag em {
  color: #ffd9c8;
}

.store-bar {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
  border-radius: 0;
}

.sb-ico {
  border-radius: 0;
}

/* ---------- signature plates (images untouched) ---------- */

.plates {
  background: #fff;
}

.plate {
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}

.plate:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}

.plate img {
  border-radius: 0;
}

.plate .plate-no {
  background: var(--chili);
  color: #fff;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.plate .plate-foot {
  background: none;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.arrow-btn {
  border-radius: 200px;
  border: 1px solid var(--line);
  color: var(--chili);
}

.arrow-btn:hover {
  background: var(--chili);
  color: #fff;
  border-color: var(--chili);
}

/* ---------- story ---------- */

.story {
  background: var(--sand);
}

.story-collage .img-a,
.story-collage .img-b {
  border-radius: 0;
}

.story-collage .sticker,
.sticker {
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

.chip {
  border-radius: 200px;
  background: #fff;
  border: 1px solid var(--line);
}

.chip .dot {
  color: var(--gold);
}

/* ---------- the souk band: catering block + quick tiles ---------- */

.souk {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.souk-box {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  background: rgba(39, 194, 209, 0.91);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
}

.souk-box img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

.souk-box__copy {
  color: #10343a;
  font-size: 1.02rem;
  line-height: 1.5;
}

.souk-box__copy h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 800;
  color: #0c2b30;
  margin-bottom: 0.75rem;
}

.souk-box__copy p + p {
  margin-top: 1rem;
}

.souk-box__copy strong {
  color: #0c2b30;
}

.souk-box__copy a {
  color: #0c2b30;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.souk-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.souk-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #ddd;
}

.souk-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.souk-tile:hover img {
  transform: scale(1.05);
}

.souk-tile span {
  position: absolute;
  left: 0;
  bottom: 12%;
  background: var(--tile-c, var(--chili));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 0.4em 1.1em 0.4em 0.75em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.55em) 100%, 0 100%);
}

.souk-tile--menu span {
  --tile-c: #13abb9;
}

.souk-tile--contact span {
  --tile-c: #f37648;
}

.souk-tile--gallery span {
  --tile-c: #7fa845;
}

.souk-tile--food span {
  --tile-c: #e0407e;
}

.souk-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 820px) {
  .souk-box {
    grid-template-columns: 1fr;
  }

  .souk-tiles {
    grid-template-columns: 1fr;
  }
}

/* ---------- menu preview band ---------- */

.menu-band {
  background: var(--basil-deep);
  border-radius: 0;
  width: 100%;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.menu-band .kicker,
.menu-band .kicker::before {
  color: #ffd9c8;
}

.menu-band .kicker::before {
  background: #ffd9c8;
}

.menu-band h2 em {
  color: #ffd9c8;
}

.cat-tile {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
}

.cat-tile .arrow {
  color: #ffd9c8;
}

.cat-tile:hover {
  transform: none;
  box-shadow: none;
}

/* the template shipped a "TANDOOR" watermark in this band */
.menu-band::after {
  content: "YAFA CAF\00c9";
}

/* ---------- reviews: full-bleed orange band, like the live site ---------- */

.quotes {
  background: var(--gold);
  color: #fff;
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  text-align: center;
}

.quotes .wrap {
  max-width: 62rem;
}

.quotes-intro {
  display: block;
  margin-bottom: 1.5rem;
}

.quotes-intro .kicker,
.quotes-intro .kicker::before {
  color: rgba(255, 255, 255, 0.9);
}

.quotes-intro .kicker::before {
  display: none;
}

.quotes-intro h2 {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.quotes-intro .chip {
  display: none;
}

/* one quote at a time, centred, with the ringed quote mark */
.quote-grid {
  display: block;
  position: relative;
}

.quote-card {
  background: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  align-items: center;
}

.quote-card:hover {
  transform: none;
  box-shadow: none;
}

.quote-card[hidden] {
  display: none;
}

/* the ringed quote glyph the live band opens with */
.quote-card .qmark {
  display: grid;
  place-items: center;
  position: static;
  top: auto;
  right: auto;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 0;
  padding-top: 0.55rem;
  color: #fff;
}

.quote-card blockquote {
  order: 2;
  color: #fff;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.85;
  margin: 0 auto 1.25rem;
  max-width: 54rem;
}

.quote-card .stars {
  order: 3;
  color: var(--chili);
  font-size: 1rem;
  gap: 0.35em;
  margin: 0 auto 1.1rem;
}

.quote-card .q-by {
  order: 4;
  display: block;
  margin: 0 auto;
  padding-top: 0;
  border-top: none;
  color: #fff;
}

.quote-card .q-by strong {
  display: block;
  font-weight: 500;
  font-size: 1.05rem;
}

.quote-card .q-by span {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
}

.quote-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.9rem;
}

.quote-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.quote-dots button[aria-selected="true"] {
  background: #fff;
  transform: scale(1.25);
}

/* ---------- newsletter ---------- */

.newsletter {
  background: var(--sand);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  text-align: center;
}

.newsletter h2 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.newsletter form {
  width: min(31rem, 100%);
  margin-inline: auto;
}

.newsletter input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 1.05rem 1.1rem;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 0;
}

.newsletter input + input {
  border-top: none;
}

.newsletter input::placeholder {
  color: #8d8d8d;
}

.newsletter input:focus-visible {
  outline: 2px solid var(--chili);
  outline-offset: -2px;
}

.newsletter .btn {
  margin-top: 1.9rem;
}

.newsletter__note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------- delivery / review partners ---------- */

.partners {
  background: var(--basil-deep);
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
}

.partners h2 {
  color: #fff;
  text-align: center;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 600;
  margin-bottom: 1.75rem;
}

.partner-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.6rem);
}

.partner-card {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 1.1rem;
  background: #fff;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: transform 0.2s ease;
}

.partner-card:hover {
  transform: translateY(-3px);
}

.partner-card small {
  display: block;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.35rem;
}

.partner-card--reviews {
  background: var(--brand-3);
  color: #fff;
}

.partner-card--reviews small {
  color: rgba(255, 255, 255, 0.85);
}

.partner-card--order {
  background: var(--brand);
  color: #fff;
}

.partner-card--order small {
  color: rgba(255, 255, 255, 0.85);
}

.partner-card--delivery {
  color: var(--brand-2);
}

.partner-card--directions {
  background: #e4ede0;
}

@media (max-width: 720px) {
  .partner-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- FAQ ---------- */

.faq {
  background: #fff;
}

.qa {
  border-radius: 0;
  border: 1px solid var(--line);
}

.qa summary .qa-ico {
  border-radius: 0;
  color: var(--chili);
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--sand);
}

.cta-chips .chip {
  background: #fff;
  box-shadow: none;
}

/* ---------- partners band (home) ----------
   Sits between the grey CTA band and the white visit section. The badge
   rebuilds the Watermelon Maps partner mark in the site's own type, so it
   stays crisp at any size and follows the theme instead of fighting it. */

.partners-band {
  background: #fff;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}

.partners-band h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  margin: 0.9rem 0 0.85rem;
}

.partners-band h2 em {
  font-style: normal;
  color: var(--chili);
}

.partners-band .lede {
  margin: 0 auto;
}

.partner-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.partner-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: min(100%, 17rem);
  padding: clamp(1.5rem, 3vw, 2rem) 1.5rem;
  background: #e4ede0;
  border: 1px solid transparent;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.partner-badge:hover,
.partner-badge:focus-visible {
  transform: translateY(-3px);
  border-color: var(--chili);
  box-shadow: var(--shadow-md);
}

.partner-badge__mark {
  width: auto;
  height: clamp(3.75rem, 7vw, 4.75rem);
}

.partner-badge__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* "Partner" drops to its own line under the product name */
.partner-badge__label strong {
  display: block;
  font-weight: 800;
}

.partners-band__note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.partners-band__note a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.partners-band__note a:hover,
.partners-band__note a:focus-visible {
  color: var(--chili);
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--basil-deep);
  color: rgba(255, 255, 255, 0.85);
}

.foot-brand img {
  background: #fff;
  border-radius: 0;
  padding: 6px 10px;
}

.foot-social a {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.foot-social a:hover {
  background: var(--gold);
}

.site-footer {
  overflow-x: clip;
}

.site-footer .wrap {
  padding-bottom: 0;
}

/* the live site closes on a lighter teal legal strip, edge to edge */
.foot-legal {
  background: var(--chili);
  margin-inline: calc(50% - 50vw);
  padding: 1.1rem calc(50vw - 50% + var(--pad));
  margin-top: 1.6rem;
  color: rgba(255, 255, 255, 0.92);
  border-top: none;
}

.foot-legal .credit a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- subpage heroes + shared blocks ---------- */

.page-hero {
  background: var(--sand);
}

.page-hero--split .ph-img img,
.bd-card,
.bd-img img,
.value-card,
.visit-box,
.menu-item,
.quote-card img {
  border-radius: 0;
}

.menu-button {
  border-radius: 200px;
}

.floating-btn-wrapper .btn.order-float {
  border-radius: 200px;
}

/* ============================================================
   END YAFACAFE.COM SKIN
   ============================================================ */

/* ---------- "Visit us" map + contact box (city/cuisine SEO page) ---------- */

/* section wrapper for the map + contact box on the home page */
.visit-sec {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.visit-sec .visit-box {
  margin-top: 0;
}

.visit-box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  margin-top: 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.visit-box__map {
  position: relative;
  min-height: 420px;
  background: var(--sand);
}

.visit-box__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.visit-box__info {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.visit-box__info h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  color: var(--basil);
}

.visit-box__info h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.25rem 0 0.5rem;
}

.visit-box__address {
  font-style: normal;
  line-height: 1.6;
  color: var(--muted);
}

.visit-box__address strong {
  color: var(--ink);
}

.visit-box__contact {
  margin-top: 1rem;
}

.visit-box__contact li,
.visit-box__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.visit-box__contact li:last-child,
.visit-box__hours li:last-child {
  border-bottom: none;
}

.visit-box__contact a {
  font-weight: 700;
  color: var(--chili-dark);
}

.visit-box__services {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.visit-box__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.75rem;
}

.visit-box__actions .btn,
.visit-box__actions .btn-secondary {
  padding: 0.85rem 1.4rem;
  font-size: 0.95rem;
}

.visit-box__actions .btn-secondary {
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .visit-box {
    grid-template-columns: 1fr;
  }

  .visit-box__map {
    min-height: 320px;
  }

  .visit-box__actions {
    justify-content: center;
  }
}

/* ---------- inline internal links (home FAQ + body copy) ----------
   Global reset sets `a { color: inherit; text-decoration: none }`, so
   in-copy links to the tag / dish / neighbourhood pages need an explicit
   treatment to read as links and stay accessible.
   ------------------------------------------------------------------ */

.qa .qa-body a,
.story-copy .lede a,
.visit-box__services a {
  color: var(--chili-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--chili) 45%, transparent);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.qa .qa-body a:hover,
.qa .qa-body a:focus-visible,
.story-copy .lede a:hover,
.story-copy .lede a:focus-visible,
.visit-box__services a:hover,
.visit-box__services a:focus-visible {
  color: var(--chili);
  text-decoration-color: currentColor;
}

/* neighbourhood + dish lists inside the FAQ read as link directories */
.qa .qa-body ul a {
  display: inline-block;
}

/* ---------- h4 sub-labels inside legacy tag-page cards ---------- */

.delivery-area-card h4,
.package-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chili);
  margin: 1.1rem 0 0.4rem;
}

.delivery-area-card h4:first-of-type,
.package-card h4:first-of-type {
  margin-top: 0.25rem;
}