/* ============================================================
   iCHICK — Additional page styles (multi-page site)
   Loaded after style.css on every page.
   ============================================================ */

/* ---------- Secondary page hero (About/Menu/Locations/Contact/Media) ---------- */
.page-hero{
  position: relative;
  padding: 190px 0 90px;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(55% 80% at 85% 0%, rgba(227,167,43,.16), transparent 60%),
              radial-gradient(45% 60% at 0% 100%, rgba(200,57,30,.18), transparent 60%);
}
.page-hero .container{ position:relative; }
.page-hero h1{ font-size: clamp(34px,5vw,58px); max-width: 720px; line-height:1.06; }
.page-hero p{ margin-top:20px; max-width: 540px; color: rgba(255,255,255,.72); font-size:16.5px; }
.page-hero .crumb{ font-family: var(--font-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--turmeric); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.page-hero .crumb a{ color: rgba(255,255,255,.55); }
.page-hero .crumb a:hover{ color: var(--white); }

/* ============================================================
   HOME — Full-width image slider
   Sits clearly below the (always-solid) header rather than behind
   it, so the header never shows page content bleeding through it.
   No text/copy overlay, no colored background — image only.
   ============================================================ */
.kathi-hero-slider{
  margin-top: var(--header-h, 100px); /* set by script.js to the real measured header height */
}

.kathi-slider{
  position: relative;
  width: 100%;
  /* dvh (dynamic viewport height) tracks the *actual* visible area on
     mobile as the browser's address bar shows/hides, instead of vh —
     which is pinned to the largest possible viewport and leaves the
     slider oversized/cut off as the address bar animates. Falls back
     to vh on browsers that don't support dvh yet. */
  height: 78vh;
  height: 78dvh;
  min-height: 420px;
  overflow: hidden;
  touch-action: pan-y; /* allow vertical page scroll, we handle horizontal swipe ourselves */
}
.kathi-slider-track{ position: relative; width:100%; height:100%; }
.kathi-slide{
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease;
}
.kathi-slide.is-active{ opacity: 1; visibility: visible; }
.kathi-slide img{ width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag: none; user-select: none; }
@media (max-width: 780px){
  /* object-fit:cover crops aggressively on a narrow, tall mobile
     screen against wide/landscape photos — switching to contain on
     mobile shows the whole image instead of cropping the top/bottom
     off, with a dark backdrop filling the letterboxed space instead
     of leaving it blank. */
  .kathi-slide{ background: var(--ink); }
  .kathi-slide img{ object-fit: fill; }
}
.kathi-slider-dots{
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: center; gap: 10px; z-index: 2;
}
.kathi-slider-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.5); border: none; padding: 0; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: background .3s ease, transform .3s ease;
  /* Visual dot stays small, but the tappable area is much larger —
     a 9px dot is far below the ~44px minimum comfortable touch
     target, which is the main reason this felt unresponsive on
     mobile even though it visually resized correctly. */
  position: relative;
}
.kathi-slider-dot::before{
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; transform: translate(-50%, -50%);
}
.kathi-slider-dot.is-active{ background: var(--white); transform: scale(1.3); }
@media (max-width: 780px){
  /* Height is set inline by script.js (matchHeightToActiveImage) to
     exactly match the active image's own aspect ratio, so the whole
     photo shows with zero cropping and zero leftover blank space.
     This is a floor only, in case JS hasn't run yet on first paint. */
  .kathi-slider{ height: 52vh; height: 52dvh; min-height: 260px; }
  .kathi-slider-dot{ width: 8px; height: 8px; }
}
@keyframes steam{
  0%{ opacity:0; transform: translateY(0) scaleY(1); }
  30%{ opacity:.55; }
  100%{ opacity:0; transform: translateY(-26px) scaleY(1.3); }
}

