/* Infogiant FM 97.1 — base theme styles.
   Brand: red / white / black. Colours come from theme.json presets, aliased here. */

:root {
	--red: var(--wp--preset--color--brand-red, #E10600);
	--red-dk: var(--wp--preset--color--brand-red-dk, #B00500);
	--ink: var(--wp--preset--color--ink, #0B0B0C);
	--surface-dark: var(--wp--preset--color--surface-dark, #141416);
	--white: var(--wp--preset--color--white, #FFFFFF);
	--off: var(--wp--preset--color--off-white, #F6F6F7);
	--line: var(--wp--preset--color--border, #E2E2E4);
	--muted: var(--wp--preset--color--muted, #6B6B70);

	--maxw: 1200px;
	--radius: 14px;
	--player-h: 76px;

	--font-display: var(--wp--preset--font-family--display, "Archivo", "Arial Narrow", Helvetica, Arial, sans-serif);
	--font-body: var(--wp--preset--font-family--body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}

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

body.infogiant-shell {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--white);
	line-height: 1.6;
	/* Space so the fixed player never covers content. */
	padding-bottom: var(--player-h);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 .5em; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dk); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* Accessibility -------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--ink); color: var(--white); padding: .75rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:where(a, button, input, [tabindex]):focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Frequency badge (recurring brand motif) ------------------------------ */
.freq-badge {
	display: inline-flex; align-items: baseline; gap: 2px;
	font-family: var(--font-display); font-weight: 800;
	background: var(--red); color: var(--white);
	padding: .15em .5em; border-radius: 6px; letter-spacing: -0.02em;
}
.freq-badge small { font-size: .6em; font-weight: 700; opacity: .9; }
.freq-badge--sm { font-size: .8rem; padding: .1em .4em; }

.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--red); color: var(--white);
	font-weight: 700; padding: .8rem 1.4rem; border: 0; border-radius: 999px;
	cursor: pointer; font-size: 1rem; line-height: 1;
}
.btn:hover { background: var(--red-dk); color: var(--white); text-decoration: none; }
.btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Site header ---------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--ink); color: var(--white);
	border-bottom: 3px solid var(--red);
}
.site-header__inner {
	max-width: var(--maxw); margin-inline: auto;
	display: flex; align-items: center; gap: 1rem;
	padding: .7rem clamp(1rem, 4vw, 2rem);
}
.site-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--white); }
.site-brand:hover { text-decoration: none; }
.site-brand__mark { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; }
.site-brand img { max-height: 40px; width: auto; }

.onair-pill {
	display: inline-flex; align-items: center; gap: .45rem;
	background: rgba(225,6,0,.14); color: var(--white);
	border: 1px solid var(--red); border-radius: 999px;
	padding: .3rem .75rem; font-size: .85rem;
}
.onair-pill:hover { text-decoration: none; background: rgba(225,6,0,.25); }
.onair-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.6s infinite; }
.onair-pill__label { text-transform: uppercase; font-weight: 800; letter-spacing: .06em; font-size: .72rem; }
.onair-pill__show { color: rgba(255,255,255,.85); }

