/* ==========================================================================
   Charlton Live - Header & Footer
   build-spec.md §2 and §3.
   ========================================================================== */

/* ==========================================================================
   Header - 78px, ink, three groups
   ========================================================================== */

.cl-header {
	background: var(--cl-ink);
	color: var(--cl-white);
}

.cl-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 78px;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding: 16px var(--cl-gutter);
}

/* ---------- Brand lockup ---------- */
.cl-brand {
	display: flex;
	align-items: center;
	gap: 13px;
	flex: 0 0 auto;
	text-decoration: none;
	color: inherit;
}
.cl-brand:hover { color: inherit; }

.cl-brand__logo {
	height: 52px;
	width: auto;
	flex-shrink: 0;
}

.cl-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.cl-brand__name {
	font-family: var(--cl-font-display);
	font-size: 23px;
	letter-spacing: var(--cl-track-display);
	color: var(--cl-white);
	text-transform: uppercase;
}

.cl-brand__strap {
	margin-top: 5px;
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: var(--cl-track-strap);
	color: var(--cl-red-on-ink);
	text-transform: uppercase;
}

/* ---------- Sponsor lockup ----------
   Sits to the right of the CTAs, label stacked above the logo. It was next
   to the brand, which ate the space the nav needed and wrapped two of the
   menu items onto a second line. */
.cl-sponsor-mark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	margin-left: 16px;
	padding-left: 16px;
	border-left: 1px solid rgba(255, 255, 255, .16);
	text-decoration: none;
}

.cl-sponsor-mark__label {
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: 9px;
	line-height: 1.2;
	letter-spacing: var(--cl-track-eyebrow);
	text-transform: uppercase;
	color: var(--cl-dark-meta);
	white-space: nowrap;
}

/* The logo is full colour on a light ground, so it needs a tile to sit on,
   the same treatment the footer and the Podcasts page give it. */
.cl-sponsor-mark__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 7px;
	border-radius: 6px;
	background: var(--cl-white);
}
.cl-sponsor-mark__tile img {
	display: block;
	width: auto;
	height: 26px;
}

.cl-sponsor-mark:hover .cl-sponsor-mark__label { color: var(--cl-white); }

/* One instance is in the header bar and one in the mobile menu; each hides
   where the other is showing, so only ever one is visible. */
.cl-sponsor-mark--menu { display: none; }

/* ---------- Navigation ---------- */
.cl-nav { margin-inline: auto; }

.cl-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-nav__list a {
	display: block;
	padding-block: 6px;
	/* Two-word items like "About Us" were breaking onto a second line and
	   dragging the header out of shape. They stay whole and the row scrolls
	   its own way out of trouble at narrow widths instead. */
	white-space: nowrap;
	font-family: var(--cl-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	color: var(--cl-nav);
	text-decoration: none;
	/* Transparent, not none, so nothing shifts when the active item changes. */
	border-bottom: 2px solid transparent;
}

.cl-nav__list a:hover { color: var(--cl-red-on-ink); }

.cl-nav__list .current-menu-item > a,
.cl-nav__list .current_page_item > a,
.cl-nav__list .current-menu-ancestor > a {
	color: var(--cl-white);
	border-bottom-color: var(--cl-red);
}

/* Socials live in the mobile panel only; on desktop the header is already
   carrying the logo, seven nav items and two CTAs. */
.cl-nav__socials { display: none; }

.cl-nav__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	color: var(--cl-white);
}
.cl-nav__social:hover {
	color: var(--cl-white);
	border-color: var(--cl-red);
	background: rgba(228, 18, 43, .12);
}

