/* =============================================================================
   ROYALS — London Royals Hockey Club
   -----------------------------------------------------------------------------
   Built to sit UNDER Elementor and the block editor, not to fight them.

   The base layer is written inside :where(), which has zero specificity. That means
   every rule here is a default that any real setting — an Elementor widget control, a
   block style, a plugin stylesheet — overrides without needing !important. Utilities
   and components below the base layer use ordinary specificity, because those are
   deliberate choices the author is opting into.

   Colours come from the brand guidelines v1.0 (Abbi Mitchell, 2025). Typefaces are
   open-licence substitutes for the Canva-licensed originals: Gagalin→Anton,
   Futura→Jost, Brittany→Sacramento; League Gothic is unchanged (SIL OFL).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Brand — main */
	--lr-navy: #142979;
	--lr-cobalt: #004aad;
	--lr-red: #e90000;
	--lr-red-muted: #e6333a;
	--lr-white: #ffffff;
	--lr-pink: #ffc1e7;

	/* Brand — secondary (rainbow palette only) */
	--lr-pride-red: #fe3c5d;
	--lr-pride-orange: #ffaa54;
	--lr-pride-yellow: #fbf067;
	--lr-pride-green: #7dcc6a;
	--lr-pride-purple: #bf50ea;
	--lr-trans-pink: #f6aab7;
	--lr-trans-blue: #56cdfd;

	/* Neutrals derived from navy, so greys sit in the brand rather than beside it */
	--lr-ink: #101a3d;
	--lr-slate: #5a6180;
	--lr-line: #dcdfe9;
	--lr-mist: #f4f5f9;

	/* Semantic roles — these are what components actually reference */
	--lr-bg: var(--lr-white);
	--lr-surface: var(--lr-mist);
	--lr-text: var(--lr-navy);
	--lr-text-muted: var(--lr-slate);
	--lr-heading: var(--lr-navy);
	--lr-link: var(--lr-cobalt);
	--lr-link-hover: var(--lr-red);
	--lr-border: var(--lr-line);
	--lr-focus: var(--lr-cobalt);

	/* Type */
	--lr-font-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
	--lr-font-body: "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif;
	--lr-font-script: "Sacramento", "Segoe Script", cursive;
	--lr-font-fixtures: "League Gothic", "Oswald", "Arial Narrow", sans-serif;

	--lr-h1: clamp(2.1rem, 1.5rem + 3vw, 3.5rem);
	--lr-h2: clamp(1.8rem, 1.4rem + 2vw, 2.5rem);
	--lr-h3: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
	--lr-h4: clamp(1.2rem, 1.1rem + 0.5vw, 1.375rem);
	--lr-h5: 1.125rem;
	--lr-h6: 0.9375rem;
	--lr-body: 1.0625rem;
	--lr-small: 0.9375rem;

	--lr-leading-tight: 1.05;
	--lr-leading-heading: 1.15;
	--lr-leading-body: 1.65;

	/* Space — a 4px base, so everything lands on a grid */
	--lr-space-2xs: 0.25rem;
	--lr-space-xs: 0.5rem;
	--lr-space-sm: 0.75rem;
	--lr-space-md: 1rem;
	--lr-space-lg: 1.5rem;
	--lr-space-xl: 2.5rem;
	--lr-space-2xl: 4rem;
	--lr-space-3xl: 6rem;

	/* Shell */
	--lr-container: 1140px;
	--lr-container-wide: 1400px;
	--lr-gutter: clamp(1rem, 4vw, 2rem);
	--lr-radius: 4px;
	--lr-radius-lg: 12px;
	--lr-shadow: 0 2px 8px rgba(16, 26, 61, 0.08);
	--lr-shadow-lifted: 0 12px 32px rgba(16, 26, 61, 0.16);

	/* Dark-ground treatments — see section 9 */
	--lr-tint-strength: 0.72;
	--lr-scrim-strength: 0.85;

	--lr-transition: 160ms ease;
}

/* -----------------------------------------------------------------------------
   2. Fonts
   Self-hosted rather than pulled from Google's CDN: the site runs Complianz and a
   published privacy notice, and a third-party font request is awkward to justify in
   that posture. All four families are open-licence, so self-hosting is permitted.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Anton";
	src: url("../fonts/anton-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Sacramento";
	src: url("../fonts/sacramento-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "League Gothic";
	src: url("../fonts/league-gothic-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* -----------------------------------------------------------------------------
   3. Base — zero specificity, so anything real beats it
   -------------------------------------------------------------------------- */

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

:where(html) {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

:where(body) {
	margin: 0;
	background: var(--lr-bg);
	color: var(--lr-text);
	font-family: var(--lr-font-body);
	font-size: var(--lr-body);
	line-height: var(--lr-leading-body);
	-webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--lr-space-md);
	/*
	 * INHERIT, never assert. A direct colour on a heading beats inherited colour even at
	 * zero specificity, so asserting navy here made any heading inside a container or
	 * widget with white text render navy-on-navy — invisible. That is the same failure
	 * that binding h1_color-h6_color in the Elementor kit caused on About (88) on
	 * 6 Sep 2026. Body carries the navy, headings follow whatever ground they land on.
	 */
	color: inherit;
	font-weight: 600;
	line-height: var(--lr-leading-heading);
	text-wrap: balance;
}

