/* =====================================================================
   Algae Foundry theme glue.
   brand.css (generated from brand/tokens.json) defines tokens and components.
   This file only maps WordPress block markup onto those components.
   Use --af-* variables only; no new colours or sizes here.
   ===================================================================== */

/* ---------- Page ---------- */
body.af { margin: 0; position: relative; }
/* Soft ambient light across the top of every page, so the glass header has something to bend. */
body.af::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1100px; background: var(--af-ambient); pointer-events: none; z-index: 0; }
.wp-site-blocks { position: relative; z-index: 1; }
.wp-site-blocks > * { margin-block-start: 0; }
/* WordPress adds a top margin to the 2nd+ child of flow-layout groups; inside our grids that misaligns columns. */
.af :is(.af-footer__inner, .af-footer__cols, .af-stats, .af-hero__lead, .af-product__grid, .af-split__inner, .af-band, .af-recipe__inner, .af-product__sizes) > * { margin: 0; }
.af figure { margin: 0; }
.af .wp-block-image img { height: auto; max-width: 100%; }
.af :where(.af-section, .af-pagehead, .af-hero, .af-product, .af-post, .af-footer, .af-wa-band) { margin-block: 0; }
.is-style-kicker { font: 700 var(--af-kicker-size) / 1.3 var(--af-font-label); letter-spacing: var(--af-kicker-tracking); text-transform: lowercase; color: var(--af-color-green-deep); }
.is-style-label { font: 800 var(--af-fs-label) / var(--af-lh-label) var(--af-font-body); letter-spacing: var(--af-tracking-label); text-transform: uppercase; color: var(--af-color-green-deep); }
.af :where(h1, h2, h3, h4) em { font-style: italic; color: var(--af-color-green); }
.af .af-line-title em { color: var(--af-line-strong); }

/* Buttons: see brand.css (lacquered glass pill, shared with the mockups). */

/* ---------- Header + navigation ---------- */
.af-header { position: relative; z-index: 20; }
.af-nav { gap: 16px; }
.af-nav .wp-block-site-logo img { height: 32px; width: auto; }
.af-nav .wp-block-navigation { font: 700 15px / 1 var(--af-font-body); }
.af-nav .wp-block-navigation ul, .af-nav ul.wp-block-navigation__container { display: flex; }
.af-nav .wp-block-navigation a { color: var(--af-color-ink); text-decoration: none; }
.af-nav .wp-block-navigation__responsive-container-open { font: 800 13px / 1 var(--af-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--af-color-ink); }
.af .wp-block-navigation__responsive-container.is-menu-open { background: var(--af-color-paper) !important; color: var(--af-color-ink) !important; padding: 24px var(--af-gutter); }
.af .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font: 500 var(--af-fs-h3) / 1.2 var(--af-font-display); font-variation-settings: var(--af-font-display-variation); }
@container (min-width: 760px) { .af-nav .wp-block-site-logo img { height: 42px; } }

/* ---------- Hero, panels, art (core/image inside components) ---------- */
.af-hero__art .wp-block-image { position: absolute; inset: 0; }
.af-hero__art .wp-block-image img { width: 100%; height: 100%; object-fit: contain; object-position: center 62%; }
.af-hero__lead > .wp-block-group { margin: 0; }
.af-panel__product img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.af-panel__copy > * { margin-block: 0; }
.af-panel__copy .af-line-title { margin: 6px 0 10px; }
.af-panel__copy p:not(.af-num) { margin-bottom: 16px; }
.af-certs > p { margin: 0; }
.af-certs > p::before { content: "✦"; color: var(--af-color-green); font-style: normal; font-size: 11px; margin-right: 8px; vertical-align: 2px; }

/* ---------- Product card (Query Loop) ---------- */
.af .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.af .wp-block-post-template > li { margin: 0; }
.af-card { margin: 0; }
.af-card__well .wp-block-post-featured-image { position: absolute; inset: 6% 8% 16%; margin: 0; }
.af-card__well .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
/* Product photos are never cropped: override WordPress's inline object-fit: cover. */
.af-card__well .wp-block-post-featured-image img, .af-product__gallery .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: contain !important; }
.af .wp-block-post-featured-image > .af-placeholder { inset: 0; }
.af-card__body > * { margin-block: 0; }
.af-card__body .wp-block-post-title { font-size: var(--af-fs-h4); line-height: 1.1; margin-top: 4px; }
.af-card__body .wp-block-post-title a, .af-postcard .wp-block-post-title a { color: inherit !important; text-decoration: none; }
.af-card__body .wp-block-post-title a:hover { text-decoration: underline; }
.af .af-card__actions { margin-top: auto; padding-top: 10px; gap: 8px; }
.af .af-card__actions .wp-block-button { flex: 1 1 130px; }
.af .af-card__actions .wp-block-button__link { width: 100%; padding-inline: 14px; font-size: 14px; }
.af-panel__actions .wp-block-button { margin: 0; }

