/* =========================================================================
   BEFELLO ALUMNI ADVICE

   SCOPE
   Every selector begins with .bfaa, .bfaa-* or html.bfaa-modal-open. Nothing
   here can reach the GeneratePress header, the navigation, the footer, the
   Opportunity hero, the Apply button, an Opportunity card, an Essay, the
   related-opportunities band or another plugin's form. There is no bare
   element selector in this file -- no `button {}`, no `input {}`, no `h2 {}`
   -- and the two theme classes it does mention (.befello-btn--primary and
   .screen-reader-text) are only ever qualified by a .bfaa ancestor.

   TOKENS
   Nothing here invents a colour, a radius, a space step or a type size. The
   values come from the theme's --bf-* layer, which is the document's own
   namespace, and every var() carries the current resolved value as a
   fallback so the section still renders sanely if this CSS is ever loaded
   somewhere the theme is not.

   THE BAND
   The section deliberately reuses .befello-related's language -- a hairline
   above, the same container max-width, the same inline gutter -- because it
   sits immediately before that band and the two have to read as one page
   continuing. Match those values, do not merely approximate them.
   ========================================================================= */

.bfaa,
.bfaa *,
.bfaa *::before,
.bfaa *::after {
	/* The same scoped reset the theme applies to .befello-opportunity and to
	   .befello-related, and for the same reason: this section is outside
	   both of those elements, so it is outside their reset. Without it the
	   inner container is content-box and its left edge lands inside the
	   article's on a wide screen. */
	box-sizing: border-box;
}

/* --- GENERATEPRESS'S BUTTONS DO NOT BELONG IN HERE ------------------------
   GeneratePress paints every <button> from its own stylesheet
   (`button { background: #55555e; color: #fff; padding: 10px 20px }`) and its
   Customizer prints the same thing INLINE IN wp_head, after every enqueued
   stylesheet, with selectors like `button:not(.menu-toggle)` -- (0,1,1),
   which outranks a single class whatever the load order.

   Measured, with the parent theme's real rules in the page: "Read full tip"
   rendered as white text on a black block at 10px/20px, and the rail arrows
   came out white-on-black and turned white-on-pale-blue on hover, which is
   invisible. None of that was visible in a harness that had no GeneratePress
   CSS in it, which is why the harness has it now.

   So: neutralise it once, at (0,2,0), for every button this section owns --
   and restate the properties rather than assuming, because a reset that only
   fixes the background leaves GeneratePress's padding and square corner
   behind. Each control then paints itself back, also at (0,2,0) or more, in
   the rules further down. .befello-btn keeps its own fill because its
   selectors are (0,2,1) and win this outright. */
.bfaa button,
.bfaa-modal button {
	background: none;
	background-color: transparent;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-shadow: none;
}

.bfaa button:hover,
.bfaa button:focus,
.bfaa button:active,
.bfaa-modal button:hover,
.bfaa-modal button:focus,
.bfaa-modal button:active {
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
}

/* THE hidden ATTRIBUTE HAS TO WIN, AND WITHOUT THIS IT DOES NOT.
   `[hidden] { display: none }` is a USER-AGENT rule, and any author
   `display` declaration beats a UA rule whatever the specificity. Four
   things in this component are rendered with the attribute and revealed by
   the script -- the browsing controls, the "Read full advice" toggle, the
   error summary and the thank-you -- and three of them carry an author
   `display` of their own, so all three were visible from the start.
   Measured: "Read full advice" sat under every card, including the ones
   whose text was not clipped, while element.hidden reported true.

   !important is the right tool here rather than a smell: it is restoring
   the platform's own behaviour, and it is scoped so it cannot reach
   anything outside this section. */
.bfaa [hidden] {
	display: none !important;
}