:where(h1) {
	font-family: var(--lr-font-display);
	font-size: var(--lr-h1);
	font-weight: 400;
	line-height: var(--lr-leading-tight);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

:where(h2) {
	font-family: var(--lr-font-display);
	font-size: var(--lr-h2);
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

:where(h3) { font-size: var(--lr-h3); }
:where(h4) { font-size: var(--lr-h4); }
:where(h5) { font-size: var(--lr-h5); }

:where(h6) {
	font-size: var(--lr-h6);
	letter-spacing: 1px;
	text-transform: uppercase;
}

:where(p, ul, ol, dl, blockquote, figure, table, pre) {
	margin: 0 0 var(--lr-space-lg);
}

:where(a) {
	color: var(--lr-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--lr-transition);
}

:where(a:hover) {
	color: var(--lr-link-hover);
}

:where(img, svg, video, iframe) {
	max-width: 100%;
	height: auto;
}

:where(img) {
	display: block;
}

:where(strong, b) { font-weight: 600; }
:where(small) { font-size: var(--lr-small); }

:where(hr) {
	height: 1px;
	margin: var(--lr-space-xl) 0;
	border: 0;
	background: var(--lr-border);
}

:where(blockquote) {
	padding-left: var(--lr-space-lg);
	border-left: 4px solid var(--lr-red);
	font-size: 1.125rem;
}

:where(table) {
	width: 100%;
	border-collapse: collapse;
}

:where(th) {
	text-align: left;
	font-weight: 600;
}

:where(th, td) {
	padding: var(--lr-space-sm) var(--lr-space-md);
	border-bottom: 1px solid var(--lr-border);
}

:where(input, select, textarea) {
	max-width: 100%;
	padding: var(--lr-space-sm) var(--lr-space-md);
	border: 1px solid var(--lr-border);
	border-radius: var(--lr-radius);
	background: var(--lr-white);
	color: var(--lr-text);
	font-family: inherit;
	font-size: 1rem;
}

:where(input, select, textarea):focus {
	border-color: var(--lr-focus);
	outline: 2px solid var(--lr-focus);
	outline-offset: 1px;
}

/* A single visible focus style everywhere, including inside Elementor and plugin output. */
:focus-visible {
	outline: 3px solid var(--lr-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.lr-dark :focus-visible,
.royals-header :focus-visible,
.royals-footer :focus-visible {
	outline-color: var(--lr-white);
}

::selection {
	background: var(--lr-pink);
	color: var(--lr-navy);
}

/* -----------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.royals-container {
	width: 100%;
	max-width: var(--lr-container);
	margin-inline: auto;
	padding-inline: var(--lr-gutter);
}

.royals-container--wide { max-width: var(--lr-container-wide); }

.royals-main {
	display: block;
	padding-block: var(--lr-space-2xl);
}

.royals-builder-page .royals-main {
	padding-block: 0;
}

/* Readable measure for hand-written content. Elementor pages opt out. */
.royals-prose {
	max-width: 72ch;
}

.royals-prose > * + * {
	margin-top: var(--lr-space-lg);
}

.royals-prose :where(h2, h3, h4) {
	margin-top: var(--lr-space-xl);
}

.royals-card-grid {
	display: grid;
	gap: var(--lr-space-lg);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.royals-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--lr-border);
	border-radius: var(--lr-radius-lg);
	background: var(--lr-white);
	transition: box-shadow var(--lr-transition), transform var(--lr-transition);
}

.royals-card:hover {
	box-shadow: var(--lr-shadow-lifted);
	transform: translateY(-2px);
}

.royals-card__body { padding: var(--lr-space-lg); }
.royals-card__title { font-size: var(--lr-h4); }
.royals-card__title a { text-decoration: none; }
.royals-card__title a:hover { text-decoration: underline; }

.royals-entry-meta {
	margin: 0 0 var(--lr-space-sm);
	color: var(--lr-text-muted);
	font-size: var(--lr-small);
}

/* -----------------------------------------------------------------------------
   5. Buttons
   #e90000 on white is 4.70:1 — the only brand red that passes AA for button text.
   Muted red (#e6333a) is 4.29:1 and is therefore a section ground, never a button.
   -------------------------------------------------------------------------- */

.royals-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lr-space-xs);
	padding: 0.7em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--lr-radius);
	background: var(--lr-red);
	color: var(--lr-white);
	font-family: var(--lr-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--lr-transition), color var(--lr-transition), border-color var(--lr-transition);
}

.royals-button:hover,
.royals-button:focus {
	background: var(--lr-navy);
	color: var(--lr-white);
	text-decoration: none;
}

.royals-button--ghost {
	border-color: currentColor;
	background: transparent;
	color: var(--lr-navy);
}

.royals-button--ghost:hover,
.royals-button--ghost:focus {
	background: var(--lr-navy);
	color: var(--lr-white);
}

.lr-dark .royals-button--ghost {
	color: var(--lr-white);
}

.lr-dark .royals-button--ghost:hover,
.lr-dark .royals-button--ghost:focus {
	background: var(--lr-white);
	color: var(--lr-navy);
}

/* -----------------------------------------------------------------------------
   6. Header
   Navy ground, white logo, flat nine-item menu. Sticky, and it shrinks on scroll so
   the fixtures tables and long pages are not crowded by it.
   -------------------------------------------------------------------------- */

.royals-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--lr-navy);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.royals-header__inner {
	display: flex;
	align-items: center;
	gap: var(--lr-space-lg);
	min-height: 5rem;
	transition: min-height var(--lr-transition);
}

