/* Valentino's Take-n-Bake Pizza & Deli — 2026 site rebuild
   Mobile-first, fast, no framework/build step required. */

:root {
  --red: #b3241c;
  --red-dark: #8f1c15;
  --gold: #e8a53a;
  --cream: #fff8ef;
  --charcoal: #241a15;
  --gray: #6b5f56;
  --line: #ecdfd0;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(36, 26, 21, 0.10);
  --maxw: 1120px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul { padding-left: 1.2em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 3rem 0; }
.section--tight { padding: 1.75rem 0; }
.section--alt { background: #fff; }
.center { text-align: center; }
.eyebrow { color: var(--red); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; margin-bottom: .4em; display: block; }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform .12s ease, background .12s ease;
  text-align: center;
}
.btn:hover { background: var(--red-dark); text-decoration: none; transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: var(--charcoal); }
.btn--gold:hover { background: #d3922c; }
.btn--outline { background: transparent; color: var(--red); border: 2px solid var(--red); padding: calc(.9rem - 2px) calc(1.6rem - 2px); }
.btn--outline:hover { background: var(--red); color: #fff; }
.btn--block { display: block; width: 100%; }
.btn--lg { font-size: 1.1rem; padding: 1.1rem 2rem; }

/* Top utility bar */
.topbar { background: var(--charcoal); color: #f4e9dc; font-size: .82rem; }
.topbar .container { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; padding-top: .5rem; padding-bottom: .5rem; }
.topbar a { color: #f4e9dc; font-weight: 600; }
.topbar strong { color: var(--gold); }

/* New-site announcement bar — sits above everything else so it's the
   first thing anyone sees, bold enough that a 20-year returning visitor
   won't mistake this for the wrong site. Dismissible; remembered via
   localStorage (see valDismissAnnounce/VAL_ANNOUNCE_VERSION in main.js). */
.announce-bar { background: var(--gold); color: var(--charcoal); }
.announce-bar-inner { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .65rem 1.25rem; position: relative; }
.announce-bar-inner p { margin: 0; font-size: .92rem; font-weight: 600; text-align: center; padding-right: 1.6rem; }
.announce-bar-inner a { color: var(--red-dark); text-decoration: underline; font-weight: 700; }
.announce-badge { background: var(--red-dark); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: .18rem .5rem; border-radius: 999px; margin-right: .5rem; }
.announce-close { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--charcoal); cursor: pointer; padding: .2rem .4rem; }
.announce-close:hover { opacity: .7; }
@media (max-width: 640px) { .announce-bar-inner p { font-size: .82rem; padding-right: 1.4rem; } }

/* Header / nav */
header.site { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: .7rem 0; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; color: var(--charcoal); }
.brand img { height: 46px; width: auto; }
.brand:hover { text-decoration: none; }

nav.main-nav { display: none; gap: 1.5rem; align-items: center; }
nav.main-nav a { color: var(--charcoal); font-weight: 600; font-size: .95rem; }
nav.main-nav a.active { color: var(--red); }
.nav-cta { display: flex; align-items: center; gap: .75rem; }
.nav-toggle { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--charcoal); }

@media (min-width: 900px) {
  nav.main-nav { display: flex; }
  .nav-toggle { display: none; }
}

.mobile-nav { display: none; flex-direction: column; border-top: 1px solid var(--line); padding: .5rem 0; }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: .6rem 1.25rem; color: var(--charcoal); font-weight: 600; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--red-dark);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.6s ease;
}
.hero-slide.active { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(143,28,21,.80) 0%, rgba(179,36,28,.68) 55%, rgba(179,36,28,.55) 100%);
}
.hero-grid { position: relative; z-index: 2; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero h1 { margin-bottom: .4em; }
.hero .tagline { font-size: 1.15rem; opacity: .95; margin-bottom: 1.4em; max-width: 46ch; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.6rem; font-size: .88rem; }

/* Rotating hero copy — the eyebrow/headline/tagline crossfade through a
   few different messages (see VAL_HERO_MESSAGES in main.js) so the
   homepage isn't saying the exact same sentence to everyone forever. */
.hero-copy { transition: opacity .5s ease; }
.hero-copy.fading { opacity: 0; }
.hero-badges span { display: flex; align-items: center; gap: .4rem; font-weight: 600; opacity: .95; }
.hero-card { background: #fff; color: var(--charcoal); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.hero-card h2, .hero-card h3 { margin-bottom: .8rem; }

/* Location picker (one-tap ordering) */
.loc-picker { display: grid; gap: .7rem; }
.loc-option { border: 2px solid var(--line); border-radius: 10px; padding: .85rem 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .5rem; background: #fffdf9; transition: border-color .12s ease; }
.loc-option:hover { border-color: var(--gold); }
.loc-option input { accent-color: var(--red); width: 18px; height: 18px; }

/* Per-store "closed today" states, driven by the Store Closures sheet
   tab (see main.js valApplyStoreClosures). */
.loc-option--closed { opacity: .55; cursor: not-allowed; background: #f3efe9; }
.loc-option--closed:hover { border-color: var(--line); }
.closed-badge { display: inline-block; background: var(--red-dark); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: .15rem .45rem; border-radius: 999px; margin-left: .5rem; vertical-align: middle; }
.loc-card--closed { opacity: .75; }
.closed-notice { background: #fdf0e4; color: var(--red-dark); font-weight: 700; font-size: .88rem; padding: .6rem .8rem; border-radius: 8px; margin-bottom: .6rem; text-align: center; }
.loc-option .loc-name { font-weight: 700; }
.loc-option .loc-addr { font-size: .82rem; color: var(--gray); display: block; }
.loc-label { display: flex; align-items: center; gap: .7rem; flex: 1; cursor: pointer; }

/* Grids */
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 560px) and (max-width: 699px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* This Month's Specials & Daily Specials hold a variable number of cards
   (1-3+, set by Jason via the sheet), unlike every other .grid--3 on the
   site which always renders exactly 3 fixed items. A strict 3-column CSS
   grid leaves empty column(s) on the right when there are fewer than 3,
   pushing the card(s) to the left instead of centering them. Overriding
   just these two grids to a wrapping flex row with a capped card width
   fixes that: 1 card centers alone, 2 sit centered as a pair, 3+ wrap
   into a centered row - all without any JS/count-based logic. */
#specialsGrid,
#dailySpecialsGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#specialsGrid > .card,
#dailySpecialsGrid > .card {
  flex: 1 1 300px;
  max-width: 340px;
}

.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.card img { height: 170px; width: 100%; object-fit: cover; }
.card-body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .35em; }
.card-body p { color: var(--gray); font-size: .93rem; flex: 1; }

.rewards-badge-link { display: block; background: #f7f1e6; text-align: center; padding: 1.2rem 1rem .8rem; transition: opacity .15s ease; }
.rewards-badge-link:hover { opacity: .85; }
.rewards-badge-link img.rewards-badge { height: 220px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; display: block; }

.category-card { text-align: center; padding: 1.3rem 1rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.category-card img { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; margin: 0 auto .8rem; border: 3px solid var(--gold); }
.category-card h3 { font-size: 1.02rem; margin-bottom: .3em; }
.category-card p { color: var(--gray); font-size: .87rem; margin-bottom: 0; }

/* Story / value section */
.value-row { display: grid; gap: 1.6rem; }
@media (min-width: 800px) { .value-row { grid-template-columns: repeat(4, 1fr); } }
.value-item { text-align: center; }
.value-item .num { font-size: 2rem; font-weight: 800; color: var(--red); display: block; }
.value-item .lbl { color: var(--gray); font-size: .9rem; }

/* Reviews */
.review-strip { display: flex; gap: 1rem; overflow-x: auto; padding: .3rem .2rem 1rem; scroll-snap-type: x mandatory; }
.review-card { min-width: 260px; scroll-snap-align: start; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.stars { color: var(--gold); letter-spacing: .1em; margin-bottom: .4em; }
.review-card p { font-size: .92rem; color: var(--charcoal); margin-bottom: .5em; }
.review-card .who { font-size: .82rem; color: var(--gray); font-weight: 700; }

/* Location cards (contact/order pages) */
.loc-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.loc-card h2 { margin-bottom: .1em; }
.loc-card .est { color: var(--gray); font-size: .85rem; margin-bottom: 1em; }
.loc-card dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .92rem; margin: 1rem 0; }
.loc-card dt { font-weight: 700; color: var(--gray); }
.loc-card dd { margin: 0; }
.loc-card .actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }
.loc-card .actions .btn { width: 100%; }
.flag { display: inline-block; background: #fdf0e4; color: var(--red-dark); font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; margin-top: .6rem; }

/* FAQ */
details.faq { background: #fff; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: .7rem; box-shadow: var(--shadow); }
details.faq summary { font-weight: 700; cursor: pointer; }
details.faq p { margin-top: .6em; color: var(--gray); font-size: .93rem; }

/* Guarantee / CTA banner */
.banner { background: var(--charcoal); color: #fff; border-radius: var(--radius); padding: 2rem; text-align: center; }
.banner h2 { color: #fff; }
.banner p { color: #d9cfc4; max-width: 60ch; margin-left: auto; margin-right: auto; }

/* Footer */
footer.site { background: var(--charcoal); color: #d9cfc4; padding: 2.6rem 0 1.6rem; margin-top: 2rem; font-size: .9rem; }
footer.site h4 { color: #fff; font-size: 1rem; margin-bottom: .7em; }
footer.site a { color: #d9cfc4; }
footer.site a:hover { color: #fff; }
.foot-grid { display: grid; gap: 1.8rem; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; } }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.2rem; text-align: center; font-size: .8rem; color: #a89b8e; }

/* misc */
.tag { display: inline-block; background: var(--gold); color: var(--charcoal); font-weight: 700; font-size: .72rem; padding: .2rem .55rem; border-radius: 6px; margin-right: .3rem; }
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.two-col { display: grid; gap: 2rem; }
@media (min-width: 800px) { .two-col { grid-template-columns: 1fr 1fr; align-items: center; } }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--red); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

/* Visible keyboard focus on every interactive element (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

/* Menu page: rotating highlight banner */
.menu-hero { position: relative; height: 340px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 800px) { .menu-hero { height: 440px; } }
.menu-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.menu-hero-slide.active { opacity: 1; }
.menu-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,14,10,.82) 0%, rgba(20,14,10,.35) 55%, rgba(20,14,10,.15) 100%); }
.menu-hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.8rem 1.9rem; color: #fff; z-index: 2; }
.menu-hero-content h2 { color: #fff; margin-bottom: .3em; }
.menu-hero-content p { color: #f0e6da; max-width: 46ch; margin-bottom: 1rem; }
.menu-hero-dots { position: absolute; top: 1.1rem; right: 1.2rem; z-index: 2; display: flex; gap: .35rem; }
.menu-hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .2s ease; }
.menu-hero-dots span.active { background: var(--gold); }

/* Horizontal-scrolling "highlight strip" instead of a static full grid -
   signals there's more to see (and to order) rather than an exhaustive list */
.menu-strip-wrap { position: relative; }
.menu-strip { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .3rem .2rem 1.1rem; margin: 0 -.2rem; }
.menu-strip .card { min-width: 220px; max-width: 220px; scroll-snap-align: start; flex: 0 0 auto; }
.menu-strip .card img { height: 150px; }
.swipe-hint { font-size: .8rem; color: var(--gray); display: flex; align-items: center; gap: .35rem; margin: -.4rem 0 .8rem; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .3rem; }
.section-head h2 { margin-bottom: 0; }
.section-head .mini-link { font-size: .85rem; font-weight: 700; white-space: nowrap; }

/* Floating order button - persistent nudge toward ordering while browsing the menu */
.float-order { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; box-shadow: 0 10px 26px rgba(179,36,28,.4); }

/* Catering page: size/price tier cards (Small/Medium/Large, foot-length, etc.) */
.tier-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }
.tier-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .tier-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tier-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.tier-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; text-align: center; }
.tier-card .tier-name { font-weight: 800; font-size: 1.05rem; }
.tier-card .tier-feeds { color: var(--gray); font-size: .82rem; margin-bottom: .5rem; }
.tier-card .tier-price { color: var(--red); font-size: 1.7rem; font-weight: 800; margin: .3rem 0 .7rem; }
.tier-card table { width: 100%; font-size: .82rem; color: var(--gray); border-collapse: collapse; }
.tier-card table td { padding: .15rem 0; }
.tier-card table td:last-child { text-align: right; font-weight: 600; color: var(--charcoal); }

/* Catering page: salad-type / add-on pricing tables */
.price-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: .92rem; }
.price-table th, .price-table td { padding: .6rem .9rem; text-align: left; border-bottom: 1px solid var(--line); }
.price-table th { background: var(--charcoal); color: #fff; font-weight: 600; font-size: .85rem; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: var(--cream); }

/* Catering "call or email" CTA cards */
.cater-contact-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cater-contact-grid { grid-template-columns: repeat(3, 1fr); } }
.cater-contact-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem; text-align: center; }
.cater-contact-card .loc-name { font-weight: 800; margin-bottom: .3em; }
.cater-contact-card a.phone { display: block; font-size: 1.3rem; font-weight: 800; color: var(--red); margin-bottom: .2em; }
.cater-contact-card a.phone:hover { text-decoration: none; color: var(--red-dark); }