/* ---------------------------------------------------
   Good Loser — brand tokens
   Bloody   #B02724  (red)
   Peach    #E8A69E  (light peach — background/accent only, fails text contrast)
   Sailor   #6BB7E5  (sky blue)
   Eyeball  #214181  (navy)
--------------------------------------------------- */
:root {
	--gl-red: #b02724;
	--gl-peach: #e8a69e;
	--gl-sky: #6bb7e5;
	--gl-navy: #214181;
	--gl-ink: #1a1a1a;
	--gl-paper: #fffdf9;

	/* One corner radius for every link. It's about half a one-line button's
	   height, so single lines still read as pills while taller cards match. */
	--gl-radius: 1.75rem;

	/* Pico overrides so the framework's defaults match the brand instead of fighting it */
	--pico-font-family: 'IBM Plex Sans', system-ui, sans-serif;
	--pico-background-color: var(--gl-paper);
	--pico-color: var(--gl-ink);
	--pico-primary: var(--gl-navy);
	--pico-primary-hover: var(--gl-red);
	--pico-primary-underline: none;
	--pico-typography-spacing-vertical: 0.75rem;
}

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	padding: 2rem 1rem 3rem;
	background: radial-gradient(
			circle at 18% 8%,
			rgba(232, 166, 158, 0.35),
			transparent 45%
		),
		radial-gradient(
			circle at 85% 92%,
			rgba(107, 183, 229, 0.25),
			transparent 45%
		),
		var(--gl-paper);
}

.wrap {
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
}

/* Profile / hero */
.profile {
	text-align: center;
	margin-bottom: 2rem;
}

.logo {
	display: block;
	margin: 0 auto 1rem;
	width: clamp(96px, 28vw, 140px);
	height: auto;
}

.tagline {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--gl-navy);
	max-width: 30ch;
	margin: 0 auto;
}

/* Link buttons */
.links {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin-bottom: 2.25rem;
}

.link-btn {
	display: block;
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: 0.01em;
	color: var(--gl-navy);
	background: var(--gl-paper);
	border: 2.5px solid var(--gl-navy);
	border-radius: var(--gl-radius);
	padding: 0.85rem 1.25rem;
	text-decoration: none;
	margin-bottom: 0 !important;
	transition: transform 0.12s ease, background-color 0.12s ease,
		color 0.12s ease;
}

.link-btn:hover,
.link-btn:focus-visible {
	background: var(--gl-navy);
	color: var(--gl-paper);
	transform: translateY(-1px);
}

.link-btn:active {
	transform: translateY(0);
}

.link-btn:focus-visible {
	outline: 3px solid var(--gl-sky);
	outline-offset: 2px;
}

.link-btn--primary {
	background: var(--gl-navy);
	color: var(--gl-paper);
}

.link-btn--primary:hover,
.link-btn--primary:focus-visible {
	background: var(--gl-red);
	border-color: var(--gl-red);
	color: var(--gl-paper);
}

.link-btn--accent {
	border-color: var(--gl-red);
	color: var(--gl-red);
}

.link-btn--accent:hover,
.link-btn--accent:focus-visible {
	background: var(--gl-red);
	color: var(--gl-paper);
}

/* Expandable dropdown groups */
.link-group {
	border: none;
	padding: 0;
	margin: 0;
}

.link-group summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	/* Pico colors <summary> through these variables (with high-specificity
	   selectors), so set them rather than fighting with `color` */
	--pico-accordion-close-summary-color: var(--gl-navy);
	--pico-accordion-open-summary-color: var(--gl-navy);
	--pico-accordion-active-summary-color: var(--gl-navy);
	/* Reserve room on both sides so the label stays centered clear of the badge */
	padding-inline: 3.25rem;
}

.link-group summary::-webkit-details-marker {
	display: none;
}

.link-group summary::marker {
	content: '';
	display: none;
}

/* Pico draws its own accordion icon; ours is the .chevron badge */
.link-group summary::after {
	display: none;
}

/* Round badge pinned inside the right edge of the pill */
.chevron {
	position: absolute;
	top: 50%;
	right: 0.4rem;
	width: 2.1rem;
	height: 2.1rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--gl-navy);
	transition: background-color 0.12s ease;
}

.chevron::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2.5px solid var(--gl-paper);
	border-bottom: 2.5px solid var(--gl-paper);
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform 0.2s ease, border-color 0.12s ease;
}

.link-group[open]:not(.is-closing) .chevron::before {
	transform: translate(-50%, -30%) rotate(-135deg);
}