.royals-header.is-scrolled .royals-header__inner {
	min-height: 4rem;
}

.royals-header__brand {
	flex: 0 0 auto;
	margin-right: auto;
}

.royals-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.royals-logo__img {
	width: auto;
	max-height: 3.25rem;
	transition: max-height var(--lr-transition);
}

.royals-header.is-scrolled .royals-logo__img {
	max-height: 2.5rem;
}

.royals-logo__text {
	color: var(--lr-white);
	font-family: var(--lr-font-display);
	font-size: 1.5rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/*
 * Fallback only: used when no white logo variant has been uploaded. The brand
 * guidelines supply a proper white box version — upload it in Customizer → Site
 * Identity and this rule stops applying.
 */
.royals-logo--inverted .royals-logo__img {
	filter: brightness(0) invert(1);
}

.royals-nav {
	display: flex;
	align-items: center;
	gap: var(--lr-space-lg);
}

.royals-menu {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.royals-menu__item {
	position: relative;
}

.royals-menu__link {
	display: inline-block;
	padding: var(--lr-space-xs) 0;
	color: var(--lr-white);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Underline grows from the link rather than appearing, so hover reads as movement.
 * White, not brand red: #e90000 on navy is 2.75:1, one of the three brand pairings
 * recorded as failing, and it fails 1.4.11 as a UI indicator too.
 */
.royals-menu__link::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 2px;
	background: var(--lr-white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lr-transition);
}

.royals-menu__link:hover::after,
.royals-menu__item.is-current > .royals-menu__link::after {
	transform: scaleX(1);
}

.royals-menu__item.is-current > .royals-menu__link {
	color: var(--lr-white);
}

.royals-menu__toggle {
	display: inline-flex;
	align-items: center;
	padding: var(--lr-space-2xs);
	border: 0;
	background: none;
	color: var(--lr-white);
	cursor: pointer;
}

.royals-menu__chevron {
	transition: transform var(--lr-transition);
}

.royals-menu__toggle[aria-expanded="true"] .royals-menu__chevron {
	transform: rotate(180deg);
}

.royals-menu__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 13rem;
	margin: 0;
	padding: var(--lr-space-xs) 0;
	border-radius: var(--lr-radius);
	background: var(--lr-navy);
	box-shadow: var(--lr-shadow-lifted);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--lr-transition), transform var(--lr-transition), visibility var(--lr-transition);
}

.royals-menu__item--parent:hover > .royals-menu__submenu,
.royals-menu__item--parent:focus-within > .royals-menu__submenu,
.royals-menu__item--parent.is-open > .royals-menu__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.royals-menu__submenu .royals-menu__link {
	display: block;
	padding: var(--lr-space-xs) var(--lr-space-md);
	white-space: normal;
}

/*
 * The header button is white on navy (12.95:1), not brand red. Red on navy is 2.75:1 —
 * unreadable as text and below the 3:1 needed for a UI component boundary, so the button
 * edge would disappear into the bar. Red buttons are for light grounds; on navy the
 * inversion is the accessible way to make the primary action the loudest thing there.
 */
.royals-header__cta {
	flex: 0 0 auto;
	padding: 0.55em 1.2em;
	background: var(--lr-white);
	color: var(--lr-navy);
	font-size: 0.875rem;
}

.royals-header.lr-dark :where(.royals-header__cta) {
	color: var(--lr-navy);
}

.royals-header.lr-dark :where(.royals-header__cta:hover),
.royals-header.lr-dark :where(.royals-header__cta:focus) {
	background: var(--lr-pink);
	color: var(--lr-navy);
}

.royals-header__burger {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lr-white);
	cursor: pointer;
}

.royals-header__burger-box {
	position: relative;
	display: block;
	width: 1.5rem;
	height: 2px;
	margin: 0 auto;
	background: currentColor;
	transition: background var(--lr-transition);
}

.royals-header__burger-box::before,
.royals-header__burger-box::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--lr-transition), top var(--lr-transition);
}

.royals-header__burger-box::before { top: -7px; }
.royals-header__burger-box::after { top: 7px; }

.royals-header__burger[aria-expanded="true"] .royals-header__burger-box {
	background: transparent;
}

.royals-header__burger[aria-expanded="true"] .royals-header__burger-box::before {
	top: 0;
	transform: rotate(45deg);
}