/* ---------- Roll categories ---------- */
.roll-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
@media (max-width: 900px){ .roll-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .roll-grid{ grid-template-columns:1fr; } }
.roll-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 34px 28px; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.roll-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 44px -26px rgba(34,29,24,.3); }
.roll-card .r-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; display:inline-block; }
.roll-card.nonveg .r-tag{ background: rgba(200,57,30,.1); color: var(--chili); }
.roll-card.veg .r-tag{ background: rgba(75,107,79,.12); color: var(--herb); }
.roll-card.special .r-tag{ background: rgba(227,167,43,.16); color: #a87413; }
.roll-card h4{ font-size:21px; margin-top:16px; }
.roll-card p{ font-size:14.5px; color: var(--ink-soft); margin-top:10px; }
.roll-card a.link{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:13.5px; font-weight:600; color: var(--chili); }

/* ---------- Why iChick feature strip ---------- */
.feature-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
@media (max-width: 900px){ .feature-strip{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .feature-strip{ grid-template-columns:1fr; } }
.feature-item{ text-align:left; }
.feature-item .f-icon{ width:46px; height:46px; }
.feature-item .f-icon svg{ width:100%; height:100%; stroke: var(--chili); }
.feature-item h4{ font-size:17px; margin-top:18px; }
.feature-item p{ font-size:13.8px; color: var(--ink-soft); margin-top:8px; }

/* ---------- Delivery / catering band ---------- */
.perk-band{ background: var(--herb); color: var(--white); }
.perk-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
@media (max-width: 860px){ .perk-grid{ grid-template-columns:1fr; } }
.perk-item{ display:flex; gap:18px; align-items:flex-start; }
.perk-item .p-icon{ width:44px; height:44px; flex:none; border-radius:12px; background: rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.perk-item .p-icon svg{ width:22px; height:22px; stroke: var(--white); }
.perk-item h4{ font-size:17px; color:var(--white); }
.perk-item p{ font-size:14px; color: rgba(255,255,255,.82); margin-top:6px; }

/* ---------- Media teaser strip (home) ---------- */
.media-teaser{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 760px){ .media-teaser{ grid-template-columns: repeat(2,1fr); } }
.media-teaser a{ display:block; border-radius: var(--radius-sm); overflow:hidden; aspect-ratio: 4/3; }
.media-teaser img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.media-teaser a:hover img{ transform: scale(1.07); }

/* ============================================================
   MENU PAGE
   ============================================================ */
.menu-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 46px; }
.menu-tab{
  padding: 10px 20px; border-radius:999px; border:1px solid var(--line); font-size:13.5px; font-weight:600;
  background: var(--white); color: var(--ink-soft); cursor:pointer; transition: all .3s ease;
}
.menu-tab.active, .menu-tab:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }

.menu-category{ margin-bottom: 64px; }
.menu-category:last-child{ margin-bottom: 0; }
.menu-cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.menu-cat-head h3{ font-size: 24px; }
.menu-cat-head span{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

/* ------------------------------------------------------------
   Menu cards — "ticket stub" style: photo with a scalloped/perforated
   bottom edge (like a torn ticket), centered bold title, price/desc
   underneath, an expandable "View Details" toggle, and a solid pill
   CTA button. Matches the reference card design.
   ------------------------------------------------------------ */
.menu-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 28px;
}
.menu-card{
  display: flex; flex-direction: column;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(34,29,24,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.menu-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px rgba(34,29,24,.12); }

.menu-card-media{
  position: relative;
  aspect-ratio: 4/3.4;
  /*background: var(--chili);*/
  /* Scalloped "torn ticket" bottom edge, drawn with a repeating
     radial-gradient mask — small bites cut out of the bottom 18px. */
  -webkit-mask-image:
    radial-gradient(circle at 10px 10px, transparent 10px, #000 10.5px),
    linear-gradient(#000, #000);
  -webkit-mask-position: bottom, top;
  -webkit-mask-size: 20px 20px, 100% calc(100% - 12px);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-image:
    radial-gradient(circle at 10px 10px, transparent 10px, #000 10.5px),
    linear-gradient(#000, #000);
  mask-position: bottom, top;
  mask-size: 20px 20px, 100% calc(100% - 12px);
  mask-repeat: repeat-x, no-repeat;
}
.menu-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.menu-card-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; /*background: var(--chili);*/ }
.menu-card-placeholder svg{ width: 34%; height:34%; stroke: rgba(255,255,255,.5); }

.menu-card-veg-dot{
  position: absolute; top: 12px; left: 12px;
  width: 16px; height: 16px; border-radius: 3px;
  background: var(--white); border: 2px solid var(--herb);
  display:flex; align-items:center; justify-content:center;
  z-index: 2;
}
.menu-card-veg-dot::after{ content:""; width:7px; height:7px; border-radius:50%; background: var(--herb); }
.menu-card.nonveg .menu-card-veg-dot{ border-color: var(--chili); }
.menu-card.nonveg .menu-card-veg-dot::after{ background: var(--chili); }
.menu-card-signature{
  position: absolute; top: 14px; right: -32px;
  transform: rotate(45deg);
  font-family: var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--white); background: var(--ink); padding: 4px 34px;
  z-index: 2;
}

.menu-card-body{ padding: 26px 22px 28px; flex: 1; display:flex; flex-direction:column; text-align:center; }
.menu-card-body h5{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:17px; line-height:1.3; letter-spacing:.01em;
}
.menu-card-price{ font-size:14px; color: var(--ink-soft); margin-top:10px; }
.menu-card-desc{
  font-size:13px; color: var(--ink-soft); line-height:1.5; margin-top:10px;
}
.menu-card-cta{
  display:flex; align-items:center; justify-content:center;
  margin-top: 22px; padding: 15px 20px; border-radius:999px;
  background: var(--ink); color: var(--white);
  font-size:14.5px; font-weight:600;
  transition: background .25s ease, transform .25s ease;
}
.menu-card-cta:hover{ background: #000; transform: translateY(-2px); }

.menu-note{
  margin-top: 50px; padding: 22px 26px; background: var(--bg-alt); border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--ink-soft); display:flex; gap:12px;
}

/* ============================================================
   LOCATIONS PAGE
   ============================================================ */
.hq-card{
  display:grid; grid-template-columns: 1fr 1fr; gap:0; background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--line); overflow:hidden; margin-bottom: 70px;
}
@media (max-width: 860px){ .hq-card{ grid-template-columns:1fr; } }
.hq-map{ min-height: 320px; background: var(--bg-alt); }
.hq-map iframe{ width:100%; height:100%; border:0; min-height:320px; display:block; }
.hq-info{ padding: 44px 40px; display:flex; flex-direction:column; justify-content:center; }
.hq-info .tag{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--chili); }
.hq-info h3{ font-size: 26px; margin-top:14px; }
.hq-info address{ font-style:normal; margin-top:18px; font-size:15px; color: var(--ink-soft); line-height:1.7; }
.hq-info .hq-actions{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }

.state-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 900px){ .state-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .state-grid{ grid-template-columns: 1fr; } }
.state-card{
  padding: 26px 24px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--line);
}
.state-card h4{ font-size:17px; }
.state-card .status{ display:inline-block; margin-top:12px; font-family: var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.state-card .status.live{ background: rgba(75,107,79,.14); color: var(--herb-dark); }
.state-card .status.soon{ background: rgba(227,167,43,.18); color:#a87413; }
.state-card p{ font-size:13px; color: var(--ink-soft); margin-top:10px; }

/* ============================================================
   MEDIA LIBRARY
   ============================================================ */
.media-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px){ .media-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .media-grid{ grid-template-columns: 1fr; } }
.media-item{ position:relative; border-radius: var(--radius-sm); overflow:hidden; cursor:pointer; aspect-ratio: 4/3; }
.media-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.media-item:hover img{ transform: scale(1.08); }
.media-item .m-cap{
  position:absolute; left:0; right:0; bottom:0; padding: 10px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.6), transparent);
  color: var(--white); font-size:12px; opacity:0; transition: opacity .3s ease;
}
.media-item:hover .m-cap{ opacity:1; }

