/* ==========================================================================
   Wanda's Polish Kitchen — Main Stylesheet
   --------------------------------------------------------------------------
   Organized in sections:
   1. CSS Custom Properties (design tokens)
   2. Reset / Base
   3. Typography
   4. Layout helpers
   5. Header & Navigation
   6. Buttons & Forms
   7. Cards & Components
   8. Footer
   9. Page-specific sections
   10. Accessibility & Motion
   11. Responsive breakpoints
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. DESIGN TOKENS
   Brand colors come directly from the client brief. Naming them after
   their real-world references (Forest Spruce, Aged Walnut, etc.) instead
   of generic names like --color-1 makes the CSS self-documenting for
   anyone editing this later.
   ---------------------------------------------------------------------- */
:root {
  /* Brand colors
     NOTE ON THIS PALETTE: originally built around a forest-green
     ("Forest Spruce"), since updated to a Polish red/white identity per
     client request — red and white are the colors of the Polish flag,
     which fits this brand far better than green ever did. The CSS
     variable name --forest-spruce is kept as-is on purpose (rather than
     renamed to something like --polish-red) so this single edit doesn't
     require touching every one of the 80+ places that variable is
     referenced throughout this file. Think of it as a label that's
     stuck around past its literal meaning — the variable now means
     "primary brand color," whatever that color currently is. */
  --forest-spruce: #A82C2C;
  --forest-spruce-dark: #7A1F1F;
  --aged-walnut: #6E4F37;
  --flax-linen: #D8D0C2;
  --flax-linen-light: #EDE8DE;
  --stoneware-taupe: #A49482;
  --wild-blueberry: #2C4A6E;
  --honey-wheat: #C8A66A;
  --honey-wheat-dark: #B08F52;

  /* Functional aliases — change meaning here, not throughout the CSS */
  --color-bg: #FBF9F5;
  --color-bg-alt: var(--flax-linen-light);
  --color-text: #2E2A24;
  --color-text-muted: #6B6157;
  --color-heading: var(--forest-spruce-dark);
  --color-accent: var(--honey-wheat);
  --color-accent-dark: var(--honey-wheat-dark);
  --color-link: var(--wild-blueberry);
  --color-border: var(--stoneware-taupe);
  --color-header-bg: rgba(251, 249, 245, 0.92);
  --color-header-bg-scrolled: rgba(168, 44, 44, 0.97);

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale (rem-based for accessibility — respects user font-size settings) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7rem;

  /* Layout */
  --max-width: 1180px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --header-height: 84px;
  --header-height-scrolled: 64px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(46, 42, 36, 0.08);
  --shadow-md: 0 6px 24px rgba(46, 42, 36, 0.12);
  --shadow-lg: 0 12px 40px rgba(46, 42, 36, 0.18);

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Subtle linen texture via layered gradients — no image request needed,
     keeps page weight light while nodding to the "linen texture" brief note */
  background-image:
    repeating-linear-gradient(0deg, rgba(164, 148, 130, 0.025) 0px, transparent 1px, transparent 2px, rgba(164, 148, 130, 0.025) 3px),
    repeating-linear-gradient(90deg, rgba(164, 148, 130, 0.025) 0px, transparent 1px, transparent 2px, rgba(164, 148, 130, 0.025) 3px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--forest-spruce-dark);
}

ul,
ol {
  padding-left: 1.25rem;
}

button {
  font-family: inherit;
}

main {
  flex: 1 0 auto;
}

/* ----------------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.2;
  font-weight: 600;
}

h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: var(--space-xs);
}

p {
  margin-bottom: var(--space-sm);
}

p:last-child {
  margin-bottom: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aged-walnut);
  margin-bottom: var(--space-xs);
}

.section-intro {
  max-width: 640px;
  color: var(--color-text-muted);
  font-size: 1.08rem;
}

.text-center {
  text-align: center;
}

/* ----------------------------------------------------------------------
   4. LAYOUT HELPERS
   ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-xl);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--spruce {
  background-color: var(--forest-spruce);
  color: #F2EFE8;
}

.section--spruce h2,
.section--spruce h3 {
  color: #FFFFFF;
}

.section-head {
  margin-bottom: var(--space-lg);
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.flex {
  display: flex;
  gap: var(--space-sm);
}

.flex--center {
  align-items: center;
}

.flex--between {
  justify-content: space-between;
}

.flex--wrap {
  flex-wrap: wrap;
}

/* Generic photo slideshow — see js/script.js for the cycling logic.
   Stacks all images on top of each other via absolute positioning and
   crossfades between them by toggling the .is-active class. */
