/*
 * Radio Christmas chrome on top of Kreeti: the header (#15) and, at the end, the footer (#24).
 * The page head lands here later.
 *
 * Ported from the approved boards (BRIEF §5.3a, §7–§7g, §8; no floating pill, the client
 * dropped §9):
 *   Header2-1       desktop band: song and show states, the "Open player" state
 *   Header2-Mobile  phones (the latest copies on Home-Mobile match it)
 *   ShowPage3, Home-Final  the band (.ab-*) and nav CTA as they sit on pages
 * Board classes become skdr-* names: .ab-band → .skdr-band, .ab-cut → .skdr-band__cut,
 * .ab-tab → .skdr-band__tab, .ktop → .skdr-top, .knav → .skdr-nav, .ab-donate →
 * .skdr-nav__donate. The listen pill and placeholders are the plugin's components (#14).
 *
 * Colours are the plugin's tokens.css (#14). Each var() carries the board value as its fallback,
 * so the top bar, logo and nav still look right with the plugin off.
 *
 * Heights are fixed, so the live band never moves the page (CLS 0):
 *   desktop  44 top bar + 180 band + 64 nav
 *   phones   40 top bar + 64 logo row + 132 live card + 54 tabs + 56 nav (up to 991px, Kreeti's
 *            own menu breakpoint, so the band and the hamburger switch together)
 */

/* ---------------------------------------------------------------- shared */

.skdr-hdr {
	font-family: var(--skdr-font, 'Poppins', sans-serif);
}

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

.skdr-hdr [hidden] {
	display: none !important;
}

/* Kreeti fades every link and button; the boards' hovers are instant */
.skdr-hdr a,
.skdr-hdr button {
	transition: none;
}

.skdr-hdr a:focus-visible,
.skdr-hdr button:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--skdr-red, #D32C3F);
}

/* One centred container for the header and the footer (#24) */
.skdr-top__wrap,
.skdr-band__wrap,
.skdr-nav__wrap,
.skdr-footer-wrap {
	max-width: var(--skdr-container, 1200px);
	margin: 0 auto;
	padding: 0 var(--skdr-gutter, 24px);
}

/* ---------------------------------------------------------------- grey top bar (§5.1): Kreeti's date and socials */

.skdr-top {
	height: 44px;
	background: var(--skdr-chrome-top, #4A4A4F);
	color: #FFFFFF;
}

.skdr-top__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
}

.skdr-top__date {
	color: #FFFFFF;
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
}

.skdr-hdr .skdr-top .aft-small-social-menu {
	padding: 0;
	text-align: right;
}

.skdr-top__soc ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-top__soc li {
	display: block;
	margin: 0;
	padding: 0;
}

/* The icons are the plugin's brand SVGs (currentColor), 18px in the 36px box; Kreeti's menu fallback
   draws its own Font Awesome glyph per link URL, sized and coloured by the same rules */
.skdr-hdr .skdr-top .aft-small-social-menu ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	background: transparent;
	color: #FFFFFF;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.skdr-hdr .skdr-top .aft-small-social-menu ul li a::after {
	font-size: 18px;
	line-height: 1;
}

/* Our own links draw no Font Awesome glyph on top of the SVG */
.skdr-hdr .skdr-top .aft-small-social-menu ul li a.skdr-top__ic::after {
	content: none;
}

.skdr-hdr .skdr-top .aft-small-social-menu ul li a:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
}

/* ---------------------------------------------------------------- white band (§7, §7c, §7e, §7f) */

/* The hairline is an inset shadow, not a border, so the band's content reaches the nav's top
   edge and an image can stand exactly on it (§4g). Images and the tabs paint over it. */
.skdr-band {
	position: relative;
	height: 180px;
	background: #FFFFFF;
	box-shadow: inset 0 -1px 0 var(--skdr-line, #E6E6E6);
}

.skdr-band__wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 32px;
	height: 100%;
}

.skdr-band__logo {
	display: block;
	flex: none;
	border-radius: 4px;
	line-height: 0;
}

.skdr-band__logo img {
	display: block;
	width: auto;
	/* Customizer › branding › Header › Header logo height (inc/header-logo.php); 104px by default. */
	height: var(--rckc-logo-h, 104px);
	/* A wider logo chosen under Radio Christmas branding (#78) is scaled down inside 320px at the
	   default height (in proportion when taller) rather than squeezing the live block; the
	   bundled 280px logo is unaffected. */
	max-width: calc(var(--rckc-logo-h, 104px) * 3.08);
	object-fit: contain;
	object-position: left center;
}

/* An OBIT logo chosen under Radio Christmas branding (#78) replaces the header logo in OBIT
   mode only (BRIEF §25b). It inherits the logo's sizes at every width. */
.skdr-band__logo .skdr-band__logo-obit,
body.skdr-obit .skdr-band__logo--obit picture {
	display: none;
}

body.skdr-obit .skdr-band__logo--obit .skdr-band__logo-obit {
	display: block;
}

/* No OBIT artwork was set: the header logo itself turns solid black in OBIT mode (client, 19 Oct).
   brightness(0) keeps its transparency and makes every colour black, on desktop and phone. */
body.skdr-obit .skdr-band__logo--solid img {
	filter: brightness(0);
}

.skdr-band__live {
	display: flex;
	flex: 1;
	align-self: stretch;
	align-items: flex-end;
	gap: 16px;
	min-width: 0;
}

/*
 * The 288px image column, so the text always starts at the same x (§7e).
 * Show: the 288 × 162 slot (16:9, inside the 180px band) with its bottom edge exactly on the
 * nav's top edge, 0px above and 0px below, never tucked behind it (§4g, §7c).
 */
.skdr-band__slot {
	display: flex;
	flex: none;
	align-items: flex-end;
	justify-content: center;
	width: 288px;
	height: 162px;
}

/* Song: the album tile is its own thing and floats (Header2-1 .slot/.art): 120px, centred in the
   288px column (the same centre line as the show image) and vertically centred in the whole white
   band, 30px from the top bar and 30px from the nav, level with the logo (client, 18 Oct: centred
   only above the tabs it sat visibly high). It never docks. */
