/* Brand tokens from sources/shs-website-design-specs.docx. Elementor global
   colours and fonts should use the same values. */
:root {
	--shs-black: #000000;
	--shs-red: #da291c;
	--shs-white: #ffffff;
	--shs-grey-line: #d9d9d9;
	--shs-font-body: "Barlow", system-ui, sans-serif;
	--shs-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--shs-font-script: "Mr Dafoe", cursive;
	/* Body copy weight for the whole site: 300 (light), Derick's decision of 2026-09-29 after
	   Kyle's request (Q-006, Q-077); it was 500 (medium). Elementor body classes
	   (shs-feature__body, ...) read this variable too. */
	--shs-body-weight: 300;
	--shs-container: 1200px;
	--shs-gutter: 16px;
	/*
	 * Mockup unit. The 2800px mockups are 1:1 CSS pixels (see AGENTS.md, design fidelity
	 * contract); desktop lengths are mockup pixels times --u. Exact at 1424px and wider,
	 * proportional down to 1025px. Elementor's size variables (type-*, content-width) are
	 * written in terms of it.
	 */
	--u: min(1px, (100vw - 64px) / 1360);
}

/* Tablet and mobile have no mockups; their type is the desktop scale read at 1.5x. */
@media (max-width: 1024px) {
	:root {
		--u: calc(1px / 1.5);
	}
}

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

/* The canvas below the body is black, so a page shorter than the window ends in the
   footer's black rather than a white band under it. The body keeps its white. */
html {
	background: var(--shs-black);
}

body {
	margin: 0;
	background: var(--shs-white);
	color: var(--shs-black);
	font-family: var(--shs-font-body);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--shs-font-display);
	font-weight: 300;
	line-height: 1.1;
	text-transform: uppercase;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--shs-red);
}

.shs-script {
	font-family: var(--shs-font-script);
	color: var(--shs-red);
	text-transform: none;
}

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

.shs-fallback-header,
.shs-fallback-footer {
	background: var(--shs-black);
	color: var(--shs-white);
	font-family: var(--shs-font-display);
}

.shs-fallback-header {
	border-bottom: 2px solid var(--shs-red);
}

.shs-fallback-footer {
	border-top: 2px solid var(--shs-red);
}

.shs-fallback-header__inner,
.shs-fallback-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 20px;
}

.shs-fallback-header a,
.shs-fallback-footer a {
	color: var(--shs-white);
	text-decoration: none;
	text-transform: uppercase;
}

.shs-fallback-header ul,
.shs-fallback-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.shs-entry {
	padding-block: 48px;
}

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

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip-path: none;
	background: var(--shs-white);
	color: var(--shs-black);
}

/* In-page links (the Ways to Pay menu, the footer's /#programmes) land the target with room above it. */
:target {
	scroll-margin-top: 24px;
}