.photo-slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.photo-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.photo-slideshow img.is-active {
  opacity: 1;
}

/* ----------------------------------------------------------------------
   SIGNATURE ELEMENT: Folk-floral divider
   A simple wycinanki-inspired (Polish paper-cut) line motif used as a
   section break. Drawn entirely in CSS/SVG background — no external
   image dependency, and deliberately restrained per the brief's request
   to "avoid overusing decorative elements."
   ---------------------------------------------------------------------- */
.folk-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-block: var(--space-lg);
  color: var(--honey-wheat-dark);
}

.folk-divider::before,
.folk-divider::after {
  content: "";
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, transparent, var(--stoneware-taupe));
}

.folk-divider::after {
  background: linear-gradient(90deg, var(--stoneware-taupe), transparent);
}

.folk-divider svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------
   5. HEADER & NAVIGATION
   ------------------------------------------------------------------
   Sticky header that compresses on scroll (the moving-header effect
   from polishmom.com that the brief specifically asked for), but the
   header itself is solid red/white at all times — it no longer starts
   cream/translucent and switches to red only after scrolling. That
   color-flash was the root cause of pages appearing to "open cream and
   turn red on scroll": the page banner underneath was red the whole
   time, but the translucent cream header sitting on top of it on
   initial load made the very top of the page look cream until scroll
   triggered the header's solid-red state. Removing that scroll-
   dependent color swap fixes the issue site-wide in one place, since
   every page shares this same header.
   ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background-color: var(--forest-spruce);
  border-bottom: 1px solid transparent;
  transition: height var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  height: var(--header-height-scrolled);
  background-color: var(--forest-spruce);
  box-shadow: var(--shadow-md);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-logo-flag {
  width: 40px;
  height: auto;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.site-logo-text {
  display: flex;
  flex-direction: column;
}

.site-logo span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey-wheat);
}

.main-nav ul {
  display: flex;
  list-style: none;
  gap: var(--space-md);
  padding: 0;
  align-items: center;
}

.main-nav a {
  font-size: 0.95rem;
  font-weight: 600;
  color: #F2EFE8;
  text-decoration: none;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--honey-wheat);
  border-bottom-color: var(--honey-wheat);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.nav-toggle svg {
  width: 26px;
  height: 26px;
  color: #FFFFFF;
}

.site-flag-right {
  width: 40px;
  height: auto;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Skip link for keyboard / screen-reader users */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--forest-spruce);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
}

/* Breadcrumbs (secondary pages) */
.breadcrumbs {
  padding-block: var(--space-sm);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid rgba(164, 148, 130, 0.3);
}

.breadcrumbs ol {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--aged-walnut);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: var(--stoneware-taupe);
}

/* ----------------------------------------------------------------------
   6. BUTTONS & FORMS
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  line-height: 1.2;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--honey-wheat);
  color: var(--forest-spruce-dark);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--honey-wheat-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.btn-outline {
  background-color: transparent;
  border-color: var(--forest-spruce);
  color: var(--forest-spruce-dark);
}

.btn-outline:hover {
  background-color: var(--forest-spruce);
  color: #fff;
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Forms */
.form-group {
  margin-bottom: var(--space-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
}

.label-hint {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background-color: #fff;
  border: 1.5px solid var(--stoneware-taupe);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--wild-blueberry);
  box-shadow: 0 0 0 3px rgba(91, 107, 138, 0.18);
}

