/*
 * Theme styles. theme.json carries the design tokens; this file holds only what tokens
 * cannot express — the kicker rule, the stats strip, and the latest-topics list.
 */

/* ==========================================================================
   Albert Sans, self-hosted
   This used to be a <link> to fonts.googleapis.com, which is a render-blocking
   request to a THIRD ORIGIN: DNS, TLS and fetch all have to complete before the
   browser paints, and on Lighthouse's Slow 4G that was the largest single item
   in 1,570ms of render-blocking. The stylesheet itself was 293 bytes gzipped —
   the cost was never the payload, it was the round-trip.

   Declared here rather than in a file of its own, because app.css is already on
   the critical path: the browser learns about the font from a request it was
   making anyway, so self-hosting removes a request instead of moving one.

   VARIABLE font — one axis covering 400 to 900. The old link asked for seven
   separate weights plus an italic; this is a single file for all of them, and
   the site uses 400, 600, 700, 800 and 900 across theme.json and the
   stylesheets, so every one of them is inside the range.

   Two subsets, and the unicode-range on each is what makes that free: a page of
   English text downloads latin (32KB) and never touches latin-ext (23KB). The
   ext subset earns its place because the club already has members with accented
   names — one signed up from a Czech domain.

   No italic face is shipped. The only italic on the site is the blockquote
   style, where the browser's synthesised oblique is perfectly acceptable and a
   second file is not.

   Licence: SIL Open Font Licence 1.1, which explicitly permits redistribution.
   Files came from Google Fonts (albertsans v4) and live in ../fonts/.
   ========================================================================== */