/* ---------- Product page ---------- */
.af-product__media > * { margin: 0; }
/* No photo yet: the placeholder sits in the same stage the gallery uses */
.af-product__media > .wp-block-post-featured-image { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: min(70vh, 600px); border-radius: var(--af-radius-card); background: var(--af-line-band); box-shadow: inset 0 -10px 0 var(--af-line-edge); overflow: hidden; }
.af-product__media > .wp-block-post-featured-image > .af-placeholder { inset: 10% 12% 14%; }
.af-product__info > * { margin-block: 0; }
.af-product__buy > * { margin-block: 0; }
.af-product__size > * { margin: 0; }
.af-product__size .af-figure { font-size: var(--af-fs-h4); line-height: 1; }
.af-product__body > * { margin-block: 0; }
.af-pcard > * { margin-block: 0; }
.af-cards > * { margin: 0; }
.af-findus > *, .af-findus__body > *, .af-findus__facts > *, .af-findus__facts > * > * { margin-block: 0; }
.af-range-head > * { margin: 0; }
.af .af-split__media--photo .wp-block-image { position: absolute; inset: 0; }
.af .af-split__media--photo .wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.af .af-facts-table table { width: 100%; border: 0; border-collapse: collapse; border-top: 1px solid var(--af-color-hairline); }
.af .af-facts-table td { padding: 10px 0; border: 0; border-bottom: 1px solid var(--af-color-hairline); font-size: var(--af-fs-small); vertical-align: top; }
.af-facts-table td:first-child { font-weight: 800; width: 32%; padding-right: 20px; }
.af-facts-table figcaption { display: none; }

/* ---------- Stats and steps (block versions) ---------- */
.af-stats > .wp-block-group { margin: 0; }
.af-stats .af-stat__num { display: block; margin: 0; white-space: nowrap; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1; color: var(--af-line-strong); font-family: var(--af-line-numeral-font); font-weight: var(--af-line-numeral-weight); font-variation-settings: var(--af-line-numeral-variation); letter-spacing: -0.01em; }
.af-stats .af-stat__label { display: block; margin: 6px 0 0; font-size: 13px; line-height: 1.3; color: var(--af-color-muted); }
.af-steps li strong { font-size: 30px; line-height: 1; color: var(--af-line-strong); font-family: var(--af-line-numeral-font); font-weight: var(--af-line-numeral-weight); font-variation-settings: var(--af-line-numeral-variation); }

/* ---------- Recipe card ---------- */
.af-recipe__photo .wp-block-image { position: absolute; inset: 0; }
.af-recipe__photo .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.af-recipe__photo { margin: 0; }
.af-recipe__body > * { margin-block: 0; }
.af-recipe__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.af-recipe__meta > p { margin: 0; }

/* ---------- Sections, splits, WhatsApp band ---------- */
.af-section__head > * { margin-block: 0; }
.af-split__media .wp-block-image { position: absolute; inset: 0; }
.af-split__media .wp-block-image img { width: 100%; height: 100%; object-fit: contain; }
.af-split__body > * { margin-block: 0; }
.af-wa-band__card > * { margin-block: 0; }
.af-wa-band__card .wp-block-buttons { justify-content: center; }
.af-pagehead__body > * { margin-block: 0; }
.af-linehead > * { margin-block: 0; }

/* ---------- Filter chips (paragraph of links, or Categories block) ---------- */
.af-filter { margin: 0; }
.af-filter ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.af-filter .wp-block-categories-list li { margin: 0; }