.bfaa {
	/* --- The two numbers the layout is actually built from ---------------
	   per-view is how many cards are visible at once, and it is the ONLY
	   place a column count is written. The track's item width, the page
	   arithmetic in the script and the paging step all read it, so changing
	   the density at a breakpoint is one declaration rather than four that
	   can disagree. */
	--bfaa-per-view: 2;
	--bfaa-gap: var(--bf-space-5, 1.25rem);

	--bfaa-surface: var(--bf-surface, #fff);
	--bfaa-border: var(--bf-border, #dde2df);
	--bfaa-ink: var(--bf-ink, #252a27);
	--bfaa-muted: var(--bf-ink-muted, #494e4a);
	--bfaa-primary: var(--bf-primary, #0069c7);
	--bfaa-primary-deep: var(--befello-voltage-deep, #005baf);
	--bfaa-primary-soft: var(--bf-primary-soft, #e8f4fe);
	--bfaa-primary-soft-border: var(--bf-primary-soft-border, #bfe0fb);
	--bfaa-radius: var(--bf-radius-card, 14px);
	--bfaa-radius-panel: var(--bf-radius-panel, 18px);
	--bfaa-ring: var(--befello-focus-ring, #0069c7);

	/* How many lines of advice a card shows before it folds.

	   Seven, measured rather than guessed. Every card in a track is as tall
	   as the tallest one in it -- that is what stops the row jumping as it
	   pages -- so the fold does not only bound the long card, it sets the
	   height of all of them. At nine lines a two-up row of five came out
	   575px tall with most cards mostly empty. Seven keeps a full thought
	   visible, and the rest is one press away and never lost. */
	--bfaa-lines: 7;

	border-top: 1px solid var(--bfaa-border);
	background: var(--bf-page-bg, #fff);
	color: var(--bfaa-ink);
	font-family: var(--befello-font, system-ui, sans-serif);
}

/* Matches .befello-related__inner and .befello-opportunity__layout exactly.
   The three are siblings down the page and their left edges have to line up,
   so these are the same values, not similar ones. */
.bfaa__inner {
	max-width: var(--bf-container-max, 1240px);
	margin: 0 auto;
	padding: var(--bf-space-12, 3rem) var(--bf-space-6, 1.5rem);
}


/* --- The heading row -----------------------------------------------------
   Title and dek on the left, the browsing controls on the right. They wrap
   onto separate lines rather than compressing, because a two-word heading
   beside two 44px circles is the one thing that does not compress well. */

.bfaa__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bf-space-3, 0.75rem) var(--bf-space-5, 1.25rem);
	margin-bottom: var(--bf-space-6, 1.5rem);
}

.bfaa__titles {
	min-width: 0;
}

/* 22px/700, the size .befello-related__heading uses. The two bands sit one
   above the other and a reader should not meet two typographies for one
   idea; --bf-text-display-sm resolves to the same 1.375rem. */
.bfaa__heading {
	margin: 0;
	color: var(--bfaa-ink);
	font-family: var(--befello-font, system-ui, sans-serif);
	font-size: var(--bf-text-display-sm, 1.375rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}

.bfaa__dek {
	max-width: 46ch;
	margin: var(--bf-space-1, 0.25rem) 0 0;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 400;
	line-height: 1.5;
}


/* --- Browsing controls ---------------------------------------------------
   Deliberately the theme rail's arrow: a 44px circle on the page surface
   with a hairline border and a brand-coloured glyph. Written here in the
   theme's own tokens rather than borrowing .befello-rail__arrow, so the
   section cannot break the day the rail's markup changes -- the same call
   befello-discovery made for its own controls. If the rail's shape ever
   changes deliberately, change this with it. */

.bfaa__nav {
	display: flex;
	align-items: center;
	gap: var(--bf-space-2, 0.5rem);
	flex: 0 0 auto;
}

.bfaa__page {
	margin: 0 var(--bf-space-1, 0.25rem) 0 0;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bfaa .bfaa__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--bfaa-surface);
	color: var(--bfaa-primary);
	border: 1px solid var(--bfaa-border);
	border-radius: var(--bf-radius-pill, 999px);
	cursor: pointer;
	font-size: 18px;
	transition: background-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease),
	            border-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease),
	            color var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}

/* Hover has to READ, and the old one did not: a pale blue fill under a glyph
   that GeneratePress had already turned white is an arrow that disappears
   under the cursor. The fill stays soft -- this is a secondary control -- and
   the glyph goes to the DEEP brand blue, which measures 7.4:1 on it. The
   border comes up to full brand blue as well, so the target is obvious
   before the pointer is even over the glyph. */
.bfaa .bfaa__nav .bfaa__arrow:hover {
	background: var(--bfaa-primary-soft);
	border-color: var(--bfaa-primary);
	color: var(--bfaa-primary-deep);
}

.bfaa .bfaa__nav .bfaa__arrow:active {
	background: var(--bf-surface-strong, #d7ecfd);
	color: var(--bfaa-primary-deep);
}

/* Disabled is the end of the rail, and it has to read as "nothing more that
   way" rather than as a styling accident: the glyph drops to the muted ink
   and the pointer stops offering a press. Not display:none -- a control that
   disappears at the end makes the pair jump sideways. */
.bfaa .bfaa__arrow[disabled] {
	color: var(--bfaa-muted);
	opacity: 0.45;
	cursor: default;
}

.bfaa .bfaa__nav .bfaa__arrow[disabled]:hover,
.bfaa .bfaa__nav .bfaa__arrow[disabled]:active {
	background: var(--bfaa-surface);
	border-color: var(--bfaa-border);
	color: var(--bfaa-muted);
}


/* --- The row -------------------------------------------------------------
   CTA first, advice after it. Two columns when there is one piece of advice
   so the pair is balanced; one-to-two when there are more, which is what
   gives the track room for two cards while the CTA keeps its third and stays
   put while the advice pages. */

.bfaa__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--bfaa-gap);
	align-items: stretch;
}

.bfaa--single .bfaa__body {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* The column count has to move with the layout. Left at two, the one card
   filled half of its own half and sat beside an empty gap -- measured at
   1024px: a 478px track holding a 229px card. The track sizes its items
   from this property alone, so this is the only line that needs to change. */
.bfaa--single {
	--bfaa-per-view: 1;
}

/* Nothing to browse: one invitation, at reading width, centred. No empty
   track, no disabled arrows, no "0 advice" and no placeholder card. */
.bfaa--empty .bfaa__body {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}

.bfaa--empty .bfaa-cta {
	width: 100%;
	max-width: 38rem;   /* 608px, inside §12's 560-680 band */
}


/* --- The invitation ------------------------------------------------------
   A bordered panel on the page surface with one action in it. Not a blue
   billboard: the advice beside it is the thing worth looking at, and an
   invitation that outweighed it would be the loudest element on the page for
   the smallest reason. */

.bfaa-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bf-space-2, 0.5rem);
	padding: var(--bf-space-5, 1.25rem);
	background: var(--bfaa-surface);
	border: 1px solid var(--bfaa-border);
	border-radius: var(--bfaa-radius);
}

/* In the row the CTA is sized by its own content, not stretched to the
   height of the tallest card. Stretched, it was a 575px panel holding three
   short lines and a button, with two thirds of it empty -- and centring the
   content only moved the emptiness above and below. It is an invitation
   beside the advice, not a fourth card of equal weight, and looking like one
   is honest about that. */
.bfaa:not(.bfaa--empty) .bfaa-cta {
	align-self: start;
}

.bfaa-cta--solo {
	align-items: center;
	padding: var(--bf-space-8, 2rem) var(--bf-space-6, 1.5rem);
	text-align: center;
}

.bfaa-cta__title {
	margin: 0;
	color: var(--bfaa-ink);
	font-size: var(--bf-text-lg, 1.125rem);
	font-weight: 600;
	line-height: 1.35;
}

.bfaa-cta__body {
	margin: 0;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 400;
	line-height: 1.55;
}

.bfaa-cta__button {
	margin-top: var(--bf-space-3, 0.75rem);
}

/* The theme paints .befello-btn--primary through :link and :visited, which
   only match anchors. This control is genuinely a button -- it opens a
   dialog on this page rather than navigating -- so the fill is restated from
   the theme's own tokens. Same situation, same answer, as
   `.bfd button.befello-btn--primary` in befello-discovery. */
/* GEOMETRY, NOT JUST COLOUR. .befello-btn is a single class (0,1,0) and
   GeneratePress's `button:not(.menu-toggle)` is (0,1,1), so a <button>
   carrying the theme's button class keeps the theme's COLOUR (set at (0,2,1)
   below) and loses its padding, its height and its 8px corner to the parent
   theme -- measured at 10px/20px and a 3px radius. Restated here at (0,2,1).
   Anchors are unaffected; this is only ever a problem for real buttons. */
.bfaa button.befello-btn,
.bfaa-modal button.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);
}

.bfaa button.befello-btn--primary {
	background-color: var(--bf-cta, #0069c7);
	color: var(--bf-cta-ink, #fff);
	border-color: var(--bf-cta, #0069c7);
}

.bfaa button.befello-btn--primary:hover,
.bfaa button.befello-btn--primary:active {
	background-color: var(--bf-cta-hover, #005baf);
	border-color: var(--bf-cta-hover, #005baf);
}

.bfaa button.befello-btn--secondary {
	background-color: var(--bfaa-surface);
	color: var(--bfaa-ink);
	border-color: var(--bfaa-ink);
}

.bfaa-cta__noscript {
	margin: var(--bf-space-2, 0.5rem) 0 0;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-xs, 0.75rem);
}


/* --- The track -----------------------------------------------------------
   A scroll-snapping row. CSS alone gives swipe, snap and keyboard scrolling
   of a focused container; the script only adds the arrows, the paging step
   and the page counter. With the script blocked the advice is still all
   reachable, which is why the arrows are rendered hidden and revealed rather
   than rendered and disabled. */

.bfaa__track {
	display: grid;
	grid-auto-flow: column;
	/* Percentages inside a scroll container resolve against the VISIBLE
	   width, not the scrolled width, so this is genuinely "N cards fill the
	   frame" at any container size. */
	grid-auto-columns: calc(
		(100% - (var(--bfaa-per-view) - 1) * var(--bfaa-gap)) / var(--bfaa-per-view)
	);
	gap: var(--bfaa-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for a card's focus ring, which the scroll container would
	   otherwise clip on the first and last card. */
	padding-block: 3px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	/* Stops a flick at the end of the track from becoming a browser
	   back-navigation, and stops the page from scrolling sideways with it.
	   This is the rule that keeps the overflow INSIDE the track. */
	overscroll-behavior-inline: contain;
}

.bfaa__track:focus-visible {
	outline: 3px solid var(--bfaa-ring);
	outline-offset: 2px;
}

.bfaa-card {
	/* NOT DECORATION -- THIS IS WHAT STOPS THE PAGE SCROLLING SIDEWAYS.
	   The cards carry visually-hidden labels ("Topic:", "profile of X"),
	   and the theme's .screen-reader-text is position:absolute. An
	   absolutely positioned element takes its containing block from the
	   nearest POSITIONED ancestor, and with none inside the track that is
	   the initial containing block -- so those 1px spans are laid out
	   against the document, at the x-position of a card that is scrolled
	   out of the track, and the DOCUMENT grows to contain them. Measured:
	   at 390px with three cards the page scrolled 572px sideways, and
	   overflow:hidden on every ancestor up to <body> did not stop it,
	   because the escaping elements were never inside them.

	   One `position: relative` puts the containing block back inside the
	   scroll container, where the track clips it. Do not remove it. */
	position: relative;
	scroll-snap-align: start;
	min-width: 0;
}


/* --- One piece of advice -------------------------------------------------
   White surface, one hairline, 14px corner: the card language the rest of
   the site already uses. No shadow, no lift, no hover transform -- the card
   is not a link and has nothing to promise. */

.bfaa-card__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bf-space-4, 1rem);
	height: 100%;
	padding: var(--bf-space-5, 1.25rem);
	background: var(--bfaa-surface);
	border: 1px solid var(--bfaa-border);
	border-radius: var(--bfaa-radius);
}

/* A GRID, NOT A FLEX ROW, because the topic token has to be able to move.

   Three columns while the card is wide: mark, who, topic. The middle column
   is minmax(0, 1fr), which is what lets the name inside it be narrower than
   its own text and therefore ellipsise instead of pushing the token off the
   card. */
.bfaa-card__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "avatar who topic";
	align-items: start;
	column-gap: var(--bf-space-3, 0.75rem);
	row-gap: var(--bf-space-2, 0.5rem);
}

.bfaa-card__avatar { grid-area: avatar; }
.bfaa-card__who    { grid-area: who; }
.bfaa-card__topic  { grid-area: topic; }

/* THE CARD, NOT THE WINDOW, decides this -- a container query, because the
   crunch is not a phone. At 1280px with five tips the cards are 300px wide
   and the header has 196px for a name and a token; "Documents & References"
   alone is 162px of it, which would leave a name ellipsised to two
   characters. Below 22rem of CARD the token drops to its own row, indented
   to line up with the name above it.

   Where container queries are unsupported the header simply stays in three
   columns and the name ellipsises -- narrower than ideal, never wrapped,
   which is the rule that matters. */
.bfaa-card {
	container-type: inline-size;
	container-name: bfaa-card;
}

@container bfaa-card (max-width: 22rem) {

	.bfaa-card__head {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"avatar who"
			".      topic";
	}

	/* Here, and only here, the supporting line may take a second line. On a
	   320px phone "Awardee / Recipient · 2025" does not fit, and ellipsising
	   it eats the cohort year -- which is the more useful half. The header is
	   already two rows at this size, so one more line costs nothing, and the
	   track equalises card heights anyway. The NAME is still one line: that
	   rule has no exception. */
	.bfaa-card__line {
		white-space: normal;
	}
}

/* Initials, not a photograph. Neutral, so it identifies without competing:
   a coloured avatar per contributor would put the brightest thing on the
   card furthest from the words. */
.bfaa-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--bf-radius-pill, 999px);
	background: var(--bf-surface-subtle, #f2f5f3);
	color: var(--bfaa-muted);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
}

.bfaa-card__who {
	min-width: 0;
}

.bfaa-card__name {
	margin: 0;
	color: var(--bfaa-ink);
	font-size: var(--bf-text-base, 1.0625rem);
	font-weight: 600;
	line-height: 1.3;
	/* ONE LINE, ALWAYS. A name that wrapped pushed the whole card's header
	   into two rows and the row of cards out of alignment with it. It is
	   held at the type size the rest of the card uses -- shrinking a name to
	   11px to make it fit is not fitting it -- and the last resort is an
	   ellipsis, which only happens once the header has already tried moving
	   the topic token out of the way.

	   The DOM text is complete, so a screen reader still reads the whole
	   name; only the painting is clipped. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bfaa-card__line {
	margin: 2px 0 0;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 400;
	line-height: 1.4;
	/* The supporting line follows the name's rule rather than wrapping
	   underneath it: "Awardee / Recipient · 2025" on two lines makes a
	   three-line header out of one. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The single page's field token: soft blue fill, soft blue hairline, squared
   corner. Outlined rather than filled, so it labels the card without
   competing with the name above it. */
.bfaa-card__topic {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	max-width: 100%;
	margin: 0;
	padding: 4px 10px;
	background: var(--bfaa-primary-soft);
	color: var(--bfaa-primary-deep);
	border: 1px solid var(--bfaa-primary-soft-border);
	border-radius: var(--bfaa-radius);
	font-size: var(--bf-text-xs, 0.75rem);
	font-weight: 500;
	line-height: 1.4;
	/* The token is a label, and a label that wrapped would make the header
	   taller than the name beside it. It is the thing that moves rather than
	   the thing that shrinks -- see the container query above. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bfaa-card__body {
	/* Takes the slack, so every card's footer sits on the same line whatever
	   the length of the advice above it. */
	flex: 1 1 auto;
	min-height: 0;
}

/* THE HERO. Body size, body weight, generous leading -- this is the only
   thing on the card that is meant to be read rather than scanned. */
.bfaa-card__text {
	position: relative;
	overflow: hidden;
	/* The fold. max-height rather than -webkit-line-clamp because the text is
	   a sequence of <p> elements and line-clamp is unreliable over block
	   children; this is exact, works everywhere, and the script measures
	   against it to decide whether the control below is needed at all. */
	max-height: calc(var(--bfaa-lines) * 1.6em);
	color: var(--bfaa-ink);
	font-size: var(--bf-text-base, 1.0625rem);
	font-weight: 400;
	line-height: 1.6;
}

.bfaa-card__text p {
	margin: 0 0 0.75em;
}

.bfaa-card__text p:last-child {
	margin-bottom: 0;
}

/* The last line fades rather than being cut mid-stroke, so "there is more"
   is visible before the control below is read. Only while folded. */
.bfaa-card__text.is-clamped::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2.4em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bfaa-surface));
	pointer-events: none;
}

.bfaa-card__text.is-open {
	max-height: none;
}

/* A text action, in the same language as the theme's own quiet links: brand
   blue, 500, underlined at a 3px offset so the rule sits clear of the
   descenders. Hover deepens the colour and thickens the underline -- it does
   not grow a box, because a box here would compete with the paragraph it
   belongs to. */
.bfaa .bfaa-card__more {
	display: inline-block;
	align-self: flex-start;
	margin-top: var(--bf-space-2, 0.5rem);
	padding: 4px 0;
	background: none;
	border: 0;
	border-radius: var(--bf-radius-xs, 4px);
	color: var(--bfaa-primary);
	font-family: inherit;
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color var(--bf-motion-fast, 140ms) var(--bf-ease, ease),
	            text-decoration-color var(--bf-motion-fast, 140ms) var(--bf-ease, ease);
}

.bfaa .bfaa-card .bfaa-card__more:hover {
	background: none;
	color: var(--bfaa-primary-deep);
	text-decoration-thickness: 2px;
}

/* Only rendered when there is something in it -- a tip whose contributor
   left no links has no footer and no rule under the words, rather than a
   divider under nothing. */
.bfaa-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bf-space-2, 0.5rem) var(--bf-space-4, 1rem);
	padding-top: var(--bf-space-3, 0.75rem);
	border-top: 1px solid var(--bf-hairline-quiet, #eceeed);
}