.link-group summary:hover,
.link-group summary:focus-visible {
	--pico-accordion-close-summary-color: var(--gl-paper);
	--pico-accordion-open-summary-color: var(--gl-paper);
	--pico-accordion-active-summary-color: var(--gl-paper);
}

.link-group summary:hover .chevron,
.link-group summary:focus-visible .chevron {
	background: var(--gl-paper);
}

.link-group summary:hover .chevron::before,
.link-group summary:focus-visible .chevron::before {
	border-color: var(--gl-navy);
}

/* Open/close animation lives in js/dropdowns.js */
.sub-links-inner {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding-top: 0.9rem;
}

.sub-link {
	display: block;
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	color: var(--gl-navy);
	background: color-mix(in srgb, var(--gl-sky) 18%, var(--gl-paper));
	border: 2px solid var(--gl-sky);
	border-radius: var(--gl-radius);
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	transition: background-color 0.12s ease, border-color 0.12s ease;
	margin-bottom: 0 !important;
}

.sub-link:hover,
.sub-link:focus-visible {
	background: var(--gl-sky);
	border-color: var(--gl-sky);
}

.sub-link:focus-visible {
	outline: 3px solid var(--gl-peach);
	outline-offset: 2px;
}

/* Red (accent) variant of a dropdown, matching .link-btn--accent */
.link-group summary.link-btn--accent:not(:hover):not(:focus-visible) {
	--pico-accordion-close-summary-color: var(--gl-red);
	--pico-accordion-open-summary-color: var(--gl-red);
	--pico-accordion-active-summary-color: var(--gl-red);
}

.link-btn--accent .chevron {
	background: var(--gl-red);
}

.link-group summary.link-btn--accent:hover .chevron::before,
.link-group summary.link-btn--accent:focus-visible .chevron::before {
	border-color: var(--gl-red);
}

/* Respect reduced motion for the disclosure too */
@media (prefers-reduced-motion: reduce) {
	.chevron,
	.chevron::before {
		transition: none;
	}
}

/* Labelled cluster of links (e.g. "Latest Stories") */
.link-set {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.set-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.35rem 0 -0.35rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--gl-navy) 55%, transparent);
}

/* Documentary link: video card with the full-width still above the title.
   Shares --gl-radius with the pills so every link's corners match. */
.link-btn--doc {
	--doc-inset: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: var(--doc-inset) var(--doc-inset) 0.85rem;
	line-height: 1.3;
}

.doc-media {
	position: relative;
	display: block;
}

.doc-thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	/* Concentric with the card: its radius minus the inset and border */
	border-radius: calc(var(--gl-radius) - var(--doc-inset) - 2.5px);
}

/* Play badge so the cards read as videos */
.doc-media::after {
	content: '';
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--gl-navy)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fffdf9'/%3E%3C/svg%3E")
		center / 60% no-repeat;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: background-color 0.12s ease;
}

.link-btn--doc:hover .doc-media::after,
.link-btn--doc:focus-visible .doc-media::after {
	background-color: var(--gl-red);
}

.doc-title {
	padding-inline: 0.75rem;
}

/* Closing hairline so it's clear where the set ends */
.link-set::after {
	content: '';
	height: 1px;
	margin-top: 0.35rem;
	background: color-mix(in srgb, var(--gl-navy) 20%, transparent);
}

.set-label::before,
.set-label::after {
	content: '';
	flex: 1;
	height: 1px;
	background: color-mix(in srgb, var(--gl-navy) 20%, transparent);
}

/* Language toggle */
.lang-switch {
	display: flex;
	justify-content: flex-end;
	margin: -1rem 0 0.5rem;
}

.lang-switch a {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--gl-navy);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, var(--gl-navy) 35%, transparent);
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
	color: var(--gl-red);
	text-decoration-color: currentColor;
}

/* Social row */
.socials {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--gl-navy);
	color: var(--gl-navy);
	transition: background-color 0.12s ease, color 0.12s ease,
		transform 0.12s ease;
}

.social-icon svg {
	width: 20px;
	height: 20px;
}

.social-icon:hover,
.social-icon:focus-visible {
	background: var(--gl-sky);
	border-color: var(--gl-sky);
	color: var(--gl-navy);
	transform: translateY(-1px);
}

.social-icon:focus-visible {
	outline: 3px solid var(--gl-peach);
	outline-offset: 2px;
}

/* Footer */
.site-footer {
	text-align: center;
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--gl-navy) 55%, transparent);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.link-btn,
	.social-icon {
		transition: none;
	}
}

/* Slightly wider breathing room on larger screens; content still caps at 440px */
@media (min-width: 640px) {
	body {
		padding-top: 4rem;
	}
}