.lightbox-overlay{
  position:fixed; inset:0; background: rgba(17,13,9,.92); z-index:300;
  display:none; align-items:center; justify-content:center; padding: 40px;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{ max-width: 90vw; max-height: 85vh; border-radius: 8px; }
.lightbox-close{ position:absolute; top:26px; right:32px; background:none; border:none; color: var(--white); font-size:32px; cursor:pointer; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 60px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.contact-cards{ display:flex; flex-direction:column; gap: 22px; }
.contact-card{ display:flex; gap:16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-card .c-icon{ width:22px; height:22px; flex:none; margin-top:3px; }
.contact-card .c-icon svg{ width:100%; height:100%; stroke: var(--chili); }
.contact-card h5{ font-size:15px; font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); }
.contact-card p, .contact-card a{ font-size:15.5px; margin-top:6px; display:block; }
.contact-card a:hover{ color: var(--chili); }
.social-row{ display:flex; gap:14px; margin-top:10px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition: all .3s ease;
}
.social-row a:hover{ background: var(--ink); border-color: var(--ink); color: var(--white); }
.social-row svg{ width:16px; height:16px; }

.form-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom: 20px; }
.field label{ display:block; font-size:12.5px; font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--bg); font-family: var(--font-body); font-size:14.5px; color: var(--ink);
  transition: border-color .3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--chili); outline:none; }