.bfaa-card__social {
	display: inline-flex;
	align-items: center;
	gap: var(--bf-space-3, 0.75rem);
	margin: 0;
}

/* Quiet, and monochrome on purpose: no LinkedIn blue, no Instagram gradient.
   They follow currentColor like every other icon in the system. */
.bfaa-card__social-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 500;
	text-decoration: none;
}

.bfaa-card__social-link:hover {
	color: var(--bfaa-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bfaa-card__social-link .befello-icon {
	flex: 0 0 auto;
	font-size: 17px;
	width: 17px;
	height: 17px;
}


/* --- Focus ---------------------------------------------------------------
   The theme's focus rules are scoped to .befello-opportunity, .befello-essay-page
   and .befello-opportunity-card. This section is inside none of them, so it
   states its own -- with §24's geometry and the theme's SOLID ring colour
   rather than the document's 30% mix, which composites to 1.48:1 over white
   and fails the 3:1 that WCAG 1.4.11 requires. That departure is recorded in
   CLAUDE.md; this file follows it rather than reopening it. */

.bfaa a:focus-visible,
.bfaa button:focus-visible,
.bfaa summary:focus-visible,
.bfaa-modal a:focus-visible,
.bfaa-modal button:focus-visible,
.bfaa-modal input:focus-visible,
.bfaa-modal select:focus-visible,
.bfaa-modal textarea:focus-visible {
	outline: 3px solid var(--bfaa-ring);
	outline-offset: 2px;
}

/* The primary is a blue fill, so a blue ring on it is invisible. Ink, at
   3px with a 3px offset, reads against both the white page outside the ring
   and the blue fill inside it. The compound selector is not optional: the
   catch-all above is (0,2,0) and a bare class would lose to it. */
.bfaa button.befello-btn--primary:focus-visible,
.bfaa-modal button.befello-btn--primary:focus-visible {
	outline: 3px solid var(--befello-focus-ring-on-brand, #252a27);
	outline-offset: 3px;
}


/* =========================================================================
   THE FORM

   A native <dialog>. showModal() brings the focus trap, Escape, the inert
   background, top-layer stacking and focus restoration; none of that is
   re-implemented here.
   ========================================================================= */

.bfaa-modal {
	width: min(40rem, calc(100vw - 3rem));
	max-width: 100%;
	max-height: min(46rem, calc(100vh - 4rem));
	margin: auto;
	padding: 0;
	border: 1px solid var(--bfaa-border);
	border-radius: var(--bfaa-radius-panel);
	background: var(--bfaa-surface);
	color: var(--bfaa-ink);
	font-family: var(--befello-font, system-ui, sans-serif);
	overflow: hidden;
}

/* THE DIALOG ITSELF IS THE FLEX CONTAINER, and only while it is open.

   Not on the bare class: the UA stylesheet closes a dialog with
   `dialog:not([open]) { display: none }`, and an AUTHOR display declaration
   beats any UA rule whatever the specificity -- so `.bfaa-modal { display:
   flex }` would leave the closed dialog, and the whole form inside it,
   visible on the page. [open] is what confines it to the open state.

   This is also what makes the sheet's foot reachable. The panel used to
   carry `height: 100%`, which resolves against the PARENT'S HEIGHT -- and
   the dialog has only a max-height, so its height is auto and the
   percentage resolved to auto too. The panel then grew to its content and
   the submit button ended up below the fold. Measured on a 390x800 phone:
   a 736px sheet containing a 1372px panel, with the button at y=1067.

   Flex gives the panel a definite box to fill, which is what lets the body
   scroll and the foot stay pinned. */
.bfaa-modal[open] {
	display: flex;
	flex-direction: column;
}

.bfaa-modal::backdrop {
	background: rgba(37, 42, 39, 0.45);
}

.bfaa-modal__panel {
	display: flex;
	flex-direction: column;
	/* Fills the dialog, and min-height:0 is what allows it to be SHORTER
	   than its content -- without it a flex item refuses to shrink past its
	   content's minimum and the overflow comes straight back. */
	flex: 1 1 auto;
	min-height: 0;
}

.bfaa-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bf-space-3, 0.75rem);
	flex: none;
	padding: var(--bf-space-4, 1rem) var(--bf-space-5, 1.25rem);
	border-bottom: 1px solid var(--bfaa-border);
}

.bfaa-modal__title {
	margin: 0;
	font-size: var(--bf-text-lg, 1.125rem);
	font-weight: 700;
	line-height: 1.3;
}

.bfaa-modal .bfaa-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--bf-radius-btn, 8px);
	color: var(--bfaa-muted);
	font-size: 20px;
	cursor: pointer;
}

