/* ==========================================================================
   Charlton Live - Base
   Reset, document defaults, and the accessibility foundations the design
   source does not specify. Loaded after tokens.css, before components.
   ========================================================================== */

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

body, h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote, dl, dd {
	margin: 0;
	padding: 0;
}

ul[role="list"], ol[role="list"] { list-style: none; }

img, video, svg, iframe { max-width: 100%; display: block; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

/* ---------- Document ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--cl-font-body);
	font-size: var(--cl-text);
	line-height: var(--cl-lh-body);
	color: var(--cl-body);
	background-color: var(--cl-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cl-font-display);
	font-weight: 400;
	line-height: var(--cl-lh-tight);
	letter-spacing: var(--cl-track-display);
	color: var(--cl-ink);
	text-wrap: balance;
}

h1 { font-size: var(--cl-h1); line-height: var(--cl-lh-display); }
h2 { font-size: var(--cl-h2); }
h3 { font-size: var(--cl-h3); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { color: var(--cl-red-text); }

/* ---------- Layout helper ---------- */
.cl-container {
	width: 100%;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

/* ==========================================================================
   Accessibility
   The design source specifies no focus states, no skip link and no reduced
   motion handling. These are defined once here rather than per component.
   ========================================================================== */

/* ---------- Focus ----------
   :focus-visible only, so a mouse click does not draw a ring but keyboard
   navigation always does. The outline colour flips on dark sections so it
   stays visible against ink. */
:focus-visible {
	outline: 2px solid var(--cl-red-text);
	outline-offset: 2px;
	border-radius: 2px;
}

.cl-section--ink :focus-visible,
.cl-section--red :focus-visible {
	outline-color: var(--cl-white);
}

/* Never remove focus without replacing it. */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Skip link ---------- */
.cl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 18px;
	background: var(--cl-ink);
	color: var(--cl-white);
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: var(--cl-meta);
	text-decoration: none;
}
.cl-skip-link:focus {
	left: 8px;
	top: 8px;
	color: var(--cl-white);
}

/* ---------- Screen-reader-only ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip-path: none;
	white-space: normal;
}

/* ---------- Touch targets ----------
   Small icon buttons (the 34px X button on team cards, 36px social tiles)
   are below the 44px recommendation. Pad the hit area without changing the
   painted size. */
@media (pointer: coarse) {
	.cl-icon-btn { position: relative; }
	.cl-icon-btn::after {
		content: "";
		position: absolute;
		inset: 50% auto auto 50%;
		translate: -50% -50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
	}
}

/* ---------- Reduced motion ----------
   Kills the App page's pulsing COMING SOON dot and any transition. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Only smooth-scroll for users who have not asked otherwise. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}