.field textarea{ resize: vertical; min-height: 110px; }
.form-status{ margin-top:18px; font-size:14px; color: var(--herb-dark); opacity:0; transition: opacity .3s ease; }
.form-status.show{ opacity:1; }

/* ---------- Breadcrumb-free simple footer CTA reuse across pages ---------- */
.simple-cta{ text-align:center; }
.simple-cta h2{ font-size: clamp(26px,3.6vw,38px); }
.simple-cta p{ margin-top:14px; color: var(--ink-soft); }
.simple-cta .hero-actions{ justify-content:center; margin-top:30px; }

/* ============================================================
   BLOCK-EDITOR CONTENT DEFAULTS
   Matches the ACTUAL page content in the database: every section is a
   flat run of siblings directly in .entry-content —
     <p class="eyebrow"> + <h2> + <p>… + the iChick Dynamic Section's
   raw output (which itself is sometimes bare markup like .timeline /
   .journey-track / .donut-wrap, sometimes its own .container).
   There is no wrapping <section class="section">, .container or grid
   div around any of this in the real content, so all alignment,
   vertical rhythm, and section backgrounds below are written to target
   that flat structure directly rather than assuming markup that isn't
   there.
   ============================================================ */
.entry-content{
  background: var(--bg);
}

/* Left edge lines up with the site's centered 1180px container instead
   of hugging the true left edge of the viewport (which is what a flat
   "padding:0 28px" does, and why plain text looked out of alignment
   with the header/hero/dynamic sections above and below it). */
.entry-content > h2,
.entry-content > h3,
.entry-content > p,
.entry-content > .wp-block-buttons{
  padding-left: max(28px, calc((100% - var(--container)) / 2 + 28px));
  padding-right: 28px;
}
.entry-content > h2,
.entry-content > h3{
  font-family: var(--font-display);
  max-width: 640px;
  margin: 110px 0 0;
  line-height: 1.15;
  box-sizing: content-box;
}
.entry-content > h2{ font-size: clamp(28px,3.6vw,40px); }
.entry-content > h3{ font-size: clamp(22px,2.8vw,28px); }
.entry-content > p{
  max-width: 640px;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 16.5px;
  box-sizing: content-box;
}
.entry-content > p:last-of-type{ margin-bottom: 40px; }
.entry-content > .wp-block-buttons{ max-width: 640px; margin: 30px 0 40px; justify-content:flex-start; box-sizing: content-box; }
.entry-content > .wp-block-buttons .wp-block-button__link{
  display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px;
  font-family: var(--font-body); font-size:14.5px; font-weight:600; background: var(--chili); color: var(--white);
}
.entry-content > .wp-block-buttons .wp-block-button__link:hover{ background: var(--chili-dark); }