.bfaa-modal .bfaa-modal__panel .bfaa-modal__close:hover {
	background: var(--bf-surface-subtle, #f2f5f3);
	color: var(--bfaa-ink);
}

.bfaa-form {
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* The form is the flex child that has to give: it holds the scrolling
	   body and the pinned foot. */
	flex: 1 1 auto;
}

.bfaa-form__body {
	display: flex;
	flex-direction: column;
	gap: var(--bf-space-4, 1rem);
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--bf-space-5, 1.25rem);
	overflow-y: auto;
	/* A flick at the end of the form must not start scrolling the page
	   behind the sheet. */
	overscroll-behavior: contain;
}

.bfaa-form__foot {
	flex: none;
	padding: var(--bf-space-4, 1rem) var(--bf-space-5, 1.25rem);
	border-top: 1px solid var(--bfaa-border);
	background: var(--bfaa-surface);
}

.bfaa-form__submit {
	width: 100%;
}

/* ON THE PAGE SURFACE, NOT ON A RED TINT, AND THAT IS A CONTRAST DECISION.
   The theme's error red is #c64040, which measures 5.29:1 on white and
   4.37:1 on the soft red fill -- under the 4.5:1 WCAG 1.4.3 asks for body
   text, which §27 of the design system adopts. Measured, at 14px/400.
   Keeping the red for the border and the words and leaving the surface
   alone puts it back to 5.29:1 without inventing a colour outside the token
   layer, and a 1px-bordered panel is the system's own language anyway. */
