@charset "UTF-8";
/*!
 * OCS Design System — graceland.ph
 * One source of truth for colour, type, spacing, focus and motion.
 *
 * Loaded last on purpose: the theme carries years of per-section inline CSS
 * patches, and this file harmonises them from above rather than by rewriting
 * 150KB of functions.php. Every override here is deliberate and documented.
 *
 * Contrast: every foreground/background pair below is verified >= WCAG 2.1 AA
 * (4.5:1 body text, 3:1 large text and UI boundaries).
 *
 * v1.0.0 — 2026-09-17
 */

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  /* --- Brand ------------------------------------------------------------ */
  --ocs-red:            #bf0000;  /* 6.53:1 on white */
  --ocs-red-deep:       #920000;  /* 9.45:1 on white */
  --ocs-red-ink:        #8f0000;  /* body-copy-safe red */
  --ocs-yellow:         #ffd200;  /* logo accent - decorative only */

  /* Tan and slate are brand tints. The raw values fail AA behind text, so
     each has a text-safe counterpart used wherever copy sits on top. */
  --ocs-tan:            #c19e74;  /* decorative fills, borders */
  --ocs-tan-deep:       #806a4c;  /* 5.14:1 white, 4.51:1 worst-case light text */
  --ocs-slate:          #77859f;  /* decorative */
  --ocs-slate-deep:     #606b81;  /* 5.36:1 white, 4.70:1 worst-case light text */

  /* --- Ink -------------------------------------------------------------- */
  --ocs-ink:            #1b1c1c;
  --ocs-ink-soft:       #3f4145;
  --ocs-ink-muted:      #595f6b;  /* AA on white, sand, cool and chip surfaces */
  --ocs-ink-on-dark:    #ffffff;

  /* --- Surfaces --------------------------------------------------------- */
  --ocs-surface:        #ffffff;
  --ocs-surface-warm:   #fcf9f8;
  --ocs-surface-sand:   #f4efea;
  --ocs-surface-cool:   #f7f8f9;
  --ocs-surface-chip:   #eceef1;

  /* --- Lines ------------------------------------------------------------ */
  --ocs-border:         #d9dce1;
  --ocs-border-strong:  #b6bbc4;

  /* --- Spacing scale (4px base) ----------------------------------------- */
  --ocs-1:  .25rem;  --ocs-2:  .5rem;   --ocs-3: .75rem;  --ocs-4: 1rem;
  --ocs-5: 1.5rem;   --ocs-6:  2rem;    --ocs-7: 2.5rem;  --ocs-8: 3rem;
  --ocs-9: 4rem;     --ocs-10: 5rem;    --ocs-11: 6rem;

  /* Section rhythm - fluid, so mobile never inherits desktop's air. */
  --ocs-section-y: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --ocs-gutter:    clamp(1rem, .55rem + 2vw, 2rem);

  /* --- Type scale (fluid) ----------------------------------------------- */
  --ocs-fs-h1:   clamp(2rem,    1.45rem + 2.4vw, 3rem);
  --ocs-fs-h2:   clamp(1.6rem,  1.3rem  + 1.4vw, 2.25rem);
  --ocs-fs-h3:   clamp(1.25rem, 1.12rem + .62vw, 1.6rem);
  --ocs-fs-h4:   clamp(1.1rem,  1.03rem + .34vw, 1.3rem);
  --ocs-fs-body: clamp(1rem,    .965rem + .16vw, 1.0625rem);
  --ocs-fs-sm:   .9375rem;   /* 15px - floor for supporting copy */
  --ocs-fs-xs:   .875rem;    /* 14px - absolute minimum anywhere */

  --ocs-lh-tight: 1.2;
  --ocs-lh-snug:  1.35;
  --ocs-lh-body:  1.65;

  /* --- Shape and depth --------------------------------------------------- */
  --ocs-radius-sm: 8px;
  --ocs-radius:    12px;
  --ocs-radius-lg: 18px;
  --ocs-radius-pill: 999px;
  --ocs-shadow-sm: 0 1px 2px rgba(16,18,22,.06), 0 1px 3px rgba(16,18,22,.08);
  --ocs-shadow:    0 2px 4px rgba(16,18,22,.05), 0 6px 16px rgba(16,18,22,.08);
  --ocs-shadow-lg: 0 8px 20px rgba(16,18,22,.10), 0 18px 40px rgba(16,18,22,.10);

  /* --- Interaction ------------------------------------------------------- */
  --ocs-focus:      #0b57d0;
  --ocs-focus-ring: 3px;
  --ocs-tap:        44px;   /* WCAG 2.5.8 / platform HIG minimum */
  --ocs-ease:       cubic-bezier(.2, .7, .3, 1);
  --ocs-dur:        .18s;

  /* Keep the legacy variable names alive so old rules inherit the new,
     accessible values instead of drifting away from them. */
  --gl-primary:         var(--ocs-red-deep);
  --gl-secondary:       var(--ocs-tan-deep);
  --gl-surface:         var(--ocs-surface-warm);
  --gl-surface-low:     var(--ocs-surface-sand);
  --gl-surface-highest: var(--ocs-surface);
  --gl-on-surface:      var(--ocs-ink);
  --gl-border:          var(--ocs-border);
  --gl-red:             var(--ocs-red);
}