.royals-header__burger[aria-expanded="true"] .royals-header__burger-box::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 1024px) {
	.royals-header__burger { display: block; }

	/*
	 * The condensed-on-scroll header is a desktop nicety. On mobile the off-canvas panel
	 * is pinned below a 5rem header, so shrinking it to 4rem mid-scroll would open a gap
	 * between the bar and the menu.
	 */
	.royals-header.is-scrolled .royals-header__inner { min-height: 5rem; }
	.royals-header.is-scrolled .royals-logo__img { max-height: 3.25rem; }

	.royals-nav {
		position: fixed;
		inset: 5rem 0 0;
		z-index: 90;
		display: block;
		overflow-y: auto;
		padding: var(--lr-space-lg) var(--lr-gutter) var(--lr-space-2xl);
		background: var(--lr-navy);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--lr-transition), visibility var(--lr-transition);
	}

	.royals-nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.royals-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.royals-menu__item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.royals-menu__link {
		padding: var(--lr-space-md) 0;
		font-size: 1.125rem;
	}

	.royals-menu__link::after { display: none; }

	.royals-menu__item--parent {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.royals-menu__submenu {
		position: static;
		grid-column: 1 / -1;
		display: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.royals-menu__item--parent.is-open > .royals-menu__submenu {
		display: block;
	}

	.royals-header__cta {
		display: inline-flex;
		margin-top: var(--lr-space-lg);
	}
}

/* -----------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */

.royals-footer {
	margin-top: var(--lr-space-3xl);
	background: var(--lr-navy);
}

.royals-builder-page .royals-footer {
	margin-top: 0;
}

.royals-footer__inner {
	display: grid;
	gap: var(--lr-space-xl);
	padding-block: var(--lr-space-2xl);
	grid-template-columns: minmax(0, 1.2fr) repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/*
 * Display face, not the script. Sacramento (standing in for Brittany) is specified for
 * "short phrases where legible", and a strapline sitting small in a footer is where a
 * script reads as weak rather than characterful. Anton uppercase gives it the weight of a
 * club motto. The script is still available as .lr-script where it earns its place.
 */
.royals-footer__strapline {
	margin: var(--lr-space-md) 0 var(--lr-space-xs);
	font-family: var(--lr-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	letter-spacing: 0.5px;
	line-height: 1.1;
	text-transform: uppercase;
}

.lr-script {
	font-family: var(--lr-font-script);
	font-size: 1.75rem;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.royals-footer__heading {
	margin-bottom: var(--lr-space-md);
	font-family: var(--lr-font-body);
	font-size: var(--lr-h6);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.royals-footer__menu,
.royals-footer__legal-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.royals-footer__menu li + li {
	margin-top: var(--lr-space-xs);
}

.royals-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lr-space-md);
}

.royals-footer__base {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.royals-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lr-space-md);
	padding-block: var(--lr-space-lg);
	font-size: var(--lr-small);
}

.royals-footer__copyright { margin: 0; }

.royals-footer .royals-logo__img { max-height: 4rem; }

/* -----------------------------------------------------------------------------
   8. Accessibility helpers
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.royals-skip-link:focus {
	position: fixed !important;
	top: var(--lr-space-md);
	left: var(--lr-space-md);
	z-index: 999;
	width: auto;
	height: auto;
	padding: var(--lr-space-sm) var(--lr-space-md);
	clip-path: none;
	border-radius: var(--lr-radius);
	background: var(--lr-white);
	color: var(--lr-navy);
	font-weight: 600;
	text-decoration: none;
}

body.royals-nav-open {
	overflow: hidden;
}

/* =============================================================================
   9. Light text over dark images
   -----------------------------------------------------------------------------
   Four treatments, because no single one works over every photograph. Club photos
   run from floodlit night pitches to bright blue astroturf in full sun, and a scrim
   tuned for one is useless on the other.

   Contrast figures below are WORST CASE: they assume the photograph underneath is
   pure white, which is the least favourable image possible. A real photo can only
   improve on them. All are measured for #ffffff text.

     .lr-tint      flat navy veil, default 0.72 → 5.59:1  ✓ AA body text
     .lr-scrim     gradient veil, 0.85 in the text zone → 8.38:1  ✓ AA body text
     .lr-panel     opaque navy panel → 12.95:1  ✓ AAA, the only guaranteed option
     .lr-duotone   navy/red image treatment — STYLE ONLY, no contrast guarantee;
                   combine it with one of the three above

   Applies to an element with a CSS background image (how Elementor hero containers
   work) and to one containing an <img> layer. Both are handled.
   ========================================================================== */

/* Shared: establish a stacking context and lift real content above the veil. */
.lr-tint,
.lr-scrim,
.lr-duotone {
	position: relative;
	isolation: isolate;
}

.lr-tint > *,
.lr-scrim > *,
.lr-duotone > * {
	position: relative;
	z-index: 1;
}

.lr-tint::before,
.lr-scrim::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* --- Flat tint ------------------------------------------------------------ */

.lr-tint::before {
	background: rgb(20 41 121 / var(--lr-tint-strength));
}

/* Display-size text only (24px+, or 19px+ bold): 0.55 → 3.4:1, above the 3:1 large-text
   threshold but below the 4.5:1 body threshold. Do not use it behind paragraphs. */
.lr-tint--light { --lr-tint-strength: 0.55; }
.lr-tint--strong { --lr-tint-strength: 0.85; }

/* Red veil for Pride Cup and campaign imagery. Bright red at 0.8 over white gives
   white text 4.6:1; the muted red never gets there, so it is not offered here. */
.lr-tint--red::before {
	background: rgb(233 0 0 / 0.8);
}

/* --- Gradient scrim ------------------------------------------------------- */

/*
 * Weighted to the edge the text sits against, so the photograph stays visible where
 * there is nothing on top of it. The default runs from the bottom, which suits a title
 * sitting at the foot of a hero.
 */
.lr-scrim::before {
	background: linear-gradient(
		to top,
		rgb(20 41 121 / var(--lr-scrim-strength)) 0%,
		rgb(20 41 121 / calc(var(--lr-scrim-strength) * 0.85)) 35%,
		rgb(20 41 121 / 0.25) 75%,
		rgb(20 41 121 / 0) 100%
	);
}

.lr-scrim--top::before {
	background: linear-gradient(
		to bottom,
		rgb(20 41 121 / var(--lr-scrim-strength)) 0%,
		rgb(20 41 121 / 0.25) 65%,
		rgb(20 41 121 / 0) 100%
	);
}

.lr-scrim--left::before {
	background: linear-gradient(
		to right,
		rgb(20 41 121 / var(--lr-scrim-strength)) 0%,
		rgb(20 41 121 / calc(var(--lr-scrim-strength) * 0.8)) 45%,
		rgb(20 41 121 / 0) 85%
	);
}

/* Even veil across the whole frame — for text that sits centred over a busy photo. */
.lr-scrim--full::before {
	background: rgb(20 41 121 / 0.78);
}

/* --- Panel — the guaranteed option --------------------------------------- */

/*
 * Puts the text on its own opaque ground instead of trusting the image. Use this when
 * the photograph is unknown or user-uploaded, which is the case for anything the
 * committee will add later without checking contrast.
 *
 * backdrop-filter is a progressive enhancement: where it is unsupported the panel is
 * still opaque enough to carry the text, so nothing depends on it.
 */
.lr-panel {
	padding: var(--lr-space-lg) var(--lr-space-xl);
	border-radius: var(--lr-radius-lg);
	background: rgb(20 41 121 / 0.92);
	backdrop-filter: blur(6px) saturate(1.1);
}

.lr-panel--light {
	background: rgb(255 255 255 / 0.94);
	color: var(--lr-navy);
}

.lr-panel--light :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: var(--lr-navy);
}

/* --- Duotone — style, not legibility ------------------------------------- */

.lr-duotone {
	background: var(--lr-navy);
}

.lr-duotone :where(img) {
	filter: grayscale(1) contrast(1.08);
	mix-blend-mode: luminosity;
}

.lr-duotone::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(135deg, var(--lr-navy) 0%, var(--lr-red) 100%);
	mix-blend-mode: color;
	opacity: 0.55;
	pointer-events: none;
}