.bfaa-form__alert {
	margin: 0;
	padding: var(--bf-space-3, 0.75rem) var(--bf-space-4, 1rem);
	background: var(--bfaa-surface);
	color: var(--bf-urgent, #c64040);
	border: 1px solid var(--bf-danger, #c64040);
	border-radius: var(--bf-radius-btn, 8px);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 500;
	line-height: 1.5;
}

/* Two fields side by side on a comfortable width, stacked on a phone. The
   pairs are logical rather than decorative: name with cohort (who), role
   with topic (what), the two social links together. */
.bfaa-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--bf-space-4, 1rem);
}

.bfaa-form__row > .bfaa-field--narrow {
	max-width: 11rem;
}


/* --- Fields --------------------------------------------------------------
   Labels above, never placeholders. Hints under the label, where they are
   read before the field rather than after it. Errors under the field, tied
   to it by aria-describedby. */

.bfaa-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bfaa-field__label {
	display: flex;
	align-items: baseline;
	gap: var(--bf-space-2, 0.5rem);
	margin-bottom: 4px;
	color: var(--bfaa-ink);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
}

.bfaa-field__req,
.bfaa-field__opt {
	color: var(--bfaa-muted);
	font-size: var(--bf-text-xs, 0.75rem);
	font-weight: 400;
	letter-spacing: 0.01em;
}