@font-face {
	font-display: swap;
	font-family: "Albert Sans";
	font-style: normal;
	font-weight: 400 900;
	src: url("../fonts/albert-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-display: swap;
	font-family: "Albert Sans";
	font-style: normal;
	font-weight: 400 900;
	src: url("../fonts/albert-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Screen-reader-only, used by the skip link. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background: var(--wp--preset--color--surface);
	clip: auto;
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	height: auto;
	left: 1rem;
	padding: 0.75rem 1.25rem;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* The house kicker: small caps label with a short rule leading into it. */
.l200-kicker {
	align-items: center;
	display: flex;
	font-weight: 700;
	gap: 0.6rem;
	letter-spacing: 0.14em;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.l200-kicker::before {
	background: var(--wp--preset--color--accent);
	content: "";
	display: block;
	height: 2px;
	width: 28px;
}

/* --- Stats strip under the hero --- */

.l200-stats {
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
}

.l200-stat {
	display: grid;
	gap: 0.15rem;
}

.l200-stat__value {
	color: var(--wp--preset--color--contrast);
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.l200-stat__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Latest topics --- */

.l200-latest {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	margin-top: var(--wp--preset--spacing--30);
}

/* The dark outline is set HERE rather than in forum.css. This file loads after forum.css,
   so a `border` declared there at equal specificity was silently overwritten by the pale
   `line` colour that used to be on this rule — the card looked untouched and the reason was
   load order, not the selector. */
.l200-latest__item {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 14px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.055) inset;
	display: grid;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--20);
	text-decoration: none;
}

.l200-latest__item:hover {
	border-color: var(--wp--preset--color--accent);
}

.l200-latest__title {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	line-height: 1.3;
}

.l200-latest__meta {
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	gap: 0.6rem;
}

.l200-latest__board {
	color: var(--wp--preset--color--accent-bright);
	font-weight: 600;
}

.l200-empty {
	color: var(--wp--preset--color--muted);
}

/* Outline buttons: theme.json styles the filled variant, this is the quiet twin. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-bright);
}

/* ==========================================================================
   Monochrome refinement
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* The kicker rule was an amber tick; on white it reads better as a solid black bar. */
.l200-kicker {
	color: var(--wp--preset--color--muted);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
}

.l200-kicker::before {
	background: var(--wp--preset--color--contrast);
	width: 24px;
}

/* --- Stats --- */

.l200-stats {
	gap: var(--wp--preset--spacing--50);
}

.l200-stat__value {
	font-size: 2.4rem;
	letter-spacing: -0.03em;
}

.l200-stat__label {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
}

/* --- Latest topics --- */

.l200-latest__item {
	border-radius: 12px;
	box-shadow: none;
	transition: border-color .15s ease;
}

.l200-latest__item:hover {
	border-color: var(--wp--preset--color--contrast);
}

.l200-latest__board {
	color: var(--wp--preset--color--muted);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Buttons --- */

.wp-block-button__link {
	transition: opacity .15s ease;
}

.wp-block-button__link:hover {
	opacity: 0.85;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-raised);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	opacity: 1;
}

/* --- Header: sticky, so navigation is always a thumb away on a long thread --- */

.wp-site-blocks > header {
	backdrop-filter: saturate(180%) blur(8px);
	background: rgba(255, 255, 255, 0.85);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* A sticky header has a cost that is easy to miss: every jump to a #fragment lands the
   target UNDER it. Measured at 140px on desktop and 120px on a phone, so anything linked to
   by id arrived hidden behind the bar and the member saw the wrong thing with no clue why.

   This was already biting before anyone noticed. Posting a reply redirects to
   `#reply-<id>`, which is precisely the moment you want to see your own post land — and it
   was arriving off-screen behind the header every time.

   Applied to every element carrying an id rather than to a list of known targets:
   scroll-margin-top does nothing at all until something is scrolled into view by fragment
   or scrollIntoView(), so it is inert everywhere else and cannot be forgotten on the next
   anchor somebody adds. The extra dozen pixels over the measured height are breathing room,
   so the target reads as "at the top of the screen" rather than "wedged against the bar". */
:root {
	--l200-sticky-offset: 152px;
}

[id] {
	scroll-margin-top: var(--l200-sticky-offset);
}

@media (max-width: 781px) {
	:root {
		--l200-sticky-offset: 132px;
	}
}

/* --- Links: underlined in body copy, not in navigation or cards --- */

.wp-block-navigation a,
.l200-latest__item,
.l200-member,
.l200-board__title a,
.wp-block-button__link {
	text-decoration: none;
}

.wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Reading measure: long prose gets a comfortable line length --- */

/* Only reply bodies: .entry-content p is a DIRECT child of .is-layout-constrained,
   which WordPress gives `margin-inline: auto !important`. A max-width narrower than the
   820px container therefore CENTRES the block rather than narrowing it, which knocked
   body copy and buttons out of alignment. Reply bodies are nested, so they are safe. */
.l200-reply__body p {
	max-width: 68ch;
}

/* --- Focus visibility, site-wide --- */

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* --- Mobile --- */

@media (max-width: 600px) {
	.l200-stats {
		gap: var(--wp--preset--spacing--30);
	}

	.l200-stat__value {
		font-size: 1.9rem;
	}
}

/* --- Primary button ---------------------------------------------------------
   theme.json's elements.button.color.background does not emit a gradient token
   (gradients belong under color.gradient), which left the primary button with no
   background at all. Stated explicitly here so it can never silently vanish again.
   -------------------------------------------------------------------------- */

.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-element-button:not(.is-style-outline) {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

/* --- Fixes from the first real visual review ------------------------------- */


/* The same auto-margin trap as the hero, third occurrence. `max-width: none` makes this a
   full-width child of the constrained group, so the button starts ~130px to the LEFT of the
   heading above it rather than lining up with it. Pin it to the content size instead. */
.l200-forum-actions {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
}

/* The same button at the top of a board archive, where it is a call to action rather than
   the end of a list — so it needs air on both sides.

   PADDING, not margin, and that is not a preference. This element is a direct child of
   #l200-main, and the hero-gap rule further down this file zeroes `margin-block-start` and
   `margin-block-end` on every direct child of #l200-main with !important. Two attempts at
   margin here computed to exactly 0px and looked like the stylesheet had not deployed —
   the rule was present, matched the element, and lost. It is why every section on this site
   carries its own padding instead. Beating it would mean adding another !important to a
   file that already has sixty-odd; padding sidesteps it and reads as what it is.

   Defined here beside the base rule and NOT in forum.css: app.css loads after forum.css, so
   a modifier over there would fight this file at equal specificity and lose silently. */
.l200-forum-actions--board {
	padding-bottom: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
}

/* Cards. The l200-card block style was registered in functions.php but never given any
   CSS, and `surface` is now pure white — so the front-page cards were white on white
   with no border, i.e. invisible. */
.is-style-l200-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
}

/* The site title was inheriting an uppercase transform, which fought the decision to
   set every other heading in sentence case. */
.wp-block-site-title,
.wp-block-site-title a {
	text-transform: none;
}

/* Nav: Join is the primary call to action and should not look like every other link. */
.wp-block-navigation .wp-block-navigation-item:last-child a {
	background: var(--wp--preset--color--contrast);
	border-radius: 8px;
	color: var(--wp--preset--color--base);
	padding: 0.5rem 1rem;
}

.wp-block-navigation .wp-block-navigation-item:last-child a:hover {
	opacity: 0.85;
	text-decoration: none;
}

/* --- Club palette, taken from the logo ------------------------------------
   Navy #00294F is the primary UI colour, green #1B743E means "solved", red
   #D81E2C means "something is wrong". Colour carries meaning again, rather than
   being decoration — which is why the strict monochrome rule is relaxed here.
   -------------------------------------------------------------------------- */

.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-element-button:not(.is-style-outline) {
	background-color: var(--wp--preset--color--accent);
}

.wp-block-navigation .wp-block-navigation-item:last-child a {
	background: var(--wp--preset--color--accent);
}

.l200-kicker::before {
	background: var(--wp--preset--color--accent);
}

.l200-latest__item:hover,
.l200-board:hover,
.l200-member:hover {
	border-color: var(--wp--preset--color--accent);
}

.l200-stat__value {
	color: var(--wp--preset--color--accent);
}

/* Site logo sits in the header at a legible size without dominating it. */
.wp-block-site-logo img {
	border-radius: 6px;
	height: auto;
	width: 52px;
}

/* --- Form controls --------------------------------------------------------
   The inputs were overflowing their card: width:100% plus padding with no
   border-box sizing. Also neutralise Chrome's autofill styling, which painted
   fields pale blue and made the account pages look like a different site.
   -------------------------------------------------------------------------- */

.l200-field input,
.l200-field select,
.l200-field textarea,
.l200-form input,
.l200-form textarea {
	box-sizing: border-box;
	max-width: 100%;
}

.l200-field input:-webkit-autofill,
.l200-field input:-webkit-autofill:hover,
.l200-field input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--wp--preset--color--base) inset;
	-webkit-text-fill-color: var(--wp--preset--color--contrast);
	caret-color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   Bigger header, bigger hero, and a mobile menu that works
   ========================================================================== */

/* --- Header: more presence --- */

.wp-site-blocks > header {
	padding-block: 1rem;
}

.wp-block-site-logo img {
	width: 76px;
}

.wp-block-site-title a {
	font-size: 1.6rem;
}

.wp-block-navigation {
	font-size: 1.05rem;
	font-weight: 600;
}

.wp-block-navigation .wp-block-navigation-item:last-child a {
	padding: 0.65rem 1.4rem;
}

.l200-admin-nav a {
	padding: 0.6rem 1.1rem;
}

/* --- Hero --- */

.l200-hero {
	/* No flex here. WordPress puts `margin-inline: auto` on constrained-layout
	   children, and auto margins on a flex item consume the free space and centre it,
	   which overrides align-items: stretch. Padding gives the height instead. */
	padding-block: clamp(4rem, 10vw, 8rem);
}

/* Hero buttons, noticeably larger than the rest of the site's. */
.l200-hero .wp-block-button__link {
	font-size: 1.15rem;
	padding: 1.05rem 2.4rem;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {
	/* The hamburger was a small icon in a large bar — easy to miss and easy to
	   mis-tap. 48px is the minimum comfortable touch target. */
	.wp-block-navigation__responsive-container-open {
		min-height: 48px;
		min-width: 48px;
		padding: 0.5rem;
	}

	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-close svg {
		height: 28px;
		width: 28px;
	}

	/* The open overlay: solid club navy, full height, generous spacing. The default
	   is a translucent panel that leaves the page showing through behind the links. */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--accent) !important;
		color: #fff !important;
		padding: 1.25rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		gap: 0.25rem;
		padding-top: 2rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open a {
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		color: #fff !important;
		display: block;
		font-size: 1.35rem;
		padding: 1rem 0.25rem;
		width: 100%;
	}

	/* Join and Club admin lose their pill treatment inside the overlay — as full-width
	   rows they read as buttons already, and the pills looked broken at that size. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child a,
	.wp-block-navigation__responsive-container.is-menu-open .l200-admin-nav a {
		background: transparent !important;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 0;
		padding: 1rem 0.25rem;
	}

	.wp-block-navigation__responsive-container-close {
		color: #fff !important;
		min-height: 48px;
		min-width: 48px;
	}

	/* --- Header height ------------------------------------------------------
	   Measured at 120px on a 812px phone — 15% of the screen given up permanently, on
	   every page, to a logo and a menu button. It was 64px of padding wrapped around a
	   56px logo: the <header> carried 16px top and bottom from the template, and its
	   inner flex row carried another 16px on top of that.

	   The template padding is now spacing|10, and the inner row's is removed below. The
	   floor is the 48px menu button, not the logo, so the logo comes down to 42px where
	   it still reads as a crest rather than a favicon.
	   ----------------------------------------------------------------------- */

	/* There are TWO nested <header> elements: the template-part wrapper, and the group
	   inside it. Both were padding the same 48px menu button — the wrapper 16px top and
	   bottom from this stylesheet, the group another 16px from the template. Halving one
	   of them only got 120px down to 96px; the wrapper's padding has to go entirely.

	   The group keeps its 8px, so the row is not jammed against the navy edge. 48 + 16 = a
	   64px header, which is the size a mobile header is supposed to be. */
	.wp-site-blocks > header {
		padding-block: 0;
	}

	.wp-block-site-logo img {
		width: 42px;
	}

	.wp-block-site-title a {
		font-size: 1.12rem;
	}

	/* --- Hero height --------------------------------------------------------
	   The hero measured 697px on a 812px phone — 86% of the screen. With the header on
	   top of it that is 101%: a first-time visitor saw a photo and a headline and not one
	   single piece of forum activity without scrolling. On a site whose whole problem is
	   looking empty, the proof that it is not was below the fold.

	   These carry !important, and that is not laziness. The hero's padding and its
	   children's margins are INLINE styles written by patterns/hero.php, and an inline
	   style beats any selector. It is the same constraint that made the mobile spacing
	   scale a global override rather than a per-section one — but the scale is shared with
	   the whole site, and the hero needs to come down further than everything else does.
	   Every rule here is scoped to .l200-hero, so nothing outside it can be affected.

	   The h1 is deliberately left alone. It is the hook, it is one line of the saving, and
	   shrinking the headline to buy 20px would be trading the thing that works for the
	   thing that measures.
	   ----------------------------------------------------------------------- */

	.l200-hero {
		min-height: auto;
		padding-block: 1.75rem 1.25rem !important;
	}

	/* The gaps between hero blocks, which were 24px each across five of them — 120px of
	   the total, and the cheapest thing in here to give back. */
	.l200-hero > * + * {
		margin-top: 0.8rem !important;
	}

	.l200-hero .wp-block-buttons {
		margin-top: 1.1rem !important;
	}

	/* The intro paragraph was the single tallest element in the hero at 198px. Dropped a
	   step in size with a tighter measure — still comfortably readable, and it stops the
	   subheading competing with the headline for weight. */
	.l200-hero p.has-large-font-size {
		font-size: 1rem;
		line-height: 1.55;
	}

	.l200-hero .wp-block-button__link {
		font-size: 1.02rem;
		padding: 0.85rem 1.6rem;
	}

	.l200-hero .wp-block-buttons {
		gap: 0.6rem;
	}

	.l200-hero .wp-block-button {
		width: 100%;
	}

	.l200-hero .wp-block-button__link {
		display: block;
		text-align: center;
		width: 100%;
	}

	/* Wide grids collapse to one column rather than squeezing two in.
	   .l200-members is deliberately NOT in this list: its tracks are capped at 360px and
	   already fall to a single column on a phone by themselves. Forcing 1fr here stretched
	   a member card to the full 705px of a tablet, which left a 56px avatar adrift in a
	   very wide box. */
	.l200-boards,
	.l200-latest,
	.l200-gallery {
		grid-template-columns: 1fr;
	}

	.l200-admin-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.l200-search {
		flex-wrap: wrap;
	}

	.l200-search .l200-btn {
		width: 100%;
	}
}

.l200-banner-preview {
	border-radius: 10px;
	display: block;
	height: auto;
	margin-bottom: 1rem;
	max-width: 100%;
}

/* ==========================================================================
   Darker hero and footer
   Light body with a dark navy hero and footer — the page gets depth and a
   clear top and bottom, and the hero already looks right before any banner is
   uploaded rather than only after.
   ========================================================================== */

.l200-hero {
	background-color: var(--wp--preset--color--accent-deep);
	background-image: linear-gradient(135deg, #00294F 0%, #001629 100%);
}

.l200-hero h1,
.l200-hero p,
.l200-hero .l200-stat__value {
	color: #fff;
}

.l200-hero .l200-kicker,
.l200-hero .l200-stat__label {
	color: rgba(255, 255, 255, 0.72);
}

.l200-hero .l200-kicker::before {
	background: #fff;
}

.l200-hero .l200-stats {
	border-top-color: rgba(255, 255, 255, 0.22);
}

/* --- The main call to action ---------------------------------------------- */

.l200-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	color: var(--wp--preset--color--accent);
	font-weight: 800;
	letter-spacing: -0.01em;
	transition: transform .15s ease, box-shadow .15s ease;
}

/* White on navy is the strongest contrast available here, so the primary action
   reads first — an outline-on-dark button next to it recedes properly. */
.l200-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
	opacity: 1;
	transform: translateY(-2px);
}

.l200-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	font-weight: 700;
}

.l200-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
	transform: translateY(-2px);
}

