/*!
Theme Name: paninos
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: paninos
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

paninos is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ==========================================================================
   Design Tokens
   Order matters: fonts + variable definitions must land before base.css,
   which consumes them.
   ========================================================================== */
@import url("css/tokens/fonts.css");
@import url("css/tokens/colors.css");
@import url("css/tokens/typography.css");
@import url("css/tokens/layout.css");
@import url("css/tokens/base.css");

/* ===============new home page css================ */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background: var(--bg-page);
}
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
/* Text for assistive tech only. Several block stylesheets carry their own copy
   of this rule; it lives here too so templates that load no block CSS — the
   single Food item page, for one — do not print the text on screen. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
button {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-sm {
  padding: 9px 18px;
  font-size: 13px;
  min-height: 37px;
}
.btn-md {
  padding: 13px 26px;
  font-size: 15px;
  min-height: 45px;
}
.btn-lg {
  padding: 17px 36px;
  font-size: 16px;
  min-height: 55px;
}
/* .btn is line-height:1, so a button's height is driven by its tallest child:
   an icon is 18px where the label's line box is only 16px, which left buttons
   with an icon 2px taller than the ones without, side by side in the same row.
   Pinning the icon size per button size and giving each size the height its
   icon variant already had makes every button in a row line up, icon or not. */
.btn svg {
  flex-shrink: 0;
}
.btn-sm svg,
.btn-md svg {
  width: 16px;
  height: 16px;
}
.btn-lg svg {
  width: 18px;
  height: 18px;
}
.btn-primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.btn-primary:hover {
  background: var(--brand-primary-ink);
  border-color: var(--brand-primary-ink);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-outline {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.btn-secondary {
  background: var(--brand-secondary);
  color: #fff;
  border-color: var(--brand-secondary);
}
.btn-secondary:hover {
  background: var(--brand-secondary-ink);
  border-color: var(--brand-secondary-ink);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-ghost {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--paper-2);
  color: var(--text-heading);
}
.btn-on-dark {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
}
.btn-on-dark:hover {
  background: var(--paper);
  color: var(--brand-primary-ink);
}
.btn-ghost-onred {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.btn-ghost-onred:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Header — see blocks/header/style.css */

/* Hero — see blocks/hero/style.css */

/* Sections — shared shell for every section block */
.section {
  background: var(--bg-page);
  padding: 84px 0;
}
.section-alt {
  background: var(--bg-alt);
}
.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.section-heading-left {
  text-align: left;
  max-width: 560px;
  margin: 0;
}
.section-heading h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
  margin: 0;
}
.section-heading .intro {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  margin: 14px 0 0;
}
.cats-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}

/* Feature cards (Why Panino's) — see blocks/features/style.css */

/* Menu categories — see blocks/categories/style.css */

/* Photo feature grids (Signature Favorites / Pizza by the Slice) — see blocks/menu/style.css */

/* Lunch special deal cards — see blocks/specials/style.css */

/* Testimonials — see blocks/testimonials/style.css */

/* CTA band — see blocks/cta/style.css */

/* About page sections — see blocks/our-story/style.css, blocks/our-way/style.css,
   blocks/downtown/style.css and blocks/cta-band/style.css */

/* Location — see blocks/contact/style.css */

/* Footer — deep charcoal, not pure black */
.site-footer {
  background: var(--ink-800);
  padding: 56px 0 30px;
  color: var(--ink-300);
}
.page-id-582 .site-footer {
  margin-top: 72px;
}
@media (max-width: 960px) {
  .page-id-582 .site-footer {
    margin-top: 56px;
  }
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-logo {
  display: inline-block;
}
.footer-logo-img {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 14px;
}
.footer-brand p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  max-width: 280px;
  margin: 0 0 18px;
}
.social-links {
  display: flex;
  gap: 12px;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
.footer-col p {
  font-family: var(--font-body);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-300);
  margin-bottom: 10px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col li a {
  margin-bottom: 0;
}
.footer-bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
}
.footer-legal {
  display: flex;
  gap: 20px;
}
.footer-legal a {
  color: var(--ink-500);
  font-size: 13px;
}

/* Order toast */
.order-toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: #fff;
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2000;
  transition: bottom var(--dur-base) var(--ease-out);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
}
.order-toast.show {
  bottom: 28px;
}