/* Eyebrow starts a new "section" — carries the 110px section rhythm
   itself, so the heading right after it should sit close (its own
   margin-bottom:18px already does most of the work), not stack another
   110px on top. */
.entry-content > p.eyebrow{ margin-top: 110px; margin-bottom: 0; }
.entry-content > p.eyebrow + h2{ margin-top: 18px; }
@media (max-width: 780px){
  .entry-content > h2, .entry-content > h3, .entry-content > p.eyebrow{ margin-top: 72px; }
  .entry-content > p.eyebrow + h2{ margin-top: 18px; }
}

/* Dynamic-section output that comes back bare (no .container of its
   own) — center and constrain it to the same 1180px column as
   everything else, with a comfortable gap under its heading. */
.entry-content > .timeline,
.entry-content > .journey-track,
.entry-content > .donut-wrap{
  max-width: var(--container);
  margin: 40px auto 0;
  padding: 0 28px;
  box-sizing: border-box;
}
.entry-content > .timeline:last-child,
.entry-content > .journey-track:last-child,
.entry-content > .donut-wrap:last-child{ margin-bottom: 40px; }

/* Dynamic-section output that already wraps itself in .container
   (mission/values/segments/gallery/roll-categories/etc.) just needs
   the same top gap under its heading and a bottom gap before whatever
   comes next. */
.entry-content > .container{ margin-top: 40px; margin-bottom: 40px; }

/* .story-grid / .market-grid — built at runtime by script.js, which
   moves the flat eyebrow/heading/paragraph siblings into these (see
   assets/js/script.js). Since they're new wrapper elements (not plain
   h2/p), none of the ">" rules above reach them — they need their own
   containment (this is what was missing and caused the overflow/
   unstyled look) plus basic typography for the market-copy side,
   which the reference gives inline styles rather than a CSS class. */
.entry-content > .story-grid,
.entry-content > .market-grid{
  max-width: var(--container);
  margin: 110px auto 40px;
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}
.entry-content > .story-grid > .story-copy > p.eyebrow,
.entry-content > .market-grid > .market-copy > p.eyebrow{ margin-bottom: 18px; }
.entry-content > .market-grid > .market-copy h2{
  font-size: clamp(28px,3.6vw,38px);
  margin-bottom: 20px;
}
.entry-content > .market-grid > .market-copy p{
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 16.5px;
}
.entry-content > .market-grid > .market-copy p:first-of-type{ margin-top: 0; }
@media (max-width: 900px){
  .entry-content > .story-grid,
  .entry-content > .market-grid{ margin-top: 72px; }
}

/* Group block used as a page hero banner (className "page-hero") */
.entry-content > .wp-block-group.page-hero{
  margin: 0; padding: 190px 28px 90px; background: var(--ink); color: var(--white);
  position: relative; overflow: hidden;
}
.entry-content > .wp-block-group.page-hero::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(55% 80% at 85% 0%, rgba(227,167,43,.16), transparent 60%),
              radial-gradient(45% 60% at 0% 100%, rgba(200,57,30,.18), transparent 60%);
}
.entry-content > .wp-block-group.page-hero > *{ position:relative; max-width: var(--container); margin-left:auto; margin-right:auto; }
.entry-content > .wp-block-group.page-hero h1{ font-size: clamp(34px,5vw,58px); max-width:720px; margin:0; color:var(--white); }
.entry-content > .wp-block-group.page-hero p{ margin-top:20px; max-width:540px; color: rgba(255,255,255,.72); font-size:16.5px; padding:0; }