/* --- Footer --------------------------------------------------------------- */

.wp-site-blocks > footer {
	background: var(--wp--preset--color--accent-deep) !important;
	border-top: 0 !important;
}

.wp-site-blocks > footer p {
	color: rgba(255, 255, 255, 0.72) !important;
}

.wp-site-blocks > footer a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Latest topics sit directly under the hero now, so the cards get more room —
   five across at full width left the titles cramped and the meta wrapping.

   min(340px, 100%), not a bare 340px. `minmax(340px, 1fr)` is a HARD floor: below a 364px
   viewport the track stayed 340px wide inside a 312px column and pushed the whole document
   sideways, which is a 360px Android — a very ordinary phone. Wrapping the floor in min()
   lets the track collapse to the container when the container is the smaller of the two,
   and changes nothing at any width where 340px actually fits. */
.l200-latest {
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

.l200-latest__item {
	align-content: start;
}

/* Keep the meta on one line where it fits. */
.l200-latest__meta {
	align-items: baseline;
}

/* ==========================================================================
   Mobile menu — full-width rows, left aligned
   The desktop nav is right-justified, and WordPress carries that justification
   into the open overlay: links hugged the right edge, each underline only as
   wide as its own text, and the last item picked up the desktop button padding
   as a stray gap. All of that has to be unset for the overlay specifically.
   ========================================================================== */

@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
		align-items: stretch !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		justify-content: flex-start !important;
		width: 100% !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: stretch !important;
		display: block !important;
		width: 100% !important;
	}

	/* One consistent row: full width, left aligned, its own divider. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open .l200-admin-nav a,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child a {
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
		border-radius: 0 !important;
		box-sizing: border-box;
		color: #fff !important;
		display: block !important;
		font-size: 1.3rem;
		font-weight: 600;
		margin: 0 !important;
		padding: 1.15rem 0.25rem !important;
		text-align: left !important;
		width: 100% !important;
	}

	/* Join is the primary action, so it keeps its weight without the pill. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child a {
		font-weight: 800;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
		background: rgba(255, 255, 255, 0.08) !important;
	}

	/* Close button sits top right with room around it. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		padding: 0.75rem;
		right: 0.5rem;
		top: 0.5rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 4.5rem 1.5rem 2rem !important;
	}
}

/* ==========================================================================
   Hero legibility over a photograph
   The intro paragraph inherited the muted grey used on light backgrounds and
   ran the full 1600px, crossing from the dark left of the image into the bright
   right — unreadable for its last third. It now stops before the light area and
   carries a shadow so it holds up over whatever photograph is behind it.
   ========================================================================== */

