/**
 * YEBN 2026 — global components and fixes
 *
 * Phase 0 scope only: typography normalisation, one button style,
 * the fixed-header scroll fix, visible focus, and the header-media fallback.
 * Page-specific styling belongs in its own file, added in later phases.
 *
 * Specificity rule for this file: never use !important. Where a parent or
 * core style has to be beaten, raise specificity with a real ancestor
 * selector and leave a comment saying what is being overridden.
 */

/* -------------------------------------------------------------------------
 * 1. Fixed-header scroll offset
 *
 * The header is fixed and Inspiro sets no scroll offset, so in-page anchors
 * and any browser-restored scroll position land underneath it. Audit item 4.
 * ---------------------------------------------------------------------- */

html {
	scroll-padding-top: calc(var(--yebn-header-h) + var(--yebn-space-2));
}

:where(h1, h2, h3, h4, h5, h6, [id]) {
	scroll-margin-top: calc(var(--yebn-header-h) + var(--yebn-space-2));
}

/* -------------------------------------------------------------------------
 * 2. Typography
 *
 * Headings on this site currently resolve to a mix of #131A4A and #222.
 * One colour, one family, one scale.
 * ---------------------------------------------------------------------- */

body {
	font-family: var(--yebn-font-body);
	font-size: var(--yebn-fs-base);
	line-height: var(--yebn-lh-body);
	color: var(--yebn-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
	font-family: var(--yebn-font-display);
	color: var(--yebn-navy);
	line-height: var(--yebn-lh-heading);
	letter-spacing: var(--yebn-ls-tight);
	text-wrap: balance;
}

h1, .entry-title { font-size: var(--yebn-fs-4xl); line-height: var(--yebn-lh-tight); }
h2 { font-size: var(--yebn-fs-3xl); }
h3 { font-size: var(--yebn-fs-2xl); }
h4 { font-size: var(--yebn-fs-xl); }
h5 { font-size: var(--yebn-fs-lg); }
h6 { font-size: var(--yebn-fs-base); letter-spacing: var(--yebn-ls-label); text-transform: uppercase; }

/* Running text stays readable. Wide blocks (images, galleries, embeds,
   full/wide-aligned blocks) are deliberately excluded. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	max-width: min(var(--yebn-measure), var(--yebn-measure-px));
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--yebn-navy);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--yebn-gold);
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover {
	text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------
 * 3. One button style
 *
 * The audit found four unrelated button treatments. Everything collapses to
 * a navy solid (primary) and a navy outline (secondary).
 *
 * Specificity note: `.wp-block-button .wp-block-button__link` (0,2,0) is used
 * so this wins over core's preset gradient rules, which are emitted as
 * `:root :where(.has-*-gradient-background)` (0,1,0), whatever the load order.
 * `background-image: none` is what actually removes the midnight gradient.
 * ---------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link,
.wp-block-button .wp-element-button,
.yebn-btn,
button.yebn-btn,
input[type="submit"].yebn-btn {
	display: inline-block;
	font-family: var(--yebn-font-display);
	font-size: var(--yebn-fs-sm);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: var(--yebn-ls-normal);
	text-transform: none;
	text-decoration: none;
	padding: 14px 26px;
	border: 1px solid var(--yebn-navy);
	border-radius: var(--yebn-radius);
	background-color: var(--yebn-navy);
	background-image: none;
	color: var(--yebn-paper);
	cursor: pointer;
	transition: background-color var(--yebn-dur-fast) var(--yebn-ease),
	            border-color var(--yebn-dur-fast) var(--yebn-ease),
	            color var(--yebn-dur-fast) var(--yebn-ease);
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-element-button:hover,
.yebn-btn:hover {
	background-color: var(--yebn-navy-hover);
	border-color: var(--yebn-navy-hover);
	color: var(--yebn-paper);
}

.wp-block-button .wp-block-button__link:active,
.yebn-btn:active {
	background-color: var(--yebn-navy-press);
	border-color: var(--yebn-navy-press);
}

/* Secondary: same geometry, no fill. */
.wp-block-button.is-style-outline .wp-block-button__link,
.yebn-btn--ghost {
	background-color: transparent;
	color: var(--yebn-navy);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.yebn-btn--ghost:hover {
	background-color: var(--yebn-navy);
	color: var(--yebn-paper);
}

/* Inspiro's own button classes and native form submits, brought into line. */
.entry-content .button,
.wpforms-form input[type="submit"],
.wpforms-form button[type="submit"] {
	font-family: var(--yebn-font-display);
	font-size: var(--yebn-fs-sm);
	font-weight: 600;
	text-transform: none;
	letter-spacing: var(--yebn-ls-normal);
	padding: 14px 26px;
	border: 1px solid var(--yebn-navy);
	border-radius: var(--yebn-radius);
	background-color: var(--yebn-navy);
	background-image: none;
	color: var(--yebn-paper);
}

/* -------------------------------------------------------------------------
 * 4. Visible focus
 *
 * Accessibility baseline. Gold is used here as an accent, on a 2px ring, not
 * as a fill — it is the one place the accent appears on every page.
 * ---------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--yebn-gold);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link:focus {
	outline: 2px solid var(--yebn-gold);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 5. Header media fallback
 *
 * The homepage header video has never started (readyState 0, paused) and the
 * page opens on a black void. assets/js/yebn.js gives it one honest attempt
 * and then marks the body, at which point we fall back to the header image.
 * Audit item 1.
 * ---------------------------------------------------------------------- */

.yebn-header-video-failed #wp-custom-header-video,
.yebn-header-video-failed .wp-custom-header-video-button {
	display: none;
}

/* Whatever happens to the video, the media area is never a black rectangle. */
.custom-header-media,
#wp-custom-header {
	background-color: var(--yebn-navy);
}

#wp-custom-header img.wp-post-image,
#wp-custom-header > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * 6. Layout helpers
 * ---------------------------------------------------------------------- */

.yebn-container {
	width: 100%;
	max-width: var(--yebn-container);
	margin-inline: auto;
	padding-inline: var(--yebn-space-3);
}

.yebn-section {
	padding-block: var(--yebn-space-7);
}

.yebn-measure {
	max-width: min(var(--yebn-measure), var(--yebn-measure-px));
}

/* Wide content must scroll inside itself, never sideways-scroll the page. */
.entry-content table,
.entry-content pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
 * 7. Footer site info
 * ---------------------------------------------------------------------- */

.yebn-site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--yebn-space-1) var(--yebn-space-3);
	font-size: var(--yebn-fs-sm);
}

.yebn-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yebn-space-1) var(--yebn-space-3);
}

/* -------------------------------------------------------------------------
 * 8. Motion preferences
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}