/* --- The dark-ground switch ---------------------------------------------- */

/*
 * Flips the semantic tokens, so anything built on them turns light in one move —
 * headings, body copy, links, borders, ghost buttons.
 *
 * The descendant selector is wrapped in :where() on purpose. That keeps this rule at
 * the specificity of .lr-dark alone (0,1,0), so a colour actually set on an Elementor
 * widget — which resolves at (0,2,0) or higher — still wins. Binding heading colours
 * in the Elementor kit instead is what turned every heading navy-on-navy inside dark
 * sections on the About page on 6 Sep 2026; this is the way round that does not.
 */
.lr-dark {
	--lr-text: var(--lr-white);
	--lr-text-muted: rgb(255 255 255 / 0.78);
	--lr-heading: var(--lr-white);
	--lr-link: var(--lr-white);
	--lr-link-hover: var(--lr-pink);
	--lr-border: rgb(255 255 255 / 0.22);

	color: var(--lr-white);
}

.lr-dark :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, blockquote, figcaption, label, cite, address) {
	color: var(--lr-white);
}

/*
 * Links on dark grounds have to outrank the Elementor kit, which emits
 * `.elementor-kit-661 a { color: var(--e-global-color-secondary) }` — cobalt blue — at
 * specificity (0,1,1), from a stylesheet that loads after this one. Cobalt on navy is
 * 1.59:1; it made every footer link and the header button unreadable.
 *
 * The class is repeated to reach (0,2,0), which beats (0,1,1) on class count. That is a
 * deliberate, self-documenting bump rather than !important, so a colour genuinely set on
 * an individual widget can still win.
 *
 * This is scoped to dark grounds only. On light grounds the kit's cobalt is correct and
 * is left alone.
 */
/*
 * Buttons are excluded categorically. A button carries its own foreground/background
 * contract in every context, so a blanket "links go white on dark" rule must not reach
 * it — that is what painted the white-on-navy header CTA white on white.
 */
.lr-dark.lr-dark :where(a:not(.royals-button):not(.elementor-button):not(.wp-element-button)) {
	color: var(--lr-white);
	text-decoration-color: rgb(255 255 255 / 0.5);
}

.lr-dark.lr-dark :where(a:not(.royals-button):not(.elementor-button):not(.wp-element-button):hover),
.lr-dark.lr-dark :where(a:not(.royals-button):not(.elementor-button):not(.wp-element-button):focus) {
	color: var(--lr-pink);
}

/* The header and footer are the theme's own chrome and are never author-styled, so they
   assert their colours outright. */
.royals-header.lr-dark :where(a:not(.royals-button), .royals-menu__link),
.royals-footer.lr-dark :where(a:not(.royals-button)) {
	color: var(--lr-white);
}

.royals-footer.lr-dark :where(a:hover, a:focus) {
	color: var(--lr-pink);
}

/*
 * Buttons on dark grounds keep a white label on their red ground. The header CTA is
 * excluded: it is white-on-navy and owns its own colours in section 6. Without the
 * exclusion this rule wins on source order and paints white on white.
 */
.lr-dark.lr-dark :where(.royals-button:not(.royals-header__cta)) {
	color: var(--lr-white);
}

/* Inside a dark ground, a standard logo is inverted so the mark stays readable. */
.lr-dark .royals-logo--inverted .royals-logo__img {
	filter: brightness(0) invert(1);
}

/* --- Hero band used by the theme's own page header ----------------------- */

.royals-page-header--image {
	display: grid;
	align-items: end;
	min-height: clamp(18rem, 38vw, 30rem);
	overflow: hidden;
}