.l200-hero p,
.l200-hero p.has-muted-color,
.l200-hero p.has-text-color {
	color: rgba(255, 255, 255, 0.94) !important;
	/* Left, not auto: WordPress centres constrained children that carry a
	   narrower max-width, which would drag this into the middle of the hero. */
	margin-inline: 0 auto !important;
	max-width: 58ch;
	text-shadow: 0 1px 14px rgba(0, 18, 34, 0.75);
}

.l200-hero h1 {
	text-shadow: 0 2px 20px rgba(0, 18, 34, 0.6);
}

.l200-hero .l200-kicker {
	color: rgba(255, 255, 255, 0.85) !important;
	text-shadow: 0 1px 10px rgba(0, 18, 34, 0.7);
}

.l200-hero .l200-stat__label {
	color: rgba(255, 255, 255, 0.8) !important;
}

.l200-hero .l200-stat__value {
	text-shadow: 0 1px 12px rgba(0, 18, 34, 0.6);
}

/* --- Hero alignment correction ---------------------------------------------
   Setting margin-inline on the paragraph pulled it out of the root padding, so
   it sat 100px left of the H1. Keeping the box full width and pushing the text
   in with padding instead constrains the line length without touching the
   margins WordPress uses to align every block in the group.
   -------------------------------------------------------------------------- */