.skdr-band[data-state="song"] .skdr-band__slot {
	align-self: stretch;
	align-items: center;
	justify-content: center;
	height: auto;
	padding-bottom: 0;
}

/* Desktop only (phones use their own grid):
   - the song text follows the centred tile at the usual 16px gap instead of starting at the end
     of the 288px column, so there is no hole between the art and NOW PLAYING (client, 18 Oct);
     (288 - 120) / 2 = 84px pulled back;
   - it is centred on the tile's line, inside the band's middle 96px (42px clear top and bottom),
     so it never reaches the tabs' row; band.js shrinks anything longer to fit (§7h). */
@media (min-width: 992px) {
	.skdr-band[data-state="song"] .skdr-band__txt {
		margin-left: -84px;
	}

	.skdr-band[data-state="song"] .skdr-band__txt {
		padding-top: 42px;
	}
}

.skdr-band__cut {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.skdr-band__cut .skdr-cutph {
	width: 100%;
	height: 100%;
}

/* Song: the board's 120px album tile, radius 8 with the 1px ring */
.skdr-band .skdr-band__art {
	display: block;
	position: relative;
	flex: none;
	overflow: hidden;
	width: 120px;
	height: 120px;
	border-radius: 8px;
	box-shadow: 0 0 0 1px var(--skdr-line, #E6E6E6);
}

.skdr-band__art > .skdr-ph,
.skdr-band__sq > .skdr-ph {
	width: 100%;
	height: 100%;
}

.skdr-band__art > .skdr-ph {
	gap: 8px;
	box-shadow: none;
}

/* DA's image when there is one (data-has-img), the placeholder otherwise. The frames are a
   fixed size, so a swap never moves anything. */
.skdr-band__img {
	display: none;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.skdr-band [data-has-img] > .skdr-band__img {
	display: block;
}

.skdr-band [data-has-img] > .skdr-ph,
.skdr-band [data-has-img] > .skdr-cutph {
	display: none;
}

/* The 16:9 image is a transparent cut-out: whole, standing on the slot's bottom edge */
.skdr-band__cut > .skdr-band__img {
	object-fit: contain;
	object-position: 50% 100%;
}

.skdr-band[data-state="song"] .skdr-band__cut,
.skdr-band:not([data-state="song"]) .skdr-band__art,
.skdr-band .skdr-band__sq {
	display: none;
}

/* The text sits in the 138px above the tabs row (180 minus the board's 42px tabs), centred
   there, so however long it runs it never reaches under the grey tabs. It is never truncated:
   long titles take a smaller size step instead (--m, --s, --xs below; §7h). */
.skdr-band__txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	overflow: hidden;
	min-width: 0;
	padding-bottom: 42px;
}

.skdr-hdr .skdr-band__txt p {
	margin: 0;
	padding: 0;
}

.skdr-band__lbl {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 18px;
	color: var(--skdr-dark, #8F182E);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skdr-band[data-state="song"] .skdr-band__lbl--show,
.skdr-band:not([data-state="song"]) .skdr-band__lbl--song {
	display: none;
}

.skdr-band__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--skdr-dark, #8F182E);
}

/* The station's equaliser in the NOW PLAYING label (never on the pill, §7a) */
.skdr-band__eq {
	display: inline-flex;
	flex: none;
	align-items: flex-end;
	gap: 2px;
	height: 16px;
}

.skdr-band__eq span {
	display: block;
	width: 3px;
	height: 10px;
	border-radius: 1.5px;
	background: var(--skdr-dark, #8F182E);
	animation: skdr-band-eq 1s ease-in-out infinite;
}

.skdr-band__eq span:nth-child(2) {
	animation-delay: -0.33s;
}

.skdr-band__eq span:nth-child(3) {
	animation-delay: -0.66s;
}

@keyframes skdr-band-eq {
	0%,
	100% {
		height: 6px;
	}

	50% {
		height: 16px;
	}
}

.skdr-hdr .skdr-band__txt .skdr-band__h {
	margin: 6px 0 4px;
	color: var(--skdr-ink, #1A1A1A);
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Titles and show names are Radio Christmas Red everywhere; live labels (ON AIR NOW, NOW PLAYING) are Dark Red (client, 18 Oct). A song title stays Ink. */
.skdr-hdr .skdr-band:not([data-state="song"]) .skdr-band__txt .skdr-band__h,
.skdr-hdr .skdr-band:not([data-state="song"]) .skdr-band__txt .skdr-band__h a {
	color: var(--skdr-red, #D32C3F);
	text-decoration: none;
}

/* Header2-1: the show's time 15/22, the song's artist 16/24 */
.skdr-hdr .skdr-band__txt .skdr-band__sub {
	color: var(--skdr-gray, #55555D);
	font-size: 15px;
	line-height: 22px;
	overflow-wrap: anywhere;
}

.skdr-hdr .skdr-band[data-state="song"] .skdr-band__txt .skdr-band__sub {
	font-size: 16px;
	line-height: 24px;
}

/* §7g (revised), Foundations-v2 "Header · visitor in New York": the plugin's timezone script adds
   the visitor's time after the UK time, "10am – 1pm (6am – 9am New York)", 13/400 Muted beside
   the 15px time (12 on phones). In em, so the size steps and fitText() shrink it with the line. */
.skdr-hdr .skdr-band__txt .skdr-band__tz {
	color: var(--skdr-muted, #6B6B73);
	font-size: 0.867em;
	font-weight: 400;
}

/*
 * Size steps (§7h), by the title + second line's length in characters (HeaderBand::size(),
 * mirrored in band.js): up to 44 the board's sizes (24px; artist 16, time 15), then 20, 18 and
 * 16px (never smaller), with the second line 15, 14 and 14px. Sized so the longest realistic DA
 * line (about 90 characters, e.g.
 * "White Christmas (feat. Trudy Stevens) [Single Version]" / "Bing Crosby, Danny Kaye & Peggy
 * Lee") fits in full above the tabs at every desktop width.
 */
.skdr-hdr .skdr-band[data-state] .skdr-band__txt--m .skdr-band__h {
	margin: 4px 0 2px;
	font-size: 20px;
	line-height: 25px;
}

.skdr-hdr .skdr-band[data-state] .skdr-band__txt--s .skdr-band__h {
	margin: 4px 0 2px;
	font-size: 18px;
	line-height: 22px;
}

.skdr-hdr .skdr-band[data-state] .skdr-band__txt--xs .skdr-band__h {
	margin: 4px 0 2px;
	font-size: 16px;
	line-height: 20px;
}

.skdr-hdr .skdr-band[data-state] .skdr-band__txt--m .skdr-band__sub {
	font-size: 15px;
	line-height: 22px;
}

.skdr-hdr .skdr-band[data-state] .skdr-band__txt--s .skdr-band__sub,
.skdr-hdr .skdr-band[data-state] .skdr-band__txt--xs .skdr-band__sub {
	font-size: 14px;
	line-height: 20px;
}

/* LISTEN LIVE sits above the tabs, right-aligned (§7, §7a) */
.skdr-band__ctl {
	display: flex;
	flex: none;
	flex-direction: column;
	align-self: stretch;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 42px;
}

/* band.js swaps these: the idle pill, or "Open player" with its note */
.skdr-band [data-skdr-pill] {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* A visited or focused link must never turn the pill's text red on red */
.skdr-hdr a.skdr-listen,
.skdr-hdr a.skdr-listen:visited,
.skdr-hdr a.skdr-listen:hover,
.skdr-hdr a.skdr-listen:focus,
.skdr-hdr a.skdr-listen:active {
	color: var(--skdr-c-pill-fg, #FFFFFF);
	text-decoration: none;
}

/* The grey tabs pinned to the band's bottom edge, header only (§4e, §7d) */
.skdr-band__tabs {
	position: absolute;
	right: var(--skdr-gutter, 24px);
	bottom: 0;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-band__tabs li {
	margin: 0;
	padding: 0;
}

.skdr-hdr .skdr-band__tab,
.skdr-hdr .skdr-band__tab:visited {
	position: relative;
	display: block;
	padding: 10px 32px 10px 12px;
	border-radius: 3px 3px 0 0;
	background: var(--skdr-fill, #F5F5F5);
	color: var(--skdr-ink, #1A1A1A);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.skdr-hdr .skdr-band__tab:hover,
.skdr-hdr .skdr-band__tab:focus,
.skdr-hdr .skdr-band__tab:active {
	background: var(--skdr-line, #E6E6E6);
	color: var(--skdr-ink, #1A1A1A);
}

.skdr-band__tab svg {
	position: absolute;
	top: 50%;
	right: 12px;
	margin-top: -7px;
	color: var(--skdr-red, #D32C3F);
}

/* Without the plugin: the logo alone */
.skdr-band--plain .skdr-band__wrap {
	justify-content: flex-start;
}

/* ---------------------------------------------------------------- red nav (§5.3, §5.3a) */

/* Above every page's own layers (the Last Played day tabs and search, the donate and show pages
   go up to 20), so the phone menu and the search that open from the nav cover them: their own
   z-index only counts inside this one. Below cookie banners and lightboxes. */
.skdr-nav {
	position: relative;
	z-index: 100;
	height: 64px;
	background: var(--skdr-red, #D32C3F);
}

.skdr-nav__wrap {
	display: flex;
	align-items: center;
	height: 64px;
}

.skdr-hdr .skdr-nav .main-navigation {
	flex: 1;
	min-width: 0;
}

.skdr-hdr .skdr-nav__ico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #FFFFFF;
	line-height: 1;
	cursor: pointer;
}

.skdr-hdr .skdr-nav__ico:hover {
	background: var(--skdr-dark, #8F182E);
	color: #FFFFFF;
}

.skdr-hdr .skdr-nav__ico svg {
	display: block;
	margin: 0 auto;
}

/* Search + DONATE NOW stay at the far right, the menu left-aligned */
.skdr-nav__end {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	height: 64px;
	margin-left: auto;
}

.skdr-hdr .skdr-nav .af-search-wrap {
	position: relative;
	display: block;
	width: auto;
	margin: 0;
}

.skdr-hdr .skdr-nav .af-search-form {
	top: calc(100% + 10px);
}

.skdr-hdr .skdr-nav .search-overlay.reveal-search .af-search-form {
	top: calc(100% + 10px);
}

/* The yellow block: full bar height, no radius (§5.3a) */
.skdr-hdr .skdr-nav__donate,
.skdr-hdr .skdr-nav__donate:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 28px;
	border-radius: 0;
	background: var(--skdr-yel, #FFCE00);
	color: var(--skdr-on-yel, #8F182E);
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.skdr-hdr .skdr-nav__donate[hidden] {
	display: none;
}

.skdr-hdr .skdr-nav__donate:hover,
.skdr-hdr .skdr-nav__donate:focus,
.skdr-hdr .skdr-nav__donate:active {
	background: var(--skdr-yel-h, #F2C300);
	color: var(--skdr-on-yel, #8F182E);
}

@media (min-width: 992px) {
	.skdr-hdr .skdr-nav .skdr-nav__toggle {
		display: none;
	}

	/* The menu spans the page's content width, Kreeti's container (1300px with a 15px gutter),
	   so HOME and DONATE NOW line up with the content below (client, 18 Oct). The band above
	   keeps the header's container. */
	.skdr-nav__wrap {
		max-width: var(--skdr-content, 1300px);
		padding: 0 var(--skdr-content-gutter, 15px);
	}

	/* Kreeti centres the menu; the boards keep it left with search + DONATE NOW at the right */
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop,
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul {
		display: flex;
		justify-content: flex-start;
		height: 64px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Only the top-level links take the board's type; Kreeti's dropdowns keep theirs */
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li {
		padding: 0;
		background: transparent;
		transition: none;
	}

	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li > a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 64px;
		padding: 0 17px;
		color: #FFFFFF;
		font-size: 15px;
		line-height: 64px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
	}

	/* Hover and the current section: Dark Red (never red text on red) */
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li:hover,
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li:focus-within,
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li.current-menu-item,
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li.current-menu-ancestor,
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li.current-menu-parent,
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li.current_page_item,
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li.current_page_ancestor {
		background: var(--skdr-dark, #8F182E);
	}

	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li > a::before {
		display: none;
	}

	/* The boards' 12px chevron in place of Kreeti's Font Awesome one */
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li.menu-item-has-children > a::after,
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li.page_item_has_children > a::after {
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		padding: 0;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
	}

	/* Kreeti's menu-description badge, kept inside the taller links */
	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li > a > .menu-description {
		top: 8px;
		line-height: 10px;
	}
}

/* Narrower desktops: the same bar, a little tighter */
@media (min-width: 992px) and (max-width: 1199px) {
	.skdr-band__wrap {
		gap: 24px;
	}

	.skdr-band__logo img {
		height: 80px;
	}

	/* The text column is narrower here (down to about 204px), so every size step goes one
	   smaller: 20, 18, then 16px. */
	.skdr-hdr .skdr-band[data-state] .skdr-band__txt .skdr-band__h {
		font-size: 20px;
		line-height: 25px;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt .skdr-band__sub {
		font-size: 15px;
		line-height: 22px;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--m .skdr-band__h {
		font-size: 18px;
		line-height: 22px;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--s .skdr-band__h,
	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--xs .skdr-band__h {
		font-size: 16px;
		line-height: 20px;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--m .skdr-band__sub,
	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--s .skdr-band__sub,
	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--xs .skdr-band__sub {
		font-size: 14px;
		line-height: 20px;
	}

	.skdr-hdr .skdr-nav .main-navigation .menu-desktop > ul > li > a {
		padding: 0 clamp(8px, calc(8px + (100vw - 992px) * 0.06), 12px);
		font-size: 14px;
		letter-spacing: 0.02em;
	}

	.skdr-hdr .skdr-nav__donate,
	.skdr-hdr .skdr-nav__donate:visited {
		padding: 0 16px;
	}
}

/* ---------------------------------------------------------------- phones (Header2-Mobile, §7b, §7d) */

@media (max-width: 991px) {
	.skdr-top {
		height: 40px;
	}

	.skdr-top__wrap {
		max-width: none;
		height: 40px;
		padding: 0 8px 0 var(--skdr-gutter-phone, 16px);
	}

	.skdr-top__date {
		font-size: 13px;
	}

	.skdr-top__soc ul {
		gap: 8px;
	}

	.skdr-hdr .skdr-top .aft-small-social-menu ul li a {
		width: 32px;
		height: 32px;
	}

	.skdr-hdr .skdr-top .aft-small-social-menu ul li a::after {
		font-size: 16px;
	}

	/* Logo + LISTEN LIVE (64px), then the live card (124px: the 88px art plus 12px above and below,
	   room for a two-line title with its label and time, §7h), then the tabs standing straight on
	   the red bar (44px tap targets). HeaderMobile-Preview option 1 with the as-built tabs (client, 18 Oct). */
	.skdr-band {
		height: 232px;
		box-shadow: none;
	}

	.skdr-band--plain {
		height: 64px;
	}

	/* Last resort, set by band.js: text still too long at its smallest size grows the card's row
	   instead of being clipped (§7h). Only ever on extreme lengths, so the band is fixed otherwise. */
	.skdr-band.skdr-band--grow {
		height: auto;
		min-height: 232px;
	}

	.skdr-band--grow .skdr-band__wrap {
		grid-template-rows: 64px auto 44px;
	}

	.skdr-band--grow .skdr-band__txt {
		overflow: visible;
	}

	.skdr-band__wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 64px 124px 44px;
		gap: 0;
		max-width: none;
		padding: 0;
	}

	/* The board's hairline under the logo row. It must fill the row (align-self: stretch) so
	   the line sits on the row's bottom edge: the desktop wrap's align-items: center would
	   otherwise centre this empty box and draw the line through the logo and the pill. */
	.skdr-band__wrap::before {
		content: "";
		grid-row: 1;
		grid-column: 1 / -1;
		align-self: stretch;
		border-bottom: 1px solid var(--skdr-line, #E6E6E6);
		pointer-events: none;
	}

	.skdr-band--plain .skdr-band__wrap {
		grid-template-rows: 64px;
	}

	.skdr-band__logo {
		grid-row: 1;
		grid-column: 1;
		align-self: center;
		justify-self: start;
		min-width: 0;
		max-width: 100%;
		margin-left: var(--skdr-gutter-phone, 16px);
	}

	.skdr-band__logo img {
		max-width: 100%;
		height: 30px;
		object-fit: contain;
		object-position: left center;
	}

	.skdr-band__ctl {
		grid-row: 1;
		grid-column: 2;
		align-self: center;
		padding: 0 var(--skdr-gutter-phone, 16px) 0 12px;
	}

	.skdr-hdr .skdr-band .skdr-listen--lg {
		gap: 8px;
		height: 44px;
		padding: 0 16px 0 12px;
		font-size: 13px;
	}

	.skdr-band__ctl .skdr-listen-note {
		display: none;
	}

	/* The art starts on the logo's 16px edge and the text fills the rest of the row, so logo, art
	   and text share one left edge instead of the card floating in the middle (client, 18 Oct). */
	.skdr-band__live {
		grid-row: 2;
		grid-column: 1 / -1;
		align-self: stretch;
		align-items: center;
		gap: 12px;
		overflow: hidden;
		padding: 12px var(--skdr-gutter-phone, 16px);
	}

	.skdr-band__slot,
	.skdr-band[data-state="song"] .skdr-band__slot {
		align-self: center;
		justify-content: center;
		width: 88px;
		height: 88px;
		padding: 0;
	}

	.skdr-band .skdr-band__cut,
	.skdr-band[data-state="song"] .skdr-band__sq {
		display: none;
	}

	.skdr-band .skdr-band__art,
	.skdr-band:not([data-state="song"]) .skdr-band__sq {
		display: block;
		position: relative;
		overflow: hidden;
		width: 88px;
		height: 88px;
		border-radius: 4px;
	}

	/* Header2-Mobile .ph: 24px icon; only the album tile keeps the 1px ring */
	.skdr-band__art > .skdr-ph {
		gap: 4px;
	}

	.skdr-band__art > .skdr-ph svg,
	.skdr-band__sq > .skdr-ph svg {
		width: 24px;
		height: 24px;
	}

	.skdr-band__sq > .skdr-ph {
		box-shadow: none;
	}

	.skdr-band:not([data-state="song"]) .skdr-band__art {
		display: none;
	}

	/* The card's text: never truncated. The size steps scale with the screen, from the board's
	   phone sizes at 390px (title 18, 17, 16, 16px; second line 14, 13, 13, 12px) up to the
	   desktop sizes on tablets, and band.js shrinks anything still too long to fit (§7h). */
	.skdr-band__txt {
		flex: 1 1 auto;
		align-self: stretch;
		padding-bottom: 0;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt .skdr-band__h {
		margin: 4px 0 2px;
		font-size: clamp(18px, calc(9px + 2.4vw), 24px);
		line-height: 1.25;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt .skdr-band__sub {
		font-size: clamp(14px, calc(10px + 1vw), 16px);
		line-height: 1.5;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--m .skdr-band__h {
		font-size: clamp(17px, calc(8px + 2.2vw), 21px);
		line-height: 1.25;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--s .skdr-band__h {
		font-size: clamp(16px, calc(7px + 2vw), 19px);
		line-height: 1.25;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--xs .skdr-band__h {
		font-size: clamp(16px, calc(6px + 1.8vw), 18px);
		line-height: 1.2;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--m .skdr-band__sub {
		font-size: 13px;
		line-height: 19px;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--s .skdr-band__sub {
		font-size: 13px;
		line-height: 18px;
	}

	.skdr-hdr .skdr-band[data-state] .skdr-band__txt--xs .skdr-band__sub {
		font-size: 12px;
		line-height: 16px;
	}

	.skdr-band__tabs {
		position: static;
		grid-row: 3;
		grid-column: 1 / -1;
		align-items: flex-end;
		justify-content: flex-end;
		padding: 0 var(--skdr-gutter-phone, 16px);
	}

	/* 44px tall on phones (11px + 22px + 11px), the minimum tap target (CLAUDE.md) */
	.skdr-hdr .skdr-band__tab,
	.skdr-hdr .skdr-band__tab:visited {
		overflow: hidden;
		padding-top: 11px;
		padding-bottom: 11px;
		font-size: 14px;
		text-overflow: ellipsis;
	}

	/* The smallest phones (320–359px): both tabs still fit in full (13px, chevron 8px closer)
	   rather than being cut off. Still 44px tall. */
	@media (max-width: 359px) {
		.skdr-hdr .skdr-band__tab,
		.skdr-hdr .skdr-band__tab:visited {
			padding-right: 26px;
			padding-left: 10px;
			font-size: 13px;
		}

		.skdr-hdr .skdr-band__tab svg {
			right: 8px;
		}
	}

	/* Never wider than the screen: longer labels (a translation, a narrow phone) shrink the
	   logo first, then truncate the tabs, instead of pushing anything off the right edge. */
	.skdr-top,
	.skdr-band {
		overflow-x: clip;
	}

	.skdr-band__tabs,
	.skdr-band__tabs li {
		min-width: 0;
	}

	.skdr-top__date {
		overflow: hidden;
		min-width: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.skdr-top__soc,
	.skdr-band__ctl {
		flex: none;
	}

	/* The 56px bar: hamburger flush left; search and the DONATE NOW block flush right (§7d) */
	.skdr-nav {
		height: 56px;
	}

	.skdr-nav__wrap {
		max-width: none;
		height: 56px;
		padding: 0 0 0 6px;
	}

	.skdr-hdr .skdr-nav .main-navigation {
		display: flex;
		flex: none;
		align-items: center;
		height: 56px;
	}

	.skdr-hdr .skdr-nav .skdr-nav__toggle {
		padding: 10px;
	}

	/* Kreeti's phone menu drops below the whole bar. Until Kreeti's script has made it the
	   phone menu, keep the desktop list out of the 56px bar. */
	.skdr-hdr .skdr-nav .main-navigation .menu > ul:not(.menu-mobile) {
		display: none;
	}

	/* The open menu is white on a near-white page, so its end gets a red rule and a shadow to
	   stand out from the page under it (Kai, 19 Oct). Kreeti hides it (display: none) when shut. */
	.skdr-hdr .skdr-nav .main-navigation .menu .menu-mobile {
		top: 100%;
		border-bottom: 4px solid var(--skdr-red, #D32C3F);
		box-shadow: 0 18px 28px -10px rgba(0, 0, 0, 0.4);
	}

	.skdr-hdr .skdr-nav .main-navigation .menu-desktop .menu-mobile > li {
		display: block;
		padding: 0;
	}

	.skdr-nav__end {
		gap: 4px;
		height: 56px;
	}

	/* The search drops below the whole bar, full width, as Kreeti's own phone search does (its
	   wrap is static there). A positioned wrap shrank it to the 44px button (Kai, 19 Oct). */
	.skdr-hdr .skdr-nav .af-search-wrap {
		position: static;
	}

	.skdr-hdr .skdr-nav .af-search-form,
	.skdr-hdr .skdr-nav .search-overlay.reveal-search .af-search-form {
		top: 100%;
		right: 0;
		left: 0;
		box-sizing: border-box;
		width: auto;
		max-width: none;
		margin: 0;
	}

	.skdr-hdr .skdr-nav__donate,
	.skdr-hdr .skdr-nav__donate:visited {
		height: 56px;
		padding: 0 16px;
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------- reduced motion: nothing moves */

@media (prefers-reduced-motion: reduce) {
	.skdr-band__eq span {
		animation: none;
	}

	.skdr-band__eq span:nth-child(1) {
		height: 10px;
	}

	.skdr-band__eq span:nth-child(2) {
		height: 16px;
	}

	.skdr-band__eq span:nth-child(3) {
		height: 8px;
	}
}

/* ================================================================ footer (#24) */

/*
 * Ported from the approved boards (BRIEF §19, §22, §4f, §4b, §28a):
 *   Footer-Final        desktop: Everyday and Live appeal bands, compact app widget, legal row
 *   Footer-Mobile       phones (390): the bands, the 2-column menu, Follow us under the legal text
 *   Fundraising-States  the Coming up and Thank you bands (desktop and phone)
 * The board classes are kept. Every link rule sits under .skdr-footer (0,2,0), so Kreeti's bare
 * link rules (a:visited is 0,1,1) never recolour it. The app widget and Follow us are the
 * plugin's components (components.css); only their place in the footer is set here.
 * The menu stacks at 900px (Footer-Final); phones are 600px and below.
 */

.skdr-footer {
	background: var(--skdr-white, #FFFFFF);
	color: var(--skdr-gray, #55555D);
	font-family: var(--skdr-font, 'Poppins', sans-serif);
}

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

.skdr-footer :where(p, h3) {
	font-family: inherit;
}

.skdr-footer a:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--skdr-red, #D32C3F);
}

/* On the Dark Red and gradient bands */
.skdr-footer :is(.skdr-footer-brand, .skdr-footer-appeal) a:focus-visible {
	outline: 2px solid var(--skdr-dark, #8F182E);
	box-shadow: 0 0 0 4px #FFFFFF;
}

/* Back to top moves focus to the page; that needs no ring */
#page[tabindex="-1"]:focus {
	outline: 0;
}

/* ---------------------------------------------------------------- Back to top (Footer A) */

.skdr-footer-top {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	background: var(--skdr-line, #E6E6E6);
}

.skdr-footer .skdr-footer-totop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border-radius: 4px;
	color: var(--skdr-ink, #1A1A1A);
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
}

.skdr-footer .skdr-footer-totop:hover {
	color: var(--skdr-red, #D32C3F);
}

.skdr-footer-totop svg {
	flex: none;
}

/* ---------------------------------------------------------------- Everyday: A's Dark Red brand band + the donate line */

.skdr-footer-brand {
	background: var(--skdr-dark, #8F182E);
	color: #FFFFFF;
}

.skdr-footer-brand__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.skdr-footer .skdr-footer-brand__logo {
	display: inline-block;
	flex: 0 0 auto;
	padding: 8px 0;
	border-radius: 4px;
	line-height: 0;
}

.skdr-footer-brand__logo img {
	display: block;
	width: auto;
	height: 80px;
}

.skdr-footer-brand__also {
	flex: 1 1 440px;
	min-width: 0;
}

.skdr-footer .skdr-footer-kicker {
	margin: 0 0 10px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skdr-footer-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.skdr-footer .skdr-footer-chip {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border: 1px solid #FFFFFF;
	border-radius: 20px;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

.skdr-footer .skdr-footer-chip:hover {
	background: #FFFFFF;
	color: var(--skdr-dark, #8F182E);
}

/* Always at the right end of the band, with or without the pills */
.skdr-footer-donate {
	display: flex;
	flex: 0 1 280px;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	min-width: 240px;
	margin-left: auto;
	text-align: right;
}

.skdr-footer .skdr-footer-donate__text {
	margin: 0;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
}

/* The yellow donate pill: Dark Red text, never white (§28a) */
.skdr-footer .skdr-footer-donate__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border-radius: var(--skdr-r-pill, 999px);
	background: var(--skdr-yel, #FFCE00);
	color: var(--skdr-on-yel, #8F182E);
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

.skdr-footer .skdr-footer-donate__pill:hover {
	background: #FFFFFF;
	color: var(--skdr-on-yel, #8F182E);
}

/* ---------------------------------------------------------------- Coming up, Live appeal, Thank you: C's appeal band, colours as is */

.skdr-footer-appeal {
	display: flex;
	align-items: center;
	min-height: 180px;
	background: var(--skdr-red, #D32C3F);
	background-image: var(--skdr-gradient, linear-gradient(45deg, #FFCE00, #D32C3F));
	color: #FFFFFF;
}

.skdr-footer-appeal__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
	width: 100%;
	padding-top: 24px;
	padding-bottom: 24px;
}

.skdr-footer .skdr-footer-appeal__logo {
	display: inline-block;
	flex: 0 0 auto;
	border-radius: 4px;
	line-height: 0;
}

.skdr-footer-appeal__logo img {
	display: block;
	width: auto;
	height: 96px;
}

.skdr-footer-appeal__main {
	display: flex;
	flex: 1 1 420px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 16px 40px;
	min-width: 0;
	text-align: right;
}

.skdr-footer-appeal__copy {
	flex: 1 1 320px;
	min-width: 0;
}

.skdr-footer .skdr-footer-appeal__head {
	margin: 0;
	color: #FFFFFF;
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
}

.skdr-footer .skdr-footer-appeal__text {
	margin: 6px 0 0;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
}

.skdr-footer .skdr-footer-appeal__copy > .skdr-footer-appeal__text:first-child {
	margin-top: 0;
}

/* Coming up: the optional "Set a reminder in the app" text link */
.skdr-footer .skdr-footer-onlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.skdr-footer .skdr-footer-onlink:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.skdr-footer-onlink svg {
	flex: none;
}

.skdr-footer .skdr-footer-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	border-radius: var(--skdr-r-pill, 999px);
	background: #FFFFFF;
	color: var(--skdr-dark, #8F182E);
	font-size: 16px;
	line-height: 1;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}

.skdr-footer .skdr-footer-pill:hover {
	background: var(--skdr-dark, #8F182E);
	color: #FFFFFF;
}

/* ---------------------------------------------------------------- the white menu section, the same in every state */

.skdr-footer-menu {
	background: #FFFFFF;
}

/* FooterLower-Round2 2b: the two columns on the left, the app card (first in the markup, for phones) on the right */
.skdr-footer-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: 40px;
	align-items: start;
	padding-top: 40px;
	padding-bottom: 32px;
}

.skdr-footer-body > .skdr-app-footer {
	order: 2;
}

.skdr-footer-body--cols {
	grid-template-columns: minmax(0, 1fr);
}

/* A fixed grid: each menu keeps its column, filled or not */
.skdr-footer-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 40px;
}

.skdr-footer-body--cols .skdr-footer-cols {
	grid-template-columns: repeat(2, minmax(0, 280px));
}

/* The app card has no image: a pale card with a Dark Red title (the board's .appcard) */
.skdr-footer .skdr-app-footer {
	padding: 20px;
	border-radius: 12px;
	background: #F9F9F9;
	box-shadow: inset 0 0 0 1px var(--skdr-line, #E6E6E6);
}

.skdr-footer .skdr-app-footer__title {
	color: var(--skdr-dark, #8F182E);
	font-size: 18px;
	line-height: 26px;
}

.skdr-footer .skdr-app-footer__text {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 21px;
}

.skdr-footer .skdr-app-stores {
	margin-top: 14px;
}

.skdr-footer .skdr-footer-col__h {
	clear: none;
	margin: 0 0 12px;
	color: var(--skdr-ink, #1A1A1A);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skdr-footer .skdr-footer-col ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-footer .skdr-footer-col li {
	display: flex;
	margin: 0;
	padding: 0;
}

.skdr-footer .skdr-footer-col a {
	display: inline-block;
	padding: 4px 0;
	border-radius: 2px;
	color: var(--skdr-gray, #55555D);
	font-size: 15px;
	line-height: 22px;
	font-weight: 400;
	text-decoration: none;
}

.skdr-footer .skdr-footer-col a:hover {
	color: var(--skdr-dark, #8F182E);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- one-line legal row: copyright, legal links, Follow icons (FooterLower-Round2 2b, §4f) */

.skdr-footer-legalbar {
	background: #FFFFFF;
}

.skdr-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding: 16px 0;
	border-top: 1px solid var(--skdr-line, #E6E6E6);
}

.skdr-footer .skdr-footer-legal__txt {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--skdr-muted, #6B6B73);
	font-size: 13px;
	line-height: 20px;
}

/* The whole legal line, never truncated: it wraps on phones (#196) */
.skdr-footer-legal__full {
	overflow-wrap: anywhere;
}

.skdr-footer .skdr-footer-legal__txt a {
	color: var(--skdr-gray, #55555D);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.skdr-footer .skdr-footer-legal__txt a:hover {
	color: var(--skdr-red, #D32C3F);
}

.skdr-footer-legal__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.skdr-footer .skdr-footer-legal__links a {
	border-radius: 2px;
	color: var(--skdr-gray, #55555D);
	font-size: 13px;
	line-height: 20px;
	text-decoration: none;
}

.skdr-footer .skdr-footer-legal__links a:hover {
	color: var(--skdr-dark, #8F182E);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Icons only: each icon carries its own accessible label */
.skdr-footer .skdr-footer-follow {
	margin: 0 0 0 8px;
}

.skdr-footer .skdr-footer-follow .skdr-fs__lbl {
	display: none;
}

.skdr-footer .skdr-fs__ic {
	color: var(--skdr-gray, #55555D);
}

.skdr-footer .skdr-fs__ic:hover {
	color: var(--skdr-dark, #8F182E);
}

/* ---------------------------------------------------------------- narrower screens (Footer-Final) */

@media (max-width: 900px) {
	.skdr-footer-donate {
		flex-basis: 100%;
		align-items: flex-start;
		text-align: left;
	}

	.skdr-footer-body {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.skdr-footer-body > .skdr-app-footer {
		order: 0;
	}
}

/* ---------------------------------------------------------------- phones (Footer-Mobile, Fundraising-States 390) */

@media (max-width: 600px) {
	.skdr-footer-wrap {
		padding-right: var(--skdr-gutter-phone, 16px);
		padding-left: var(--skdr-gutter-phone, 16px);
	}

	.skdr-footer-brand__in {
		display: block;
	}

	.skdr-footer-brand__logo img {
		height: 64px;
	}

	.skdr-footer .skdr-footer-kicker {
		margin: 16px 0 10px;
	}

	.skdr-footer .skdr-footer-chip {
		height: 44px;
		border-radius: 22px;
	}

	.skdr-footer-donate {
		display: block;
		min-width: 0;
		margin-top: 24px;
		padding-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.24);
	}

	.skdr-footer .skdr-footer-donate__text {
		font-size: 14px;
	}

	.skdr-footer .skdr-footer-donate__pill {
		margin-top: 12px;
	}

	/* The copy first (right-aligned), then the logo and the pill on one row */
	.skdr-footer-appeal {
		display: block;
		min-height: 0;
	}

	.skdr-footer-appeal__in {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-between;
		align-items: end;
		gap: 20px 16px;
	}

	.skdr-footer-appeal__main {
		display: contents;
	}

	.skdr-footer-appeal__copy {
		grid-row: 1;
		grid-column: 1 / -1;
		max-width: 300px;
		margin-left: auto;
		text-align: right;
	}

	.skdr-footer .skdr-footer-appeal__logo {
		grid-row: 2;
	}

	.skdr-footer-appeal__logo img {
		height: 64px;
	}

	.skdr-footer .skdr-footer-appeal__head {
		font-size: 24px;
		line-height: 32px;
	}

	.skdr-footer .skdr-footer-pill {
		grid-row: 2;
	}

	/* A long button label: the logo, then the pill full width */
	.skdr-footer-appeal--stack .skdr-footer-appeal__in {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	.skdr-footer .skdr-footer-appeal--stack .skdr-footer-appeal__logo {
		justify-self: start;
	}

	.skdr-footer .skdr-footer-appeal--stack .skdr-footer-pill {
		grid-row: 3;
		justify-self: stretch;
	}

	.skdr-footer-body {
		gap: 28px;
		padding-top: 28px;
		padding-bottom: 32px;
	}

	.skdr-footer-cols,
	.skdr-footer-body--cols .skdr-footer-cols {
		grid-template-columns: 1fr 1fr;
		gap: 24px 16px;
	}

	.skdr-footer-col--empty {
		display: none;
	}

	.skdr-footer .skdr-footer-col__h {
		margin-bottom: 4px;
	}

	.skdr-footer .skdr-footer-col a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
	}

	/* A centred block: the full copyright, the legal links (wrapping once), the Follow icons */
	.skdr-footer-legal {
		justify-content: center;
		gap: 8px 16px;
		padding: 16px 0 18px;
		text-align: center;
	}

	.skdr-footer .skdr-footer-legal__txt {
		flex-basis: 100%;
	}

	.skdr-footer-legal__links {
		justify-content: center;
	}

	/* 44 × 44 around each 20px icon (ShowPresenter3-Mobile): the 32px box plus a 6px ring */
	.skdr-footer .skdr-footer-follow {
		flex-basis: 100%;
		justify-content: center;
		margin: 4px 0 0;
		min-height: 44px;
	}

	.skdr-footer .skdr-footer-follow .skdr-fs__ic {
		margin: 0;
	}

	.skdr-footer .skdr-footer-follow .skdr-fs__ic::before {
		right: -6px;
		left: -6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skdr-footer .skdr-footer-chip,
	.skdr-footer .skdr-footer-pill,
	.skdr-footer .skdr-footer-donate__pill {
		transition: none;
	}
}

/* ---------------------------------------------------------------- OBIT mode (Obit-States, §25b, §25c, #30) */

/*
 * tokens.css turns Red, Yellow and Dark Red into #1A1A1A under body.skdr-obit, so the nav and the
 * footer band go black by themselves. What would then sit black on black gets a white face:
 * - the nav's DONATE NOW block is inverted (a white block, black type) by default; the Settings
 *   choice "Keep colour" leaves it on the token colours and "Hide" removes it;
 * - the footer's donate pill is a white outline on the black band (§25c): donations stay.
 */
body.skdr-obit-donate-inverted .skdr-hdr .skdr-nav__donate,
body.skdr-obit-donate-inverted .skdr-hdr .skdr-nav__donate:visited,
body.skdr-obit-donate-inverted .skdr-hdr .skdr-nav__donate:hover,
body.skdr-obit-donate-inverted .skdr-hdr .skdr-nav__donate:focus,
body.skdr-obit-donate-inverted .skdr-hdr .skdr-nav__donate:active {
	background: #FFFFFF;
	color: #1A1A1A;
}

body.skdr-obit-donate-hide .skdr-hdr .skdr-nav__donate {
	display: none;
}

body.skdr-obit .skdr-footer .skdr-footer-donate__pill,
body.skdr-obit .skdr-footer .skdr-footer-donate__pill:visited {
	background: transparent;
	box-shadow: inset 0 0 0 2px #FFFFFF;
	color: #FFFFFF;
}

body.skdr-obit .skdr-footer .skdr-footer-donate__pill:hover,
body.skdr-obit .skdr-footer .skdr-footer-donate__pill:focus {
	background: #FFFFFF;
	color: #1A1A1A;
}

/*
 * Sidebar widgets (#164, Widgets3-InPlace): Kreeti's and core's widgets sit with ours.
 * One card (radius, shadow, 20px padding) and the one title: Radio Christmas Red, 22px bold,
 * with Kreeti's leading bar and trailing rule gone. Ours (.skdr-widget) bring their own card.
 * The `body #secondary` prefix beats Kreeti's `#secondary .widget-area.color-pad .widget` and
 * `body.widget-title-border-center .widget-title`.
 */
body #secondary .widget-area .widget:not(.skdr-widget) {
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 20px;
	border-radius: 8px;
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-card);
	overflow: hidden;
}

body #secondary .widget-area .widget:not(.skdr-widget) > :last-child {
	margin-bottom: 0;
}

body #secondary .widget-area .widget:not(.skdr-widget) .widget-title {
	display: block;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
	color: var(--skdr-red);
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
}

body #secondary .widget-area .widget:not(.skdr-widget) .widget-title .heading-line-before,
body #secondary .widget-area .widget:not(.skdr-widget) .widget-title .heading-line-after {
	display: none;
}

/* The title may be a link or wrapped in a span: it stays Red when visited, too */
body #secondary .widget-area .widget:not(.skdr-widget) .widget-title a,
body #secondary .widget-area .widget:not(.skdr-widget) .widget-title a:visited,
body #secondary .widget-area .widget:not(.skdr-widget) .widget-title span {
	color: var(--skdr-red);
}

/* ---------------------------------------------------------------- after a post: Trending now, Related stories (inc/posts.php) */

/*
 * Off unless switched on (Customizer › Branding › Posts). Switched on, they keep Kreeti's look,
 * but their headings lose the decorative line (Kai, 19 Oct: "no line"): Kreeti's short red bar
 * before the title and faint rule after it (the heading-line spans, drawn by its "Widget Title
 * Border" option). On our pages only these two headings print them, and the sidebar's widget
 * titles drop them above, so the line goes everywhere and inc/customizer.php hides the option.
 * The title stays at the left, where it sat beside the bar. The #page prefix outranks every
 * border style, e.g. `body.widget-title-border-bottom .header-after1 .heading-line-before`.
 */
#page .header-after1 .heading-line-before,
#page .header-after1 .heading-line-after,
#page .widget-title .heading-line-before,
#page .widget-title .heading-line-after {
	display: none;
}

#page .header-after1,
#page .widget-title {
	justify-content: flex-start;
}

/* ---------------------------------------------------------------- 404 with the plugin off (404.php, #171) */

.rckc-not-found {
	max-width: var(--skdr-container, 1200px);
	margin: 0 auto;
	padding: 32px var(--skdr-gutter, 24px) 56px;
	font-family: var(--skdr-font, 'Poppins', sans-serif);
}

.rckc-not-found .rckc-not-found__title {
	margin: 0;
	color: var(--skdr-red, #D32C3F);
	font-size: var(--skdr-fs-title, 44px);
	line-height: 1.2;
	font-weight: 700;
}

.rckc-not-found .rckc-not-found__lead {
	max-width: 760px;
	margin: 12px 0 24px;
	color: var(--skdr-gray, #55555D);
	font-size: 17px;
	line-height: 28px;
}

.rckc-not-found .rckc-not-found__home {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--skdr-dark, #8F182E);
	font-weight: 600;
}

.rckc-not-found a:focus-visible,
.rckc-not-found input:focus-visible,
.rckc-not-found button:focus-visible {
	outline: 2px solid #FFFFFF;
	box-shadow: 0 0 0 4px var(--skdr-red, #D32C3F);
}

/* ---------------------------------------------------------------- the phone sidebar (inc/sidebars.php) */

/* While "Sidebar on phones" has widgets, phones show it instead of the Main Sidebar's, and
   wider screens never see it. 767px is RCKC_PHONE_MAX. */
@media (max-width: 767px) {
	.skdr-sidebar--wide {
		display: none;
	}
}

@media (min-width: 768px) {
	.skdr-sidebar--phone {
		display: none;
	}
}