.bfaa-field__hint {
	margin-bottom: 6px;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-xs, 0.75rem);
	line-height: 1.45;
}

/* GeneratePress styles controls with selectors like input[type="text"],
   which is (0,1,1), and prints its customiser colours inline in wp_head
   AFTER every enqueued stylesheet -- so a tie on specificity also loses on
   source order. (0,2,0) is what actually settles it, and the properties are
   restated rather than assumed: a reset that only fixes the background
   leaves GeneratePress's padding and square corner behind. */
.bfaa-modal .bfaa-field__input {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 0 var(--bf-space-3, 0.75rem);
	background-color: var(--bfaa-surface);
	color: var(--bfaa-ink);
	border: 1px solid var(--bfaa-border);
	border-radius: var(--bf-radius-btn, 8px);
	box-shadow: none;
	font-family: inherit;
	/* 16px minimum. Anything smaller and iOS Safari zooms the page when the
	   field is focused, which is the single most common way a mobile form
	   breaks its own layout. */
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
}

.bfaa-modal .bfaa-field__input:focus {
	background-color: var(--bfaa-surface);
	color: var(--bfaa-ink);
	border-color: var(--bfaa-primary);
	box-shadow: none;
}

/* The select keeps its native chevron and its native picker. appearance:none
   would take the chevron and leave the picker, which means drawing a
   replacement that then has to be maintained -- and on iOS the wheel appears
   either way. Same decision as befello-discovery's sort control. */