.l200-hero p,
.l200-hero p.has-muted-color,
.l200-hero p.has-text-color {
	margin-inline: auto !important;
	max-width: none;
	padding-right: min(52%, 720px);
}

/* ==========================================================================
   Club navy through the page
   White and grey alone left the middle of the site flat. Alternating tinted
   bands and navy detailing breaks it up without turning it into a dark theme.
   ========================================================================== */

/* Tinted band, used on alternating sections. */
.l200-hero + .wp-block-group,
.l200-hero ~ .wp-block-group:nth-of-type(even) {
	background-color: #EDF3F9;
}

/* Section headings pick up navy rather than near-black ink. */
.wp-block-group h2.wp-block-heading {
	color: var(--wp--preset--color--accent);
}

/* Cards get a navy top edge, so a row of them reads as a set. */
.is-style-l200-card {
	border-top: 3px solid var(--wp--preset--color--accent);
}

.is-style-l200-card h3 {
	color: var(--wp--preset--color--accent);
}

/* Board and topic cards: navy title, navy hover edge. */
.l200-board__title a,
.l200-latest__title,
.l200-truck__title,
.l200-member__name {
	color: var(--wp--preset--color--accent);
}

/* Board and topic cards are excluded here on purpose: they now carry a full dark outline
   from forum.css, and a 2px navy top edge on top of that read as a mistake rather than a
   detail. This file loads AFTER forum.css, so leaving them in silently won the cascade and
   undid it. Truck and member cards still use the accent edge. */
/* .l200-truck removed as well now: gallery cards carry the full ink outline from
   forum.css, and this file loads afterwards, so leaving it here quietly repainted the top
   edge a faint navy and made the card look unfinished on three sides out of four. */
.l200-member {
	border-top: 2px solid rgba(0, 41, 79, 0.18);
}