.required-mark {
  color: #A14A3D;
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

/* Form validation error states — applied by js/script.js when a field
   fails validation (invalid email, invalid phone, past date, etc.) */
input.has-error,
select.has-error,
textarea.has-error {
  border-color: #A14A3D;
  box-shadow: 0 0 0 3px rgba(161, 74, 61, 0.15);
}

.field-error-message {
  color: #A14A3D;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 0.35rem;
  margin-bottom: 0;
}

/* Honeypot field — visually and functionally hidden from real users,
   but left in the DOM and tab order trap for simple bots that fill
   every field. See js/script.js for handling logic. */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------------------------------------------------------
   7. CARDS & COMPONENTS
   ---------------------------------------------------------------------- */
.card {
  background-color: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(164, 148, 130, 0.25);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--flax-linen);
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.card:hover .card-img-wrap img {
  transform: scale(1.05);
}

.card-body {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-size: 1.2rem;
  margin-bottom: 0.15rem;
}

.card-translation {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 0.6rem;
}

.card-desc {
  font-size: 0.94rem;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.card-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.card-footer {
  margin-top: auto;
  padding-top: var(--space-xs);
}

/* Badges (dietary / allergen indicators) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-veg {
  background-color: #E4ECE3;
  color: var(--forest-spruce-dark);
}

.badge-dairy {
  background-color: #EAE3F1;
  color: #5B4A7A;
}

.badge-gluten {
  background-color: #F3E6D3;
  color: var(--aged-walnut);
}

.badge-meat {
  background-color: #F1DEDA;
  color: #8C4434;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-xs);
}

/* Pull quote / testimonial style block */
.pull-quote {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--forest-spruce-dark);
  border-left: 3px solid var(--honey-wheat);
  padding-left: var(--space-md);
  margin-block: var(--space-md);
}

/* FAQ accordion */
.accordion-item {
  border-bottom: 1px solid rgba(164, 148, 130, 0.35);
}

.accordion-trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-sm) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-heading);
  cursor: pointer;
}

.accordion-trigger:hover {
  color: var(--wild-blueberry);
}

.accordion-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  transition: transform var(--transition-base);
  color: var(--honey-wheat-dark);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}

.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}

.accordion-panel-inner {
  padding-bottom: var(--space-sm);
  color: var(--color-text-muted);
}

/* Timeline (Polish Food History page) */
.timeline {
  position: relative;
  padding-left: var(--space-lg);
  border-left: 3px solid var(--flax-linen);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-lg);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-lg) - 9px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--honey-wheat);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--forest-spruce);
}

.timeline-era {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aged-walnut);
}

/* Category tiles (Dish Types page) */
.category-tile {
  background-color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid rgba(164, 148, 130, 0.25);
  box-shadow: var(--shadow-sm);
}

.category-tile h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.category-tile-icon {
  width: 32px;
  height: 32px;
  color: var(--forest-spruce);
  flex-shrink: 0;
}

.dish-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-xs);
}

.dish-tag {
  background-color: var(--flax-linen-light);
  border: 1px solid var(--stoneware-taupe);
  color: var(--aged-walnut);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.dish-tag:hover {
  background-color: var(--honey-wheat);
  color: var(--forest-spruce-dark);
}

/* ----------------------------------------------------------------------
   HERO (Home page)
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 43.5vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1200ms ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(44, 65, 54, 0.55) 0%, rgba(44, 65, 54, 0.78) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.hero-content .eyebrow {
  color: var(--honey-wheat);
}

.hero h1 {
  color: #fff;
  margin-bottom: var(--space-sm);
}

.hero p.lede {
  font-size: 1.15rem;
  color: #F2EFE8;
  margin-bottom: var(--space-md);
  max-width: 560px;
}

.hero-ctas {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero-dots {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.hero-dot.is-active {
  background-color: var(--honey-wheat);
  transform: scale(1.25);
}

/* Page header banner (non-home pages) */
.page-banner {
  background-color: var(--forest-spruce);
  color: #fff;
  padding-block: var(--space-lg);
  background-image: linear-gradient(135deg, var(--forest-spruce) 0%, var(--forest-spruce-dark) 100%);
}

.page-banner h1 {
  color: #fff;
  margin-bottom: var(--space-xs);
}

.page-banner p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  font-size: 1.05rem;
}

/* ----------------------------------------------------------------------
   ORDER SUMMARY / LIGHTBOX
   ---------------------------------------------------------------------- */
.order-summary-box {
  background-color: var(--flax-linen-light);
  border: 1.5px solid var(--stoneware-taupe);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: sticky;
  top: calc(var(--header-height) + var(--space-sm));
}

.order-summary-box h3 {
  margin-bottom: var(--space-sm);
}

