/**
* FFA Patterns — block styles.
* All colours/spacing pull from theme.json presets (--wp--preset--*), so the
* brand stays the single source of truth in the ffa-brand theme.
*/
/* -------------------------------------------------------------------------
* Filter panel (core/group is-style-ffa-panel) — sticky sidebar chrome
* ---------------------------------------------------------------------- */
.wp-block-group.is-style-ffa-panel {
background: var(--wp--preset--color--white);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--corduroy) 25%, transparent);
border-top: 4px solid var(--wp--preset--color--ffa-blue);
padding: 1.25rem 1.25rem 1.5rem;
}
.wp-block-group.is-style-ffa-panel :where(h2, h3) {
color: var(--wp--preset--color--ffa-blue);
margin: 0 0 0.5rem;
}
.wp-block-group.is-style-ffa-panel h3 {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--corduroy) 18%, transparent);
font-size: 0.95rem;
letter-spacing: 0.06em;
}
/* -------------------------------------------------------------------------
* Facet (elasticpress/facet is-style-ffa-filter)
* ---------------------------------------------------------------------- */
.wp-block-elasticpress-facet.is-style-ffa-filter .terms .inner {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Hide EP's per-facet term-search box (read as a confusing extra search) — the
* facet lists are short enough, and the sidebar has one global search instead. */
.wp-block-elasticpress-facet.is-style-ffa-filter input[type="search"],
.wp-block-elasticpress-facet.is-style-ffa-filter .ep-facet-search,
.wp-block-elasticpress-facet.is-style-ffa-filter .facet-search {
display: none;
}
/* -------------------------------------------------------------------------
* Archive search box (top of the filter sidebar).
* ---------------------------------------------------------------------- */
.ffa-archive-search {
display: flex;
margin-bottom: 1.25rem;
}
/* Top placement: an ordinary constrained child, so its left edge lands on the
* same content frame as the hero and the brief body.
*
* ⚠️ This used to cap the FORM at 520px, and that cap was the whole problem: a
* small box is exactly what core's constrained-layout auto margins centre, so
* the bar floated in the middle of the page while everything around it was left
* aligned. The obvious fixes are traps — `margin-left: 0 !important` and
* `max-width: none` both snap the left edge to the PAGE padding (48px at every
* width) rather than to the content frame, which is 41/48/253/573px at
* 1024/1440/1920/2560. Capping the input group instead lets the form inherit
* content-size, centre as a 1400px box, and land on the frame at every width.
*
* The old comment here claimed a double class beat the constrained-layout rule
* "loaded later". The specificity was right and the load order backwards —
* ffa-patterns.css is the EARLIER sheet, WP's global styles are inline and come
* after — so the inline half of that margin never applied at all. Removed
* rather than left to look load-bearing. */
.ffa-archive-search.ffa-archive-search--top {
max-width: var(--wp--style--global--content-size);
margin-bottom: var(--wp--preset--spacing--40);
}
/* ElasticPress wraps the input in a div at RUNTIME, so the input stops being a
* flex item of the form and its `flex: 1` goes inert — it falls back to its
* intrinsic ~264px while still looking correctly styled, because the descendant
* padding/border/font declarations all still apply. Invisible in the served
* HTML: curl shows the input as a direct child of the form, and only a real
* browser shows the wrapper. The cap and the growth therefore both belong on
* the wrapper. */
.ffa-archive-search > .ep-autosuggest-container {
flex: 0 1 465px;
min-width: 0;
display: flex;
}
.ffa-archive-search .ep-autosuggest-container input[type="search"] {
width: 100%;
}
/* Fallback for the un-wrapped case: EP may not be active, and the wrapper could
* appear or vanish with an EP release. Anything that is not the button grows. */
.ffa-archive-search > *:not(button) {
flex: 1;
min-width: 0;
}
.ffa-archive-search input[type="search"] {
min-width: 0;
font-family: var(--wp--preset--font-family--sans);
/* Was 0.9rem/0.5rem: cramped, and below the 16px at which iOS Safari stops
zooming the viewport on focus. */
font-size: 1rem;
padding: 0.7rem 0.9rem;
border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--corduroy) 30%, transparent);
border-right: 0;
border-radius: 9px 0 0 9px;
}
.ffa-archive-search input[type="search"]:focus {
outline: none;
border-color: var(--wp--preset--color--ffa-blue);
}
.ffa-archive-search button {
border: 0;
border-radius: 0 9px 9px 0;
/* Matches the taller input so the two halves stay flush. */
padding: 0 1.15rem;
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
background: var(--wp--preset--color--steel);
color: var(--wp--preset--color--white);
}
.wp-block-elasticpress-facet.is-style-ffa-filter .term {
margin: 0;
font-family: var(--wp--preset--font-family--sans);
font-size: 0.95rem;
}
.wp-block-elasticpress-facet.is-style-ffa-filter .term.level-1 {
margin-left: 1.1rem;
}
.wp-block-elasticpress-facet.is-style-ffa-filter .term a {
display: flex;
align-items: center;
max-width: 100%;
gap: 0.6rem;
padding: 0.4rem 0.55rem;
color: var(--wp--preset--color--ink);
text-decoration: none;
border-radius: 0;
transition: background-color 0.12s ease, color 0.12s ease;
}
.wp-block-elasticpress-facet.is-style-ffa-filter .term a:hover {
background: var(--wp--preset--color--paper);
color: var(--wp--preset--color--ffa-blue);
}
/* Square brand checkbox */
.wp-block-elasticpress-facet.is-style-ffa-filter .ep-checkbox {
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 2px solid color-mix(in srgb, var(--wp--preset--color--corduroy) 55%, transparent);
background: var(--wp--preset--color--white);
border-radius: 0;
position: relative;
}
/* Count, pushed to the right */
.wp-block-elasticpress-facet.is-style-ffa-filter .term a span {
flex: 0 0 auto;
white-space: nowrap;
margin-left: auto;
font-size: 0.8rem;
color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
font-variant-numeric: tabular-nums;
}
/* Selected → reads as an active steel "chip" */
.wp-block-elasticpress-facet.is-style-ffa-filter .term.selected a {
background: color-mix(in srgb, var(--wp--preset--color--steel) 12%, transparent);
color: var(--wp--preset--color--steel);
font-weight: 700;
}
.wp-block-elasticpress-facet.is-style-ffa-filter .term.selected .ep-checkbox {
background: var(--wp--preset--color--steel);
border-color: var(--wp--preset--color--steel);
}
.wp-block-elasticpress-facet.is-style-ffa-filter .term.selected .ep-checkbox::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid var(--wp--preset--color--white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.wp-block-elasticpress-facet.is-style-ffa-filter .term.selected a span {
color: color-mix(in srgb, var(--wp--preset--color--steel) 80%, transparent);
}
/* Empty (no results in current set) → dimmed, non-interactive */
.wp-block-elasticpress-facet.is-style-ffa-filter .term.empty-term a {
opacity: 0.4;
cursor: default;
pointer-events: none;
}
/* =========================================================================
* Facet style VARIATION B — "Pills": terms as wrap-around chips, selected
* filled steel. No checkboxes.
* ====================================================================== */
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .terms .inner {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term { margin: 0; }
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .ep-checkbox { display: none; }
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term a {
display: inline-flex;
gap: 0.35rem;
align-items: center;
max-width: 100%;
font-family: var(--wp--preset--font-family--sans);
font-size: 0.82rem;
text-decoration: none;
padding: 0.28rem 0.7rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--corduroy) 30%, transparent);
color: var(--wp--preset--color--ink);
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term a:hover {
border-color: var(--wp--preset--color--steel);
color: var(--wp--preset--color--steel);
}
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term a span {
flex: 0 0 auto;
white-space: nowrap;
font-size: 0.72rem;
color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
font-variant-numeric: tabular-nums;
}
/* Not applicable in the current result set: kept VISIBLE and obviously disabled,
* per the spec — hiding them made the filter list reflow on every click, so a
* chip moved out from under the cursor between reading it and clicking it.
* Muted fill, muted text and a not-allowed cursor, distinct from both the normal
* and the selected chip at a glance. */
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term.empty-term a {
background: var(--wp--preset--color--paper);
border-color: var(--wp--preset--color--line);
color: color-mix(in srgb, var(--wp--preset--color--corduroy) 45%, transparent);
cursor: not-allowed;
pointer-events: none;
}
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term.empty-term a span {
color: color-mix(in srgb, var(--wp--preset--color--corduroy) 35%, transparent);
}
/* AFTER empty-term on purpose: equal specificity, so source order decides. A
* selected term is routinely reported empty as well — filtering to it leaves no
* OTHER documents in its own aggregation — and it was previously caught by the
* `display: none` above. That chip is the only way back out of a filter, so it
* must survive the disabled treatment and stay clickable whatever else is set. */
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term.selected a,
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term.selected.empty-term a {
background: var(--wp--preset--color--steel);
border-color: var(--wp--preset--color--steel);
color: var(--wp--preset--color--white);
font-weight: 700;
cursor: pointer;
pointer-events: auto;
opacity: 1;
}
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term.selected a span,
.wp-block-elasticpress-facet.is-style-ffa-filter-pills .term.selected.empty-term a span {
color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
}
/* =========================================================================
* Facet style VARIATION C — "Minimal": plain rows, no checkbox, selected =
* bold steel with a left accent bar. Editorial/clean.
* ====================================================================== */
.wp-block-elasticpress-facet.is-style-ffa-filter-min .terms .inner {
display: flex;
flex-direction: column;
}
.wp-block-elasticpress-facet.is-style-ffa-filter-min .term { margin: 0; }
.wp-block-elasticpress-facet.is-style-ffa-filter-min .term.level-1 { margin-left: 1rem; }
.wp-block-elasticpress-facet.is-style-ffa-filter-min .ep-checkbox { display: none; }
.wp-block-elasticpress-facet.is-style-ffa-filter-min .term a {
display: flex;
align-items: center;
max-width: 100%;
gap: 0.5rem;
font-family: var(--wp--preset--font-family--sans);
font-size: 0.95rem;
text-decoration: none;
color: var(--wp--preset--color--ink);
padding: 0.32rem 0 0.32rem 0.6rem;
border-left: 3px solid transparent;
}
.wp-block-elasticpress-facet.is-style-ffa-filter-min .term a:hover { color: var(--wp--preset--color--ffa-blue); }
.wp-block-elasticpress-facet.is-style-ffa-filter-min .term a span {
flex: 0 0 auto;
white-space: nowrap;
margin-left: auto;
font-size: 0.8rem;
color: color-mix(in srgb, var(--wp--preset--color--ink) 50%, transparent);
font-variant-numeric: tabular-nums;
}
.wp-block-elasticpress-facet.is-style-ffa-filter-min .term.selected a {
font-weight: 700;
color: var(--wp--preset--color--steel);
border-left-color: var(--wp--preset--color--steel);
}
.wp-block-elasticpress-facet.is-style-ffa-filter-min .term.empty-term a {
opacity: 0.4;
pointer-events: none;
}
/* -------------------------------------------------------------------------
* Result cards (core/post-template is-style-ffa-card-grid)
* ---------------------------------------------------------------------- */
.wp-block-post-template.is-style-ffa-card-grid {
gap: 1.5rem;
}
.wp-block-post-template.is-style-ffa-card-grid > li {
display: flex;
flex-direction: column;
background: var(--wp--preset--color--white);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--corduroy) 18%, transparent);
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-post-template.is-style-ffa-card-grid > li:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
}
.wp-block-post-template.is-style-ffa-card-grid .ffa-card__media {
margin: 0;
}
.wp-block-post-template.is-style-ffa-card-grid .ffa-card__media img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.wp-block-post-template.is-style-ffa-card-grid .ffa-card__title {
margin: 0;
padding: 0.85rem 1rem 1.1rem;
font-family: var(--wp--preset--font-family--sans);
font-weight: 700;
text-transform: none;
letter-spacing: 0;
line-height: 1.3;
font-size: 1.02rem;
}
.wp-block-post-template.is-style-ffa-card-grid .ffa-card__title a {
color: var(--wp--preset--color--ffa-blue);
text-decoration: none;
}
.wp-block-post-template.is-style-ffa-card-grid > li:hover .ffa-card__title a {
color: var(--wp--preset--color--steel);
}
/* Card excerpt/description — padded + smaller so it doesn't crowd the card. */
.wp-block-post-template.is-style-ffa-card-grid .wp-block-post-excerpt {
margin: 0;
padding: 0 1rem 1.1rem;
font-size: 0.9rem;
line-height: 1.5;
color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
}
/* Card taxonomy pills — steel chips under the media/title. */
.wp-block-post-template.is-style-ffa-card-grid .ffa-card__pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0;
padding: 0.9rem 1rem 0;
font-size: 0;
}
.wp-block-post-template.is-style-ffa-card-grid .ffa-card__pills a {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
padding: 0.2rem 0.6rem;
border-radius: 999px;
background: color-mix(in srgb, var(--wp--preset--color--steel) 12%, transparent);
color: var(--wp--preset--color--steel);
}
/* Pills present → tighten the title's top padding. */
.wp-block-post-template.is-style-ffa-card-grid .ffa-card__pills + .ffa-card__title {
padding-top: 0.5rem;
}
/* -------------------------------------------------------------------------
* Sticky filter sidebar. The faceting panel lives in a flex column that
* stretches to the row height, which stops the inner panel from sticking — so
* make the COLUMN itself sticky (sized to its content).
* ---------------------------------------------------------------------- */
.wp-block-columns .wp-block-column:has(> .is-style-ffa-panel) {
align-self: flex-start;
position: sticky;
top: 100px;
}
/* -------------------------------------------------------------------------
* Brand icons (recolorable via CSS mask — currentColor tints them)
* ---------------------------------------------------------------------- */
.ffa-icon{display:inline-block;width:1em;height:1em;background-color:currentColor;
-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;vertical-align:-0.125em}
.ffa-icon--advocacy{-webkit-mask-image:url(icons/ico-advocacy-s.svg);mask-image:url(icons/ico-advocacy-s.svg)}
.ffa-icon--ag-smile{-webkit-mask-image:url(icons/ico-ag-smile-s.svg);mask-image:url(icons/ico-ag-smile-s.svg)}
.ffa-icon--apple{-webkit-mask-image:url(icons/ico-apple-s.svg);mask-image:url(icons/ico-apple-s.svg)}
.ffa-icon--beaker{-webkit-mask-image:url(icons/ico-beaker-s.svg);mask-image:url(icons/ico-beaker-s.svg)}
.ffa-icon--bee{-webkit-mask-image:url(icons/ico-bee-s.svg);mask-image:url(icons/ico-bee-s.svg)}
.ffa-icon--books{-webkit-mask-image:url(icons/ico-books-s.svg);mask-image:url(icons/ico-books-s.svg)}
.ffa-icon--boot-prints{-webkit-mask-image:url(icons/ico-boot-prints-s.svg);mask-image:url(icons/ico-boot-prints-s.svg)}
.ffa-icon--cans{-webkit-mask-image:url(icons/ico-cans-s.svg);mask-image:url(icons/ico-cans-s.svg)}
.ffa-icon--care{-webkit-mask-image:url(icons/ico-care-s.svg);mask-image:url(icons/ico-care-s.svg)}
.ffa-icon--citrus{-webkit-mask-image:url(icons/ico-citrus-s.svg);mask-image:url(icons/ico-citrus-s.svg)}
.ffa-icon--community{-webkit-mask-image:url(icons/ico-community-s.svg);mask-image:url(icons/ico-community-s.svg)}
.ffa-icon--corn{-webkit-mask-image:url(icons/ico-corn-s.svg);mask-image:url(icons/ico-corn-s.svg)}
.ffa-icon--dna{-webkit-mask-image:url(icons/ico-dna-s.svg);mask-image:url(icons/ico-dna-s.svg)}
.ffa-icon--eggs{-webkit-mask-image:url(icons/ico-eggs-s.svg);mask-image:url(icons/ico-eggs-s.svg)}
.ffa-icon--fish{-webkit-mask-image:url(icons/ico-fish-s.svg);mask-image:url(icons/ico-fish-s.svg)}
.ffa-icon--gavel{-webkit-mask-image:url(icons/ico-gavel-s.svg);mask-image:url(icons/ico-gavel-s.svg)}
.ffa-icon--globe{-webkit-mask-image:url(icons/ico-globe-s.svg);mask-image:url(icons/ico-globe-s.svg)}
.ffa-icon--gps{-webkit-mask-image:url(icons/ico-gps-s.svg);mask-image:url(icons/ico-gps-s.svg)}
.ffa-icon--jacket{-webkit-mask-image:url(icons/ico-jacket-s.svg);mask-image:url(icons/ico-jacket-s.svg)}
.ffa-icon--lightbulb{-webkit-mask-image:url(icons/ico-lightbulb-s.svg);mask-image:url(icons/ico-lightbulb-s.svg)}
.ffa-icon--mag-glass{-webkit-mask-image:url(icons/ico-mag-glass-s.svg);mask-image:url(icons/ico-mag-glass-s.svg)}
.ffa-icon--paintbrush{-webkit-mask-image:url(icons/ico-paintbrush-s.svg);mask-image:url(icons/ico-paintbrush-s.svg)}
.ffa-icon--paws{-webkit-mask-image:url(icons/ico-paws-s.svg);mask-image:url(icons/ico-paws-s.svg)}
.ffa-icon--peas{-webkit-mask-image:url(icons/ico-peas-s.svg);mask-image:url(icons/ico-peas-s.svg)}
.ffa-icon--pennant{-webkit-mask-image:url(icons/ico-pennant-s.svg);mask-image:url(icons/ico-pennant-s.svg)}
.ffa-icon--pig{-webkit-mask-image:url(icons/ico-pig-s.svg);mask-image:url(icons/ico-pig-s.svg)}
.ffa-icon--plate{-webkit-mask-image:url(icons/ico-plate-s.svg);mask-image:url(icons/ico-plate-s.svg)}
.ffa-icon--rain{-webkit-mask-image:url(icons/ico-rain-s.svg);mask-image:url(icons/ico-rain-s.svg)}
.ffa-icon--recycle{-webkit-mask-image:url(icons/ico-recycle-s.svg);mask-image:url(icons/ico-recycle-s.svg)}
.ffa-icon--shield{-webkit-mask-image:url(icons/ico-shield-s.svg);mask-image:url(icons/ico-shield-s.svg)}
.ffa-icon--sprout{-webkit-mask-image:url(icons/ico-sprout-s.svg);mask-image:url(icons/ico-sprout-s.svg)}
.ffa-icon--sun{-webkit-mask-image:url(icons/ico-sun-s.svg);mask-image:url(icons/ico-sun-s.svg)}
.ffa-icon--tools{-webkit-mask-image:url(icons/ico-tools-s.svg);mask-image:url(icons/ico-tools-s.svg)}
.ffa-icon--tractor{-webkit-mask-image:url(icons/ico-tractor-s.svg);mask-image:url(icons/ico-tractor-s.svg)}
.ffa-icon--tshirt{-webkit-mask-image:url(icons/ico-tshirt-s.svg);mask-image:url(icons/ico-tshirt-s.svg)}
/* Hero Cover min-height — kept in CSS (not the block attribute) so a responsive
* clamp() can be used; the Cover block only accepts a numeric min-height, and
* baking clamp() into the saved markup breaks block validation. */
.wp-block-cover.is-style-ffa-frame{min-height:clamp(24rem, 55vh, 34rem)}
/* -------------------------------------------------------------------------
* Banner frame (core/group|core/cover is-style-ffa-frame) — hairline + ticks
* ---------------------------------------------------------------------- */
.is-style-ffa-frame{position:relative}
.is-style-ffa-frame > :where(.wp-block-group__inner-container, .wp-block-cover__inner-container, *){position:relative;z-index:1}
.is-style-ffa-frame::before{content:"";position:absolute;inset:18px;border:1.5px solid currentColor;opacity:.55;pointer-events:none;z-index:0}
.is-style-ffa-frame::after{content:"";position:absolute;inset:18px;pointer-events:none;z-index:0;
background:
linear-gradient(var(--wp--preset--color--ffa-yellow,#F2CE1B),var(--wp--preset--color--ffa-yellow,#F2CE1B)) left top/18px 2px no-repeat,
linear-gradient(var(--wp--preset--color--ffa-yellow,#F2CE1B),var(--wp--preset--color--ffa-yellow,#F2CE1B)) left top/2px 18px no-repeat,
linear-gradient(var(--wp--preset--color--ffa-yellow,#F2CE1B),var(--wp--preset--color--ffa-yellow,#F2CE1B)) right bottom/18px 2px no-repeat,
linear-gradient(var(--wp--preset--color--ffa-yellow,#F2CE1B),var(--wp--preset--color--ffa-yellow,#F2CE1B)) right bottom/2px 18px no-repeat}
/* -------------------------------------------------------------------------
* Section dividers (core/separator)
* Line art used as a divider (not a section background). Two selectors:
* - TYPE -> block style: Wave / Diagonal / Dots
* - ALIGN -> the separator's native Align control: left / center / right
* (left/right added to core/separator in ffa-patterns.php).
* ---------------------------------------------------------------------- */
.wp-block-separator[class*="is-style-ffa-divider"] {
border: 0;
opacity: 1;
height: auto;
min-height: 40px; /* thickness; overridden by the editor's Min height */
width: clamp(140px, 22vw, 240px);
margin-block: var(--wp--preset--spacing--50);
margin-inline: auto;
color: color-mix(in srgb, var(--wp--preset--color--corduroy) 55%, transparent);
}
/* Wave — stacked wave lines tiled into a band (water) */
.wp-block-separator.is-style-ffa-divider {
background-color: currentColor;
-webkit-mask: left center / auto 11px repeat;
mask: left center / auto 11px repeat;
-webkit-mask-image: url(motifs/motif-divider-wave.svg);
mask-image: url(motifs/motif-divider-wave.svg);
}
/* Diagonal — parallel rows filling the band (crop rows) */
.wp-block-separator.is-style-ffa-divider-diagonal {
background: repeating-linear-gradient(115deg, currentColor 0 2px, transparent 2px 11px);
}
/* Dots — a grid filling the band (aerial orchard / garden) */
.wp-block-separator.is-style-ffa-divider-dots {
background: radial-gradient(circle at center, currentColor 0 2.4px, transparent 2.9px) left center / 17px 17px repeat;
}
/* Alignment from the native Align control — margins, not float.
* Left/right snap to the MAIN content column's edges even inside a full-bleed
* (alignfull) section: the inset is half the gap between the container width and
* the content width, so the divider lines up with main rather than the viewport
* edge. In a normal constrained column that gap is 0, so default cases are
* unchanged; max(0px, …) guards narrow viewports. */
.wp-block-separator[class*="is-style-ffa-divider"].alignleft {
float: none;
margin-inline: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) auto;
}
.wp-block-separator[class*="is-style-ffa-divider"].aligncenter {
margin-inline: auto;
}
.wp-block-separator[class*="is-style-ffa-divider"].alignright {
float: none;
margin-inline: auto max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}
/* Dot motif accent */
.ffa-dots{display:inline-grid;grid-template-columns:repeat(5,6px);gap:6px}
.ffa-dots span{width:6px;height:6px;border-radius:50%;background:currentColor}
/* -------------------------------------------------------------------------
* Newspaper text columns (core/group is-style-ffa-text-columns-2 / -3)
* One continuous flow (reading order stays linear); stacks to a SINGLE
* column at the mobile breakpoint rather than reflowing 3 -> 2 -> 1.
* ---------------------------------------------------------------------- */
.wp-block-group.is-style-ffa-text-columns-2,
.wp-block-group.is-style-ffa-text-columns-3 {
column-gap: var(--wp--preset--spacing--50, 2rem);
}
.wp-block-group.is-style-ffa-text-columns-2 { column-count: 2; }
.wp-block-group.is-style-ffa-text-columns-3 { column-count: 3; }
/* Keep the first block flush to the top of column one */
.wp-block-group.is-style-ffa-text-columns-2 > :first-child,
.wp-block-group.is-style-ffa-text-columns-3 > :first-child { margin-top: 0; }
/* Don't split headings/media/lists across a column break; keep a heading with
the text that follows it. Paragraphs still flow across columns. */
.wp-block-group.is-style-ffa-text-columns-2 :where(h2, h3, h4, figure, img, ul, ol, blockquote),
.wp-block-group.is-style-ffa-text-columns-3 :where(h2, h3, h4, figure, img, ul, ol, blockquote) {
break-inside: avoid;
}
.wp-block-group.is-style-ffa-text-columns-2 :where(h2, h3, h4),
.wp-block-group.is-style-ffa-text-columns-3 :where(h2, h3, h4) {
break-after: avoid-column;
}
/* Stack — not collapse — on mobile: one column, single linear flow. */
@media (max-width: 781px) {
.wp-block-group.is-style-ffa-text-columns-2,
.wp-block-group.is-style-ffa-text-columns-3 {
column-count: 1;
}
}
/* ----------------------------------------------------------------------
* Reading measure
*
* These exist as CLASSES, not inline styles, and that is load-bearing.
* Gutenberg validates a block by re-running save() and diffing the result
* against the stored HTML. `max-width` and auto side margins cannot be
* expressed by any core paragraph attribute, so a carrying them inline
* is invalid from the moment it is stored — silently. The next time a human
* opens the page and saves, save() emits its attribute-derived
as a
* WRAPPER around the preserved markup, giving
text
. That is
* illegal HTML, the browser auto-closes the outer tag, and the DOM can never
* match save() again — so "Block contains unexpected or invalid content"
* becomes permanent, and "Attempt recovery" drops the text.
*
* `className` IS a real block attribute, so a class round-trips cleanly.
* Never move these declarations back inline on the .
* ---------------------------------------------------------------------- */
/* Left-aligned lede (FFA Banner Hero). */
.ffa-measure { max-width: 52ch; }
/* Centred supporting copy (FFA Steel CTA Band). */
.ffa-measure-center {
max-width: 54ch;
margin-left: auto;
margin-right: auto;
}