/*
 * Explicit three-layer stack. Without it the image and the scrim both land on z-index 0
 * and the image, being later in paint order, covers the veil that is meant to be over it.
 *   0 = photograph, 1 = scrim, 2 = title
 */
.royals-page-header .royals-page-header__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.royals-page-header--image::before {
	z-index: 1;
}

.royals-page-header .royals-page-header__inner {
	z-index: 2;
}

.royals-page-header__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.royals-page-header__inner {
	padding-block: var(--lr-space-xl);
}

.royals-page-header--image .royals-page-header__inner {
	padding-block: var(--lr-space-2xl) var(--lr-space-xl);
}

.royals-page-header:not(.royals-page-header--image) {
	padding-block: var(--lr-space-xl) 0;
}

.royals-page-header__title { margin-bottom: 0; }

.royals-breadcrumbs {
	padding-block: var(--lr-space-md);
	color: var(--lr-text-muted);
	font-size: var(--lr-small);
}

.royals-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lr-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Separator via ::before on all but the first, so it never trails a lone crumb. */
.royals-breadcrumbs__item + .royals-breadcrumbs__item::before {
	content: "»";
	margin-right: var(--lr-space-xs);
	color: var(--lr-border);
}

.royals-breadcrumbs__item [aria-current="page"] {
	color: var(--lr-text);
	font-weight: 500;
}

/* =============================================================================
   10. Core blocks
   -----------------------------------------------------------------------------
   There is deliberately no theme.json. A block theme's theme.json and the Elementor
   kit are two competing sources of typography, and that split is what left headings
   in Montserrat while widgets were in Anton. One source only: the tokens above.

   These rules matter most for the legacy pages whose block markup was pasted into
   Elementor text widgets — that markup keeps its wp-block-* classes, so it is styled
   here rather than being left to browser defaults.
   ========================================================================== */

:where(.wp-block-heading) {
	color: inherit;
}

:where(.wp-block-image) {
	margin-block: var(--lr-space-lg);
}

:where(.wp-block-image img) {
	border-radius: var(--lr-radius);
}

:where(.wp-block-image figcaption),
:where(figcaption) {
	margin-top: var(--lr-space-xs);
	color: var(--lr-text-muted);
	font-size: var(--lr-small);
}

:where(.wp-block-columns) {
	gap: var(--lr-space-lg);
}

:where(.wp-block-group.has-background) {
	padding: var(--lr-space-xl) var(--lr-gutter);
}

:where(.wp-block-quote) {
	padding-left: var(--lr-space-lg);
	border-left: 4px solid var(--lr-red);
}

:where(.wp-block-button__link) {
	border-radius: var(--lr-radius);
	background: var(--lr-red);
	color: var(--lr-white);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

:where(.wp-block-social-links) {
	gap: var(--lr-space-xs);
}

:where(.wp-block-separator) {
	border-color: var(--lr-border);
}

:where(.wp-block-table) th {
	background: var(--lr-mist);
}

.alignfull { width: 100%; }

.alignwide {
	width: min(100%, var(--lr-container-wide));
	margin-inline: auto;
}

/* =============================================================================
   11. Elementor
   -----------------------------------------------------------------------------
   Nothing here overrides a widget setting. These are defaults for widgets that have
   no setting of their own, plus the container width so the builder agrees with the
   theme's own container.
   ========================================================================== */

.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--lr-container);
}

.e-con {
	--container-max-width: var(--lr-container);
}

:where(.elementor-widget-text-editor) {
	line-height: var(--lr-leading-body);
}

:where(.elementor-widget-text-editor h2, .elementor-widget-text-editor h3) {
	margin-top: var(--lr-space-xl);
}

:where(.elementor-heading-title) {
	color: inherit;
}

/*
 * Make the basic (V3) Heading widget agree with the atomic (V4) one.
 *
 * The V3 Heading widget binds its typography to the Primary global by default, emitting
 * `.elementor-widget-heading .elementor-heading-title { font-family: Anton; weight: 400;
 * text-transform: uppercase }` at (0,2,0). That binding is Elementor's factory default,
 * not an author decision, and it applies whatever HTML tag you choose — so changing a
 * basic heading to H3 changed its size but left it in Anton uppercase, while the atomic
 * heading (which injects only `margin: 0`) correctly inherited Jost 600.
 *
 * These rules restore the tag-based intent for H3-H6: display face for H1/H2, body face
 * for the rest, per the brand guidelines. (0,2,1) is the lowest specificity that beats
 * the widget binding.
 *
 * ESCAPE HATCH: this also outranks a typography slot set on an individual widget, because
 * Elementor emits those at (0,2,0) too and relies on source order, which a theme
 * stylesheet cannot sit between. To put an H3-H6 deliberately in the display face, add
 * the class `lr-display` to the widget; `lr-body-font` forces the opposite.
 */
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
	font-family: var(--lr-font-body);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.elementor-widget-heading h6.elementor-heading-title {
	letter-spacing: 1px;
	text-transform: uppercase;
}