.order-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  padding-block: 0.4rem;
  border-bottom: 1px dashed rgba(164, 148, 130, 0.5);
}

.order-line:last-of-type {
  border-bottom: none;
}

.cart-remove-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
  transition: color var(--transition-fast);
}

.cart-remove-btn:hover {
  color: #A14A3D;
}

.order-total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 2px solid var(--forest-spruce);
  color: var(--forest-spruce-dark);
}

.order-empty-msg {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(20, 18, 15, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: var(--space-md);
}

.lightbox-overlay.is-open {
  display: flex;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

.lightbox-close svg {
  width: 100%;
  height: 100%;
}

/* Confirmation message panel */
.confirmation-panel {
  background-color: #E4ECE3;
  border: 1.5px solid var(--forest-spruce);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
  display: none;
}

.confirmation-panel.is-visible {
  display: block;
}

.confirmation-panel h3 {
  color: var(--forest-spruce-dark);
}

/* ----------------------------------------------------------------------
   8. FOOTER
   ---------------------------------------------------------------------- */
.site-footer {
  background-color: var(--forest-spruce-dark);
  color: #DCE3D9;
  padding-block: var(--space-xl) var(--space-lg);
  margin-top: var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.footer-tagline {
  color: rgba(220, 227, 217, 0.75);
  font-size: 0.92rem;
}

.footer-heading {
  color: var(--honey-wheat);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: rgba(220, 227, 217, 0.85);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-links a:hover {
  color: var(--honey-wheat);
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(220, 227, 217, 0.18);
  padding-top: var(--space-md);
  font-size: 0.82rem;
  color: rgba(220, 227, 217, 0.65);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
}

.footer-bottom p {
  max-width: 640px;
}

/* ----------------------------------------------------------------------
   9. PAGE-SPECIFIC: About page
   ---------------------------------------------------------------------- */
.about-hero {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-lg);
  align-items: center;
}

.about-portrait-wrap {
  position: relative;
}

.about-portrait-wrap img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.heritage-ribbon {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background-color: var(--forest-spruce);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-md);
}

.value-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.value-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.value-list svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--honey-wheat-dark);
  margin-top: 2px;
}

/* ----------------------------------------------------------------------
   9b. SITE-WIDE TEXT COLOR SYSTEM
   ------------------------------------------------------------------
   The site's final color rule: page banners (the colored strip at the
   top of every page) stay solid red at all times — they used to appear
   cream on first load and only turn red after scrolling, because the
   semi-transparent header sitting on top of them hadn't fully loaded
   its red background yet. That's fixed at the header level above; this
   block additionally guarantees every .page-banner is unconditionally
   red, with no scroll-dependent or page-specific exceptions.

   Beyond the banners, all heading and body text across the entire site
   uses the Navy-inspired blue (--wild-blueberry) instead of red, and
   all buttons use blue as their base color too. Red is reserved
   specifically for the names of dishes/food items (e.g. "Pierogi",
   "Bigos") on menu cards, so those still stand out as proper nouns
   against the blue body copy around them. This was originally a
   Menu & Pricing-only treatment; it's now the standard for the whole
   site, so these rules apply to `body` directly rather than being
   scoped to a single page.
   ---------------------------------------------------------------------- */
.page-banner {
  background-color: var(--forest-spruce) !important;
  background-image: linear-gradient(135deg, var(--forest-spruce) 0%, var(--forest-spruce-dark) 100%) !important;
  color: #FFFFFF;
}

.page-banner h1,
.page-banner p,
.page-banner .eyebrow {
  color: #FFFFFF !important;
}

.page-banner a {
  color: #FFFFFF;
  text-decoration-color: var(--honey-wheat);
}

body {
  color: var(--wild-blueberry);
}

h2,
h3,
h4,
.section-intro,
.card-desc,
.card-meta,
p {
  color: var(--wild-blueberry);
}

/* Card titles (dish names on Menu & Pricing cards, homepage featured
   cards, etc.) use the same blue as the rest of the site's text. The
   one deliberate exception is the Recipes & Cooking Tips page, where
   each recipe's dish-name heading stays red so it stands out as a
   distinct "title" against the blue instructional text below it — see
   .recipe-dish-name further down, used only on recipes.html. */
.card-title {
  color: var(--wild-blueberry);
}

