/* =========================================================================
   THE THEME SHELL

   Everything on the site that the Befello templates and components do NOT
   render: the header, the navigation, the mobile menu, forms, search,
   pagination, widgets, comments, the footer, and the assorted WordPress and
   GeneratePress defaults that appear wherever nobody has designed anything.

   WHAT THIS FILE IS NOT ALLOWED TO TOUCH

   The finished components. Not the Opportunity or Essay templates, not their
   cards or grids or archives, not befello-discovery, not Insider Tips. Every
   generic element rule below therefore carries an exclusion guard —

       :not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"])
       :not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"])
       :not([class*="bfoa"])

   — the last of which covers the homepage's Custom HTML block, whose
   components all carry the bf- prefix. Without it the shell's generic
   <button> sweep reached the hero's share control and gave it the shell's
   corner while the two anchors beside it kept the homepage's own.

   — so a control that belongs to a designed component is never reached by a
   rule written for a stray one. Everything else here is anchored on a
   GeneratePress or WordPress class name, which cannot collide with ours.

   HOW IT WINS WITHOUT !important

   GeneratePress paints its defaults from two places: the parent stylesheet,
   and the Customizer, which prints INLINE IN wp_head after every enqueued
   stylesheet using selectors like `button:not(.menu-toggle)` — (0,1,1),
   which outranks a single class whatever the load order.

   This sheet is enqueued with the parent handle as a DEPENDENCY, so
   WordPress prints it after that inline block. Equal specificity then wins
   on source order, and the selectors here deliberately sit at the same
   weight as the parent's rather than above it: that keeps every component
   class in the project able to override this file, which is the direction
   the cascade should run.

   TWO GENERATIONS OF MARKUP

   GeneratePress 3.x lays the navigation out with flexbox and calls the right
   hand group `.menu-bar-items`; the older generation floats and calls it
   `.mobile-bar-items`. Both sets of hooks are addressed below, because the
   supplied parent files contain both and nothing here proves which one the
   site is running. The rules are written so the unused half is inert.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Shell tokens

   Aliases only. Nothing here invents a value — the palette, the spacing
   scale, the radii and the motion curve all resolve through the --bf-* layer
   to the same primitives the components use. Changing the shell's rhythm is
   one declaration here, not forty below.
   ------------------------------------------------------------------------- */

:root {
	--bfs-header-h: 76px;
	--bfs-header-h-mobile: 64px;

	/* THE LOGO IS SIZED BY WIDTH, which is how WordPress and the
	   GeneratePress Customizer both think about it, and how a wordmark
	   actually behaves: its height follows from its own aspect ratio.
	   Change this one value to resize the logo everywhere. */
	--bfs-logo-w: 90px;
	--bfs-gutter: clamp(20px, 3vw, 40px);

	/* A navigation row is a control, so it is sized like one: 40px is the
	   pill's height, and the 44px WCAG target is made up by the row's own
	   vertical padding inside a 76px header. */
	--bfs-nav-item-h: 40px;
	--bfs-nav-gap: 2px;

	--bfs-drawer-w: min(86vw, 360px);
	--bfs-drawer-row-h: 56px;

	/* HOW FAR DOWN A FIXED OVERLAY HAS TO START.
	   Zero for a visitor, which is everyone who is not signed in, so nothing
	   below pays for the admin bar. The two overrides under it are the
	   no-JavaScript baseline; site-nav.js replaces this with the bar's
	   MEASURED bottom edge each time the drawer opens, which is the only
	   thing that stays right when the bar is absolute and has scrolled. */
	--bfs-admin-offset: 0px;
}

/* WordPress's own two states: fixed and 32px from 783px up, absolute and
   46px below it. Never applied to a logged-out page -- the class is not
   there. */
body.admin-bar {
	--bfs-admin-offset: 32px;
}

@media (max-width: 782px) {

	body.admin-bar {
		--bfs-admin-offset: 46px;
	}
}


/* -------------------------------------------------------------------------
   0.5 box-sizing — the one thing this theme must not inherit

   GENERATEPRESS SHIPS TWO PARENT BUNDLES AND ONLY ONE OF THEM SETS THIS.

   assets/css/main.css — the 3.x flexbox structure — opens with
   `html { box-sizing: border-box }` and `*, *::before, *::after
   { box-sizing: inherit }`. assets/css/all.css — the older float structure,
   which is style.css + mobile.css + unsemantic-grid.css concatenated — does
   NOT. It sets border-box on the grid classes and on form controls, and
   leaves everything else at the browser's content-box.

   Which bundle loads is a site setting, not something any file here can
   read. So a child theme that combines padding with a height — and this one
   does it eighteen times in this sheet alone — silently computes a
   different box depending on a switch it cannot see. Measured, in Chromium,
   with both real bundles: the mobile header came out 88px against a design
   of 64, and every drawer row 80px against 56. Both are the same 24px: the
   12px of vertical padding, counted twice, on the outside of the height
   instead of within it.

   Declaring it here costs nothing on the flex bundle, where it restates what
   the parent already said, and makes the legacy bundle behave. It is the
   one global rule in this file with no exclusion guard, deliberately: a
   designed component that wanted content-box would set it on itself, and
   the `inherit` pattern is what lets it.
   ------------------------------------------------------------------------- */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}


/* -------------------------------------------------------------------------
   1. Focus

   ONE ring for the whole shell, and it is the same one CLAUDE.md records as
   a deliberate departure: §24's 3px width and 2px offset, with a SOLID
   colour rather than the document's 30% mix, because that mix composites to
   1.48:1 over white and WCAG 1.4.11 asks for 3:1.

   GeneratePress ships `.using-mouse :focus { outline: 0 }` and adds
   `.using-mouse` to the body on a pointer press, which is its own
   :focus-visible. That is left alone; this only supplies the ring that shows
   when the class is absent.
   ------------------------------------------------------------------------- */

