/*
 * fresh-raw.css — the only new CSS this build needs.
 *
 * Almost everything the /fresh-raw/ design asks for is already in the compiled
 * theme stylesheet: .background-dark-green (#00b981), .background-light-green
 * (#b0ce5d), .image-background, the four torn-edge texture SVGs, the
 * large/medium/small padding scale, .std-button and the asymmetric panel radii.
 * Those are switched on by ACF fields, not by rules here.
 *
 * What is genuinely missing is below, and only this:
 *   1. a button row that does not stretch each button to 100% width
 *   2. the Society Kitchen video grid
 */

/* 1. Button row.
   The theme's only button wrapper, .button-container, forces
   `a.std-button { width: 100% }`, which stacks the three stockist buttons full
   width. This keeps them on a row that wraps, and inherits .std-button for all
   of the actual styling. */
.fr-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    float: left;
    width: 100%;
    margin-top: 24px;
}

.fr-button-row a.std-button {
    width: auto;
    flex: 0 0 auto;
}

/* 2. Society Kitchen video wall.
   Portrait (9:16) clips lifted from TikTok, self-hosted. Namespaced fr-* so it
   cannot collide with the theme's existing section.video-module, which is a
   16:9 single-video layout with a signup panel floated over it. */
.fr-kitchen-module {
    position: relative;
    float: left;
    width: 100%;
}

.fr-kitchen-module .fr-video-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.fr-kitchen-module .fr-video-item {
    margin: 0;
}

/* Two videos in a four-column grid left half the row empty. With exactly two,
   the grid drops to two columns at a width that keeps each 9:16 clip a
   sensible height. */