/* Accessibility — visible keyboard focus + skip link */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Section rhythm — hairline seam when two sections share the same background */
.section + .section,
.section-alt + .section-alt {
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 960px) {
  .grid-3,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .cats-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .cats-head .btn {
    width: 100%;
    text-align: center;
  }
  .section-heading-left {
    text-align: center;
    max-width: 100%;
    margin: 0 auto 32px;
  }
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
  .section {
    padding: 56px 0;
  }
}
@media (max-width: 420px) {
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }
  .btn-sm {
    padding: 9px 12px;
    font-size: 12px;
  }
  .section-heading h2 {
    font-size: 30px;
  }
}
@media (max-width: 340px) {
  .btn-sm {
    padding: 8px 10px;
    font-size: 11.5px;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-sm {
  padding: 9px 18px;
  font-size: 13px;
}
.btn-md {
  padding: 13px 26px;
  font-size: 15px;
}
.btn-lg {
  padding: 17px 36px;
  font-size: 16px;
}
.btn-primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.btn-primary:hover {
  background: var(--brand-primary-ink);
  border-color: var(--brand-primary-ink);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-outline {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.btn-ghost {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--paper-2);
  color: var(--text-heading);
}
.btn-on-dark {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
}
.btn-on-dark:hover {
  background: var(--paper);
  color: var(--brand-primary-ink);
}
.btn-ghost-onred {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.btn-ghost-onred:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 60px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(30, 24, 19, 0.05);
  transition:
    padding var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  padding: 12px 60px;
  box-shadow: var(--shadow-sm);
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  height: 54px;
  width: auto;
  display: block;
}
.main-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.main-nav a {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-800);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav a:hover {
  color: var(--brand-primary);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  flex-shrink: 0;
}
.call-link {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-800);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ink-800);
  cursor: pointer;
  font-family: var(--font-body);
}
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  flex-direction: column;
  padding: 8px 24px 20px;
  z-index: 999;
}
.mobile-nav.open {
  display: flex;
}
.mobile-nav a {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-800);
}
.mobile-nav .btn {
  margin-top: 16px;
  width: 100%;
}
.mobile-nav .mobile-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 13px 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-800);
}

/* Hero — bright, light, photo-forward */
.hero {
  background: var(--paper);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 52px;
  align-items: center;
  padding: 48px 60px 68px;
}
.page-about-us,
.page-gallery,
.page-catering {
  padding: 48px 60px 0px 68px;
}
.hero-hours {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  margin-bottom: 26px;
  background: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-pill);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(201, 37, 44, 0.22);
}
.hero-hours svg {
  color: #fff;
  stroke: #fff;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin: 0 0 18px;
  max-width: 460px;
}
.hero-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 420px;
  margin: 0 0 28px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.hero-ctas .btn-lg {
  padding: 16px 18px;
  font-size: 15px;
}
.hero-media-wrap {
  position: relative;
}
.hero-media {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-badge {
  position: absolute;
  bottom: 22px;
  left: 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 44px);
}
.hero-badge svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}
.hero-badge strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-heading);
  line-height: 1.15;
}
.hero-badge span {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.page-id-582 .hero-inner {
  padding: 48px 60px 10px;
}

/* Sections */
.section {
  background: var(--bg-page);
  padding: 84px 0;
}
.section-alt {
  background: var(--bg-alt);
}
.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.section-heading-left {
  text-align: left;
  max-width: 560px;
  margin: 0;
}
.section-heading h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
  margin: 0;
}
.section-heading .intro {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  margin: 14px 0 0;
}

/* Feature cards (Why Panino's) */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}
.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-xs);
}
.feature-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--red-50);
  color: var(--brand-primary);
}
.feature-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-heading);
  margin: 0;
}
.feature-card p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* Menu categories */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: center;
  padding: 28px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary);
}
.cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-pill);
  background: var(--red-50);
  color: var(--brand-primary);
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-out);
}
.cat-card:hover .cat-icon {
  background: var(--red-100);
}
.cat-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.cat-icon i {
  display: block;
  width: 26px;
  height: 26px;
}
.cat-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--text-heading);
}

/* Photo feature grids (Signature Favorites / Pizza by the Slice) */
.cats-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-heading {
  margin-bottom: 32px;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.photo-card {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.photo-media {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.photo-card figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px;
  background: linear-gradient(to top, rgba(30, 24, 19, 0.65), transparent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

/* Lunch special deal cards */
.deal-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-xs);
}
.deal-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-heading);
  margin: 0 0 8px;
}
.deal-card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.deal-card .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--price);
}