/* =========================================================================
   2. FOUNDATION
   ========================================================================= */
:where(html) { -webkit-text-size-adjust: 100%; }

body {
  color: var(--ocs-ink);
  font-size: var(--ocs-fs-body);
  line-height: var(--ocs-lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(img, svg, video, canvas) { max-width: 100%; height: auto; }

:where(h1, .entry-title) { font-size: var(--ocs-fs-h1); line-height: var(--ocs-lh-tight); }
:where(h2) { font-size: var(--ocs-fs-h2); line-height: var(--ocs-lh-tight); }
:where(h3) { font-size: var(--ocs-fs-h3); line-height: var(--ocs-lh-snug); }
:where(h4) { font-size: var(--ocs-fs-h4); line-height: var(--ocs-lh-snug); }
:where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* No supporting text below 14px, anywhere. Small type was the most common
   finding in the audit (10px, 11.9px, 12px, 12.5px, 12.8px, 13.6px). */
:where(small, .rev-count, .review-date, .branch-opening-meta, .delivery-label,
       .ocs-gr-sub, .ocs-branch-index__meta, .ocs-branch-index__address,
       .ocs-delivery__address, .gstore-status, figcaption) {
  font-size: max(var(--ocs-fs-xs), .875em);
}

/* =========================================================================
   3. VERTICAL RHYTHM
   The theme sets margin-top:0 on every heading, so a new section's title
   sits flush against the previous section's last line. Restore breathing
   room in flowing prose only - never inside GenerateBlocks card layouts,
   where zero margin is intentional.
   ========================================================================= */
:where(.entry-content, .branch-context, .ocs-prose) :is(p, ul, ol, blockquote, figure, table, details, .wp-block-details) + :is(h2, h3, h4) {
  margin-top: var(--ocs-6);
}
:where(.entry-content, .branch-context, .ocs-prose) :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: var(--ocs-4);
}
:where(.entry-content, .branch-context, .ocs-prose) :is(h2, h3, h4) + :is(p, ul, ol) {
  margin-top: var(--ocs-3);
}

/* =========================================================================
   4. COLOUR CORRECTIONS (contrast)
   ========================================================================= */

/* The tan (#c19e74 -> 2.50:1) and slate (#77859f -> 3.72:1) bands are fixed at
   source in the GenerateBlocks block attributes, so the generated stylesheet
   itself is now accessible. These utilities exist so any new section can use
   the same bands without re-introducing the failing values. */
.ocs-band--tan   { background-color: var(--ocs-tan-deep); color: #fff; }
.ocs-band--slate { background-color: var(--ocs-slate-deep); color: #fff; }
.ocs-band--tan :is(h1,h2,h3,h4,h5,h6,p,li,strong,em),
.ocs-band--slate :is(h1,h2,h3,h4,h5,h6,p,li,strong,em) { color: #fff; }
.ocs-text--tan   { color: var(--ocs-tan-deep); }
.ocs-text--slate { color: var(--ocs-slate-deep); }

/* Muted greys: #888, #999 and #6b7280 all failed on their real backgrounds. */
.branch-opening-meta,
.review-date,
.rev-count,
.ocs-gr-sub,
.ocs-branch-index__meta,
.ocs-branch-index__address,
.ocs-branch-index__intro,
.ocs-delivery__address,
.ocs-delivery__intro,
.ocs-delivery__note { color: var(--ocs-ink-muted); }

.ocs-branch-index__count,
.ocs-delivery__count {
  background: var(--ocs-surface-chip);
  color: var(--ocs-ink-soft);
  font-size: var(--ocs-fs-xs);
}

/* Map placeholder copy measured 2.86:1. */
#visual-map-canvas { color: var(--ocs-ink-soft); }

/* Review stars measured 1.88:1 against the sand surface. */
.review-stars { color: #b8760a; }

/* Status pills: legible size, AA colour, never below 14px. */
.gstore-status,
.branch-status-badge {
  font-size: var(--ocs-fs-xs) !important;
  letter-spacing: .04em;
  padding: .3em .7em;
  border-radius: var(--ocs-radius-pill);
}
.gstore-status.status-open   { background: #dcfce7; color: #14532d; }
.gstore-status.status-closed { background: #fee2e2; color: #8f1616; }

/* =========================================================================
   5. FOCUS, TAP TARGETS, MOTION
   ========================================================================= */

/* A single, unmissable focus ring for keyboard users everywhere. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--ocs-focus-ring) solid var(--ocs-focus);
  outline-offset: 2px;
  border-radius: var(--ocs-radius-sm);
}
.ocs-band--tan :focus-visible,
.ocs-band--slate :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

/* The theme's skip link is a 1x1px sliver that never becomes visible.
   Restore it as a real, first-in-tab-order control. */
.skip-link.screen-reader-text,
a.ocs-skip-link {
  position: fixed !important;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important;
  margin: 0 !important;
  padding: var(--ocs-3) var(--ocs-5) !important;
  background: var(--ocs-red-deep); color: #fff !important;
  font-weight: 700; text-decoration: none;
  border-radius: 0 0 var(--ocs-radius) var(--ocs-radius);
  box-shadow: var(--ocs-shadow-lg);
  z-index: 100000;
  transition: transform var(--ocs-dur) var(--ocs-ease);
}
.skip-link.screen-reader-text:focus,
a.ocs-skip-link:focus { transform: translate(-50%, 0); }

/* Touch devices get real targets. Padding-based, so nothing reflows on
   pointer devices where a 26px link is perfectly clickable. */
@media (pointer: coarse) {
  .menu-bar-social,
  .wp-block-social-link-anchor,
  .branch-tel-link,
  .ocs-branch-index__link,
  .ocs-delivery__branch,
  .wp-block-navigation-item__content,
  .directory-item,
  .site-footer a,
  summary {
    min-height: var(--ocs-tap);
    display: inline-flex;
    align-items: center;
  }
  .ocs-branch-index__item a[href^="tel:"],
  .ocs-delivery__item a[href^="tel:"],
  .contact-card a[href^="tel:"] {
    min-height: var(--ocs-tap);
    display: inline-flex;
    align-items: center;
  }
}

/* Carousel dots measured 8-10px: unusable on touch, invisible as a target.
   Grow the hit area without growing the visual dot. */
.rev-dot {
  position: relative;
  min-width: 12px; min-height: 12px;
  border: 0;
}
.rev-dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: var(--ocs-tap); height: var(--ocs-tap);
}
.rev-btn { min-width: var(--ocs-tap); min-height: var(--ocs-tap); }

/* Respect the OS-level motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   6. FAQ PAGE
   Root cause of the "text is not clearly visible" report: the accordion CSS
   was written for a .ocs-faq wrapper that was never applied to the page, so
   every <details> fell back to browser defaults - 26px rows, no padding, no
   affordance, and a full 1160px measure.
   ========================================================================= */
body.ocs-page-faq .entry-content { max-width: none; }

body.ocs-page-faq .ocs-faq__lede,
.ocs-faq__lede {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ocs-ink-soft);
  max-width: 46rem;
  margin: 0 0 var(--ocs-7);
}

body.ocs-page-faq .ocs-faq-body > h2,
.ocs-faq h2 {
  margin-top: var(--ocs-9);
  margin-bottom: var(--ocs-4);
  padding-bottom: var(--ocs-3);
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  letter-spacing: .01em;
  border-bottom: 2px solid var(--ocs-red);
}
body.ocs-page-faq .ocs-faq-body > h2:first-of-type { margin-top: var(--ocs-6); }

body.ocs-page-faq .wp-block-details,
.ocs-faq .wp-block-details,
.ocs-faq details {
  background: var(--ocs-surface);
  border: 1px solid var(--ocs-border);
  border-radius: var(--ocs-radius);
  margin-block: 0 var(--ocs-3);
  box-shadow: var(--ocs-shadow-sm);
  transition: border-color var(--ocs-dur) var(--ocs-ease),
              box-shadow var(--ocs-dur) var(--ocs-ease);
}
body.ocs-page-faq .wp-block-details:hover,
.ocs-faq .wp-block-details:hover { border-color: var(--ocs-border-strong); }

body.ocs-page-faq .wp-block-details[open],
.ocs-faq .wp-block-details[open] {
  border-color: var(--ocs-red);
  box-shadow: var(--ocs-shadow);
}

body.ocs-page-faq .wp-block-details > summary,
.ocs-faq .wp-block-details > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--ocs-3);
  min-height: var(--ocs-tap);
  padding: var(--ocs-4) var(--ocs-5);
  font-size: clamp(1.02rem, .99rem + .22vw, 1.15rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ocs-ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--ocs-radius);
}
body.ocs-page-faq .wp-block-details > summary::-webkit-details-marker,
.ocs-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
body.ocs-page-faq .wp-block-details > summary::marker,
.ocs-faq .wp-block-details > summary::marker { content: ""; }

/* Chevron affordance, drawn rather than imported. */
body.ocs-page-faq .wp-block-details > summary::after,
.ocs-faq .wp-block-details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-top: .42em;
  margin-left: auto;
  border-right: 2.5px solid var(--ocs-red);
  border-bottom: 2.5px solid var(--ocs-red);
  transform: rotate(45deg);
  transition: transform var(--ocs-dur) var(--ocs-ease);
}
body.ocs-page-faq .wp-block-details[open] > summary::after,
.ocs-faq .wp-block-details[open] > summary::after { transform: rotate(-135deg); }

body.ocs-page-faq .wp-block-details > summary:hover,
.ocs-faq .wp-block-details > summary:hover { color: var(--ocs-red-deep); }

body.ocs-page-faq .wp-block-details > :not(summary),
.ocs-faq .wp-block-details > :not(summary) {
  padding-inline: var(--ocs-5);
  margin-block: 0;
  color: var(--ocs-ink-soft);
  line-height: var(--ocs-lh-body);
}
body.ocs-page-faq .wp-block-details > :not(summary):last-child,
.ocs-faq .wp-block-details > :not(summary):last-child { padding-bottom: var(--ocs-5); }

body.ocs-page-faq .wp-block-details p a,
.ocs-faq .wp-block-details p a {
  color: var(--ocs-red-ink);
  text-underline-offset: .18em;
}

/* --- FAQ hero ------------------------------------------------------------ */
.ocs-faq-hero {
  position: relative;
  padding: clamp(2.75rem, 2rem + 3.6vw, 4.75rem) var(--ocs-gutter);
  margin-bottom: var(--ocs-7);
  background:
    linear-gradient(135deg, rgba(146,0,0,.94) 0%, rgba(191,0,0,.90) 55%, rgba(128,106,76,.92) 100%),
    var(--ocs-red-deep);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.ocs-faq-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,210,0,.16) 0 32%, transparent 33%),
    radial-gradient(circle at 88% 78%, rgba(255,255,255,.10) 0 28%, transparent 29%);
  pointer-events: none;
}
.ocs-faq-hero__inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
.ocs-faq-hero__eyebrow {
  display: inline-block;
  margin: 0 0 var(--ocs-3);
  padding: .32em .9em;
  font-size: var(--ocs-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2a1400;
  background: var(--ocs-yellow);
  border-radius: var(--ocs-radius-pill);
}
.ocs-faq-hero__title {
  margin: 0 0 var(--ocs-3);
  font-size: var(--ocs-fs-h1);
  line-height: 1.12;
  color: #fff;
}
.ocs-faq-hero__sub {
  margin: 0 auto;
  max-width: 40rem;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,.94);
}
.ocs-faq-hero__jump {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--ocs-2);
  margin: var(--ocs-5) 0 0;
  padding: 0; list-style: none;
}
.ocs-faq-hero__jump a {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: .45em 1em;
  font-size: var(--ocs-fs-xs);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: var(--ocs-radius-pill);
  transition: background var(--ocs-dur) var(--ocs-ease);
}
.ocs-faq-hero__jump a:hover,
.ocs-faq-hero__jump a:focus-visible { background: rgba(255,255,255,.28); color: #fff; }

/* Anchor targets must clear the sticky header. */
body.ocs-page-faq .ocs-faq-body > h2[id] { scroll-margin-top: 120px; }

/* =========================================================================
   7. STORE / BRANCH SURFACES
   ========================================================================= */

/* Branch index - the crawlable list under the locator. */
.ocs-branch-index { margin-block: var(--ocs-section-y); }
.ocs-branch-index__title { font-size: var(--ocs-fs-h2); margin-bottom: var(--ocs-2); }
.ocs-branch-index__intro { margin-bottom: var(--ocs-6); }
.ocs-branch-index__city { margin-bottom: var(--ocs-7); }
.ocs-branch-index__city-name,
.ocs-delivery__city-name {
  font-size: var(--ocs-fs-sm);
  font-weight: 700;
  color: var(--ocs-ink-soft);
  border-bottom-color: var(--ocs-border);
}
.ocs-branch-index__list { gap: var(--ocs-5); }
.ocs-branch-index__item { gap: var(--ocs-1); }
.ocs-branch-index__link,
.ocs-delivery__branch {
  color: var(--ocs-red-ink);
  font-size: 1.02rem;
  line-height: 1.4;
}
.ocs-branch-index__meta a { color: var(--ocs-red-ink); }

/* Delivery directory. */
.ocs-delivery { margin-block: var(--ocs-section-y); }
.ocs-delivery__intro { margin-bottom: var(--ocs-6); font-size: var(--ocs-fs-body); }
.ocs-delivery__btn {
  min-height: 40px;
  display: inline-flex; align-items: center;
  font-size: var(--ocs-fs-xs);
  padding: .5em 1.1em;
}
.ocs-delivery__btn--fp { background: #c10d59; }  /* darkened for AA with white */
.ocs-delivery__btn--gf { background: #007d38; }  /* darkened for AA with white */

/* Regional directory: on mobile this became a 13-item horizontal strip with
   most cities scrolled out of sight. Wrap it into a readable chip grid. */
@media (max-width: 860px) {
  .directory-list,
  ul.directory-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--ocs-2) !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .directory-item {
    flex: 0 1 auto !important;
    width: auto !important;
    min-height: var(--ocs-tap);
    display: inline-flex !important;
    align-items: center;
    gap: var(--ocs-2);
    padding: .4em .85em !important;
    border: 1px solid var(--ocs-border) !important;
    border-radius: var(--ocs-radius-pill) !important;
    margin: 0 !important;
  }
}

/* Single branch page. */
.branch-hero-content .branch-subtitle { color: var(--ocs-red-ink); letter-spacing: .08em; }
.branch-nap { gap: var(--ocs-2); }
.branch-tel-link { color: var(--ocs-red-ink); font-weight: 600; }
.branch-card {
  border-radius: var(--ocs-radius);
  border: 1px solid var(--ocs-border);
}
.branch-details-grid { gap: var(--ocs-5); }
.delivery-label { color: var(--ocs-ink-muted); letter-spacing: .08em; }

/* =========================================================================
   8. GLOBAL COMPONENT POLISH
   ========================================================================= */

/* Links in prose are underlined - colour alone is not an accessible signal. */
.entry-content :is(p, li) a:not(.gb-button):not([class*="btn"]):not([class*="button"]) {
  text-decoration: underline;
  text-underline-offset: .16em;
  text-decoration-thickness: from-font;
}

/* Buttons: consistent shape, size and press feedback. */
:where(.gb-button, .wp-block-button__link, button.button, a.button, .ocs-btn) {
  min-height: var(--ocs-tap);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ocs-radius-pill);
  font-weight: 700;
  line-height: 1.2;
  transition: transform var(--ocs-dur) var(--ocs-ease),
              box-shadow var(--ocs-dur) var(--ocs-ease),
              background-color var(--ocs-dur) var(--ocs-ease);
}
:where(.gb-button, .wp-block-button__link, a.button):hover { transform: translateY(-1px); }
:where(.gb-button, .wp-block-button__link, a.button):active { transform: translateY(0); }

/* Footer credit was 13.6px - lift it to the 14px floor. */
.site-footer, .site-info { font-size: var(--ocs-fs-xs); }

.cmplz-cookiebanner .cmplz-title { font-size: var(--ocs-fs-body); }

/* =========================================================================
   9. MOBILE
   ========================================================================= */
@media (max-width: 767px) {
  :root { --ocs-section-y: clamp(2rem, 1.5rem + 2.5vw, 3rem); }

  /* NOTE: a blanket font-size floor on .gb-text was tried here and removed.
     Those classes carry the page's display type as well as its small print,
     so it flattened every heading to 16px. Small type is raised by the
     named-component rules in section 12 instead. */

  /* Grids collapse cleanly rather than squeezing two cramped columns. */
  .ocs-branch-index__list,
  .ocs-delivery__list,
  .branch-details-grid { grid-template-columns: 1fr !important; }

  /* Long addresses and phone numbers must not force a sideways scroll. */
  .ocs-branch-index__address,
  .ocs-delivery__address,
  .branch-nap { overflow-wrap: anywhere; }

  body.ocs-page-faq .wp-block-details > summary { padding: var(--ocs-4); }
  body.ocs-page-faq .wp-block-details > :not(summary) { padding-inline: var(--ocs-4); }
  body.ocs-page-faq .ocs-faq-body > h2[id] { scroll-margin-top: 90px; }
}

/* =========================================================================
   10. PRINT
   ========================================================================= */
@media print {
  .site-header, .site-footer, .cmplz-cookiebanner,
  .ocs-faq-hero__jump, .rev-btn, .rev-dots { display: none !important; }
  body.ocs-page-faq .wp-block-details { break-inside: avoid; border-color: #999; }
  body.ocs-page-faq .wp-block-details > :not(summary) { display: block !important; }
}

/* =========================================================================
   11. SECTION RHYTHM
   GenerateBlocks' global `.gbpsection` class shipped a fixed 8rem (128px)
   of vertical padding on desktop and 6rem (96px) on mobile. Stacked, that
   put 256px of dead space between sections on a laptop and 192px on a
   390px phone - roughly a quarter of the screen blank at every boundary.
   One fluid scale replaces both, so the page breathes without emptying.
   ========================================================================= */
.gbpsection {
  padding-block: clamp(2.5rem, 1.5rem + 3.4vw, 5rem);
  padding-inline: var(--ocs-gutter);
}

/* The first band on a page is the hero and keeps more presence. */
.entry-content > :first-child .gbpsection,
.entry-content > .gbpsection:first-child {
  padding-block: clamp(3.5rem, 2.2rem + 4.4vw, 7rem);
}

/* Two bands of the same colour read as one section with a hole in it.
   Collapse the seam so the rhythm comes from content, not from padding. */
.gbpsection + .gbpsection { padding-top: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }

/* =========================================================================
   12. SPECIFICITY CORRECTIONS
   Two classes of override need real weight rather than :where():
     a) the locator styles are printed inside the shortcode, i.e. in <body>,
        so they win on source order against anything in <head>;
     b) component rules that set their own em-based sizes out-specify a
        zero-specificity :where() rule.
   ========================================================================= */

/* (a) Locator map placeholder: #888 on #e5e7eb measured 2.86:1. */
body #visual-map-canvas { color: var(--ocs-ink-soft); }

/* (b) The 14px floor, enforced with matching specificity. */
.ocs-branch-index__meta,
.ocs-branch-index__meta a,
.ocs-branch-index__address,
.ocs-delivery__address,
.branch-opening-meta,
.review-date,
.rev-count,
.ocs-gr-sub,
.delivery-label,
.gstore-status,
.site-footer p,
.site-footer li,
.site-footer a,
.site-footer mark,
.site-info p,
.site-info a {
  font-size: var(--ocs-fs-xs);
}

/* Supporting copy that the page sets in em units still cannot go below 14px. */
.site-footer mark,
.site-footer strong,
.entry-content mark { font-size: max(var(--ocs-fs-xs), 1em); }

/* The locator's own card meta was 11.9px. */
body .gstore-status,
body .gstore-card-meta,
body .gstore-hours { font-size: var(--ocs-fs-xs); }

/* =========================================================================
   13. REMAINING TARGET SIZES
   ========================================================================= */

/* Icon links need width as well as height once they become flex items. */
.wp-block-social-link-anchor,
.menu-bar-social,
.footersociala {
  min-width: var(--ocs-tap);
  justify-content: center;
}

/* The logo link measured 160x22 - wide, but 2px short of the WCAG 2.5.8
   minimum on the cross axis. */
.site-logo a,
.navigation-branding a,
a.custom-logo-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ocs-tap);
}