/* Forum and section dividers. */
.l200-admin-heading,
.l200-replies__title {
	border-bottom-color: rgba(0, 41, 79, 0.18);
	color: var(--wp--preset--color--accent);
}

/* Reply authors and the forum page title. */
.l200-reply__author,
.wp-block-post-title {
	color: var(--wp--preset--color--accent);
}

/* --- Hero alignment, corrected properly -------------------------------------
   The earlier rules set margin-inline and max-width on `.l200-hero p`, which also
   matched the kicker — both went full-bleed while the H1 stayed constrained to the
   1600px content width, so they sat ~130px left of it.
   Let WordPress's constrained layout do the aligning, and hold the intro text off
   the bright side of the photograph with padding alone.
   -------------------------------------------------------------------------- */

.l200-hero p,
.l200-hero p.has-muted-color,
.l200-hero p.has-text-color {
	margin-inline: auto !important;
	max-width: none;
	padding-right: 0;
}

/* Only the intro paragraph gets held back — not the kicker. */
.l200-hero p:not(.l200-kicker) {
	padding-right: min(48%, 680px);
}

/* --- Hero alignment: third time, and the actual cause ------------------------
   `max-width: none` was the bug. The H1 keeps WordPress's constrained width
   (the global content size) and is centred in the full-bleed hero, which is what
   produces its indent. Removing the max-width from the paragraphs made them span
   the whole hero, so they started ~130px to its left.
   Pin them to the same content width and they line up with everything else.
   -------------------------------------------------------------------------- */

.l200-hero p,
.l200-hero p.has-muted-color,
.l200-hero p.has-text-color {
	margin-inline: auto !important;
	max-width: var(--wp--style--global--content-size) !important;
	padding-right: 0;
}

.l200-hero p:not(.l200-kicker) {
	padding-right: min(48%, 680px);
}

/* The intro paragraph is content-box, so the padding used to hold it off the bright
   side of the photo was ADDED to its max-width — the box ended up 1857px wide, the
   auto margins had no space left to distribute, and it sat hard against the left
   edge while everything else stayed centred at the content width. */
.l200-hero p:not(.l200-kicker) {
	box-sizing: border-box;
}

/* Nav call to action: Join when logged out, Account when logged in. Targeted by
   class rather than :last-child, since which item ends the list now depends on
   whether somebody is signed in. */
.wp-block-navigation .l200-nav-join a,
.wp-block-navigation .l200-nav-account a {
	background: var(--wp--preset--color--accent);
	border-radius: 8px;
	color: var(--wp--preset--color--base) !important;
	padding: 0.65rem 1.4rem;
}

.wp-block-navigation .l200-nav-join a:hover,
.wp-block-navigation .l200-nav-account a:hover {
	opacity: 0.85;
	text-decoration: none;
}

/* Footer in the club navy taken from the logo (#00294F), rather than the darker
   near-black navy it was using — it now matches the buttons and the hero. */
.wp-site-blocks > footer {
	background: var(--wp--preset--color--accent) !important;
}

.wp-site-blocks > footer p {
	color: rgba(255, 255, 255, 0.8) !important;
}

.wp-site-blocks > footer a {
	color: #fff;
}

/* The footer template part renders as <footer> wrapping an inner group that carries
   its own `deep` background — so colouring the outer element alone left the light
   inner panel painted straight over it, with white text on near-white. Colour both. */
.wp-site-blocks > footer,
.wp-site-blocks > footer > .wp-block-group,
.wp-site-blocks > footer .has-deep-background-color {
	background-color: var(--wp--preset--color--accent) !important;
	border-top: 0 !important;
}

.wp-site-blocks > footer p,
.wp-site-blocks > footer .has-muted-color {
	color: rgba(255, 255, 255, 0.82) !important;
}

.wp-site-blocks > footer a {
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Close the gaps around the hero -----------------------------------------
   WordPress puts a block gap between every top-level child of .wp-site-blocks and
   between the sections inside main, which showed as white strips above and below
   the hero. Every section already carries its own padding, so the gaps are pure
   surplus here.
   -------------------------------------------------------------------------- */

.wp-site-blocks > *,
#l200-main > * {
	margin-block-end: 0 !important;
	margin-block-start: 0 !important;
}

#l200-main {
	margin-block: 0 !important;
}

/* ==========================================================================
   Page shell: the footer sits on the bottom edge
   Short pages (the member directory, the 404, an empty gallery) did not fill the
   viewport, so the white body background showed as a band BELOW the navy footer
   and read as a broken page. Three children exactly — header, main, footer — so a
   three-row grid pins the footer without the auto-margin hazards that flex has on
   constrained children. minmax(0, 1fr) rather than 1fr: a grid item's automatic
   minimum is min-content, which would let a wide table push the page sideways.
   ========================================================================== */