/* Testimonials */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 30px;
  box-shadow: var(--shadow-xs);
  margin: 0;
}
.testimonial-card .stars {
  color: var(--star);
  letter-spacing: 2px;
  font-size: 17px;
}
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-heading);
  margin: 0;
  flex: 1;
}
.testimonial-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body);
}
.testimonial-card figcaption strong {
  font-size: 14px;
  color: var(--text-heading);
}
.testimonial-card figcaption small {
  font-size: 12px;
  color: var(--text-muted);
}
.testimonial-card .source {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* CTA band — brand red, not dark/green */
.cta-band {
  background: var(--brand-primary);
  padding: 70px 0;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.cta-band p {
  font-family: var(--font-body);
  font-size: 17px;
  color: #fff;
  opacity: 0.92;
  margin: 0 0 28px;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Location — light, not dark ink */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.location-blocks {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
.location-block {
  display: flex;
  gap: 14px;
  color: var(--brand-primary);
}
.location-block > div {
  display: flex;
  flex-direction: column;
}
.location-h {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 6px;
}
.location-line {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
}
.location-line a {
  color: var(--text-body);
}
.location-line a:hover {
  color: var(--brand-primary) !important;
}
[id^="menu-"] {
  scroll-margin-top: 140px;
}
@media (max-width: 767px) {
  [id] {
    scroll-margin-top: 110px;
  }
  [id^="menu-"] {
    scroll-margin-top: 260px;
  }
}
.map-box {
  height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--paper-2);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--brand-primary);
}
.map-box span {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

/* Footer — deep charcoal, not pure black */
.site-footer {
  background: var(--ink-800);
  padding: 56px 0 30px;
  color: var(--ink-300);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-logo-img {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 14px;
}
.footer-brand p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  max-width: 280px;
  margin: 0 0 18px;
}
.social-links {
  display: flex;
  gap: 12px;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
.footer-col p {
  font-family: var(--font-body);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-300);
  margin-bottom: 10px;
}
.footer-bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
}
.footer-legal {
  display: flex;
  gap: 20px;
}
.footer-legal a {
  color: var(--ink-500);
  font-size: 13px;
}

/* Order toast */
.order-toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: #fff;
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2000;
  transition: bottom var(--dur-base) var(--ease-out);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
}
.order-toast.show {
  bottom: 28px;
}

@media (max-width: 1100px) {
  .cat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1080px) {
  .main-nav,
  .call-link {
    display: none;
  }
  .mobile-toggle {
    display: flex;
  }
}
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 40px 24px 56px;
    gap: 40px;
  }
  .hero-title {
    font-size: 34px;
  }
  .hero-media {
    aspect-ratio: 4/3;
    min-height: 0;
  }
  .hero-badge {
    left: 16px;
    bottom: 16px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }
  .hero-ctas .btn-lg {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
  }
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3,
  .photo-grid,
  .location-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .cats-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .cats-head .btn {
    width: 100%;
    text-align: center;
  }
  .section-heading-left {
    text-align: center;
    max-width: 100%;
    margin: 0 auto 32px;
  }
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
  .site-header,
  .site-header.scrolled {
    padding-left: 24px;
    padding-right: 24px;
  }
  .section {
    padding: 56px 0;
  }
}
@media (max-width: 420px) {
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }
  .site-header,
  .site-header.scrolled {
    padding-left: 18px;
    padding-right: 18px;
    gap: 8px;
  }
  .logo-img {
    height: 42px;
  }
  .header-actions {
    gap: 8px;
  }
  .btn-sm {
    padding: 9px 12px;
    font-size: 12px;
  }
  .mobile-toggle {
    width: 36px;
    height: 36px;
  }
  .hero-inner {
    padding: 32px 18px 44px;
  }
  .page-about-us,
  .page-gallery,
  .page-catering {
    padding: 32px 18px 0px 18px;
  }
  .page-menu.hero-inner {
    padding: 32px 18px 0px 18px;
  }
  .cta-band .cta-actions .btn-lg {
    width: 100%;
  }
  .hero-title {
    font-size: 28px;
  }
  .hero-hours {
    font-size: 13px;
    padding: 9px 15px;
  }
  .hero-ctas .btn-lg {
    padding: 14px 18px;
    font-size: 14px;
  }
  .cat-grid {
    gap: 12px;
  }
  .cat-card {
    padding: 22px 10px;
  }
  .cat-label {
    font-size: 14px;
  }
  .section-heading h2 {
    font-size: 30px;
  }
  .cta-band h2 {
    font-size: 32px;
  }
  .hero-ctas .btn-lg {
    flex: 1 1 100%;
  }
  .cats-head {
    gap: 0px;
  }
}
@media (max-width: 340px) {
  .logo-img {
    height: 36px;
  }
  .btn-sm {
    padding: 8px 10px;
    font-size: 11.5px;
  }
}