/* When an Image block is added inside the page-hero Group (e.g. via
   the block editor), switch to a two-column layout automatically —
   copy on the left, image on the right — instead of the default
   single centered column. Scoped to .page-slug-about only (see
   ichick_body_class_add_page_slug in inc/setup.php), so Menu/
   Locations/Media/Contact keep their normal single-column hero even
   if an image is ever added there too.
   Keyed off .has-hero-image (added by script.js's fixAboutHeroImage,
   which also promotes the image to a direct child regardless of how
   deep the block editor actually nested it) rather than a CSS
   :has(> .wp-block-image) direct-child check, since that broke
   whenever the editor nested the image one level deeper than
   expected. */
.page-slug-about .entry-content > .wp-block-group.page-hero.has-hero-image{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: 48px;
  align-items: center;
  max-width: var(--container);
  margin-left: auto; margin-right: auto;
}
.page-slug-about .entry-content > .wp-block-group.page-hero.has-hero-image > *{
  max-width: none; margin-left: 0; margin-right: 0;
}
.page-slug-about .entry-content > .wp-block-group.page-hero.has-hero-image h1{ grid-column: 1; grid-row: 1; }
.page-slug-about .entry-content > .wp-block-group.page-hero.has-hero-image p{ grid-column: 1; grid-row: 2; }
.page-slug-about .entry-content > .wp-block-group.page-hero.has-hero-image .wp-block-image{
  grid-column: 2; grid-row: 1 / 3; margin: 0;
}
.page-slug-about .entry-content > .wp-block-group.page-hero .wp-block-image img{
  width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 24px 50px rgba(0,0,0,.4);
}
@media (max-width: 860px){
  .page-slug-about .entry-content > .wp-block-group.page-hero.has-hero-image{
    grid-template-columns: 1fr; row-gap: 32px;
  }
  .page-slug-about .entry-content > .wp-block-group.page-hero.has-hero-image .wp-block-image{ grid-column: 1; grid-row: 3; }
}

/* First heading right after a page-hero shouldn't double up on top margin */
.entry-content > .wp-block-group.page-hero + h2,
.entry-content > .wp-block-group.page-hero + p.eyebrow{ margin-top: 90px; }

/* "Alt" background variant for alternating section rhythm, set via className "on-alt" */
.entry-content > h2.on-dark, .entry-content > p.on-dark-text{ color: var(--white); }

/* ------------------------------------------------------------
   Dark full-bleed bands for the two sections that need one
   (Farm-to-Fork Journey, Store Gallery) — the real content has no
   wrapping element to paint a background on, so the eyebrow, heading,
   intro paragraph and the dynamic block's own output are each given
   the same edge-to-edge dark background with zero MARGIN between them
   (margins would leave the light page background showing through as
   gaps) — all vertical rhythm between them is done with padding
   instead, which stays inside the painted background.
   ------------------------------------------------------------ */
.entry-content > p.eyebrow:has(+ h2 + p + .journey-track),
.entry-content > p.eyebrow:has(+ h2 + p + .journey-track) + h2,
.entry-content > p.eyebrow:has(+ h2 + p + .journey-track) + h2 + p,
.entry-content > .journey-track{
  background: var(--ink); color: var(--white);
  max-width: none;
  margin: 0;
  padding-left: max(28px, calc((100% - var(--container)) / 2 + 28px));
  padding-right: max(28px, calc((100% - var(--container)) / 2 + 28px));
}
.entry-content > p.eyebrow:has(+ h2 + p + .journey-track){ padding-top: 110px; padding-bottom: 0; color: var(--turmeric); }
.entry-content > p.eyebrow:has(+ h2 + p + .journey-track) + h2{ padding-top: 18px; padding-bottom: 0; color: var(--white); }
.entry-content > p.eyebrow:has(+ h2 + p + .journey-track) + h2 + p{ padding-top: 18px; padding-bottom: 0; color: rgba(255,255,255,.68); }
.entry-content > .journey-track{ padding-top: 40px; padding-bottom: 90px; }
.entry-content > .journey-track > *{ max-width: var(--container); margin-left:auto; margin-right:auto; }