.wp-site-blocks {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
	min-height: 100svh;
}

/* ==========================================================================
   Touch targets
   Footer links were 15px tall and board titles 18px on a phone — under the 44px
   that a fingertip actually needs. Padding on the inline links, not line-height,
   so the text rhythm of the paragraph is unchanged.
   ========================================================================== */

@media (pointer: coarse) {
	.wp-site-blocks > footer a {
		display: inline-block;
		padding-block: 0.55rem;
	}

	.l200-btn,
	.wp-element-button {
		min-height: 44px;
	}
}

/* ==========================================================================
   Reduced motion
   Every hover transition and transform is decoration; honour the OS setting.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Mobile vertical rhythm
   The section paddings are written as inline styles by the patterns and templates
   (padding: var(--wp--preset--spacing--60)), so they cannot be overridden per
   section without !important on every one. Shrinking the top of the SCALE instead
   brings every section, the page template and the block gaps down together, and
   keeps the proportions between them intact. 5rem of padding above and below an
   empty gallery panel is most of a phone screen of nothing.

   :root:root rather than :root — WordPress prints the presets on :root in an inline
   style block and equal specificity would leave this depending on source order.
   ========================================================================== */

@media (max-width: 782px) {
	:root:root {
		--wp--preset--spacing--40: 1.75rem;
		--wp--preset--spacing--50: 2.25rem;
		--wp--preset--spacing--60: 2.75rem;
		--wp--preset--spacing--70: 3.25rem;
	}
}

/* ==========================================================================
   Navy header
   The club colour now carries the top of every page rather than a near-white bar.
   The logo is a JPG with a baked-in white background — it cannot be transparent —
   so it is set deliberately in a white plate and reads as a crest rather than as a
   white rectangle someone forgot to cut out.
   ========================================================================== */

/* The `color` here is doing real work. WordPress core ships
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit }` — the class is DOUBLED deliberately to buy specificity (0,3,0), which
   beats any sane selector a theme is likely to write. Fighting it is a losing game; the way
   to colour nav links is to colour what they inherit FROM. Hence the colour on the bar. */
.wp-site-blocks > header {
	backdrop-filter: none;
	background: var(--wp--preset--color--accent-deep);
	border-bottom: 0;
	color: #fff;
}

.wp-site-blocks > header .wp-block-site-logo img {
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 5px;
}

.wp-site-blocks > header .wp-block-site-title a {
	color: #fff;
}

.wp-site-blocks > header .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.86);
}

.wp-site-blocks > header .wp-block-navigation a:hover {
	color: #fff;
}

/* Join/Account invert to a white pill: on navy the primary action has to be the lightest
   thing in the bar. Targeted by class, not :last-child — which item ends the list depends
   on whether somebody is signed in and whether the admin link is injected.

   The !important is not laziness. The base rule for these pills further up this file also
   carries !important on colour (it had to, to beat core's doubled-class `inherit`), and an
   !important can only be overridden by another one. */
.wp-site-blocks > header .wp-block-navigation .l200-nav-join a,
.wp-site-blocks > header .wp-block-navigation .l200-nav-account a {
	background: #fff;
	color: var(--wp--preset--color--accent) !important;
}

.wp-site-blocks > header .wp-block-navigation .l200-nav-join a:hover,
.wp-site-blocks > header .wp-block-navigation .l200-nav-account a:hover {
	background: rgba(255, 255, 255, 0.88);
	opacity: 1;
}

/* Club admin stays quiet — an outline, not a fill, so it cannot compete with Account.
   forum.css sets this link to navy with !important, so beating it needs both !important
   and more specificity; this selector has two classes to that rule's one. */
.wp-site-blocks > header .l200-admin-nav a {
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 8px;
	color: #fff !important;
}

.wp-site-blocks > header .l200-admin-nav a:hover {
	border-color: #fff;
}

/* The hamburger is drawn as an SVG that inherits currentColor from the bar. */
.wp-site-blocks > header .wp-block-navigation__responsive-container-open svg {
	fill: #fff;
}

/* Focus rings are black elsewhere; on navy they would disappear. */
.wp-site-blocks > header a:focus-visible,
.wp-site-blocks > header button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Gallery single: the photo is the point of the page, so give it room and a defined edge
   like every other card on the site.

   NOT width:100%. Members upload straight off a phone, and a portrait shot forced to the
   full 1600px content width renders 2133px tall — taller than any screen, so the page opens
   on a blank-looking crop of the sky. Capping the HEIGHT and letting the width follow means
   landscape and portrait both fit on one screen. */
.single-l200_truck .wp-block-post-featured-image img {
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 14px;
	height: auto;
	/* min() of a viewport share and a hard pixel ceiling: 55vh alone still runs to ~600px
	   on a tall desktop screen, which pushed the comments below the fold and made the page
	   two scrolls to read. The px cap is what actually holds it. */
	max-height: min(55vh, 460px);
	max-width: 100%;
	width: auto;
}

