/**
 * Components.
 *
 * Remember the constraint from the design brief: #2E373F is mid-tone, so
 * filled surfaces barely separate from it. SEPARATE REGIONS WITH BORDERS AND
 * RULES, NOT WITH RAISED OR INSET FILLS.
 */

/* Buttons ----------------------------------------------------------- */

.fi-button {
	display: inline-block;
	padding: 0.7em 1.6em;          /* horizontal ~2x vertical, so the pill reads as intentional */
	border: 0;
	border-radius: var(--fi-radius-pill);
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-sm);
	font-weight: var(--fi-weight-medium);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--fi-transition);
}

.fi-button--primary {
	background-color: var(--fi-accent);
	/* #14181C is the ONLY label that clears contrast in BOTH rest and hover.
	   White fails at 2.35:1; the page background fails on hover at 3.73:1. */
	color: var(--fi-on-accent);
}

.fi-button--primary:hover,
.fi-button--primary:focus {
	background-color: var(--fi-accent-hover);
	color: var(--fi-on-accent);
}

.fi-button--secondary {
	background-color: var(--fi-secondary);
	color: #fff;
	/* Required: the fill alone is 2.27:1 against the page and 1.76:1 on hover,
	   so without a border the button has no visible edge and the hover makes it
	   recede rather than stand out. */
	border: var(--fi-border-width-strong) solid var(--fi-border-strong);
}

.fi-button--secondary:hover,
.fi-button--secondary:focus {
	background-color: var(--fi-secondary-hover);
	color: #fff;
}

/* Header ------------------------------------------------------------ */

.fi-header {
	border-block-end: var(--fi-border-width) solid var(--fi-border-subtle);
	padding-block: var(--fi-space-4);
}

.fi-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fi-space-4);
}

.fi-wordmark {
	margin: 0;
	margin-inline-end: auto;
	line-height: 0;
}

.fi-wordmark a {
	display: inline-block;
	text-decoration: none;
}

/* The wordmark renders at its natural size, 168x72. Never scaled. */
.fi-wordmark__svg {
	width: 168px;
	height: 72px;
	display: block;
	/* Safety net only. It never applies at 168px in any supported viewport -
	   the narrowest phone leaves 288px inside the gutters - but it guarantees
	   the wordmark can never be the thing that causes a horizontal scroll. */
	max-width: 100%;
}

.fi-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fi-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-nav__list a {
	color: var(--fi-text);
	font-size: var(--fi-size-sm);
	text-decoration: none;
}

.fi-nav__list a:hover,
.fi-nav__list .current-menu-item > a {
	color: var(--fi-accent);
	text-decoration: underline;
}

.fi-header__cta { margin: 0; }

/* Footer ------------------------------------------------------------ */

.fi-footer {
	margin-block-start: var(--fi-space-9);
	padding-block: var(--fi-space-6);
	border-block-start: var(--fi-border-width) solid var(--fi-border-subtle);
	color: var(--fi-text-muted);
	font-size: var(--fi-size-sm);
}

.fi-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fi-space-4);
	margin: 0 0 var(--fi-space-5);
	padding: 0;
	list-style: none;
}

.fi-footer__imprint { max-width: var(--fi-measure); }

/* The statistic ------------------------------------------------------
 *
 * docs/03 section 7. The figure is the loudest thing in the block, the source
 * is visible without interaction, and the caveat is one keystroke away and
 * impossible to omit.
 */

.fi-stat {
	margin: var(--fi-space-6) 0;
	padding: var(--fi-space-5);
	/* Outline, not fill - see the note at the top of this file. */
	border: var(--fi-border-width) solid var(--fi-border-subtle);
	border-radius: var(--fi-radius);
}

.fi-stat__figure {
	margin: 0;
	font-family: var(--fi-font-display);
	font-weight: var(--fi-weight-display);
	font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	line-height: 1.05;
	color: var(--fi-accent);
	max-width: none;
}

.fi-stat__claim {
	margin: var(--fi-space-3) 0 0;
	font-size: var(--fi-size-base);
	max-width: var(--fi-measure-narrow);
}

.fi-stat__source,
.fi-stat__basis,
.fi-stat__checked {
	margin: var(--fi-space-3) 0 0;
	color: var(--fi-text-muted);
	font-size: var(--fi-size-xs);
	max-width: var(--fi-measure-narrow);
}

.fi-stat__source a { color: var(--fi-accent); }

/* The "but…" control. A real <details>, so it works with JS disabled. */

.fi-stat__caveat {
	margin-block-start: var(--fi-space-4);
	border-block-start: var(--fi-border-width) solid var(--fi-border-subtle);
	padding-block-start: var(--fi-space-4);
}

.fi-stat__caveat-toggle {
	display: inline-block;
	cursor: pointer;
	font-family: var(--fi-font-display);
	font-size: var(--fi-size-sm);
	font-weight: var(--fi-weight-medium);
	color: var(--fi-accent);
	/* The default triangle sits awkwardly against a pill-shaped design system,
	   and a custom marker below reads more like a control. */
	list-style: none;
}

.fi-stat__caveat-toggle::-webkit-details-marker { display: none; }

.fi-stat__caveat-toggle::before {
	content: "+";
	display: inline-block;
	width: 1.25em;
	font-weight: var(--fi-weight-bold);
}

.fi-stat__caveat[open] .fi-stat__caveat-toggle::before { content: "–"; }

.fi-stat__caveat-body {
	margin-block-start: var(--fi-space-3);
	color: var(--fi-text);
	font-size: var(--fi-size-sm);
}

/* Crisis signposting. Beside the number, never in the footer.
   docs/13 section 5.3, WHO and Samaritans safe messaging. */

.fi-stat__crisis {
	margin-block-start: var(--fi-space-4);
	padding: var(--fi-space-4);
	border: var(--fi-border-width-strong) solid var(--fi-accent);
	border-radius: var(--fi-radius);
}

.fi-stat__crisis-lead {
	margin: 0 0 var(--fi-space-2);
	font-weight: var(--fi-weight-medium);
}

.fi-stat__crisis-list {
	margin: 0;
	padding-inline-start: var(--fi-space-5);
	font-size: var(--fi-size-sm);
}