.entry-content > p.eyebrow:has(+ h2 + p + .container > .gallery),
.entry-content > p.eyebrow:has(+ h2 + p + .container > .gallery) + h2,
.entry-content > p.eyebrow:has(+ h2 + p + .container > .gallery) + h2 + p,
.entry-content > .container:has(> .gallery){
  background: var(--ink); color: var(--white);
  max-width: none;
  margin: 0;
  padding-left: max(28px, calc((100% - var(--container)) / 2 + 28px));
  padding-right: max(28px, calc((100% - var(--container)) / 2 + 28px));
}
.entry-content > .container:has(> .gallery){ padding-left: 0; padding-right: 0; }
.entry-content > .container:has(> .gallery) > .gallery{ max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: max(28px, calc((100% - var(--container)) / 2 + 28px)); padding-right: max(28px, calc((100% - var(--container)) / 2 + 28px)); }
.entry-content > p.eyebrow:has(+ h2 + p + .container > .gallery){ padding-top: 110px; padding-bottom: 0; color: var(--turmeric); }
.entry-content > p.eyebrow:has(+ h2 + p + .container > .gallery) + h2{ padding-top: 18px; padding-bottom: 0; color: var(--white); }
.entry-content > p.eyebrow:has(+ h2 + p + .container > .gallery) + h2 + p{ padding-top: 18px; padding-bottom: 0; color: rgba(255,255,255,.68); }
.entry-content > .container:has(> .gallery){ padding-top: 40px; padding-bottom: 90px; }


/* ------------------------------------------------------------
   About-page stat band right under the hero. The "stats_about" block
   only outputs <div class="container"><div class="hero-stats" ...>
   without the dark <section style="background:var(--ink)"> the
   reference wraps it in, so the white stat numbers/labels were
   rendering on the light page background. Give the container itself
   the full-bleed dark treatment — the [style*=…] match targets only
   the "about" (dark) variant of this block, not the plain "home" one.
   Sits flush against the hero above and the marquee below (both dark
   too), so no gap is added on either side (margin explicitly zeroed —
   otherwise it inherits the generic 40px top/bottom margin every
   other .entry-content > .container gets, which shows as a light gap
   between the two dark bands). ------------------------------------------------------------ */
.entry-content > .container:has(> .hero-stats[style*="rgba(255,255,255,.14)"]){
  background: var(--ink);
  max-width: none; margin: 0;
}
.entry-content > .container:has(> .hero-stats[style*="rgba(255,255,255,.14)"]) > .hero-stats{
  max-width: var(--container); margin-left: auto; margin-right: auto;
}

/* ------------------------------------------------------------
   CTA band. The "cta_band" block only outputs
   <div class="container simple-cta">…</div> — the reference always
   wraps that in <section class="section cta-band"> for the bold red
   full-bleed treatment. Recreate that directly on the div that
   actually exists, using .cta-band's real design-system colors
   instead of the plainer .simple-cta look.
   ------------------------------------------------------------ */
.entry-content > .container.simple-cta{
  max-width: none;
  margin: 40px 0;
  padding-top: 110px; padding-bottom: 110px;
  background: var(--chili); color: var(--white);
}
@media (max-width: 780px){
  .entry-content > .container.simple-cta{ padding-top: 72px; padding-bottom: 72px; }
}
.entry-content > .container.simple-cta h2{ color: var(--white); max-width: 680px; margin: 0 auto; font-size: clamp(28px,4vw,42px); }
.entry-content > .container.simple-cta p{ color: rgba(255,255,255,.85); }
.entry-content > .container.simple-cta .btn-primary{ background: var(--white); color: var(--chili); }
.entry-content > .container.simple-cta .btn-primary:hover{ background: var(--ink); color: var(--white); }