/* =========================================================================
   14. HERO CAROUSEL
   The hero carried the smallest type on the site - a 10px rating line and
   12px calls to action - plus 35px carousel buttons. Scoped to the hero so
   the floor never touches display type elsewhere.
   ========================================================================= */
.css-bg-carousel :is(p, span, strong, em, li, a) {
  font-size: max(var(--ocs-fs-xs), 1em);
}

.ocs-hero-nav {
  min-width: var(--ocs-tap);
  min-height: var(--ocs-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.css-bg-carousel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ocs-tap);
}
/* On a phone the side-mounted arrows sit directly on top of the hero
   paragraph. Move the pair to the bottom centre, clear of all copy. */
@media (max-width: 767px) {
  .css-bg-carousel { position: relative; }

  .ocs-hero-nav {
    top: auto;
    bottom: var(--ocs-4);
    transform: none;
    background: rgba(0, 0, 0, .55);
  }
  .ocs-hero-prev { left: calc(50% - var(--ocs-tap) - .25rem); right: auto; }
  .ocs-hero-next { left: calc(50% + .25rem); right: auto; }

  /* Reserve the strip the arrows now occupy. */
  .css-bg-carousel .gbpsection { padding-bottom: calc(var(--ocs-tap) + var(--ocs-8)); }
}
/* The prose-underline rule is for reading copy; the hero's jump chips are
   buttons and read better without it. */