.bfaa-modal .bfaa-field__select {
	padding-right: var(--bf-space-2, 0.5rem);
}

.bfaa-modal .bfaa-field__textarea {
	min-height: 9.5rem;
	padding: var(--bf-space-3, 0.75rem);
	line-height: 1.55;
	resize: vertical;
}

.bfaa-field__under {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bf-space-3, 0.75rem);
	margin-top: 4px;
}

.bfaa-field__count {
	flex: 0 0 auto;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-xs, 0.75rem);
	font-variant-numeric: tabular-nums;
}

.bfaa-field__count.is-over {
	color: var(--bf-urgent, #a8261c);
	font-weight: 600;
}

/* Empty by default and occupying no space, so a form with no errors has no
   gaps waiting in it. */
.bfaa-field__error {
	display: none;
	margin-top: 4px;
	color: var(--bf-urgent, #a8261c);
	font-size: var(--bf-text-xs, 0.75rem);
	font-weight: 500;
	line-height: 1.45;
}

.bfaa-field__error.is-shown {
	display: block;
}

/* The invalid field itself is marked too. Not by colour alone -- the message
   under it says what is wrong, and aria-invalid says it to a screen reader. */
.bfaa-modal .bfaa-field__input[aria-invalid="true"] {
	border-color: var(--bf-danger, #d13c30);
}

.bfaa-field--check {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 2px var(--bf-space-3, 0.75rem);
}

.bfaa-modal .bfaa-check__input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--bfaa-primary);
}

.bfaa-check__label {
	color: var(--bfaa-ink);
	font-size: var(--bf-text-sm, 0.875rem);
	font-weight: 400;
	line-height: 1.5;
}

.bfaa-field--check .bfaa-field__error {
	grid-column: 2;
}

/* The honeypot. Moved out of sight rather than display:none -- some bots
   skip hidden inputs, and this one is meant to be filled in. */
.bfaa-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* --- Success -------------------------------------------------------------
   Replaces the form inside the same dialog. The reader never leaves the
   Opportunity page, and the wording makes it plain that submitted is not
   published. */

.bfaa-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bf-space-3, 0.75rem);
	padding: var(--bf-space-8, 2rem) var(--bf-space-6, 1.5rem);
	text-align: center;
}