.main-navigation a:focus-visible,
.main-navigation button:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.widget a:focus-visible,
.widget button:focus-visible,
.paging-navigation a:focus-visible,
.comments-area a:focus-visible,
.comments-area button:focus-visible,
.entry-content a:focus-visible,
.page-header a:focus-visible {
	outline: 3px solid var(--befello-focus-ring, #0069c7);
	outline-offset: 2px;
	border-radius: var(--bf-radius-xs, 4px);
}

/* The skip link is the first thing a keyboard reaches on every page, and
   WordPress ships it in its own 2011 blue. It is a Befello control. */
.screen-reader-text:focus {
	background-color: var(--bf-surface, #fff);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-btn, 8px);
	box-shadow: var(--befello-shadow-medium, 0 8px 24px rgba(37, 42, 39, 0.12));
	color: var(--bf-primary, #0069c7);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
	padding: 12px 20px;
	top: 12px;
	left: 12px;
}


/* =========================================================================
   2. HEADER
   ========================================================================= */

.site-header {
	background-color: var(--bf-surface, #fff);
	border-bottom: 1px solid var(--bf-border, #dde2df);
}

/* GeneratePress ships `padding: 20px 40px`, which is a fixed gutter that
   does not survive a 360px phone. The clamp holds 40px on a desktop and
   gives back 20px on a phone, matching the gutter the Opportunity and Essay
   pages already use so the left edge does not jump between them. */
.inside-header {
	max-width: var(--bf-container-max, 1240px);
	margin-inline: auto;
	padding: 0 var(--bfs-gutter);
	min-height: var(--bfs-header-h);
	gap: var(--bf-space-6, 1.5rem);
}

.site-logo img,
.site-header .header-image {
	display: block;
	width: var(--bfs-logo-w);
	height: auto;
	/* The height cap is a guard, not the size: a wordmark at 90px wide is
	   nowhere near it, but a SQUARE logo at 90px wide would be 90px tall and
	   would set the header's height instead of fitting inside it. The cap is
	   what stops that, at the cost of such a logo rendering narrower than
	   90px — which is the right trade, because the header's height is a
	   layout decision and the logo's is not. */
	max-height: calc(var(--bfs-header-h) - 28px);
	object-fit: contain;
	object-position: left center;
}

.main-title {
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: var(--bf-text-display-sm, 1.375rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.main-title a {
	color: var(--bf-ink, #252a27);
}

.site-description {
	color: var(--bf-ink-muted, #494e4a);
	font-size: var(--bf-text-sm, 0.875rem);
	line-height: 1.4;
}


/* =========================================================================
   3. DESKTOP NAVIGATION

   Text at rest, a target on interaction. The resting bar is the quietest
   thing it can be — one weight, one colour, generous spacing — and the pill
   appears only under a pointer or a focus ring, which is what makes the row
   feel responsive without decorating it.

   The CURRENT page is the exception: it carries a filled soft-blue pill all
   the time, because "where am I" is the one question a navigation has to
   answer before it is touched.
   ========================================================================= */

.main-navigation {
	background-color: transparent;
}

.main-navigation .inside-navigation {
	max-width: var(--bf-container-max, 1240px);
	margin-inline: auto;
	padding-inline: 0;
}

/* The parent theme sets 15px/normal and a 60px line-height, and lays the
   row out by padding the anchor. A padded anchor cannot carry a rounded
   target, so the geometry moves onto the item: the anchor becomes a
   centred flex box of a known height, and the row's air becomes a gap. */
.main-navigation .main-nav > ul {
	gap: var(--bfs-nav-gap);
}

.main-navigation .main-nav ul li a {
	display: flex;
	align-items: center;
	padding: 0 14px;
	min-height: var(--bfs-nav-item-h);
	line-height: 1.2;
	border-radius: var(--bf-radius-pill, 999px);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
	transition: background-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease),
	            color var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}

/* THE HOVER COLOUR IS A FIGHT WITH THE CUSTOMIZER, AND THIS IS WHY IT LOOKS
   LIKE THIS. GeneratePress emits

       .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a
       { color: <customiser value>; }

   inline in wp_head — (0,4,2). A sensible `… li a:hover` is (0,2,3) and
   loses, so the link went to the Customizer's grey on hover: measured at
   3.3:1, under the 4.5:1 WCAG 1.4.3 asks for body text.

   The two :not() clauses are not decoration either — they are the rule:
   the current page and a promoted CTA both carry their own fill and must
   not be repainted by the generic hover. They also carry the weight that
   beats the Customizer, at (0,5,2). */
/* The resting colour, at the weight the Customizer uses for it
   (`.main-navigation .main-nav ul li a` — (0,2,2)). */
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-items a {
	color: var(--bf-ink-muted, #494e4a);
}

/* FOCUS IS NOT HOVER, and keeping them in one rule is what made a tapped
   item look permanently selected. A touch browser leaves :hover on the last
   thing tapped until something else is tapped, so a hover rule that also
   runs on a phone is a sticky highlight — with an href of "#" the page never
   even navigates away to clear it. The hover half is therefore gated to
   devices that actually have a pointer; the focus half is not, because a
   keyboard user needs it everywhere. */
@media (hover: hover) and (pointer: fine) {

	.main-navigation .main-nav ul li:not(.current-menu-item):not(.nav-cta):hover > a,
	.main-navigation .main-nav ul li:not(.current-menu-item):not(.nav-cta).sfHover > a {
		background-color: var(--bf-surface-subtle, #f2f5f3);
		color: var(--bf-ink, #252a27);
	}
}

.main-navigation .main-nav ul li:not(.current-menu-item):not(.nav-cta) > a:focus-visible {
	background-color: var(--bf-surface-subtle, #f2f5f3);
	color: var(--bf-ink, #252a27);
}

/* The press. :active only lasts while the finger or the button is down, so
   it cannot persist the way :hover and :focus can — which is exactly why the
   pressed state is the one allowed to be loud.

   WRITTEN IN THE HOVER RULE'S OWN SHAPE, and placed after it, because the
   hover rule is what it has to beat. The obvious spelling, `li:not(.nav-cta)
   > a:active`, is (0,4,3) and loses to the hover above at (0,5,2) — so a
   mouse, which is hovering whatever it presses, got no press at all. Caught
   by holding the button down and reading the colour; the element reported
   :active while painting the hover fill. Mirroring the selector puts them at
   the same weight and source order settles it.

   The second selector is the current page, which the hover rule excludes and
   the press does not: pressing the page you are already on should still feel
   like a press. It is (0,4,3), above that item's own fill. */
.main-navigation .main-nav ul li:not(.current-menu-item):not(.nav-cta):active > a,
.main-navigation .main-nav ul li.current-menu-item:active > a {
	background-color: var(--bf-surface-strong, #e6e7ff);
	color: var(--bf-ink, #252a27);
	transition-duration: 0s;
}

/* WordPress puts three classes on the item for the current page, a fourth on
   an ancestor of it, and a fifth on the blog page. All five mean the same
   thing to a reader. */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current_page_ancestor > a,
.main-navigation .main-nav ul li.current-menu-parent > a {
	background-color: var(--bf-primary-soft, #e8f4fe);
	color: var(--befello-voltage-deep, #005baf);
	font-weight: 600;
}

/* A menu item marked as a button in the WordPress menu editor becomes the
   real thing. One CSS class, added in Appearance → Menus, so the site can
   promote "Discover" or "Sign up" without touching code. */
.main-navigation .main-nav ul li.nav-cta > a {
	background-color: var(--bf-cta, #0069c7);
	color: var(--bf-cta-ink, #fff);
	font-weight: 600;
	padding-inline: 18px;
	border-radius: var(--bf-radius-btn, 8px);
}

.main-navigation .main-nav ul li.nav-cta > a:hover {
	background-color: var(--bf-cta-hover, #005baf);
	color: var(--bf-cta-ink, #fff);
}


/* --- Dropdowns ----------------------------------------------------------
   A panel, not a stack of full-bleed rows. The parent theme's 200px box with
   a 1px offset shadow is the single most dated thing in the default
   navigation; this is the card language the rest of the site uses.

   The OPEN MECHANISM IS LEFT ALONE. GeneratePress moves the submenu with
   `left: -99999px` and animates opacity, and its JavaScript and its
   click-to-open accessibility mode both depend on that. Only the paint and a
   4px entrance move change. */

/* .main-navigation .main-nav, not .main-navigation, and the extra class is
   not padding. The Customizer paints the submenu with
   `.main-navigation .main-nav ul ul { background-color: … }` — (0,2,2) —
   and a (0,1,2) rule loses to it however late it loads. Measured: the panel
   came back #eaeaea with the card's border and radius around it. Matching
   the weight and relying on source order is what settles it without
   !important. The same reasoning applies to every nav colour below. */
.main-navigation .main-nav ul ul {
	width: auto;
	min-width: 224px;
	padding: 6px;
	margin-top: 6px;
	background-color: var(--bf-surface, #fff);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-card, 14px);
	box-shadow: var(--befello-shadow-medium, 0 12px 32px rgba(37, 42, 39, 0.12));
	transform: translateY(-4px);
	transition: opacity 120ms linear, transform 160ms var(--bf-ease, ease);
}

.main-navigation:not(.toggled) ul li:hover > ul,
.main-navigation:not(.toggled) ul li.sfHover > ul {
	transform: translateY(0);
}

.main-navigation .main-nav ul ul li a {
	min-height: 38px;
	padding: 0 12px;
	border-radius: var(--bf-radius-btn, 8px);
	font-size: 14px;
	white-space: normal;
}

/* An item inside a panel is not the current PAGE's pill — it is a row in a
   list. The soft fill would make the panel look like two menus. */
.main-navigation .main-nav ul ul li.current-menu-item > a {
	background-color: transparent;
	color: var(--befello-voltage-deep, #005baf);
}

@media (hover: hover) and (pointer: fine) {

	.main-navigation .main-nav ul ul li:not(.current-menu-item):hover > a {
		background-color: var(--bf-surface-subtle, #f2f5f3);
		color: var(--bf-ink, #252a27);
	}
}

.main-navigation .main-nav ul ul li:not(.current-menu-item) > a:focus-visible {
	background-color: var(--bf-surface-subtle, #f2f5f3);
	color: var(--bf-ink, #252a27);
}

/* The chevron. GeneratePress pads it to 20px on the right and 10px on the
   left of a 60px row, which leaves it floating away from its own label once
   the row is 40px tall. */
.main-navigation .menu-item-has-children .dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	height: auto;
	padding: 0 0 0 6px;
	opacity: 0.6;
}

.main-navigation .menu-item-has-children > a:hover .dropdown-menu-toggle,
.main-navigation .menu-item-has-children.sfHover > a .dropdown-menu-toggle {
	opacity: 1;
}

.main-navigation .main-nav ul li.menu-item-has-children > a {
	/* The parent theme zeroes the right padding so the chevron can sit in
	   it. With the chevron inside the flex row the padding comes back, or
	   the pill ends flush against the glyph. */
	padding-right: 12px;
}

.gp-icon svg {
	transition: transform var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}


/* --- The right-hand group (search, and whatever else) -------------------- */

.main-navigation .menu-bar-items,
.main-navigation .mobile-bar-items {
	font-size: 15px;
}

.main-navigation .menu-bar-item > a,
.main-navigation .mobile-bar-items a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	line-height: 1;
	border-radius: var(--bf-radius-pill, 999px);
	color: var(--bf-ink-muted, #494e4a);
	transition: background-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease),
	            color var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}

.main-navigation .menu-bar-item > a:hover,
.main-navigation .mobile-bar-items a:hover {
	background-color: var(--bf-surface-subtle, #f2f5f3);
	color: var(--bf-ink, #252a27);
}

/* The navigation search field, when the search item is switched on. */
.navigation-search input[type="search"],
.navigation-search input {
	height: 100%;
	padding: 0 var(--bf-space-5, 1.25rem);
	background-color: var(--bf-surface, #fff);
	border: 0;
	color: var(--bf-ink, #252a27);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: 1rem;
}


/* =========================================================================
   4. MOBILE NAVIGATION

   NOT THE DESKTOP MENU PUSHED DOWN THE PAGE. GeneratePress opens the mobile
   menu by making the list a flex row at `flex-basis: 100%; order: 3`, which
   shoves the article down and leaves the reader scrolling a document that
   has grown a list at the top of it. Everything below turns that same
   markup, driven by the same `.toggled` class and the same button, into a
   drawer: a panel over the page, with a backdrop, that closes on the
   backdrop, on Escape, and on the toggle.

   No markup changes and no fork of the parent's JavaScript. assets/js/site-nav.js
   only adds the scroll lock, the backdrop click and the Escape key, and the
   menu still opens and closes without it.
   ========================================================================= */

/* NO `display` HERE, DELIBERATELY. GeneratePress hides the toggle with
   `.menu-toggle { display: none }` and shows it again at its own breakpoint,
   which is a Customizer setting. Setting display in this rule overrode the
   hiding half and put a hamburger in the desktop header beside the menu it
   was supposed to replace — seen in a 1280px screenshot, not reasoned about.
   The flex centring lives in the mobile block below, where the toggle is
   already visible; if the site moves its breakpoint the toggle still appears
   on GeneratePress's schedule and merely loses the centring. */
.menu-toggle {
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	line-height: 1;
	border-radius: var(--bf-radius-pill, 999px);
	color: var(--bf-ink, #252a27);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: 15px;
	font-weight: 500;
	/* Above the drawer and its backdrop, because in this design the toggle
	   IS the close button — GeneratePress swaps its icon to a cross when the
	   menu is open, and a close control underneath its own overlay is the
	   classic way to trap somebody in a menu. */
	position: relative;
	z-index: 10000;
	transition: background-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}

/* `button.menu-toggle` and not `.menu-toggle`, because the older
   GeneratePress sets `button.menu-toggle { width: 100% }` at (0,1,1) and a
   single class loses to it — the toggle would stretch across the whole
   header instead of sitting in the corner. */
button.menu-toggle {
	width: auto;
	flex-grow: 0;
}

/* :focus-visible, NOT :focus. A tapped button keeps focus, so :focus left a
   grey pill sitting under the toggle after every open. */
button.menu-toggle:focus-visible {
	background-color: var(--bf-surface-subtle, #f2f5f3);
}

button.menu-toggle:active {
	background-color: var(--bf-surface-strong, #e6e7ff);
}

@media (hover: hover) and (pointer: fine) {

	button.menu-toggle:hover {
		background-color: var(--bf-surface-subtle, #f2f5f3);
	}
}

.menu-toggle .gp-icon svg {
	height: 22px;
	width: 22px;
	top: 0;
}

@media (max-width: 768px) {

	/* --- THE HEADER IS A CENTRED ROW, AND IT TAKES FOUR RULES TO SAY SO ---
	   because the two generations of GeneratePress break it differently and
	   the supplied parent files contain both.

	   `display: flex` is not redundant. The 3.x header is already flex; the
	   older one is a FLOAT layout, so `flex-direction` and `align-items`
	   land on a block element and do nothing at all — the logo and the
	   toggle then sit wherever the floats put them, which is the top.

	   The 20px is the other half. Both `mobile.css` and `all.css` ship

	       .inside-header > *:not(:last-child):not(.main-navigation)
	       { margin-bottom: 20px; }

	   so the branding carries 20px of margin under it on a phone. Flexbox
	   centres the MARGIN box, so the logo ends up 10px above the optical
	   centre with dead space below it and the header grows by 20px —
	   exactly the "sitting at the top" the header was reported with. */
	.inside-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		min-height: var(--bfs-header-h-mobile);
	}

	.inside-header > *:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
	}

	/* THE HEADER MUST NOT MOVE WHEN THE MENU OPENS.

	   main.css carries `.has-inline-mobile-toggle #site-navigation.toggled
	   { margin-top: 1.5em }` for GeneratePress's OWN mobile menu, which
	   opens in the flow underneath the logo row and needs separating from
	   it. This drawer does not: the panel is position: fixed, so the margin
	   lands on an element with nothing in it and simply makes the header
	   taller. Measured at 430px: 64px closed, 69.5px open -- the logo and
	   the hamburger stepping down 5.5px at the moment of the tap.

	   THE SELECTOR CARRIES THE ID ON PURPOSE. The parent's rule is
	   `.has-inline-mobile-toggle #site-navigation.toggled` -- (1,2,0),
	   because #site-navigation is an ID -- and no number of classes beats
	   one ID. The class-only version of this rule was written first and
	   measured: it changed nothing, the header still stepped 5.5px. Matching
	   the parent's weight exactly and landing later in the file is what wins
	   it, which is the same bargain every other rule in this sheet makes
	   with the Customizer. The second selector is for a site whose primary
	   navigation carries a different id; it is inert otherwise. */
	.has-inline-mobile-toggle #site-navigation.toggled,
	.has-inline-mobile-toggle .main-navigation.toggled {
		margin-top: 0;
	}

	/* One row, and it stays one row. The navigation between the branding and
	   the toggle has nothing to show at this width -- its list is a fixed
	   panel when open and hidden when closed -- so it must not be allowed to
	   claim a line and push the two things that ARE visible off the header's
	   centre line. */
	.inside-header {
		flex-wrap: nowrap;
	}

	.inside-header > .main-navigation {
		flex: 0 1 auto;
		min-width: 0;
	}

	/* The older generation also centres the whole header's text on a phone,
	   which pulls a left-aligned wordmark into the middle of its own box. */
	.site-header,
	.header-aligned-right .site-header {
		text-align: left;
	}

	/* Every child sits on the row's centre line, whatever its height. */
	.inside-header > *,
	.site-branding-container,
	.main-navigation,
	.mobile-menu-control-wrapper {
		align-self: center;
	}

	.main-navigation .inside-navigation {
		align-items: center;
		min-height: 0;
	}

	.site-header .header-widget {
		margin: 0;
	}

	/* Same width on a phone. 90px is already small enough for a 320px
	   screen, and a logo that changed size at a breakpoint reads as two
	   different logos. Only the height guard tightens, because the mobile
	   header is shorter. */
	.site-logo img,
	.site-header .header-image {
		max-height: calc(var(--bfs-header-h-mobile) - 24px);
	}

	.main-navigation .inside-navigation {
		padding-inline: 0;
		/* NEVER TWO ROWS. GeneratePress wraps this container, and on a
		   390px phone the toggle and the search icon together were wider
		   than the space the branding left them, so the group dropped onto
		   a second line and the header measured 88px instead of 64.
		   Measured, with a 90px logo beside it. Nothing in here should
		   wrap: the branding yields instead, below. */
		flex-wrap: nowrap;
	}

	/* Only where the parent theme has already decided to show it. */
	.menu-toggle {
		display: inline-flex;
	}

	/* The label goes, the accessible name stays. Hiding the span with
	   display:none would leave the button with no name at all, because the
	   icon beside it is decorative — so it is clipped instead, the way
	   WordPress's own .screen-reader-text is. A 44px icon is also the
	   shape this control has in every mobile product a reader has used. */
	.menu-toggle .mobile-menu {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* The branding is what gives way when the row is tight, and the title
	   gives way before the logo does.

	   flex-shrink is the operative line. GeneratePress sets
	   `.site-branding-container { flex-shrink: 0 }`, so with the row no
	   longer allowed to wrap the branding held its full width and pushed the
	   search icon 2.3px off a 320px screen — a page that scrolls sideways by
	   two pixels, which is the hardest kind to notice and the easiest kind
	   to ship. Measured at 320px. */
	.site-branding-container {
		flex-shrink: 1;
		min-width: 0;
	}

	/* …but the LOGO is not what yields. Letting the container shrink let the
	   image shrink with it: 90px became 68px at 320. The logo is a fixed
	   asset at a fixed size; the words beside it are the elastic part. */
	.site-logo,
	.site-logo img,
	.site-header .header-image {
		flex-shrink: 0;
	}

	.main-title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* --- The backdrop ---------------------------------------------------
	   TWO OF THEM, AND ONLY EVER ONE AT A TIME.

	   The pseudo-element below is the no-script fallback: if site-nav.js
	   never loads the drawer still opens over a dimmed page. It cannot be
	   the real one, because a pseudo-element's hit area belongs to
	   .main-navigation, and that element lives inside the header — if the
	   header is sticky, or sits in any ancestor that makes a stacking
	   context, the backdrop paints under the page and a tap on it never
	   reaches the navigation at all. That is why tapping beside the menu
	   did nothing.

	   So the script inserts .bfs-backdrop as a direct child of <body>, with
	   its own listener, and hides this one. No stacking context between it
	   and the page can swallow the press. */
	html.befello-nav-open .main-navigation.toggled::before {
		display: none;
	}

	.main-navigation.toggled::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 9997;
		background: rgba(37, 42, 39, 0.45);
		/* The backdrop is the only motion in the open: the panel slides, the
		   page behind it does not move at all. */
		animation: bfs-fade 160ms var(--bf-ease, ease);
	}

	/* --- The drawer ------------------------------------------------------ */
	.main-navigation.toggled .main-nav {
		position: fixed;
		/* NOT 0. The admin bar is z-index 99999 and a drawer at the top of
		   the viewport goes straight under it -- measured, with the bar
		   covering the first 32px of the panel, which is exactly where the
		   close button sits. Reported as "there is no obvious Close button".
		   A visitor's offset is 0px, so this costs them nothing. */
		top: var(--bfs-admin-offset, 0px);
		right: 0;
		bottom: 0;
		z-index: 9998;
		width: var(--bfs-drawer-w);
		margin: 0;
		/* Its own head is inside it now, so the top padding is the status-bar
		   clearance rather than room for the header's toggle. */
		padding: calc(var(--bf-space-4, 1rem) + env(safe-area-inset-top, 0px)) 0
		         calc(var(--bf-space-6, 1.5rem) + env(safe-area-inset-bottom, 0px));
		background-color: var(--bf-surface, #fff);
		border-left: 1px solid var(--bf-border, #dde2df);
		box-shadow: -16px 0 40px rgba(37, 42, 39, 0.16);
		/* A COLUMN THAT CENTRES ITS LIST WITHOUT EVER CLIPPING IT.
		   `justify-content: center` is the obvious way and it is the wrong
		   one: once the content is taller than the panel it centres the
		   overflow too, and the first items become unreachable above the
		   scroll origin. Auto margins on the list do the same centring and
		   collapse to zero the moment there is no free space, so a long menu
		   simply starts at the top and scrolls. Nothing here is a fixed
		   offset, so it holds on a short phone and a tall one alike. */
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		/* The panel is the only thing that scrolls; a flick at the end of it
		   must not start scrolling the article behind the backdrop. */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		animation: bfs-slide-in 220ms var(--bf-ease, ease);
	}

	/* THE LIST STARTS UNDER THE HEAD. It used to centre itself in the free
	   space with `margin-block: auto`, which is what the owner asked for
	   when the panel was flush to the top with everything below it empty.
	   With a head above it and six items in it, that centring reads as the
	   opposite problem -- a 450px gap between the wordmark and the first
	   row, measured at 430x860. The brief's own sketch puts Home directly
	   under the header, so the list is top-aligned and the breathing room is
	   deliberate padding instead of leftover space.

	   `margin-block-end: auto` keeps the remainder at the BOTTOM, which is
	   what stops a short menu from leaving a gap it has to defend and what
	   lets a long one scroll from the first item. */
	.main-navigation.toggled .main-nav > ul {
		display: block;
		flex: 0 0 auto;
		margin-block: 0 auto;
		padding-inline: var(--bf-space-4, 1rem);
		padding-block: var(--bf-space-2, 0.5rem) var(--bf-space-4, 1rem);
	}

	/* --- THE WAY OUT ----------------------------------------------------
	   A drawer needs a close control INSIDE it. The design relied on the
	   header toggle turning into a cross, which is true in the markup but
	   useless if anything paints over it, if the header scrolls away, or
	   simply if the reader does not think to look back up there — reported
	   as "I cannot leave it, there is no exit".

	   So the drawer gets its own titled header with a 44px cross in it,
	   inserted by assets/js/site-nav.js. Escape and a press on the backdrop
	   still work; this is the one that is visible. */
	.bfs-drawer__head {
		/* Pinned to the top of the panel; the list centres in what is left.
		   flex: 0 0 auto stops it being squeezed when the menu is long. */
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--bf-space-3, 0.75rem);
		padding: 0 var(--bf-space-4, 1rem) var(--bf-space-3, 0.75rem);
		margin: 0 var(--bf-space-4, 1rem) var(--bf-space-2, 0.5rem);
		border-bottom: 1px solid var(--bf-border, #dde2df);
	}

	/* The head can carry the site's own wordmark instead of the word "Menu",
	   which is what the drawer of a real mobile product looks like. The
	   script clones the header logo when there is one; this sizes the clone.
	   Capped in height so a tall logo cannot grow the head. */
	.bfs-drawer__head .bfs-drawer__logo {
		display: block;
		width: auto;
		max-width: 132px;
		max-height: 24px;
		object-fit: contain;
		object-position: left center;
	}

	.bfs-drawer__title {
		margin: 0;
		color: var(--bf-ink-muted, #494e4a);
		font-family: var(--befello-font, system-ui, sans-serif);
		font-size: var(--bf-text-xs, 0.75rem);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/* .bfs-drawer__head .bfs-drawer__close, not the bare class. Excluding
	   this button from §6's sweep stopped the shell painting it, but it did
	   not stop the CUSTOMIZER: `button:not(.menu-toggle)` is (0,1,1) and a
	   single class loses to it, so the close control came back #55555e.
	   Measured. (0,2,0) settles it. */
	.bfs-drawer__head .bfs-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		/* The overhang is the target's own padding, not a guess: the box is
		   44px around a 20px glyph, so 12px of it is air on each side.
		   Pulling the box out by exactly that much puts the GLYPH's edge on
		   the menu text's edge below it, which is the line the eye reads.
		   Measured: 358px from the panel's left on a 390px screen, the same
		   as the label of every row under it. */
		margin-right: -12px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: var(--bf-radius-pill, 999px);
		color: var(--bf-ink, #252a27);
		cursor: pointer;
		transition: background-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
	}

	/* THE STATE LADDER FOR THIS BUTTON IS SOURCE ORDER. Every rule from here
	   down is (0,3,0), so what wins is what comes last: rest, then :focus,
	   then :hover, then :focus-visible, then :active. Written in that order
	   deliberately -- the :focus reset sat after :hover once and a hovered,
	   focused button went transparent, because a tie is broken by position.

	   :focus IS RETURNED TO REST. The script hands focus to this button as
	   the drawer opens, so after a TAP it is focused without being
	   focus-visible, and the Customizer's `button:not(.menu-toggle):focus`
	   painted it #3f3f46 -- a dark grey block in the corner of a white
	   panel, measured at 1.0:1 against it. That is what a reader saw every
	   time they opened the menu with a finger. The soft fill belongs to
	   :focus-visible below, which is the one that means a keyboard. */
	.bfs-drawer__head .bfs-drawer__close:focus {
		background-color: transparent;
		color: var(--bf-ink, #252a27);
	}

	/* Hover is gated the same way the nav links are: on a touch screen the
	   state sticks after the press and the control is left looking held
	   down. Focus-visible is stated separately so it survives that gate --
	   a keyboard on a touch device still has to be able to see where it is. */
	@media (hover: hover) and (pointer: fine) {
		.bfs-drawer__head .bfs-drawer__close:hover {
			background-color: var(--bf-surface-subtle, #f2f5f3);
			color: var(--bf-ink, #252a27);
		}
	}

	.bfs-drawer__head .bfs-drawer__close:focus-visible {
		background-color: var(--bf-surface-subtle, #f2f5f3);
		color: var(--bf-ink, #252a27);
	}

	/* The press. Deeper than hover so a finger gets feedback where there is
	   no hover to give it, and instant -- a 140ms fade-in on a tap that
	   lasts 90ms never arrives. It fades back out on release, which is the
	   asymmetry a native control has. */
	.bfs-drawer__head .bfs-drawer__close:active {
		background-color: var(--bf-surface-strong, #e6e7ff);
		color: var(--bf-ink, #252a27);
		transition-duration: 0s;
	}

	/* The glyph is a FONT glyph -- befello_icon( 'close' ) renders <i class="ti
	   ti-x">, handed to the script from functions.php -- so it is sized with
	   font-size, not width/height, exactly as style.css §0.5 sets out. The
	   line-height is what centres it on its own baseline; the flex centring
	   above only places the box. */
	.bfs-drawer__head .bfs-drawer__close .befello-icon,
	.bfs-drawer__head .bfs-drawer__close .ti {
		font-size: 20px;
		line-height: 1;
	}

	/* The inline fallback, for the case where the icon registry returned
	   nothing. Not a second icon set -- see the note in site-nav.js. */
	.bfs-drawer__head .bfs-drawer__close svg {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}

	/* A row, not a link. 56px is a comfortable thumb target with room for a
	   second line, and the hairline between rows is what makes a list of
	   eight items scannable without numbering it. */
	/* The two exclusions are the rule, not tidiness. `.main-navigation.toggled
	   .main-nav ul li a` is (0,3,3) and the promoted CTA's own colour is
	   (0,3,2), so without them the drawer repainted a white label on a blue
	   bar to ink — seen in a 390px screenshot. The current page is excluded
	   for the same reason. */
	.main-navigation.toggled .main-nav ul li:not(.nav-cta):not(.current-menu-item):not(.current_page_item) > a {
		color: var(--bf-ink, #252a27);
	}

	.main-navigation.toggled .main-nav ul li a {
		min-height: var(--bfs-drawer-row-h);
		padding: 12px var(--bf-space-4, 1rem);
		border-radius: var(--bf-radius-btn, 8px);
		font-size: 1.0625rem;
		font-weight: 500;
		white-space: normal;
	}

	.main-navigation.toggled .main-nav > ul > li:not(:last-child) {
		border-bottom: 1px solid var(--bf-hairline-quiet, #eceeed);
	}

	/* No press rule here on purpose. The drawer used to carry its own, at
	   --bf-surface-subtle -- the same colour as the hover above it, so a held
	   finger and a resting mouse looked identical. The press in §3 reaches
	   into the drawer as it is, and one rule for the state is better than two
	   that disagree about its colour. */

	.main-navigation.toggled .main-nav ul li.current-menu-item > a,
	.main-navigation.toggled .main-nav ul li.current_page_item > a {
		background-color: var(--bf-primary-soft, #e8f4fe);
		color: var(--befello-voltage-deep, #005baf);
		font-weight: 600;
	}

	/* The chevron becomes a real 44px control on its own, so opening a
	   submenu and following the parent link are two different taps rather
	   than a gamble.

	   THE NEGATIVE MARGIN IS WHAT KEEPS THE ROW A ROW. A 44px control inside
	   a row whose 56px is already spoken for -- 12px of padding, the label,
	   12px again -- makes that row 68px, and the `margin-top: 6px` this
	   replaces made it 74px and pushed the glyph off centre besides. The
	   item with a submenu was visibly taller than its neighbours; measured
	   at 74px against 56px on both parent bundles.

	   Pulling 6px off each side lets the control keep its full 44px tap
	   target -- margins do not shrink a hit area -- while its margin box
	   measures the 32px the row actually has to give. Same trick, and the
	   same reason, as the close button's overhang. */
	.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin-block: -6px;
		border-radius: var(--bf-radius-pill, 999px);
		opacity: 1;
	}

	.main-navigation.toggled .menu-item-has-children > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* The submenu is an indented continuation of the row above it, not a
	   second panel. The parent theme's bottom border on every open submenu
	   is replaced by an inset rule that reads as a hierarchy line. */
	.main-navigation.toggled .main-nav ul ul {
		border-bottom: 0;
		box-shadow: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0 0 8px;
		margin: 0 0 0 var(--bf-space-4, 1rem);
		min-width: 0;
		transform: none;
		border-left: 2px solid var(--bf-border, #dde2df);
	}

	.main-navigation.toggled .main-nav ul ul li:not(.current-menu-item) > a {
		color: var(--bf-ink-muted, #494e4a);
	}

	.main-navigation.toggled .main-nav ul ul li a {
		min-height: 44px;
		font-size: 1rem;
		font-weight: 400;
	}

	/* WHILE THE DRAWER IS OPEN the header's own controls step aside. They
	   sit inside the drawer's footprint, so the toggle's cross and the
	   search icon were painting on top of the panel a few pixels from its
	   own close button — two crosses, one of them floating over a menu.

	   Scoped to the class the SCRIPT adds, not to `.toggled`, and that is
	   the safety: if site-nav.js never runs there is no injected close
	   button, the class is never set, and the header toggle stays exactly
	   where it was. visibility rather than display, so nothing in the
	   header reflows underneath the backdrop. */
	html.befello-nav-open .menu-toggle,
	html.befello-nav-open .menu-bar-items,
	html.befello-nav-open .mobile-bar-items {
		visibility: hidden;
	}

	/* The real backdrop. A child of <body>, so nothing between it and the
	   page can intercept the press, and it carries the dimming rather than
	   a heavy sheet of colour: enough separation to read the panel against,
	   not enough to make the design feel modal and grim. */
	.bfs-backdrop {
		position: fixed;
		/* Starts below the admin bar too. Dimming the toolbar would be
		   modifying somebody else's chrome, and the bar is not part of the
		   page the backdrop is making inactive. */
		inset: var(--bfs-admin-offset, 0px) 0 0;
		z-index: 9990;
		background: rgba(37, 42, 39, 0.42);
		opacity: 0;
		transition: opacity 180ms var(--bf-ease, ease);
		/* Nothing underneath is reachable while this is up. */
		touch-action: none;
	}

	.bfs-backdrop.is-shown {
		opacity: 1;
	}

	/* The header is promoted while the drawer is open so its subtree — the
	   panel and the panel's close button — paints above a backdrop that is
	   a sibling of the header rather than a descendant of it. Only while
	   open, so nothing about the resting page's stacking changes. */
	html.befello-nav-open .site-header {
		position: relative;
		z-index: 9995;
	}

	/* The document behind a drawer must not scroll.

	   `overflow: hidden` ON ITS OWN LOSES THE READER'S PLACE. A scrolling
	   box that stops scrolling has its offset clamped, so opening the menu
	   half way down an article threw the page back to the top and closing it
	   left it there. Measured at 430px: scrollY 546 before the tap, 0 after
	   -- which on a long Opportunity page is the reader losing everything
	   they had scrolled past.

	   Pinning the body instead holds the position visually: site-nav.js
	   writes `top: -<scrollY>px` as it locks and scrolls back to the same
	   offset as it releases, so the page never appears to move. The width is
	   restated because a fixed element shrink-wraps otherwise, which would
	   reflow every line of text behind the drawer. */
	html.befello-nav-open body {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		overflow: hidden;
	}

	html.befello-nav-open {
		overflow: hidden;
	}
}

@keyframes bfs-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes bfs-slide-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

/* THE WAY OUT IS ANIMATED TOO. GeneratePress drops its .toggled class the
   instant the toggle is pressed, and with it every rule that makes the panel
   a panel — so the drawer vanished mid-air. The script holds the class for
   the length of this animation and removes it afterwards, which is the only
   way to animate a close without taking over the parent theme's state. */
@media (max-width: 768px) {

	html.befello-nav-closing .main-navigation.toggled .main-nav {
		animation: bfs-slide-out 170ms var(--bf-ease, ease) forwards;
	}

	html.befello-nav-closing .bfs-backdrop {
		opacity: 0;
	}
}

@keyframes bfs-slide-out {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}

/* The drawer is navigation, so its entrance is not decoration — but a reader
   who has asked for less motion gets the panel without the slide. */
@media (prefers-reduced-motion: reduce) {

	.main-navigation.toggled .main-nav,
	.main-navigation.toggled::before,
	html.befello-nav-closing .main-navigation.toggled .main-nav {
		animation: none;
	}

	.bfs-backdrop {
		transition: none;
	}

	.main-navigation ul ul {
		transition: opacity 120ms linear;
		transform: none;
	}
}


/* =========================================================================
   5. FORMS AND SEARCH

   GeneratePress ships #FAFAFA on #ccc with square corners, 10px/15px padding
   and #666 text — a 2013 form. These are the same field the Insider Tips
   dialog uses, written once for everything the child theme does not render:
   comments, search, and any plugin that outputs a plain input.

   The guards are load-bearing: without them these rules would reach into the
   designed components and undo them.
   ========================================================================= */

input[type="text"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="email"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="url"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="password"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="search"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="tel"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="number"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="date"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
textarea:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]),
select:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]) {
	min-height: 44px;
	padding: 10px var(--bf-space-3, 0.75rem);
	background-color: var(--bf-surface, #fff);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-btn, 8px);
	box-shadow: none;
	color: var(--bf-ink, #252a27);
	font-family: var(--befello-font, system-ui, sans-serif);
	/* 16px is a floor, not a preference: anything smaller and iOS Safari
	   zooms the page when the field is focused, which is the commonest way a
	   mobile form breaks its own layout. */
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease),
	            box-shadow var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}

textarea:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]) {
	min-height: 8rem;
	line-height: 1.55;
	resize: vertical;
}

input:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]):focus,
textarea:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]):focus,
select:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]):focus {
	border-color: var(--bf-primary, #0069c7);
	outline: 3px solid var(--befello-focus-ring, #0069c7);
	outline-offset: 2px;
}

input::placeholder,
textarea::placeholder {
	color: var(--bf-text-muted, #69706b);
	opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--bf-primary, #0069c7);
}

label {
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
}

/* The widget and footer search form. GeneratePress hides the submit in the
   search widget and lays the form out as a flex row; both stay, the box
   becomes a Befello field. */
.widget .search-form,
.wp-block-search__inside-wrapper {
	gap: 8px;
}

.wp-block-search__input {
	min-height: 44px;
	padding: 10px var(--bf-space-3, 0.75rem);
	background-color: var(--bf-surface, #fff);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-btn, 8px);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: 1rem;
}


/* =========================================================================
   6. BUTTONS

   Two jobs. The first is to stop GeneratePress repainting a control that
   already carries the theme's own button class — `.befello-btn` is (0,1,0)
   and the parent's `button:not(.menu-toggle)` is (0,1,1), so a real <button>
   kept the Befello colour and lost the Befello padding, height and corner.
   Measured: 10px/20px and a 3px radius on every non-anchor primary in the
   project. The second is to give every OTHER button on the site the same
   shape, so a plugin's submit does not look like a different product.
   ========================================================================= */

button.befello-btn,
input.befello-btn,
a.befello-btn {
	min-height: 48px;
	padding: var(--bf-space-3, 0.75rem) var(--bf-space-5, 1.25rem);
	border: 1px solid transparent;
	border-radius: var(--bf-radius-btn, 8px);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: var(--bf-text-base, 1.0625rem);
	font-weight: var(--bf-weight-bold, 700);
	line-height: var(--bf-leading-title, 1.2);
}

button.befello-btn--cta,
a.befello-btn--cta {
	min-height: 68px;
	border-radius: var(--bf-radius-cta, 18px);
	font-size: var(--bf-text-dek, 1.25rem);
	font-weight: var(--bf-weight-regular, 400);
}

/* Everything else: the block editor's button, WordPress's generic .button,
   and any bare submit. Guarded, so a designed component is never reached. */
button:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]):not(.menu-toggle):not(.dropdown-menu-toggle):not([class*="wp-block-navigation"]),
input[type="submit"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="button"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfs-"]):not([class*="bf-"]),
input[type="reset"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfs-"]):not([class*="bf-"]),
.wp-block-button__link,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bf-space-2, 0.5rem);
	min-height: 44px;
	padding: 10px var(--bf-space-5, 1.25rem);
	background-color: var(--bf-cta, #0069c7);
	border: 1px solid var(--bf-cta, #0069c7);
	border-radius: var(--bf-radius-btn, 8px);
	color: var(--bf-cta-ink, #fff);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease),
	            border-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}

button:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfe"]):not([class*="bfs-"]):not([class*="bf-"]):not(.menu-toggle):not(.dropdown-menu-toggle):hover,
input[type="submit"]:not([class*="befello"]):not([class*="bfaa"]):not([class*="bfd"]):not([class*="bfs-"]):not([class*="bf-"]):hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover {
	background-color: var(--bf-cta-hover, #005baf);
	border-color: var(--bf-cta-hover, #005baf);
	color: var(--bf-cta-ink, #fff);
}

/* The outline variant the block editor produces. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--bf-ink, #252a27);
	color: var(--bf-ink, #252a27);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--bf-surface-soft, #f5f5ff);
	border-color: var(--bf-ink, #252a27);
	color: var(--bf-ink, #252a27);
}


/* -------------------------------------------------------------------------
   6.5 FULL-WIDTH PAGES STILL NEED A GUTTER

   GeneratePress's "Full Width" content layout does this:

       .full-width-content.separate-containers .inside-article { padding: 0 }

   which is right for a page whose content is a run of edge-to-edge hero
   images, and wrong for every other kind. Zero padding means text, filter
   panels and card grids start at pixel 0 of the viewport -- the Opportunity
   archive's filter sidebar ran flush to the left edge with its headings and
   hairlines touching it, while the site header above it kept its own inset,
   so the logo and the word "Filters" sat on two different left edges.

   Full width should mean the content uses the WINDOW rather than a 1200px
   column. It should not mean the content touches the glass. This restores
   the same gutter the header uses, so the two line up, and nothing else
   about the layout changes.

   Scoped to the body class GeneratePress only sets on full-width pages, so
   a boxed page -- which already has its container's padding -- cannot end
   up with two gutters. Stated at (0,3,1) against the parent's (0,3,0) and
   later in the cascade, so no !important.

   Anything that genuinely wants the full bleed still has it: alignfull and
   alignwide set their own negative margins against this padding, which is
   exactly what those classes are for.
   ------------------------------------------------------------------------- */

body.full-width-content.separate-containers .inside-article,
body.full-width-content.one-container .site-content {
	padding-inline: var(--bfs-gutter);
}


/* =========================================================================
   7. CONTENT DEFAULTS

   The typographic furniture WordPress emits inside any page or post that
   nobody has designed: headings, links, quotes, rules, tables, code. The
   heading SCALE is the design system's; the parent theme's 42/35/29 at
   weight normal is not.
   ========================================================================= */

.entry-content a:not([class]),
.page-content a:not([class]),
.taxonomy-description a:not([class]),
.comment-content a:not([class]) {
	color: var(--bf-primary, #0069c7);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.entry-content a:not([class]):hover,
.page-content a:not([class]):hover,
.comment-content a:not([class]):hover {
	color: var(--befello-voltage-deep, #005baf);
	text-decoration-thickness: 2px;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.page-header .page-title,
.entry-header .entry-title {
	font-family: var(--befello-font, system-ui, sans-serif);
	color: var(--bf-ink, #252a27);
	letter-spacing: -0.02em;
}

.page-header .page-title,
.entry-header .entry-title,
.entry-content h1 {
	font-size: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.entry-content h2 {
	font-size: var(--bf-text-display-md, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
}

.entry-content h3 {
	font-size: var(--bf-text-display-sm, 1.375rem);
	font-weight: 600;
	line-height: 1.3;
}

.entry-content h4 {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.entry-content h5,
.entry-content h6 {
	font-size: 1rem;
	font-weight: 600;
}

.entry-content,
.page-content,
.taxonomy-description {
	color: var(--bf-ink, #252a27);
	font-size: var(--bf-text-base, 1.0625rem);
	line-height: var(--bf-leading-lg, 1.6);
}

/* A quote, not a grey stripe. */
blockquote {
	padding: var(--bf-space-4, 1rem) var(--bf-space-6, 1.5rem);
	background-color: var(--bf-surface-subtle, #f2f5f3);
	border-left: 3px solid var(--bf-primary, #0069c7);
	border-radius: 0 var(--bf-radius-card, 14px) var(--bf-radius-card, 14px) 0;
	color: var(--bf-ink, #252a27);
	font-size: 1.0625rem;
	font-style: normal;
}

hr,
.wp-block-separator {
	background-color: var(--bf-border, #dde2df);
	border: 0;
	height: 1px;
	margin-block: var(--bf-space-8, 2rem);
}

pre,
.wp-block-code {
	padding: var(--bf-space-4, 1rem);
	background-color: var(--bf-surface-subtle, #f2f5f3);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-btn, 8px);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
}

code,
kbd,
tt,
var {
	padding: 2px 6px;
	background-color: var(--bf-surface-subtle, #f2f5f3);
	border-radius: var(--bf-radius-xs, 4px);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
}

pre code {
	padding: 0;
	background: none;
}

table:not([class*="befello"]):not([class*="bfd"]) {
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-card, 14px);
	border-spacing: 0;
	overflow: hidden;
}

table:not([class*="befello"]) th,
table:not([class*="befello"]) td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--bf-hairline-quiet, #eceeed);
	font-size: var(--bf-text-sm, 0.875rem);
}

table:not([class*="befello"]) th {
	background-color: var(--bf-surface-subtle, #f2f5f3);
	color: var(--bf-ink, #252a27);
	font-weight: 600;
}

table:not([class*="befello"]) tr:last-child td {
	border-bottom: 0;
}


/* =========================================================================
   8. ARCHIVES, PAGINATION AND PAGE HEADERS

   The default blog and category listings, which nothing in the project
   renders. Not a redesign of the listing — a card, a readable title and a
   pagination control that looks like it belongs here.
   ========================================================================= */

/* `.one-container .site-content` is deliberately NOT in this list. The
   Opportunity and Essay templates render their own markup and never emit an
   .inside-article, a .page-header or a .comments-area — checked, not assumed
   — so those four selectors can only ever reach a default WordPress post.
   .site-content is the wrapper every page shares, including theirs, and
   re-padding it would move a finished template. The parent theme's 40px
   stays there. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.inside-page-header {
	padding: clamp(20px, 4vw, 40px);
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header {
	background-color: var(--bf-surface, #fff);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-card, 14px);
}

.entry-meta {
	color: var(--bf-ink-muted, #494e4a);
	font-size: var(--bf-text-sm, 0.875rem);
}

.entry-meta a {
	color: var(--bf-ink-muted, #494e4a);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-meta a:hover {
	color: var(--bf-primary, #0069c7);
}

/* --- Pagination ---------------------------------------------------------
   GeneratePress renders the numbers as text separated by 5px of padding and
   bolds the current one. Numbers are targets, so they become targets. */

.paging-navigation .nav-links,
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.paging-navigation .nav-links > *,
.wp-block-query-pagination > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	background-color: var(--bf-surface, #fff);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-btn, 8px);
	color: var(--bf-ink, #252a27);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease),
	            border-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}

.paging-navigation .nav-links a:hover {
	background-color: var(--bf-surface-subtle, #f2f5f3);
	border-color: var(--bf-border-strong, #bcc5c0);
}

.paging-navigation .nav-links .current,
.wp-block-query-pagination .page-numbers.current {
	background-color: var(--bf-cta, #0069c7);
	border-color: var(--bf-cta, #0069c7);
	color: var(--bf-cta-ink, #fff);
	font-weight: 600;
}

/* The dots are not a control and must not look like one. */
.paging-navigation .nav-links .dots,
.wp-block-query-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	background: none;
	border: 0;
	color: var(--bf-ink-muted, #494e4a);
}

/* Previous / next on a single post. */
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bf-space-3, 0.75rem);
	justify-content: space-between;
}

.post-navigation .nav-links a {
	color: var(--bf-primary, #0069c7);
	font-weight: 500;
}

/* --- Breadcrumbs --------------------------------------------------------
   Nothing in the supplied files proves a breadcrumb exists on this site, so
   this only covers the three output shapes that would appear IF a plugin
   adds one. It paints nothing when none is present. */

.breadcrumbs,
.rank-math-breadcrumb,
nav[aria-label="Breadcrumb"] {
	color: var(--bf-ink-muted, #494e4a);
	font-size: var(--bf-text-sm, 0.875rem);
	margin-bottom: var(--bf-space-4, 1rem);
}

.breadcrumbs a,
.rank-math-breadcrumb a,
nav[aria-label="Breadcrumb"] a {
	color: var(--bf-ink-muted, #494e4a);
}

.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover,
nav[aria-label="Breadcrumb"] a:hover {
	color: var(--bf-primary, #0069c7);
}


/* =========================================================================
   9. WIDGETS, COMMENTS AND NOTICES
   ========================================================================= */

.widget-area .widget {
	padding: clamp(20px, 3vw, 32px);
	background-color: var(--bf-surface, #fff);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-card, 14px);
}

.widget-title {
	margin-bottom: var(--bf-space-4, 1rem);
	color: var(--bf-ink, #252a27);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: var(--bf-text-lg, 1.125rem);
	font-weight: 600;
	line-height: 1.3;
}

.widget ul li a {
	color: var(--bf-ink-muted, #494e4a);
}

.widget ul li a:hover {
	color: var(--bf-primary, #0069c7);
}

.comment-content {
	padding: var(--bf-space-5, 1.25rem);
	background-color: var(--bf-surface, #fff);
	border: 1px solid var(--bf-border, #dde2df);
	border-radius: var(--bf-radius-card, 14px);
}

.comment .children {
	border-left: 2px solid var(--bf-border, #dde2df);
}

.comment-author cite {
	color: var(--bf-ink, #252a27);
	font-weight: 600;
}

/* WordPress's own messages: the comment moderation notice, the password
   form, the login-required line. They are the least-designed text on any
   WordPress site and appear at exactly the moment somebody is confused. */
.comment-awaiting-moderation,
.no-comments,
.post-password-form p:first-child,
.wp-block-post-comments-form .comment-notes,
.comment-notes,
.logged-in-as {
	padding: 12px var(--bf-space-4, 1rem);
	background-color: var(--bf-surface-blue, #e8f4fe);
	border: 1px solid var(--bf-primary-soft-border, #bfe0fb);
	border-radius: var(--bf-radius-btn, 8px);
	color: var(--bf-ink, #252a27);
	font-size: var(--bf-text-sm, 0.875rem);
	display: block;
}

/* The "nothing here" state on an empty search or archive. */
.no-results .page-content,
.search-no-results .page-content {
	color: var(--bf-ink-muted, #494e4a);
}


/* =========================================================================
   10. FOOTER
   ========================================================================= */

/* THE SURFACE IS SET HERE, NOT ASSUMED. befello_enqueue_global_typography()
   already paints .site-footer with the canvas, and it wins — but this file
   then puts muted ink on top of it, and if that inline rule is ever removed
   the footer goes back to the Customizer's #55555e and every line of text in
   it drops to 1.15:1. Measured, in a fixture without that inline block.
   Stating the surface beside the text that depends on it is what stops the
   two drifting apart. */
.site-footer {
	background-color: var(--befello-canvas, #fff);
	border-top: 1px solid var(--bf-border, #dde2df);
}

.site-footer .widget,
.site-footer .footer-widgets,
.site-footer .site-info,
.site-footer .inside-site-info {
	background-color: transparent;
	color: var(--bf-ink-muted, #494e4a);
}

.footer-widgets {
	max-width: var(--bf-container-max, 1240px);
	margin-inline: auto;
	padding: clamp(32px, 5vw, 56px) var(--bfs-gutter);
}

.footer-widgets .widget {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.footer-widgets .widget-title {
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bf-ink-muted, #494e4a);
}

.inside-site-info {
	max-width: var(--bf-container-max, 1240px);
	margin-inline: auto;
	padding: var(--bf-space-5, 1.25rem) var(--bfs-gutter);
	border-top: 1px solid var(--bf-hairline-quiet, #eceeed);
}

.site-info,
.copyright-bar {
	color: var(--bf-ink-muted, #494e4a);
	font-size: var(--bf-text-sm, 0.875rem);
}

.site-info a,
.footer-bar a {
	color: var(--bf-ink-muted, #494e4a);
}

.site-info a:hover,
.footer-bar a:hover {
	color: var(--bf-primary, #0069c7);
}