.site-nav { margin-inline-start: auto; }
.site-nav__menu { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav__menu a { color: var(--white); font-weight: 600; font-size: .95rem; }
.site-nav__menu a:hover { color: var(--red); text-decoration: none; }
.site-nav__toggle { display: none; background: none; border: 0; color: var(--white); cursor: pointer; }
.site-nav__bars, .site-nav__bars::before, .site-nav__bars::after {
	display: block; width: 24px; height: 2px; background: var(--white); position: relative;
}
.site-nav__bars::before, .site-nav__bars::after { content: ""; position: absolute; left: 0; }
.site-nav__bars::before { top: -7px; } .site-nav__bars::after { top: 7px; }

@media (max-width: 860px) {
	.site-nav__toggle { display: inline-flex; }
	.site-nav__menu {
		position: absolute; inset-inline: 0; top: 100%;
		flex-direction: column; gap: 0; background: var(--ink);
		padding: .5rem 1.5rem 1.5rem; display: none;
	}
	.site-nav[data-open] .site-nav__menu { display: flex; }
	.site-nav__menu a { display: block; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
	.onair-pill__show { display: none; }
}

/* Page heads & grids --------------------------------------------------- */
.page-head { padding-block: 2.5rem 1.5rem; }
.page-head__title { font-size: clamp(2rem, 5vw, 3rem); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }

.post-card, .show-card, .presenter-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.post-card__media img, .show-card__media img, .presenter-card__media img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.show-card__media img, .presenter-card__media img { aspect-ratio: 1/1; }
.post-card__body, .show-card__body, .presenter-card__body { padding: 1rem; }
.post-card__title, .show-card__title, .presenter-card__name { font-size: 1.05rem; margin: 0 0 .3rem; }
.post-card__meta, .show-card__host, .presenter-card__role, .show-card__subtitle { color: var(--muted); font-size: .85rem; margin: 0; }
.show-card__placeholder, .presenter-card__placeholder { display: block; aspect-ratio: 1/1; background: linear-gradient(135deg, var(--ink), var(--red)); }

/* Single --------------------------------------------------------------- */
.single__head { padding-block: 2.5rem 1rem; }
.single__title { font-size: clamp(2rem, 5vw, 3.25rem); }
.single__meta { color: var(--muted); }
.single__hero { margin: 1.5rem 0; }
.single__hero img { width: 100%; border-radius: var(--radius); }
.single__content { max-width: 760px; }
.single__content > * { margin-block: 1rem; }

/* 404 ------------------------------------------------------------------ */
.error-404 { text-align: center; padding-block: 4rem; }
.error-404__code { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 18vw, 9rem); color: var(--red); line-height: .9; margin: 0; }
.error-404__title { font-size: 2rem; }
.error-404__text { color: var(--muted); max-width: 40ch; margin-inline: auto; }

/* Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--white); margin-top: 3rem; }
.site-footer__inner { max-width: var(--maxw); margin-inline: auto; padding: 2.5rem clamp(1rem,4vw,2rem); display: grid; gap: 1rem; }
.site-footer__brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; margin: 0; }
.site-footer__menu { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-footer__menu a { color: rgba(255,255,255,.8); }
.site-footer__copy { color: rgba(255,255,255,.5); font-size: .85rem; margin: 0; }

.empty { color: var(--muted); padding: 2rem 0; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Programme & presenter singles (Phase 2) */
.programme-single__head, .presenter-single__head { background: var(--ink); color: var(--white); padding-block: 2.5rem; border-bottom: 3px solid var(--red); }
.programme-single__head-inner, .presenter-single__head-inner { display: flex; gap: 1.5rem; align-items: center; }
.programme-single__art, .presenter-single__photo { width: 160px; height: 160px; object-fit: cover; border-radius: 14px; flex: 0 0 auto; }
.programme-single__title, .presenter-single__name { font-size: clamp(1.8rem, 5vw, 3rem); margin: 0; }
.programme-single__subtitle { color: rgba(255,255,255,.75); margin: .3rem 0 0; font-size: 1.1rem; }
.programme-single__hosts, .presenter-single__role { color: rgba(255,255,255,.85); margin: .5rem 0 0; }
.programme-single__hosts a { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.programme-single__body, .presenter-single__body { padding-block: 2rem; max-width: 760px; }
.presenter-single__shows-h { margin-top: 2rem; }
.presenter-single__shows { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.presenter-single__shows a { display: inline-block; background: var(--off); border: 1px solid var(--line); padding: .5rem 1rem; border-radius: 999px; font-weight: 600; }
@media (max-width: 560px) { .programme-single__head-inner, .presenter-single__head-inner { flex-direction: column; text-align: center; } }

/* Footer social */
.site-footer__social { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.site-footer__social a { color: rgba(255,255,255,.8); font-weight: 600; }