.recipe-dish-name {
  color: var(--forest-spruce) !important;
}

/* Buttons: blue is now the standard fill color, used everywhere
   (previously this was only true on the Menu & Pricing page) */
.btn-primary {
  background-color: var(--wild-blueberry);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: #1D3551;
  color: #FFFFFF;
}

.btn-outline {
  border-color: var(--wild-blueberry);
  color: var(--wild-blueberry);
}

.btn-outline:hover {
  background-color: var(--wild-blueberry);
  color: #FFFFFF;
}

/* .btn-secondary is used on red/dark backgrounds (page banners, the
   bottom CTA band) so it keeps a white outline rather than blue, which
   would have poor contrast against red */
.btn-secondary {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* The bottom CTA band (.section--spruce) stays red with white text —
   matching the page banner at the top, per "white banners top and
   bottom" framed against the page's blue/white-on-cream body. Its
   button stays --btn-secondary style (white outline) for contrast. */
.section--spruce h2,
.section--spruce h3,
.section--spruce p {
  color: #FFFFFF;
}

/* ----------------------------------------------------------------------
   9b-ii. PAGE-SPECIFIC: Menu filters
   ---------------------------------------------------------------------- */
.menu-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-lg);
}

.filter-chip {
  background-color: #fff;
  border: 1.5px solid var(--wild-blueberry);
  color: var(--wild-blueberry);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-chip:hover {
  border-color: var(--wild-blueberry);
}

.filter-chip.is-active {
  background-color: var(--wild-blueberry);
  border-color: var(--wild-blueberry);
  color: #fff;
}

.menu-note {
  background-color: #F3E6D3;
  border-left: 4px solid var(--honey-wheat-dark);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--aged-walnut);
  margin-bottom: var(--space-lg);
}

.prep-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--wild-blueberry);
}

.prep-time svg {
  width: 15px;
  height: 15px;
}

.menu-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px dashed rgba(164, 148, 130, 0.4);
}

.menu-card-links a {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--wild-blueberry);
  text-decoration: none;
  background-color: #EDF2F7;
  border: 1px solid var(--wild-blueberry);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.menu-card-links a:hover,
.menu-card-links a:focus-visible {
  background-color: var(--wild-blueberry);
  border-color: var(--wild-blueberry);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------------
   9c. PAGE-SPECIFIC: Ordering steps
   ---------------------------------------------------------------------- */
.steps-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  counter-reset: step-counter;
}

.step-card {
  text-align: center;
  padding: var(--space-md) var(--space-sm);
}

.step-number {
  counter-increment: step-counter;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--wild-blueberry);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-xs);
}

.step-number::before {
  content: counter(step-counter);
}

.lead-time-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-md);
}

.lead-time-table th,
.lead-time-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(164, 148, 130, 0.3);
}

.lead-time-table th {
  font-family: var(--font-display);
  color: var(--forest-spruce-dark);
  font-size: 0.95rem;
}

/* ----------------------------------------------------------------------
   10. ACCESSIBILITY & MOTION
   ---------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--wild-blueberry);
  outline-offset: 2px;
}

.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;
}

@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;
  }
}

/* ----------------------------------------------------------------------
   11. RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-hero { grid-template-columns: 1fr; }
  .steps-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root {
    --header-height: 72px;
    --header-height-scrolled: 60px;
  }

  .main-nav {
    position: fixed;
    top: var(--header-height-scrolled);
    left: 0;
    right: 0;
    background-color: var(--forest-spruce-dark);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    z-index: 99;
  }

  .main-nav.is-open {
    max-height: 70vh;
    overflow-y: auto;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-sm) var(--space-md);
    gap: 0;
  }

  .main-nav a {
    color: #F2EFE8;
    display: block;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-toggle {
    display: block;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .steps-list {
    grid-template-columns: 1fr;
  }

  .order-summary-box {
    position: static;
  }

  .hero {
    min-height: 39vh;
    text-align: left;
  }

  .section {
    padding-block: var(--space-lg);
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.9rem;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn {
    width: 100%;
  }
}

/* Print styles — useful for customers printing order confirmations */
@media print {
  .site-header,
  .site-footer,
  .hero-dots,
  .nav-toggle,
  .lightbox-overlay {
    display: none !important;
  }
}