.lr-display .elementor-heading-title,
.elementor-widget-heading.lr-display .elementor-heading-title,
.lr-display.e-heading-base,
.lr-display {
	font-family: var(--lr-font-display);
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.lr-body-font .elementor-heading-title,
.elementor-widget-heading.lr-body-font .elementor-heading-title,
.lr-body-font.e-heading-base,
.lr-body-font {
	font-family: var(--lr-font-body);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* Elementor V4 atomic elements. The Men's 3s page mixes these with V3 widgets, so
   both need a sane default from the same tokens. */
:where(.e-heading-base) {
	color: inherit;
	font-family: var(--lr-font-display);
}

:where(.e-paragraph-base) {
	color: inherit;
	font-family: var(--lr-font-body);
}

:where(.elementor-button) {
	border-radius: var(--lr-radius);
	background-color: var(--lr-red);
	color: var(--lr-white);
	font-family: var(--lr-font-body);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

:where(.elementor-button:hover) {
	background-color: var(--lr-navy);
	color: var(--lr-white);
}

/*
 * Dark sections vs Elementor's widget colour bindings.
 *
 * Elementor emits these into every page's generated stylesheet, whether or not the author
 * set anything:
 *
 *   .elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-primary) }
 *   .elementor-widget-text-editor                      { color: var(--e-global-color-text) }
 *   .elementor-widget-image .widget-image-caption      { color: var(--e-global-color-text) }
 *
 * They are (0,2,0) and (0,1,0), and the page stylesheet loads after the theme's, so a tie
 * goes to Elementor. Both globals are dark by design, so a basic Heading or Text Editor
 * widget dropped into a .lr-dark section renders navy-on-navy — invisible. Atomic elements
 * carry no such binding, which is why they look right in the same section and the basic
 * ones do not.
 *
 * Loading the brand kit does NOT fix this: it makes the globals brand-correct, and brand
 * navy on brand navy is still invisible. So these have to out-specify the binding, at
 * (0,3,0), scoped to sections the author has explicitly marked dark.
 */
.lr-dark .elementor-widget-heading .elementor-heading-title,
.lr-dark .elementor-widget-text-editor,
.lr-dark .elementor-widget-text-editor :where(h1, h2, h3, h4, h5, h6, p, li),
.lr-dark .elementor-widget-image .widget-image-caption,
.lr-dark .elementor-widget-icon-box .elementor-icon-box-title,
.lr-dark .elementor-widget-icon-box .elementor-icon-box-description {
	color: var(--lr-white);
}

/*
 * Buttons in dark sections invert rather than stay red. Accent resolves to #e90000 once the
 * brand kit is loaded, and red on navy is 2.75:1 — below the 3:1 a button's edge needs to be
 * distinguishable at all. White ground with a navy label is 12.95:1 and matches the header.
 */
.lr-dark .elementor-widget-button .elementor-button {
	background-color: var(--lr-white);
	color: var(--lr-navy);
}

.lr-dark .elementor-widget-button .elementor-button:hover,
.lr-dark .elementor-widget-button .elementor-button:focus {
	background-color: var(--lr-pink);
	color: var(--lr-navy);
}

/* An Elementor container given .lr-dark gets the same flip as anything else, and its
   own background-image works with .lr-scrim and .lr-tint without extra markup. */
.e-con.lr-scrim > .e-con-inner,
.e-con.lr-tint > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* =============================================================================
   12. Plugin output
   -----------------------------------------------------------------------------
   Third-party markup the club cannot restyle from any settings screen. These use
   ordinary specificity because they have to beat the plugin's own stylesheet.
   ========================================================================== */

/* --- England Hockey GMS feed (fixtures, results, league tables) ----------- */

/*
 * gms-default.css sets no fonts and no colours, but it does set `background-color:
 * silver` on every header cell and 3px of vertical cell padding, which is what made
 * the fixtures table look cramped and off-brand. League Gothic is the brand's
 * fixtures-and-results face, used here for column headings; cell values stay in Jost,
 * which is far more legible at data sizes.
 */
.gms-table {
	margin-block: var(--lr-space-lg);
	font-size: 1rem;
}

table.gms-table th {
	padding: var(--lr-space-sm) var(--lr-space-md);
	border-color: var(--lr-navy);
	background-color: var(--lr-navy);
	color: var(--lr-white);
	font-family: var(--lr-font-fixtures);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

table.gms-table td {
	padding: var(--lr-space-sm) var(--lr-space-md);
	border-color: var(--lr-line);
}

.gms-table tbody tr:nth-child(even) {
	background: var(--lr-mist);
}

.gms-table tbody tr:hover {
	background: var(--lr-pink);
}

/* The club's own rows, so a Royals fixture is findable at a glance. */
.gms-table .gms-clubteam:not(.gms-button) {
	color: var(--lr-navy);
	font-weight: 600;
}

/*
 * Functional status colours, not brand colours: the plugin ships `green`, `dimgray`
 * and `red`, and `green` with white text is 3.3:1, below AA. These are darkened to
 * clear 4.5:1 while staying recognisably win/draw/loss.
 */
.gms-win { background-color: #0f7a2e; }
.gms-draw { background-color: #4a5068; }
.gms-loss { background-color: #c00000; }

.gms-detaillink:hover {
	background-color: var(--lr-pink) !important;
}

.gms-cardtitle {
	font-family: var(--lr-font-fixtures);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.gms-filter fieldset {
	padding: var(--lr-space-md);
	border: 1px solid var(--lr-border);
	border-radius: var(--lr-radius);
}

.gms-filter legend {
	font-weight: 600;
	text-transform: uppercase;
}

.gms-footnote {
	color: var(--lr-text-muted);
	font-size: var(--lr-small);
}

/* Inside a dark section the table needs its own light ground to stay readable. */
.lr-dark .gms-table tbody tr,
.lr-dark .gms-table tbody tr:nth-child(even) {
	background: rgb(255 255 255 / 0.06);
}

.lr-dark .gms-table td {
	border-color: rgb(255 255 255 / 0.2);
}

/* --- Fluent Forms --------------------------------------------------------- */

.frm-fluent-form .ff-el-input--label label {
	color: var(--lr-heading);
	font-family: var(--lr-font-body);
	font-weight: 600;
}

.frm-fluent-form .ff-el-form-control {
	padding: var(--lr-space-sm) var(--lr-space-md);
	border: 1px solid var(--lr-border);
	border-radius: var(--lr-radius);
	font-family: var(--lr-font-body);
	font-size: 1rem;
}

.frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--lr-focus);
	box-shadow: none;
	outline: 2px solid var(--lr-focus);
	outline-offset: 1px;
}

.frm-fluent-form .ff-btn-submit {
	padding: 0.7em 1.5em;
	border: 0;
	border-radius: var(--lr-radius);
	background: var(--lr-red);
	color: var(--lr-white);
	font-family: var(--lr-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.frm-fluent-form .ff-btn-submit:hover {
	background: var(--lr-navy);
}

.frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: #c00000;
}

.frm-fluent-form .error-text,
.frm-fluent-form .text-danger {
	color: #c00000;
	font-size: var(--lr-small);
}

.lr-dark .frm-fluent-form .ff-el-input--label label {
	color: var(--lr-white);
}

/* --- Smash Balloon Instagram feed ---------------------------------------- */

#sb_instagram {
	padding-bottom: 0 !important;
}

/*
 * Smash Balloon pads the load-more row away from the grid, which reads as a hole above
 * the button rather than as breathing room. !important is unavoidable here: the plugin's
 * own selector is #sb_instagram #sbi_load and its stylesheet loads after the theme's.
 */
#sb_instagram #sbi_load {
	padding-top: 0 !important;
	margin-top: var(--lr-space-md) !important;
}

#sb_instagram #sbi_load .sbi_load_btn {
	margin-top: 0 !important;
}

/* The follow button is a button, so it gets button treatment rather than link colours. */
#sb_instagram .sbi_follow_btn a {
	display: inline-flex;
	align-items: center;
	gap: var(--lr-space-xs);
	padding: 0.7em 1.5em;
	background: var(--lr-navy) !important;
	color: var(--lr-white) !important;
	text-decoration: none;
}

#sb_instagram .sbi_photo {
	border-radius: var(--lr-radius);
}

#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram .sbi_follow_btn a {
	border-radius: var(--lr-radius);
	background: var(--lr-red);
	font-family: var(--lr-font-body);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* =============================================================================
   12b. Chrome vs the Elementor kit
   -----------------------------------------------------------------------------
   The kit's Theme Style emits rules on bare elements scoped by the kit class:

     .elementor-kit-661 a       { color; font-family; font-weight; text-decoration }
     .elementor-kit-661 button  { background-color; color; border-radius; text-transform }

   Both are (0,1,1) and the kit's stylesheet loads after the theme's, so a tie loses too.
   That is how the nav ended up underlined and the mobile close button ended up red on
   navy (2.75:1) — the pairing that is meant to appear nowhere.

   These selectors therefore stack real classes to reach (0,2,0) or better. Note the
   absence of :where() here: it zeroes the specificity of everything inside it, which is
   exactly wrong for chrome. :where() is for the content defaults in sections 3-11, where
   losing to an author setting is the intent.

   Scoped to the header and footer only. Links and buttons inside page content still
   follow the kit and any per-widget setting.

   On live this is latent until the brand kit is loaded: the factory-default kit there
   emits no a/button rules at all.
   ========================================================================== */

.royals-header .royals-menu__link,
.royals-header .royals-logo,
.royals-header .royals-header__cta,
.royals-footer.lr-dark .royals-footer__legal-menu a {
	text-decoration: none;
}

.royals-header .royals-menu__link {
	font-family: var(--lr-font-body);
	font-weight: 500;
}

.royals-footer.lr-dark a:hover,
.royals-footer.lr-dark a:focus {
	text-decoration: underline;
}

/* Icon buttons in the chrome are not kit buttons: no ground, no radius, no transform. */
.royals-header .royals-header__burger,
.royals-header .royals-menu__toggle {
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--lr-white);
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* The header CTA is a real button, but white-on-navy rather than the kit's red. */
.royals-header .royals-header__cta {
	background: var(--lr-white);
	color: var(--lr-navy);
}

.royals-header .royals-header__cta:hover,
.royals-header .royals-header__cta:focus {
	background: var(--lr-pink);
	color: var(--lr-navy);
}

/* =============================================================================
   13. Motion and print
   ========================================================================== */

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

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

@media print {
	.royals-header,
	.royals-footer,
	.royals-header__cta,
	.royals-skip-link,
	#sb_instagram {
		display: none !important;
	}

	:where(body) {
		color: #000;
		font-size: 11pt;
	}

	.lr-dark,
	.lr-dark :where(h1, h2, h3, h4, h5, h6, p, li, td, th) {
		color: #000 !important;
	}

	.lr-tint::before,
	.lr-scrim::before,
	.lr-duotone::after {
		display: none;
	}

	table.gms-table th {
		background: #eee !important;
		color: #000 !important;
	}

	:where(a)::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
	}
}