/* ---------- Blog ---------- */
.af-postcard { margin: 0; }
.af-postcard > * { margin-block: 0; }
.af-postcard .wp-block-post-featured-image { position: relative; aspect-ratio: 16 / 10; border-radius: var(--af-radius-lg); overflow: hidden; background: var(--af-color-sand); margin: 0; }
.af-postcard .wp-block-post-featured-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.af-postcard .wp-block-post-featured-image > .af-placeholder { inset: 10%; }
.af-postcard .wp-block-post-excerpt { font-size: var(--af-fs-small); color: var(--af-color-muted); margin: 0; }
.af-postcard .wp-block-post-excerpt__more-link { display: none; }
.af-post__head > * { margin-block: 0; }
.af-post__meta > * { margin: 0; }
.wp-block-post-featured-image.af-post__cover { position: relative; }
.wp-block-post-featured-image.af-post__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-block-post-content.af-post__body { display: block; }
.wp-block-post-content.af-post__body > * + * { margin-block-start: 20px; }
.af-post__body > .af-post__byline { margin-top: 20px; }
.af-post__byline .wp-block-post-author { display: flex; align-items: center; gap: 14px; margin: 0; }
.af-post__byline .wp-block-post-author__avatar img { border-radius: 50%; }
.af-post__byline .wp-block-post-author__name { font-weight: 800; }
.af-post__byline .wp-block-post-author__bio { font-size: var(--af-fs-small); }
.af .wp-block-query-pagination { margin-top: 32px; gap: 12px; font-weight: 700; }

/* ---------- Footer ---------- */
.af-footer .wp-block-site-logo img { height: 46px; width: auto; }
.af-footer__brand > *, .af-footer__cols > .wp-block-group > * { margin-block: 0; }
.af-footer__brand, .af-footer__cols > .wp-block-group { display: grid; gap: 10px; align-content: start; }
.af-footer .wp-block-buttons { flex-direction: column; align-items: flex-start; gap: 8px; }
.af .af-footer .is-style-text-link > .wp-block-button__link { border-bottom: 0; padding: 0; color: var(--af-color-ink); font-weight: 400; font-size: var(--af-fs-small); }
.af-footer__base > p { margin: 0; }

/* ---------- Editor only: keep locked patterns readable while editing ---------- */
.editor-styles-wrapper .af-panel__copy, .editor-styles-wrapper .af-card__body { background: rgba(255, 255, 255, .85); }

/* ---------- Pattern helpers ---------- */
.af-range-photo { border-radius: var(--af-radius-card); overflow: hidden; background: var(--af-color-sand); }
.af-range-photo img { width: 100%; height: auto; display: block; }
.af-centered { text-align: center; display: grid; gap: 14px; justify-items: center; }
.af-centered > * { margin: 0; }
.af-centered .wp-block-buttons { justify-content: center; }

/* ---------- Home hero line-up: raceway current behind the range photo, product hotspots on top ---------- */
.af-hero__art.af-lineup { aspect-ratio: 2000 / 787; width: 100%; max-width: 1180px; margin: 18px auto 34px; isolation: isolate; }
.af-lineup .af-pebble { display: none; }
.af-lineup .wp-block-image { z-index: 1; margin: 0; }
.af-lineup .wp-block-image img { object-position: center; filter: drop-shadow(0 18px 22px rgba(30, 42, 34, .16)); animation: af-lineup-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
/* With the line-up the hero is one centred column: headline, then the stage across the page. */
.af-hero__lead:has(> .af-lineup) { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-bottom: 12px; gap: 8px; }
.af-hero__lead:has(> .af-lineup) > .wp-block-group:first-child { max-width: 860px; }
@container (min-width: 760px) { .af-hero__lead:has(> .af-lineup) > .wp-block-group:first-child h1 { font-size: clamp(44px, 5.4cqw, 76px); } }

.af-lineup__current { position: absolute; z-index: 0; left: 50%; top: 50%; width: 150cqw; max-width: 2000px; transform: translate(-50%, -50%); pointer-events: none; }
.af-lineup__current svg { display: block; width: 100%; height: auto; overflow: visible; }
.af-lineup__current rect { fill: none; stroke-linecap: round; animation: af-current linear infinite; }
@keyframes af-current { to { stroke-dashoffset: -1000; } }
@keyframes af-lineup-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }

.af-lineup__spots { position: absolute; inset: 0; z-index: 2; }
.af-lineup__all { position: absolute; inset: 0; }
.af-spot { position: absolute; display: none; border-radius: 28px; }
.af-spot::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(21, 132, 66, .45), transparent); opacity: 0; transform: scaleX(.6); transition: opacity .25s, transform .35s; }
.af-spot__tip { position: absolute; left: 50%; top: 12%; width: max-content; max-width: 240px; display: grid; gap: 3px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 14px 34px rgba(30, 42, 34, .18); color: var(--af-color-ink); font: 400 14px / 1.35 var(--af-font-body); text-align: left; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .25s; pointer-events: none; }
.af-spot__tip strong { font: 600 16px / 1.25 var(--af-font-display); font-variation-settings: var(--af-font-display-variation); }
.af-spot__tip span { color: var(--af-color-muted); }
.af-spot__tip em { font-style: normal; font-weight: 700; color: var(--af-color-green-deep); margin-top: 4px; }
.af-spot:is(:hover, :focus-visible) .af-spot__tip { opacity: 1; transform: translate(-50%, 0); }
.af-spot:is(:hover, :focus-visible)::after { opacity: 1; transform: scaleX(1); }
.af-spot:focus-visible { outline: 2px solid var(--af-color-green); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .af-spot { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .af-lineup__current rect, .af-lineup .wp-block-image img { animation: none; }
}

/* ---------- Two stories side by side (About: the farm and quality) ---------- */
.af-duo { display: grid; gap: 48px; }
.af-duo > * { margin: 0; }
.af-duo__col { display: grid; gap: 24px; align-content: start; }
.af-duo__col > * { margin: 0; }
.af .af-duo__media { aspect-ratio: 4 / 3; }
@media (min-width: 800px) { .af-duo { grid-template-columns: 1fr 1fr; gap: 40px 48px; } }
.af-duo .af-section__head { display: contents; }

/* ---------- Top bar menu: glass pills with icons, large tap targets ---------- */
.af-nav .wp-block-navigation .wp-block-navigation__container { gap: 6px; }
.af-nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px 0 16px; border-radius: var(--af-radius-pill); font: 700 16px / 1 var(--af-font-body); border: 1px solid transparent; transition: background-color .2s, box-shadow .2s, border-color .2s, transform .2s; }
.af-nav .wp-block-navigation-item__content::before { content: ""; flex: none; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--af-nav-icon, none) center / contain no-repeat; mask: var(--af-nav-icon, none) center / contain no-repeat; opacity: .85; }
.af-nav .wp-block-navigation-item__content:not([href*="/shop"]):not([href*="/about"]):not([href*="/blog"]):not([href*="/contact"])::before { display: none; }
.af-nav .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(30, 42, 34, .05), 0 6px 18px rgba(30, 42, 34, .10); transform: translateY(-1px); }
.af-nav .wp-block-navigation-item__content[aria-current="page"] { background: rgba(21, 132, 66, .11); border-color: rgba(21, 132, 66, .18); color: var(--af-color-green-deep) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.af-nav .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--af-color-green); outline-offset: 2px; }
.af-nav .wp-block-navigation-item__content[href*="/shop"] { --af-nav-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12H6.2L5 8z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E"); }
.af-nav .wp-block-navigation-item__content[href*="/about"] { --af-nav-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13C12 8.5 8.5 5 3.5 5c0 4.5 3.5 8 8.5 8z'/%3E%3Cpath d='M12 11c0-4 3-7 8.5-7 0 4.5-3.5 7-8.5 7z'/%3E%3C/svg%3E"); }
.af-nav .wp-block-navigation-item__content[href*="/blog"] { --af-nav-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z'/%3E%3Cpath d='M14.5 7.5l2 2'/%3E%3C/svg%3E"); }
.af-nav .wp-block-navigation-item__content[href*="/contact"] { --af-nav-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-11.6 7.1L4 20l1-4.2A8 8 0 1 1 20 12z'/%3E%3C/svg%3E"); }
/* Phone: a round glass menu button and a big, icon-led menu. */
@media (max-width: 599px) { .af-nav .wp-block-navigation__responsive-container-open { display: inline-grid; } }
.af-nav .wp-block-navigation__responsive-container-open { min-width: 48px; min-height: 48px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 14px rgba(30, 42, 34, .10); }
.af .wp-block-navigation__responsive-container-close { min-width: 48px; min-height: 48px; display: grid; place-items: center; }
.af .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 8px; width: 100%; }
.af .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.af .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: 100%; min-height: 60px; padding: 0 20px; gap: 14px; font: 500 var(--af-fs-h3) / 1.2 var(--af-font-display); background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 4px 14px rgba(30, 42, 34, .06); }
.af .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before { width: 24px; height: 24px; }

/* Hero headline: "From Nutrition to Wellness." always starts its own line. */
.af-hero__lead h1.af-display em { display: block; }
.af-hero__lead:has(> .af-lineup) { padding-top: 36px; }
@container (min-width: 760px) { .af-nav { padding-block: 8px; padding-right: 10px; } }
/* The glass blur and the header's container query both trap position:fixed children, which kept the
   phone menu inside the bar. Release them while the menu is open so it covers the screen. */
.af-header:has(.is-menu-open) { container-type: normal; }
.af-nav:has(.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.af .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] { background: rgba(21, 132, 66, .11); border-color: rgba(21, 132, 66, .18); color: var(--af-color-green-deep) !important; }
.af-footer__brand .wp-block-site-logo { margin-bottom: 14px; }