.single-l200_truck .wp-block-post-featured-image {
	display: flex;
	justify-content: flex-start;
	margin-block: var(--wp--preset--spacing--30);
}

/* Archive rows (board listings, topic and gallery archives) match the cards everywhere
   else: grey ground, dark outline, and the same hover lift. The white was coming from a
   `backgroundColor: surface` on the block itself, which WordPress renders as a class
   carrying !important — so it was removed from the templates rather than fought here. */
.wp-block-query .is-style-l200-card {
	background: #EDF1F6;
	border: 1px solid var(--wp--preset--color--contrast);
	border-top: 1px solid var(--wp--preset--color--contrast);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wp-block-query .is-style-l200-card:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 8px 20px rgba(0, 41, 79, 0.18);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-query .is-style-l200-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Archive rows: spacing and pagination
   ========================================================================== */

/* The meta line had no explicit gap, so author/date/replies/views ran together at
   whatever the default block gap happened to be. Baseline alignment matters because the
   eye icon sits inside one of those items and would otherwise drag its row off-centre. */
.l200-row-meta {
	align-items: baseline;
	column-gap: 1.25rem;
	margin-top: 0.65rem;
	row-gap: 0.35rem;
}

.wp-block-query .is-style-l200-card .wp-block-post-title {
	line-height: 1.25;
	margin: 0;
}

/* --- Pagination -------------------------------------------------------------
   Core ships these blocks entirely unstyled, so previous/numbers/next rendered as
   three bare links running into each other.
   -------------------------------------------------------------------------- */

.wp-block-query-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: var(--wp--preset--spacing--40);
}

.wp-block-query-pagination .wp-block-query-pagination-numbers,
.wp-block-query-pagination > a,
.wp-block-query-pagination > span {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	align-items: center;
	background: #EDF1F6;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	justify-content: center;
	min-height: 40px;
	min-width: 40px;
	padding: 0.4rem 0.75rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent);
}

/* The page you are on is not a link, so it gets the solid treatment. */
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 700;
}

/* The gap between number groups is drawn by the flex gap, so the ellipsis needs no box. */
.wp-block-query-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
	min-width: 0;
	padding-inline: 0.25rem;
}

/* ==========================================================================
   Header gradient
   The flat #001B36 bar is now a diagonal run from the deep navy through club
   navy to a lighter blue on the right, with a soft highlight behind the logo so
   the crest sits in the brightest part of the bar rather than fighting it.

   The solid `backgroundColor: accent-deep` was REMOVED from header.html to make
   this possible: WordPress renders that attribute as .has-accent-deep-background-color,
   whose generated rule ends in !important and would paint flat over any gradient
   set here. One background, declared in one place.
   ========================================================================== */

.wp-site-blocks > header {
	background-color: var(--wp--preset--color--accent-deep);
	background-image:
		radial-gradient(90% 220% at 8% 0%, rgba(79, 163, 227, 0.22) 0%, rgba(79, 163, 227, 0) 55%),
		linear-gradient(115deg, #001B36 0%, #00294F 45%, #063560 78%, #0A4270 100%);
}

/* The bar is sticky, so it travels over white content. A hairline of light along the
   bottom edge separates it from the page without reinstating the border that was
   removed — it reads as the edge of a lit surface rather than a drawn line. */
.wp-site-blocks > header::after {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0.16) 70%, rgba(255, 255, 255, 0) 100%);
	bottom: 0;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
}

/* The ::after above needs a positioning context; the header is already position: sticky
   from the rule further up this file, which provides one. Nothing extra needed here.

   The mobile overlay sits on top of all of this and stays a flat navy on purpose — a
   gradient behind a full-screen menu just makes the links harder to read. */

/* ==========================================================================
   Facebook button and group count
   The mark is a CSS mask rather than an <img>, so it takes currentColor and
   therefore stays legible whether the button is on white, grey or navy — and it
   costs no extra request.
   ========================================================================== */

.l200-fb-btn .wp-block-button__link::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1.05em;
	margin-right: 0.55em;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z"/></svg>') center / contain no-repeat;
	vertical-align: -0.16em;
	width: 1.05em;
}

/* Buttons and the count on one line, wrapping to two on a phone. */
.l200-fb-row {
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.75rem;
}

.l200-fb-count {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.l200-fb-count strong {
	color: var(--wp--preset--color--accent);
}

/* "Apply" in the header: an outlined pill, so it reads as an invitation without competing
   with Account, which is the filled one. */
.wp-site-blocks > header .wp-block-navigation .l200-nav-apply a {
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 8px;
	padding: 0.65rem 1.1rem;
}

.wp-site-blocks > header .wp-block-navigation .l200-nav-apply a:hover {
	border-color: #fff;
}