.ocs-faq-hero__jump a { text-decoration: none; }
.ocs-faq-hero__jump a:hover,
.ocs-faq-hero__jump a:focus-visible { text-decoration: underline; }

/* =========================================================================
   15. COMPONENT STYLES PRINTED IN <BODY>
   The store locator, contact directory and single-branch template each emit
   their <style> block inside the template output, so those rules sit after
   this file in the document and win on source order at equal specificity.
   Prefixing with `body` adds the one point of weight needed to correct them.
   ========================================================================= */

/* Delivery partner buttons. Brand greens and pinks at their published values
   fail AA behind white text; these are the darkest shades that still read as
   Foodpanda pink and GrabFood green. */
body .fp-btn,
body a.fp-btn,
body .branch-fp-btn { background-color: #c10d59; }   /* 6.05:1 with white */
body .grab-btn,
body a.grab-btn,
body .branch-grab-btn { background-color: #007d38; } /* 5.26:1 with white */

/* Branch page meta lines: #888 on white measured 3.54:1 at 13.6px. */
body .branch-opening-meta,
body .branch-opening-meta *,
body .ocs-gr-sub,
body .review-date,
body .rev-count {
  color: var(--ocs-ink-muted);
  font-size: var(--ocs-fs-xs);
}

/* Category counters: #6b7280 on #e5e7eb measured 3.90:1 at 12.75px. */
body .prod-count,
body span.prod-count {
  font-size: var(--ocs-fs-xs);
  color: var(--ocs-ink-soft);
  background-color: var(--ocs-surface-chip);
}
body .prod-count.active,
body .active .prod-count { color: #fff; }

/* =========================================================================
   16. LAST-MILE OVERRIDES
   Two component stylesheets are registered as inline styles against handles
   that do not exist in any theme or plugin file (they are stored as site
   Elements), so they can only be corrected from here. Each selector below
   deliberately carries one more point of weight than the rule it replaces.
   ========================================================================= */

/* .ocs-contact-value a used Facebook blue #1877f2 - 4.23:1 on white, as link
   text and again as a button fill. #1568d8 is the nearest shade clearing AA. */
body .ocs-contact-value a,
body a.ocs-contact-value,
body .ocs-contact-value a:visited { color: #1568d8; }

body .gb-text[style*="1877f2"],
body [style*="background-color:#1877f2"],
body [style*="background-color: #1877f2"] { background-color: #1568d8 !important; }

/* .ocs-greviews-badge .ocs-gr-sub is (0,2,0); this is (0,2,1). */
body .ocs-greviews-badge .ocs-gr-sub,
body .ocs-greviews-badge .ocs-gr-title { font-size: var(--ocs-fs-xs); }
body .ocs-greviews-badge .ocs-gr-sub { color: var(--ocs-ink-muted); }
/* The contact card's Facebook and Messenger buttons use #1877F2 with
   !important, as a fill behind white text and as text on white. Both read
   4.23:1. #1568D8 keeps the Facebook identity and clears AA at 5.25:1. */
body .gb-element-65e6509a a[href*="facebook.com"] { background-color: #1568D8 !important; }
body .gb-element-65e6509a a[href*="m.me"],
body .gb-element-65e6509a a[href*="messenger"] { color: #1568D8 !important; }
body .gb-element-65e6509a a[href*="m.me"]:is(:hover, :focus),
body .gb-element-65e6509a a[href*="messenger"]:is(:hover, :focus) {
  background-color: rgba(21, 104, 216, .10) !important;
}

/* =========================================================================
   17. LAYOUT REPAIRS
   ========================================================================= */

/* --- 17a. FAQ page: band, container, content -----------------------------
   The hero is a full-bleed band carrying the background; a named inner
   container holds the reading column. .entry-content stays unconstrained so
   the band can reach the viewport edges through the theme's own alignfull
   contract, exactly like the bands on Home and Our Stores. */
.ocs-faq-body {
  max-width: 60rem;
  margin-inline: auto;
}

.ocs-faq-hero {
  padding-inline: var(--ocs-gutter);
  margin-bottom: var(--ocs-8);
}

/* --- 17b. The gap between the last section and the footer -----------------
   The footer inner container carries margin 2rem auto. Its parent paints the
   footer background but declares no padding or border, so that top margin
   collapses straight out of the coloured block and renders as a white strip
   above the footer. Containing the margin closes the gap and turns the 2rem
   back into interior breathing room. */
.site-footer > [class*="gb-element-"] { display: flow-root; }

/* On phones the content wrapper also adds 30px below the last band. */
@media (max-width: 768px) {
  .one-container .site-content:has(.entry-content > .alignfull:last-child) {
    padding-bottom: 0;
  }
}

/* --- 17c. Hero call-to-action pair ----------------------------------------
   The wrapper had no layout of its own, so the two pill links sat as inline
   boxes separated only by the whitespace between them in the markup: side by
   side and tight against the gutters on a phone, with no vertical gap once
   they wrapped. */
.gb-element-dfb8ac4a {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ocs-3);
  align-items: center;
}

@media (max-width: 767px) {
  .gb-element-dfb8ac4a {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ocs-3);
  }
  .gb-element-dfb8ac4a > a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* The blanket hero link rule must not fight the pills' own box. */
.css-bg-carousel a.gb-text { min-height: var(--ocs-tap); }
/* The CTA wrapper sits in a flex group with align-items:flex-start, so it
   shrank to its content width and the pills could never fill the column.
   The second pill also carries a 4.8px inline margin, which was its only
   separation as a row and which knocks the stack out of alignment. Gap now
   does that job in both directions. */
.gb-element-dfb8ac4a > a { margin-inline: 0; }

@media (max-width: 767px) {
  .gb-element-dfb8ac4a {
    width: 100%;
    align-self: stretch;
    margin-top: var(--ocs-5);
  }
  .gb-element-dfb8ac4a > a { width: 100%; }
}
/* WordPress ships `.is-layout-flex > :is(*, div) { margin-top: 0 }`, which
   out-specifies the theme's own spacing and left only the group's 8px gap
   between the hero copy and its buttons. This restores the intended 2rem,
   scaled down on a phone. */
.is-layout-flex > .gb-element-dfb8ac4a { margin-top: var(--ocs-6); }

@media (max-width: 767px) {
  .is-layout-flex > .gb-element-dfb8ac4a { margin-top: var(--ocs-5); }
}
/* --- 17d. The 14px floor at phone width ----------------------------------
   Three labels still rendered at 10-12px on a phone: the hero rating line and
   the two band call-to-action links. The floor is applied to links, spans and
   paragraphs only - never to a heading tag - so it cannot flatten display type
   the way a blanket .gb-text rule did. max() only ever raises a size. */
@media (max-width: 767px) {
  a.gb-text,
  a.gb-text strong,
  p.gb-text,
  p.gb-text strong,
  span.gb-text,
  span.gb-text strong {
    font-size: max(var(--ocs-fs-xs), 1em);
  }
}