.fr-kitchen-module .fr-video-grid:has(> .fr-video-item:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ...and the band centres around them. Left-aligned, two videos left the
   right half of the band empty on desktop (Olivia, 2026-09-28). Centred
   matches the other single-column bands on the page (#inside, #where, #join).
   With four videos the grid fills the width and this does not apply. */
.fr-kitchen-module:has(.fr-video-grid > .fr-video-item:nth-child(2):last-child) .container > h2.title,
.fr-kitchen-module:has(.fr-video-grid > .fr-video-item:nth-child(2):last-child) .container > p.p-medium {
    text-align: center;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.fr-kitchen-module:has(.fr-video-grid > .fr-video-item:nth-child(2):last-child) .fr-video-item figcaption {
    text-align: center;
}

.fr-kitchen-module .fr-video-item video {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
    background: #0a0203;
    /* Brand signature: TL generous, TR tighter, BR smallest, BL second largest.
       Ratios follow the .faq-group / callout rhythm documented in CLAUDE.md. */
    border-radius: 40px 27px 20px 33px;
}

.fr-kitchen-module .fr-video-item figcaption {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 10px;
}

@media only screen and (max-width: 1024px) {
    .fr-kitchen-module .fr-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .fr-kitchen-module .fr-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .fr-kitchen-module .fr-video-item video {
        border-radius: 24px 16px 12px 20px;
    }
    .fr-button-row a.std-button {
        width: 100%;
    }
}

/* 3. Bands that genuinely have no image.
   _two-column-image-text.php now emits the image column only when an image is
   set, and marks the row .no-image. Three bands on /fresh-raw/ are image-less
   BY DESIGN — #serve (three white cards), #where (centred stockist row) and the
   closer (callout only) — so the text has to reclaim the full width.

   This replaces an earlier :not(:has(.column-image-container img)) rule that hid
   an empty image column. That rule was a workaround for every image field having
   been left blank; it treated the symptom. The structure is honest now, so the
   selector can be too. */
section.two-column-image-text .column-container.no-image .column.text-column {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
}

/* .inner is a SPAN that the theme floats (`float:left; width:100%`), which is
   what makes it a block box at all. An earlier version of this rule set
   `float:none` on it to centre it — that dropped it straight back to
   `display:inline`, so it stopped containing its floated children and stopped
   constraining their width. The visible symptoms were a 161-character line
   length in #serve and a full-width closer pill.

   flow-root is the fix: it makes .inner a block AND establishes a block
   formatting context, so the floated h2, text, callout, cards and button row
   are all contained. Never just `float:none` here. */
section.two-column-image-text .column-container.no-image .column.text-column .inner {
    display: flow-root;
    float: none;
    max-width: 1240px;
    margin: 0 auto;
}

@media only screen and (max-width: 1023px) {
    section.two-column-image-text .column-container.no-image .column.text-column {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 4. Restore a visible keyboard focus indicator.
   The compiled theme removes focus indication site-wide:
       :focus { outline-color: transparent; outline-style: none }
       a:active, a:focus, a:hover { outline: 0 }
       input:focus, textarea:focus { outline: 0 }
   That is a WCAG 2.4.7 Focus Visible (AA) failure, confirmed by pressing Tab
   on staging: the focused element matches :focus-visible and still computes to
   outline-style:none with a transparent outline colour.

   :focus-visible only matches keyboard (and equivalent) focus, so this is
   invisible to mouse and touch users and changes nothing about how the site
   looks in normal use. Near-black rather than a brand colour, because it has to
   stay visible on white, on #b0ce5d and on #00b981 grounds alike — it measures
   21:1, 11.6:1 and 8.1:1 against those three.

   This stylesheet is enqueued site-wide, so this applies to the homepage too.
   That is deliberate: a focus indicator on one page only would be stranger than
   none at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0a0203;
    outline-offset: 2px;
    outline-color: #0a0203;
    outline-style: solid;
}

/* Form controls need !important: WPForms' own stylesheet is enqueued after this
   one and re-removes the outline at equal specificity. CLAUDE.md already records
   that this theme and its plugins fight over form styling with !important; this
   is the narrowest selector that wins, and it only fires on keyboard focus. */
.wpforms-form input:focus-visible,
.wpforms-form select:focus-visible,
.wpforms-form textarea:focus-visible,
.wpforms-form button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 3px solid #0a0203 !important;
    outline-offset: 2px !important;
}

/* 5. Reduced motion.
   The theme animates every band in with AOS, which sets opacity:0 and
   transitions to 1. Simply disabling transitions here would strand those
   elements at opacity:0 and hide the page's content outright, so this forces
   them to their finished state instead of removing the animation and leaving
   nothing behind. */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .fr-kitchen-module *,
    .fr-button-row * {
        animation: none !important;
        transition: none !important;
    }
}

/* 6. Cream ground.
   #F4F3EB is already painted by the compiled theme on section.ranges-slider-module
   and the newsletter band, but it is not a choice in the Background select. It is
   now — the select gained a "Cream" option in the same commit — so the class has
   to exist for it to do anything. Site-wide like the rest of this file, because
   the select it belongs to is on a shared layout.

   No texture-top / texture-bottom partners: the four torn-edge SVGs are baked at
   the other grounds' colours and there is no cream one. Bands on cream set both
   texture fields to "no". */
.background-cream {
    background-color: #f4f3eb;
    color: #0a0203;
}

/* ---------------------------------------------------------------------------
   7. /fresh-raw/ only — colour contrast.

   Scoped to body.fresh-raw (added by a body_class filter in functions.php,
   keyed on the page slug so it survives the port to production) rather than
   applied site-wide. Every failure below exists identically on the homepage
   today; repainting the homepage is a brand decision, and Olivia's call on
   2026-09-24 was to see the treatment on this page first.

   One colour causes all of it: brand green #00b981, which is 2.54:1 against
   both white and near-black-on-white headings. Both remedies use colours the
   theme already ships, so neither invents a brand colour:

     white on #00b981   2.54:1  ->  #0a0203 on #00b981   8.07:1
     #00b981 on white   2.54:1  ->  #046b4f on white     5.09:1

   The theme already does the first of these in .background-dark-green and in
   .image-background .std-button — the white-on-green button is the odd one out,
   not the fix.
   --------------------------------------------------------------------------- */

/* WHITE ON GREEN STAYS — Olivia's ruling, 2026-09-28. Button labels, the green
   callout, the #where band and the footer buttons keep the brand's white text on
   #00b981 (2.54:1), accepted knowingly as a brand decision. Earlier versions of this
   file turned those labels near-black; that also blacked out the footer's
   white-outline stockist buttons, which it never should have touched. The rules
   below now only darken green TEXT on white, not text on green. */

/* Headings. .text-dark-green is #00b981 — 2.54:1 on white at any size. */
body.fresh-raw .text-dark-green,
body.fresh-raw .dark-green-text,
body.fresh-raw h2.title.text-dark-green,
body.fresh-raw section.faq-module .faq-group .group-title {
    color: #046b4f;
}

/* ...except on the green band. #046b4f on #00b981 is 2.53:1 — the same failure
   in the other direction — and the theme already sets near-black there.
   The selectors carry .text-dark-green explicitly because the heading rule above
   is (0,3,2) and a shorter override loses to it: measured at 2.53:1 on the first
   pass because of exactly that. */
body.fresh-raw .background-dark-green h2.title.text-dark-green,
body.fresh-raw .background-dark-green h2.title,
body.fresh-raw .background-dark-green .text-dark-green,
body.fresh-raw .background-dark-green .dark-green-text,
body.fresh-raw .background-dark-green .text-container,
body.fresh-raw .background-dark-green .text-container p {
    color: #ffffff;
}

/* On the green band the stockist buttons are green-on-green. The mock draws
   them as white pills, which is also what .image-background .std-button does
   on a pale ground — same idea, inverted for a saturated one. */
body.fresh-raw .background-dark-green a.std-button {
    background-color: #ffffff;
    color: #0a0203;
}

body.fresh-raw .background-dark-green a.std-button:hover {
    background-color: #0a0203;
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   8. /fresh-raw/ only — the hero.

   The hero ground is the brand's hot-pink dog-face pattern (media 217), the
   same asset the homepage uses, at full colour. The type sits in a white panel
   over it — the same move as the homepage's white blob behind the wordmark —
   because type set straight onto the pattern fought with the line art.

   History: the first build set near-black type directly on the pattern under a
   22% white wash, to clear contrast over the dark strokes. The wash made the
   pattern visibly paler than the homepage's. Olivia chose the white panel (mock
   option A, 2026-09-28), which makes the wash unnecessary, so it is gone.

   Panel radii follow the brand rhythm in CLAUDE.md: TL 1.0 / TR 0.67 / BR 0.5 /
   BL 0.83. Pure fill, no border, no shadow.
   --------------------------------------------------------------------------- */
body.fresh-raw section.banner-block {
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 88px 24px;
    box-sizing: border-box;
}

body.fresh-raw section.banner-block .banner-image-button-container {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0;
    padding: 44px 48px 40px;
    gap: 16px;
    text-align: center;
    background: #ffffff;
    border-radius: 80px 54px 40px 66px;
    box-sizing: border-box;
}

body.fresh-raw section.banner-block .banner-image-button-container .title {
    color: #0a0203;
    max-width: none;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

body.fresh-raw section.banner-block .banner-image-button-container p.p-medium {
    color: #0a0203;
    font-size: 17px;
    line-height: 1.55;
    max-width: 46ch;
    margin: 0 auto;
    text-wrap: pretty;
}

/* Pack pair above the headline (hero_banner `image`, the slot the homepage uses
   for its logo). Added 2026-09-28: most visitors land on a phone, and a product
   landing page has to show the product before they scroll. */
body.fresh-raw section.banner-block .banner-logo-container {
    position: static;
    width: auto;
    height: auto;
    margin: -8px auto 4px;
    transform: none;
}

body.fresh-raw section.banner-block .banner-logo-container img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 230px;
    margin: 0 auto;
    object-fit: contain;
}

/* The theme absolutely positions the hero button row against a 100vh banner.
   This hero is content-height, so the row goes back into flow. */
body.fresh-raw section.banner-block .banner-image-button-container .banner-button-container {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: auto;
}

/* Second hero button. White on a white panel would vanish, so it takes the
   hero pink instead. Near-black on #ff73ad is 8.5:1. */
body.fresh-raw section.banner-block .banner-button-container a.std-button:nth-child(2) {
    background-color: #ff73ad;
    color: #0a0203;
}

body.fresh-raw section.banner-block .banner-button-container a.std-button:nth-child(2):hover {
    background-color: #0a0203;
    color: #ffffff;
}

@media only screen and (max-width: 767px) {
    body.fresh-raw section.banner-block {
        padding: 56px 16px;
    }
    body.fresh-raw section.banner-block .banner-image-button-container {
        padding: 32px 22px 28px;
        border-radius: 40px 27px 20px 33px;
    }
    body.fresh-raw section.banner-block .banner-button-container {
        width: 100%;
        flex-direction: column;
    }
    body.fresh-raw section.banner-block .banner-logo-container img {
        height: 170px;
    }
    body.fresh-raw section.banner-block .banner-button-container a.std-button {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   9. The "pick your path" picker — image_text_module with three_column_display
   set to Picker. Used by #serve on /fresh-raw/ (approved mock, 2026-09-28).

   Not scoped to body.fresh-raw: the picker is a display option on a shared
   layout, so its styling travels with the option, like .background-cream.

   Layout: .fr-picker is display:contents, so the ask, the choices and the
   result panel become grid items of .inner alongside the h2 and the intro.
   Left column: heading, intro, question, choices. Right column: the answer.
   Grid items ignore the theme's float:left; width:100% on the h2 and text.

   Without JavaScript every answer shows and the choices stay hidden, so the
   band degrades to a plain list; fresh-raw-picker.js adds .is-ready.
   --------------------------------------------------------------------------- */
section.two-column-image-text .column-container .column.text-column .inner:has(> .fr-picker) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 56px;
    max-width: 980px;
    margin: 0 auto;
    float: none;
    text-align: left;
}

.inner:has(> .fr-picker) > h2.title,
.inner:has(> .fr-picker) > .text-container {
    grid-column: 1;
    width: auto;
    max-width: none;
    float: none;
}

/* Half-width column, so the theme's 48px h2 stranded "top?" on a third line.
   The mock's size, balanced. */
.inner:has(> .fr-picker) > h2.title {
    font-size: clamp(32px, 3.6vw, 44px);
    line-height: 1.1;
    text-wrap: balance;
}

.inner:has(> .fr-picker) > .text-container {
    max-width: 44ch;
    margin-bottom: 28px;
}

.fr-picker {
    display: contents;
}

.fr-picker-ask {
    grid-column: 1;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
}

.fr-picker-choices {
    grid-column: 1;
    display: grid;
    gap: 10px;
    align-content: start;
}

.fr-picker:not(.is-ready) .fr-picker-ask,
.fr-picker:not(.is-ready) .fr-picker-choices {
    display: none;
}

.fr-picker-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    font: 400 16px/1.3 Lexend, sans-serif;
    color: #0a0203;
    background: #ffffff;
    border: 0;
    border-radius: 30px 24px 18px 26px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.fr-picker-choice:hover:not([aria-checked="true"]) {
    background: #fbfaf6;
}

.fr-picker-choice[aria-checked="true"] {
    background: #00b981;
    color: #ffffff;
    font-weight: 600;
}

.fr-picker-dot {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f4f3eb;
    display: grid;
    place-items: center;
}

.fr-picker-choice[aria-checked="true"] .fr-picker-dot {
    background: #ffffff;
}

.fr-picker-choice[aria-checked="true"] .fr-picker-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00b981;
}

.fr-picker-result {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    display: grid;
    gap: 16px;
}

/* Brand panel radii at the .faq-group scale: 120 / 80 / 60 / 100. */
.fr-picker-panel {
    background: #ffffff;
    border-radius: 120px 80px 60px 100px;
    padding: 56px 56px 48px;
}

.fr-picker-panel[hidden] {
    display: none;
}

.fr-picker-panel .fr-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #046b4f;
    margin-bottom: 6px;
}

.fr-picker-panel h3 {
    font-size: 34px;
    line-height: 1.1;
    margin: 0 0 14px;
}

.fr-picker-panel p {
    margin: 0 0 18px;
}

.fr-picker-panel .fr-picker-note {
    display: flex;
    gap: 10px;
    align-items: baseline;
    border-top: 2px solid #f4f3eb;
    padding-top: 16px;
    margin: 6px 0 0;
    font-size: 14px;
}

.fr-picker-note strong {
    white-space: nowrap;
}

@media only screen and (max-width: 1023px) {
    section.two-column-image-text .column-container .column.text-column .inner:has(> .fr-picker) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }
    .fr-picker-result {
        grid-column: 1;
        grid-row: auto;
        margin-top: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .fr-picker-panel {
        border-radius: 60px 40px 30px 50px;
        padding: 36px 28px 30px;
    }
    .fr-picker-panel h3 {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fr-picker-choice {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   10. /fresh-raw/ only — #inside, the range module.

   section.ranges-slider-module already carries background #f4f3eb and the whole
   swiper layout, so this band needs almost nothing. Two things:

   The compiled stylesheet caps an open accordion at max-height:500px, which
   looked like a risk for the typical-analysis panels. Measured on the built
   page: the theme's own JS writes max-height inline at the panel's exact
   scrollHeight (460px and 416px for the two analysis panels, tables included),
   so the 500px rule never applies and nothing is clipped. No override needed —
   recorded here so the next person does not re-derive it.
   --------------------------------------------------------------------------- */

/* range_module intro. The title-container is centred and margin-bottom:60px sits
   under the h2, so the paragraph needs its own rhythm between the two. */
section.ranges-slider-module .container .title-container .range-intro {
    max-width: 660px;
    margin: 16px auto 0;
    line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   11. /fresh-raw/ only — fixes found by measuring the built page, 2026-09-24.
   --------------------------------------------------------------------------- */

/* a) The hero h1 inherits the theme's 48px. Sized to sit inside the white
   hero panel (mock option A) without overflowing a phone. */
body.fresh-raw section.banner-block .banner-image-button-container h1.title {
    font-size: clamp(36px, 5.4vw, 64px);
}

/* b) The Society Kitchen band had no padding of its own — .fr-kitchen-module
   was written when the band was expected to carry a video grid that supplied
   its own height. With the videos still outstanding the band collapsed to 118px
   and read as broken. */
.fr-kitchen-module {
    padding: 84px 0;
}

.fr-kitchen-module .container > h2.title {
    margin-bottom: 10px;
}

.fr-kitchen-module .container > p.p-medium {
    max-width: 760px;
    line-height: 1.7;
}

@media only screen and (max-width: 767px) {
    .fr-kitchen-module {
        padding: 56px 0;
    }
}

/* c) #join is a newsletter_module band that reuses the footer strip's own
   markup and styles (templates/partials/_newsletter-signup.php). The earlier
   #join form panel and WPForms button rules are removed — left behind, they
   would restyle that strip.

   One adjustment: the strip's 680px column wraps "Membership is free.
   Standards are not negotiable." to three lines, stranding "negotiable.".
   The heading gets the width to break after "Standards", as the mock does;
   the subtext keeps the strip's own measure. */
body.fresh-raw #join .newsletter-signup-inner {
    max-width: 860px;
}

body.fresh-raw #join .newsletter-heading {
    text-wrap: balance;
}

body.fresh-raw #join .newsletter-subtext {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* d) Centring and line length, per band.

   Measured on the built page at 1385px: the #serve intro was running the full
   1285px at 16px — about 161 characters a line, roughly twice a readable
   measure. Prose gets an explicit cap; the card row and the button row keep the
   full width. */
body.fresh-raw #where .column.text-column .inner {
    text-align: center;
}

body.fresh-raw #where .fr-button-row {
    justify-content: center;
}

/* Prose caps.
   Heading caps are set from each heading's MEASURED single-line width at 48px,
   not from a round number: at 760px "…put on top?" stranded "top?" on its own
   line and "…supermarket fridge" stranded "fridge". Measured naturals are 874px
   and 807px, so the caps clear them. */
body.fresh-raw #where h2.title {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

body.fresh-raw #where .text-container {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

body.fresh-raw #kitchen .container > p.p-medium {
    max-width: 760px;
}

/* e) Removed 2026-09-28: the closer pill. The band repeated the footer's
   "The only rule is that dogs rule" and read as a button. */