/* Yazol Coffee: Chocolate background, Oat Milk light surfaces, Spicy
   Red accent, white text on dark - replaces the old black/gold/blue
   scheme this file used to describe. Page-level sections (no product
   photography in them) sit directly on --chocolate with near-white
   text; sections that show .domain-tile-img/.menu-cat-tab-photo/
   .menu-flavor-photo images stay on a light surface instead, because
   those images rely on mix-blend-mode: multiply to fake a transparent
   cutout - multiplying a near-white photo pixel against backdrop
   color C leaves ~C behind (that's what erases the studio background
   into "nothing"), but it multiplies every OTHER pixel in the photo
   by that same C too. Against a light backdrop (white/oat-milk) that
   leaves true product color intact; against dark --chocolate the
   whole photo would get crushed toward near-black instead of just its
   background disappearing. So .domain-strip, .menu-browse-strip and
   .menu-category stay light "card" surfaces even though they run full
   section width - none of those tiles have a card wrapper of their
   own to begin with, so the section background itself is the light
   surface, same shape as a white card, just sized to the section. */
/* --chocolate/--spicy-red/--oat-milk/--spicy-red-text and the
   --accent family below were originally defined here, Yazol-only;
   both have since moved up to style.css's base :root as the site-wide
   default (2026-08-24), so this file no longer redefines them at all -
   it just inherits. Same for .gallery-section and .hero-page-centered's
   chocolate treatment (including its h1) below: both are now bare
   base-level rules in style.css too (Scoop Stop, which also renders
   both, is pinned back to its original values in scoopstop.css), so
   they were dropped from here as duplicates. What's left below is
   genuinely Yazol-only: .domain-section-header/.moment-section have no
   base-level equivalent, and the oat-milk card treatment, the eyebrow/
   about-link contrast fixes, and the focus-ring scoping still need
   their own file since Scoop Stop's pinned-back originals mean none of
   it could safely become a bare base rule either. */

/* ─── PAGE-LEVEL: chocolate background. */
body,
.domain-section-header,
.moment-section {
    background: var(--chocolate);
    color: rgba(255,255,255,0.92);
}
/* Has its own more specific `color: var(--ink)` rule in style.css
   (higher specificity than the container fallback above), so it needs
   its own override to actually flip. */
.domain-section-header h2,
.moment-text h2 {
    color: var(--scoop-cream);
}
.moment-text p {
    color: rgba(255,255,255,0.68);
}

/* --accent only measures ~2.13:1 against --chocolate (fails even the
   3:1 non-text minimum) wherever it's plain text sitting straight on
   the new page background rather than on a card - these two eyebrows
   and this one link are the only such spots on the two Yazol pages.
   --spicy-red-text (4.98:1, see its :root comment in style.css) fixes
   that. */
.gallery-section .section-eyebrow,
.moment-section .section-eyebrow,
.moment-section .about-link {
    color: var(--spicy-red-text);
}
/* var(--accent-hover-dark) was a *darken* effect, sized for this link
   sitting on a light page background - on --chocolate that darkens an
   already-marginal red toward invisible instead of drawing the eye.
   White reads unambiguously as "brighter, more visible" on a dark
   hover instead. */
.moment-section .about-link:hover {
    color: var(--white);
}

/* ─── CARD-LEVEL: stays a light surface (see the mix-blend-mode note
   at the top of this file) - oat-milk for the tab-strip tiles, plain
   white kept for the item detail modal since that one really is a
   floating card, not a section background. .menu-category itself is
   NOT part of this anymore (2026-08-29) - it's now a bare base-level
   burgundy rule in style.css, same everywhere, since
   .menu-flavor-photo img there dropped mix-blend-mode: multiply
   specifically so photos stay true-colored on burgundy instead of
   needing a light backdrop. ─────────────────────────────────────── */
.domain-strip,
.menu-browse-strip {
    background: var(--oat-milk);
}
.menu-flavor-modal-close { background: var(--oat-milk); }

/* The hero artwork's own canvas is pure #000, a shade darker than
   --ink - with object-fit: contain leaving letterboxed space around
   it, that mismatch showed up as a faint seam outlining the image.
   Left as-is: it's already dark, and neither hex here is var(--white)
   or var(--cream), so it wasn't part of this color-direction pass. */
.hero-home,
.hero-bg-image {
    background: #000;
}

/* Was a hardcoded blue (#2d5acd) with no connection to --accent at
   all - repointed to the token so it doesn't ship a leftover blue
   line under the new red/chocolate page. */
.site-footer { border-top: 3px solid var(--accent); }
/* Was a hardcoded gold (#FFD700)/near-black pair, a leftover from
   before the burgundy palette pass - dropped so this inherits the
   shared .footer-social-link:hover rule in style.css (var(--accent)/
   var(--accent-contrast), i.e. burgundy/white) like every other page. */

/* .site-footer's own move off var(--ink) onto --chocolate, and
   .footer-nav ul a:hover's --spicy-red-text fix, are now bare
   base-level rules in style.css too (same reasoning as the PAGE-LEVEL
   note at the top of this file) - dropped from here as duplicates.
   The focus-ring scoping below still needs to stay Yazol-only,
   though: Scoop Stop pins .gallery-section/.hero-page-centered back
   to their light originals in scoopstop.css, so a base-level
   focus-ring fix for those same selectors couldn't be written
   without also relying on Scoop Stop's pin, which felt too indirect
   to lean on - kept explicit here instead. */

/* --accent (spicy-red) only clears ~2.13:1 against --chocolate, short
   of the 3:1 WCAG minimum for focus indicators - scoped to just the
   chocolate-background containers (not body, which would also catch
   focus rings over the still-light .domain-strip/.menu-category
   sections and make those worse instead of better). --spicy-red-text
   clears 4.98:1 here, well past the 3:1 floor. */
.domain-section-header :focus-visible,
.gallery-section :focus-visible,
.moment-section :focus-visible,
.hero-page-centered :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--spicy-red-text);
}

/* Yazol-only override: the logo band under the hero art is solid
   black here instead of style.css's shared white, no image in it.
   Hugs the tagline to the top of the band instead of centering it in
   the full band height - centered left the text floating in the
   middle of a tall block of empty black with no visual anchor. */
.hero-logo-band {
    background: #000;
    align-items: flex-start;
    padding-top: 20px;
}

.hero-tagline,
.hero-tagline-lead {
    color: var(--scoop-cream);
}

/* Subtitle ("Connecting people, heritage and culture.") - sets the
   --tagline-sub-size the lead line (style.css) scales up 20% from. */
.hero-tagline-sub {
    font-size: var(--tagline-sub-size);
    text-transform: uppercase;
}