.bfaa-done__mark {
	display: inline-flex;
	color: var(--bf-success, #1f7a4d);
	font-size: 40px;
}

.bfaa-done__mark .befello-icon {
	font-size: 40px;
	width: 40px;
	height: 40px;
}

.bfaa-done__title {
	margin: 0;
	font-size: var(--bf-text-display-sm, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
}

.bfaa-done__body {
	max-width: 34ch;
	margin: 0;
	color: var(--bfaa-muted);
	font-size: var(--bf-text-sm, 0.875rem);
	line-height: 1.55;
}

.bfaa-done__button {
	margin-top: var(--bf-space-2, 0.5rem);
	min-width: 10rem;
}

/* The page behind a modal must not scroll. <dialog> makes the background
   inert but does not lock the scroll, and on iOS a touch-drag over the
   backdrop scrolls the document underneath the sheet. */
html.bfaa-modal-open,
html.bfaa-modal-open body {
	overflow: hidden;
}


/* =========================================================================
   TABLET AND PHONE

   Not the desktop layout shrunk. The row becomes a column, the track shows
   one card, and the card is the reading unit.
   ========================================================================= */

@media (max-width: 900px) {

	/* Two cards at 900px are 210px wide before padding, which is narrower
	   than a paragraph should be. One card, full width, from here down. */
	.bfaa {
		--bfaa-per-view: 1;
	}

	.bfaa__body,
	.bfaa--single .bfaa__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Tablet only ---------------------------------------------------------
   BOUNDED AT BOTH ENDS, and the lower bound is not tidiness.

   Between 641 and 900 the CTA has stopped being a column and is not yet a
   phone strip, so it lays its three parts out as a wrapping row. Left open
   at the bottom, `flex: 1 1 16rem` on the title and the body carried into
   the phone layout below -- where the container is a COLUMN, so flex-grow
   grows them vertically. Measured at 390px: a 650px-tall invitation with
   two hundred pixels of nothing between the heading and the sentence under
   it. */

@media (min-width: 641px) and (max-width: 900px) {

	.bfaa-cta {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--bf-space-2, 0.5rem) var(--bf-space-4, 1rem);
	}

	.bfaa-cta__title,
	.bfaa-cta__body {
		flex: 1 1 16rem;
	}

	.bfaa-cta__button {
		margin-top: 0;
		flex: 0 0 auto;
	}

	.bfaa--empty .bfaa-cta {
		flex-direction: column;
	}

	.bfaa--empty .bfaa-cta__button {
		margin-top: var(--bf-space-3, 0.75rem);
	}
}

@media (max-width: 640px) {

	.bfaa__inner {
		/* 20px gutters, matching the theme's own phone gutter. Set on one
		   element so nothing inside has to remember to leave a margin, and
		   so the page can never scroll sideways because a child forgot. */
		padding: var(--bf-space-8, 2rem) var(--bf-space-5, 1.25rem);
	}

	.bfaa__head {
		align-items: center;
	}

	/* When the head wraps, the controls take their own line -- pushed to the
	   end of it rather than sitting under the dek's first word. */
	.bfaa__nav {
		margin-left: auto;
	}

	/* Full width: a centred pill in a column of full-width blocks is the one
	   element that lines up with nothing. */
	.bfaa-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
	}

	.bfaa-cta__button {
		width: 100%;
		margin-top: var(--bf-space-3, 0.75rem);
	}

	/* Thumbs, not a pointer. */
	.bfaa-card__social-link {
		min-height: 44px;
	}

	/* The fold control is the one in-card action left, so it gets a real
	   target rather than the 24px its text would give it. */
	.bfaa-card__more {
		min-height: 44px;
		padding-block: 10px;
	}

	/* Fields stack. Two 150px-wide inputs side by side on a phone is the
	   classic way a form becomes unusable while still technically fitting. */
	.bfaa-form__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.bfaa-form__row > .bfaa-field--narrow {
		max-width: none;
	}

	/* --- The sheet ---------------------------------------------------------
	   Same element, same semantics, different shape: full width, pinned to
	   the bottom, rounded at the top.

	   dvh, not vh. vh is the LARGEST viewport height on a phone, so a sheet
	   sized in vh keeps its full height when the browser chrome and the
	   software keyboard appear -- and the submit button ends up below the
	   fold with no way to reach it. dvh tracks the viewport as it actually
	   is. The vh line above it is the fallback for engines without dvh. */
	.bfaa-modal {
		width: 100%;
		max-width: 100%;
		margin: auto 0 0;
		max-height: 92vh;
		max-height: 92dvh;
		border: 0;
		border-top: 1px solid var(--bfaa-border);
		border-radius: var(--bfaa-radius-panel) var(--bfaa-radius-panel) 0 0;
	}

	/*
	 * env() is 0 unless the document opts into viewport-fit=cover, which
	 * this theme does not -- the SAFE default, because the browser then lays
	 * out inside the safe area already. The inset is added anyway so the day
	 * the theme goes edge-to-edge this foot is already correct rather than
	 * newly broken.
	 */
	.bfaa-form__foot {
		padding-bottom: calc(var(--bf-space-4, 1rem) + env(safe-area-inset-bottom, 0px));
	}

	.bfaa-done {
		padding-bottom: calc(var(--bf-space-8, 2rem) + env(safe-area-inset-bottom, 0px));
	}
}


/* --- Reduced motion ------------------------------------------------------
   The only motion in this component is the track's smooth scroll and three
   colour transitions. The scroll is the one that matters: a page that slides
   sideways is a problem for the readers this query exists for. */

@media (prefers-reduced-motion: reduce) {

	.bfaa__track {
		scroll-behavior: auto;
	}

	.bfaa__arrow,
	.bfaa-card__social-link,
	.bfaa-cta__button {
		transition: none;
	}
}