/* ---------- Header CTAs ---------- */
.cl-header__cta {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.cl-header__divider {
	width: 1px;
	height: 22px;
	margin-inline: 16px;
	background: rgba(255, 255, 255, .18);
}

.cl-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	border-radius: 6px;
	font-family: var(--cl-font-body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.cl-btn--amber {
	padding: 11px 16px;
	background: var(--cl-amber);
	color: var(--cl-ink);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: var(--cl-track-btn);
	text-transform: uppercase;
}
.cl-btn--amber:hover { color: var(--cl-ink); filter: brightness(1.07); }

.cl-btn--primary {
	padding: 11px 20px;
	background: var(--cl-red);
	color: var(--cl-white);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cl-btn--primary:hover { color: var(--cl-white); filter: brightness(1.07); }

/* Subscribe: YouTube mark, label, then the count in its own pill. */
.cl-btn--youtube { gap: 9px; padding-inline: 16px; }
.cl-btn--youtube svg { flex: 0 0 auto; }

.cl-btn__count {
	padding: 2px 8px;
	border-radius: 100px;
	background: rgba(0, 0, 0, .22);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* ---------- Hamburger (hidden on desktop) ---------- */
.cl-burger {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cl-white);
	cursor: pointer;
}

.cl-burger__bars,
.cl-burger__bars::before,
.cl-burger__bars::after {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform .18s ease, opacity .18s ease;
}
.cl-burger__bars { top: 21px; }
.cl-burger__bars::before { content: ""; top: -7px; left: 0; }
.cl-burger__bars::after  { content: ""; top: 7px; left: 0; }

.cl-burger[aria-expanded="true"] .cl-burger__bars { background: transparent; }
.cl-burger[aria-expanded="true"] .cl-burger__bars::before { transform: translateY(7px) rotate(45deg); }
.cl-burger[aria-expanded="true"] .cl-burger__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Footer
   ========================================================================== */

.cl-footer {
	background: var(--cl-ink);
	color: var(--cl-footer-body);
	padding: 46px var(--cl-gutter) 30px;
	font-size: 13px;
}

.cl-footer a { color: var(--cl-footer-body); text-decoration: none; }
.cl-footer a:hover { color: var(--cl-red-on-ink); }

.cl-footer__inner {
	display: grid;
	/* Design ratio 1.5 : 1 : 1 : 1.1 */
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: 36px;
	max-width: var(--cl-content);
	margin-inline: auto;
}

/* ---------- Column 1: brand ---------- */
.cl-footer__lockup {
	display: flex;
	align-items: center;
	gap: 11px;
}

.cl-footer__logo { height: 44px; width: auto; }

.cl-footer__name {
	font-family: var(--cl-font-display);
	font-size: 20px;
	letter-spacing: var(--cl-track-display);
	color: var(--cl-white);
	text-transform: uppercase;
}

.cl-footer__blurb {
	max-width: 280px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.6;
}

.cl-socials {
	display: flex;
	gap: 9px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.cl-socials__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	background: transparent;
	color: var(--cl-white);
}
.cl-socials__link:hover {
	color: var(--cl-white);
	border-color: var(--cl-red);
	background: rgba(228, 18, 43, .12);
}

/* ---------- Link columns ---------- */
.cl-footer__heading {
	margin-bottom: 12px;
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var(--cl-track-eyebrow);
	color: var(--cl-white);
	text-transform: uppercase;
}

.cl-footer__heading--sm {
	margin: 16px 0 10px;
	font-size: 11px;
}

.cl-footer__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Column 4: sponsor and partners ---------- */
.cl-sponsor {
	display: inline-flex;
	align-items: center;
	padding: 9px 12px;
	background: var(--cl-white);
	border-radius: 8px;
}
.cl-sponsor img { height: 40px; width: auto; object-fit: contain; }

.cl-partners {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-partners__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--cl-white);
	border-radius: 7px;
}
.cl-partners__tile img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/* ---------- Bottom bar ---------- */
.cl-footer__bar {
	max-width: var(--cl-content);
	margin: 32px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.cl-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.cl-newsnow {
	display: inline-flex;
	flex: 0 0 auto;
}
.cl-newsnow img {
	width: 160px;
	height: 50px;
	display: block;
}
.cl-newsnow:hover { opacity: .85; }

.cl-footer__legal {
	display: flex;
	gap: 20px;
	margin: 0;
	font-size: 12px;
	color: var(--cl-dark-meta);
}

/* ==========================================================================
   Responsive - breakpoints 980 / 720 / 480 (build-spec §7)
   ========================================================================== */

/* Seven nav items, two CTAs and the sponsor is a lot for one row. The label
   goes first and the logo stays, because the logo is the part that counts. */
@media (max-width: 1180px) {
	.cl-nav__list { gap: 18px; }
	.cl-sponsor-mark--header { margin-left: 12px; padding-left: 12px; }
	.cl-sponsor-mark--header .cl-sponsor-mark__tile { padding: 3px 5px; }
	.cl-sponsor-mark--header .cl-sponsor-mark__tile img { height: 22px; }
}

@media (max-width: 980px) {
	.cl-burger { display: block; }

	/* Out of the bar, into the menu, where it gets its label back. */
	.cl-sponsor-mark--header { display: none; }
	.cl-sponsor-mark--menu {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		gap: 9px;
		margin: 14px 0 2px;
		padding-left: 0;
		border-left: 0;
	}
	.cl-sponsor-mark--menu .cl-sponsor-mark__label { max-width: none; }

	/* Strapline and Etsy drop below tablet; Subscribe stays. */
	.cl-brand__strap { display: none; }
	.cl-btn--amber,
	.cl-header__divider { display: none; }

	.cl-header__inner { flex-wrap: wrap; gap: 12px; }

	.cl-nav {
		order: 3;
		flex-basis: 100%;
		margin-inline: 0;
		display: none;
	}
	.cl-nav.is-open { display: block; }

	.cl-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding-bottom: 8px;
	}
	.cl-nav__list a {
		padding-block: 12px;
		border-bottom: 0;
	}
	.cl-nav__list .current-menu-item > a { border-bottom: 0; color: var(--cl-red-on-ink); }

	.cl-nav__socials {
		display: flex;
		flex-wrap: wrap;
		gap: 9px;
		margin: 4px 0 8px;
		padding: 14px 0 0;
		border-top: 1px solid rgba(255, 255, 255, .12);
		list-style: none;
	}

	.cl-header__cta { margin-left: auto; order: 2; }

	.cl-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	.cl-footer__inner { grid-template-columns: 1fr; }

	.cl-footer__bar-inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.cl-footer__legal {
		flex-direction: column;
		gap: 6px;
		text-align: center;
	}
}

/* ==========================================================================
   Consent banner
   Rendered on every page and hidden until the script decides, so the markup
   is identical for everyone and safe to cache.
   ========================================================================== */

.cl-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--cl-ink);
	color: var(--cl-dark-body);
	border-top: 3px solid var(--cl-red);
	box-shadow: 0 -8px 30px rgba(20, 15, 10, .3);
}
.cl-consent[hidden] { display: none; }

.cl-consent__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding: 18px var(--cl-gutter);
}

.cl-consent__text { max-width: 60ch; }

.cl-consent__title {
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-eyebrow);
	letter-spacing: var(--cl-track-eyebrow);
	text-transform: uppercase;
	color: var(--cl-white);
}

.cl-consent__text p + p {
	margin-top: 6px;
	font-size: var(--cl-meta);
	line-height: 1.55;
}

.cl-consent__text a { color: var(--cl-red-on-ink); }

.cl-consent__actions {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

/* Quieter than the red button, so accepting is the obvious action without
   the refusal being hidden. Both are the same size and equally reachable. */
.cl-btn--ghost {
	padding: 11px 18px;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .3);
	color: var(--cl-white);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
}
.cl-btn--ghost:hover {
	color: var(--cl-white);
	border-color: var(--cl-white);
}

@media (max-width: 720px) {
	.cl-consent__inner { gap: 14px; }
	.cl-consent__actions { width: 100%; }
	.cl-consent__actions .cl-btn { flex: 1 1 auto; justify-content: center; }
}