/*
Theme Name:   Lepton Highlanders
Theme URI:    https://www.leptonhighlanders.co.uk
Description:  Child theme for Lepton Highlanders Sports & Social Club — football, cricket and social club, Wakefield Road, Lepton. Parent theme: Kadence. Implements the design canvas in documents/mockups/ and the brand values from content pack §2.3.
Author:       Leading Talent
Template:     kadence
Version:      1.3.0
Requires PHP: 8.1
Text Domain:  lepton-highlanders
*/

/* =========================================================================
   DESIGN SYSTEM — extracted from documents/mockups/ (Claude Design canvas
   "Lepton Highlanders Website", four artboards, exported 2026-09-09).
   See documents/mockups/README.md for provenance and the two known defects
   in the mockup source.

   SPECIFICITY NOTE, and the reason nearly every rule below starts with
   `body.lh-design`:
   Kadence prints its own dynamic CSS *inline in <head>*, which lands after
   this stylesheet's <link>. Bare `h1 { … }` or `body { … }` rules here
   therefore lose to Kadence's identical-specificity rules on source order,
   silently — the page looks almost right, with the wrong typeface. The
   `lh-design` body class (added in functions.php) raises specificity by one
   class, so these rules win regardless of order without a single
   `!important`. Do not "tidy" the prefix away.
   ====================================================================== */

:root {
	/* --- Brand, content pack §2.3. Sampled from screen images of the badge;
	       check against the master vector artwork before launch, and change
	       them in dev-site/content/seed-content.php too (it pushes the same
	       values into Kadence's own global palette). --- */
	--lh-blue:      #1E4C9A; /* header, hero, headings, links, table header */
	--lh-navy:      #0F2A5C; /* footer, dark panels, body text */
	--lh-red:       #D6202E; /* CTAs, kickers, active nav underline */
	--lh-off-white: #F5F7FA; /* page background */
	--lh-pale:      #DCE4F2; /* tints, photo placeholders */
	--lh-pale-2:    #BFD0EE; /* small text on blue */
	--lh-gold:      #C9A227; /* 60th-anniversary content only, this season */

	/* --- Supporting values, read off the artboards --- */
	--lh-white:      #FFFFFF;
	--lh-hero-sub:   #DCE4F2; /* hero standfirst on blue */
	--lh-on-navy:    #B8C4DA; /* body text on the navy footer/panels */
	--lh-prose:      #3A4560; /* card and section body copy */
	--lh-border:     #D8DDE8; /* hairlines, card borders, event row rules */
	--lh-border-2:   #C3C9D6; /* form input borders */
	--lh-stripe:     #F0F3F8; /* table zebra */
	--lh-placeholder:#E3E9F4; /* image placeholder, info pill */
	--lh-muted:      #7E8AA3; /* captions, "sample data" notes */
	--lh-hill-1:     #173D80; /* hero hill, front */
	--lh-hill-2:     #10306A; /* hero hill, back */

	/* --- Calendar category colours (WhatsOn artboard) --- */
	--lh-cat-football:  #1E4C9A;
	--lh-cat-cricket:   #3B6E8F;
	--lh-cat-social:    #D6202E;
	--lh-cat-fund:      #B5533B;
	--lh-cat-business:  #7E8AA3;
	--lh-cat-booked:    #5A5A5A;

	--lh-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	--lh-body:    'Public Sans', 'Segoe UI', Arial, sans-serif;

	/* The mockup has no rounded corners anywhere. One value so it is a
	   deliberate decision rather than an omission repeated 40 times. */
	--lh-radius: 0;

	/* 44px is the mockup's button/input height and also the touch-target
	   floor, which is why it is a token and not a magic number. */
	--lh-tap: 44px;
}

/* =========================================================================
   1. Typography
   ====================================================================== */

body.lh-design {
	font-family: var(--lh-body);
	color: var(--lh-navy);
	background: var(--lh-off-white);
}

body.lh-design h1,
body.lh-design h2,
body.lh-design h3,
body.lh-design h4,
body.lh-design .lh-display,
body.lh-design .entry-title,
body.lh-design .site-title {
	font-family: var(--lh-display);
	font-weight: 800;
	letter-spacing: -0.005em;
	line-height: 1.02;
}

/* Display sizes. Clamped rather than fixed: the artboards are a single
   1440px frame and say nothing about phones, where the mockup's 96px hero
   would be about eleven characters per line. */
body.lh-design h1,
body.lh-design .entry-title {
	font-size: clamp(2.5rem, 6.4vw, 6rem);   /* → 96px at 1440px */
	line-height: 0.95;
}

body.lh-design h2 {
	font-size: clamp(1.85rem, 2.8vw, 2.5rem); /* → 40px */
	line-height: 1;
}

body.lh-design h3 {
	font-size: clamp(1.4rem, 2vw, 1.875rem);  /* → 30px */
	color: var(--lh-blue);
}

body.lh-design h4 {
	font-size: 1.25rem;
	color: var(--lh-blue);
}

body.lh-design p,
body.lh-design li {
	line-height: 1.55;
}

body.lh-design a {
	color: var(--lh-blue);
	text-underline-offset: 2px;
}

body.lh-design a:hover,
body.lh-design a:focus {
	color: var(--lh-red);
}

/* Standfirst — the one-line summary under a page title. */
body.lh-design .lh-lead {
	font-size: clamp(1.05rem, 1.4vw, 1.375rem);
	line-height: 1.45;
	color: var(--lh-prose);
	max-width: 42em;
}

/* Kicker: 12px, uppercase, 0.14em tracking, badge red. Appears above almost
   every h2 in the mockup and is the single strongest bit of the identity. */
body.lh-design .lh-kicker {
	display: block;
	font-family: var(--lh-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lh-red);
	margin-bottom: 0.35rem;
}

/* =========================================================================
   2. Header — Kadence's header builder, restyled.

   The top row carries the utility menu (News, Contact, Members login) and the
   main row the logo and primary nav, which is how the artboards are built.
   Structure is set in seed-content.php via `header_desktop_items`; this is
   only the paint.
   ====================================================================== */

body.lh-design .site-header-wrap,
body.lh-design .site-top-header-wrap,
body.lh-design .site-main-header-wrap {
	background: var(--lh-blue);
}

body.lh-design .site-top-header-wrap {
	border-bottom: 1px solid rgba(245, 247, 250, 0.15);
	font-size: 0.8125rem;
}

body.lh-design .site-header-wrap a,
body.lh-design .site-header-wrap .site-title {
	color: var(--lh-off-white);
}

body.lh-design .site-header-wrap a:hover,
body.lh-design .site-header-wrap a:focus {
	color: var(--lh-white);
}

/* Club name lock-up. The tagline sits under it in pale blue, tracked out. */
body.lh-design .site-title {
	font-size: 1.625rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}

body.lh-design .site-description {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lh-pale-2);
}

/* Primary nav: white, 600, with a red rule under the current page. The
   mockup shows the underline only on the active item. */
body.lh-design .header-navigation .header-menu-container > ul > li > a {
	font-family: var(--lh-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--lh-off-white);
	border-bottom: 2px solid transparent;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

body.lh-design .header-navigation .header-menu-container > ul > li.current-menu-item > a,
body.lh-design .header-navigation .header-menu-container > ul > li.current-page-ancestor > a,
body.lh-design .header-navigation .header-menu-container > ul > li > a:hover {
	border-bottom-color: var(--lh-red);
	color: var(--lh-white);
}

/* The utility row's "Members login" is underlined in the mockup — it is the
   one link there people hunt for. */
body.lh-design .secondary-navigation .header-menu-container > ul > li:last-child > a {
	text-decoration: underline;
	font-weight: 600;
}

/* --- Dropdowns ---------------------------------------------------------
   A white panel with navy text, red top edge, and a navy fill on hover.

   THE SELECTORS HERE MUST STAY AS LONG AS THEY ARE. Kadence emits
     .header-navigation .header-menu-container ul ul li.menu-item > a
       { color: var(--global-palette8); }
   which is (0,3,4). A shorter rule of ours — `.header-navigation ul ul li a`
   under the body class, (0,2,5) — loses to it, and the failure is invisible
   until you actually open a submenu.

   And it failed *badly*, not subtly: palette8 does double duty in Kadence as
   both the light page-background slot and the dropdown link colour. We set
   that slot to the off-white page background (#F5F7FA) from the content
   pack, so submenu labels rendered near-white on our white panel — legible
   only on the one row the cursor happened to be over. Match Kadence's own
   selector shape, prefixed with the body class, so ours is (0,4,5).

   Kadence's separator is `rgba(255,255,255,0.1)` — designed for its default
   dark dropdown and invisible on a white one, so it is restated too. */
body.lh-design .header-navigation .header-menu-container ul ul.sub-menu,
body.lh-design .header-navigation .header-menu-container ul ul.submenu {
	background: var(--lh-white);
	border-top: 3px solid var(--lh-red);
	box-shadow: 0 2px 13px rgba(15, 42, 92, 0.18);
}

body.lh-design .header-navigation .header-menu-container ul ul li.menu-item > a {
	color: var(--lh-navy);
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--lh-border);
}

body.lh-design .header-navigation .header-menu-container ul ul li.menu-item:last-child > a {
	border-bottom: 0;
}

body.lh-design .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
body.lh-design .header-navigation .header-menu-container ul ul li.menu-item > a:focus,
body.lh-design .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	color: var(--lh-white);
	background: var(--lh-navy);
}

/* Mobile toggle and drawer, so the blue carries through. */
body.lh-design .mobile-toggle-open-container .menu-toggle-open,
body.lh-design .mobile-navigation ul li a {
	color: var(--lh-off-white);
}

body.lh-design #mobile-drawer .drawer-inner {
	background: var(--lh-blue);
}

/* =========================================================================
   3. Hero — full-bleed blue with the Pennine hill silhouette and the Emley
   Moor mast.

   The mockup draws these as an inline <svg>. Here they are a CSS background
   on ::after, so the hero stays ordinary editable blocks: the committee can
   rewrite the headline without stepping around decoration in the markup.
   The mast is a separate ::before so it keeps its position independent of
   the hill's non-uniform scaling.
   ====================================================================== */

body.lh-design .lh-hero {
	position: relative;
	overflow: hidden;
	background: var(--lh-blue);
	color: var(--lh-off-white);
	padding: clamp(3rem, 6vw, 6rem) 0 clamp(5rem, 8.75vw, 8.75rem);
	margin-bottom: 0;
}

body.lh-design .lh-hero > * {
	position: relative;
	z-index: 1;
}

/* Two overlapping ridges, straight from the artboard's path data. */
body.lh-design .lh-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 220px;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 160 C 200 90, 380 130, 560 110 S 900 40, 1100 100 S 1320 150, 1440 120 L1440 220 L0 220 Z' fill='%23173D80'/%3E%3Cpath d='M0 190 C 240 150, 420 180, 640 165 S 980 120, 1200 160 S 1380 190, 1440 175 L1440 220 L0 220 Z' fill='%2310306A'/%3E%3C/svg%3E");
}

/* The mast: a thin pale stem with a red light, at 82% across. Hidden on
   narrow screens, where it would collide with the headline. */
body.lh-design .lh-hero::before {
	content: "";
	position: absolute;
	right: 18%;
	bottom: 80px;
	width: 4px;
	height: 120px;
	z-index: 0;
	background: linear-gradient(
		to bottom,
		var(--lh-red) 0 6px,
		rgba(245, 247, 250, 0.6) 6px 100%
	);
	pointer-events: none;
}

@media (max-width: 900px) {
	body.lh-design .lh-hero::before {
		display: none;
	}
}

body.lh-design .lh-hero h1,
body.lh-design .lh-hero h2 {
	color: var(--lh-off-white);
	max-width: 900px;
}

body.lh-design .lh-hero .lh-lead,
body.lh-design .lh-hero p {
	color: var(--lh-hero-sub);
	max-width: 640px;
}

body.lh-design .lh-hero .lh-kicker {
	color: var(--lh-pale-2);
	letter-spacing: 0.16em;
}

/* =========================================================================
   4. Buttons

   Primary is solid badge red; secondary is a 2px outline. On the blue hero
   the outline is white, on light backgrounds it is blue — hence the two
   context rules rather than a second block style to remember to pick.
   ====================================================================== */

body.lh-design .wp-block-button__link,
body.lh-design .kb-button,
body.lh-design button[type="submit"],
body.lh-design input[type="submit"],
body.lh-design .lh-btn,
body.lh-design .lt-btn {
	font-family: var(--lh-body);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	padding: 0.875rem 1.375rem;
	min-height: var(--lh-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--lh-radius);
	background: var(--lh-red);
	color: var(--lh-white);
	border: 2px solid var(--lh-red);
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.lh-design .wp-block-button__link:hover,
body.lh-design .kb-button:hover,
body.lh-design button[type="submit"]:hover,
body.lh-design input[type="submit"]:hover,
body.lh-design .lh-btn:hover,
body.lh-design .lt-btn:hover {
	background: #B4141F;
	border-color: #B4141F;
	color: var(--lh-white);
}

/* Outline variant — core's "Outline" block style, or .lh-btn--ghost. */
body.lh-design .wp-block-button.is-style-outline > .wp-block-button__link,
body.lh-design .lh-btn--ghost,
body.lh-design .lt-btn--ghost {
	background: transparent;
	color: var(--lh-blue);
	border-color: var(--lh-blue);
}

body.lh-design .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body.lh-design .lh-btn--ghost:hover,
body.lh-design .lt-btn--ghost:hover {
	background: var(--lh-blue);
	color: var(--lh-white);
}

/* …and the same outline sitting on blue or navy, where blue-on-blue would
   vanish. Scoped to the panel rather than given its own class, so an editor
   moving a button into the hero cannot get it wrong. */
body.lh-design .lh-hero .wp-block-button.is-style-outline > .wp-block-button__link,
body.lh-design .lh-panel-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--lh-off-white);
	border-color: var(--lh-off-white);
}

body.lh-design .lh-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body.lh-design .lh-panel-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--lh-off-white);
	color: var(--lh-blue);
}

/* =========================================================================
   5. Section heading — kicker + h2 on the left, action link on the right,
   baseline-aligned, with the rule of the content below.
   ====================================================================== */

body.lh-design .lh-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 1.5rem;
}

body.lh-design .lh-section-head h2 {
	color: var(--lh-navy);
	margin: 0;
}

body.lh-design .lh-section-head__link {
	font-weight: 600;
	white-space: nowrap;
	margin: 0;
}

/* The nested group holding kicker + h2. It must not stretch, or the action link
   is pushed off the right edge instead of sitting beside it. */
body.lh-design .lh-section-head__text {
	flex: 0 1 auto;
	min-width: 0;
}

body.lh-design .lh-section-head__text > * {
	margin: 0;
}

/* =========================================================================
   5b. Asymmetric two-column rows

   Core's Columns block splits evenly. Three rows in the mockup do not:
   the homepage's what's-on / venue-hire split, the venue-hire intro beside
   its photo, and the training page's table beside its sidebar. Each gets a
   grid override, and each collapses to one column on tablet.
   ====================================================================== */

body.lh-design .lh-look-round,
body.lh-design .lh-home-split,
body.lh-design .lh-hire-intro,
body.lh-design .lh-hire-detail {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

body.lh-design .lh-home-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.lh-design .lh-hire-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
body.lh-design .lh-hire-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.lh-design .lh-look-round { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Grid supersedes the flex-basis core puts on each column inline; without
   this the columns keep their 50% widths and overflow the grid track. */
body.lh-design .lh-look-round > .wp-block-column,
body.lh-design .lh-home-split > .wp-block-column,
body.lh-design .lh-hire-intro > .wp-block-column,
body.lh-design .lh-hire-detail > .wp-block-column {
	flex-basis: auto !important;
	min-width: 0;
}

@media (max-width: 900px) {
	body.lh-design .lh-look-round,
	body.lh-design .lh-home-split,
	body.lh-design .lh-hire-intro,
	body.lh-design .lh-hire-detail {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The navy panel should fill the height of its row on desktop, as drawn. */
body.lh-design .lh-home-split > .wp-block-column:last-child {
	align-self: stretch;
}

body.lh-design .lh-home-split .lh-panel-dark {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}

/* The look-round pair is photography first: picture, then a heading and a line of copy. No card
   chrome — the photographs are the subject, and a white panel round them would fight the three
   tiles directly above. A fixed band height keeps the two level whatever shape the photographs
   turn out to be, the same trick the social strip and the tall slots use. */
body.lh-design .lh-look-round .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

body.lh-design .lh-look-round .wp-block-column > * {
	margin: 0;
}

body.lh-design .lh-look-round .lh-photo--filled .lh-photo__img {
	height: 280px;
}

body.lh-design .lh-look-round p {
	color: var(--lh-prose);
}

/* =========================================================================
   6. Cards — white, generous padding, 4px coloured top edge. Columns blocks
   pick this up automatically so the three homepage tiles need no extra
   markup.
   ====================================================================== */

body.lh-design .lh-cards .wp-block-column,
body.lh-design .lh-card {
	background: var(--lh-white);
	padding: 2rem;
	border-top: 4px solid var(--lh-blue);
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

body.lh-design .lh-cards .wp-block-column > *,
body.lh-design .lh-card > * {
	margin: 0;
}

body.lh-design .lh-cards .wp-block-column p,
body.lh-design .lh-card p {
	color: var(--lh-prose);
	flex-grow: 1;
}

/* Numbered "how to book" steps: red top edge, big display numeral. */
body.lh-design .lh-steps .wp-block-column {
	background: var(--lh-white);
	padding: 1.5rem;
	border-top: 4px solid var(--lh-red);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	counter-increment: lh-step;
}

body.lh-design .lh-steps .wp-block-column::before {
	content: counter(lh-step);
	font-family: var(--lh-display);
	font-weight: 800;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--lh-red);
}

body.lh-design .lh-steps {
	counter-reset: lh-step;
}

/* =========================================================================
   7. Dark panel — the navy "Venue hire" block on the homepage.
   ====================================================================== */

body.lh-design .lh-panel-dark {
	background: var(--lh-navy);
	color: var(--lh-off-white);
	padding: 2.5rem;
}

body.lh-design .lh-panel-dark h2,
body.lh-design .lh-panel-dark h3 {
	color: var(--lh-off-white);
}

body.lh-design .lh-panel-dark p {
	color: var(--lh-on-navy);
}

body.lh-design .lh-panel-dark .lh-kicker {
	color: var(--lh-pale-2);
}

body.lh-design .lh-panel-dark a {
	color: var(--lh-white);
}

/* =========================================================================
   8. Event rows — output of [lh_upcoming_events]. Date in condensed blue on
   a fixed column, title, then a category chip whose colour comes from the
   Events Calendar category slug.
   ====================================================================== */

body.lh-design .lt-events {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

body.lh-design .lt-events__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--lh-border);
}

body.lh-design .lt-events__date {
	flex: 0 0 auto;
	width: 120px;
	font-family: var(--lh-display);
	font-weight: 800;
	font-size: 1.125rem;
	color: var(--lh-blue);
}

body.lh-design .lt-events__title {
	flex: 1 1 14rem;
	font-size: 1rem;
}

body.lh-design .lt-events__title a {
	text-decoration: none;
}

body.lh-design .lt-events__title a:hover {
	text-decoration: underline;
}

body.lh-design .lt-events__venue {
	flex: 0 0 auto;
	font-size: 0.875rem;
	color: var(--lh-muted);
}

/* Category chip. Default is an outlined neutral, as on the homepage artboard;
   the per-category fills below match the calendar grid. */
body.lh-design .lt-events__cat {
	flex: 0 0 auto;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--lh-border);
	color: #5A5A5A;
	white-space: nowrap;
}

body.lh-design .lt-events__cat--football { background: var(--lh-cat-football); border-color: var(--lh-cat-football); color: var(--lh-off-white); }
body.lh-design .lt-events__cat--cricket { background: var(--lh-cat-cricket); border-color: var(--lh-cat-cricket); color: var(--lh-off-white); }
body.lh-design .lt-events__cat--social-bar { background: var(--lh-cat-social); border-color: var(--lh-cat-social); color: var(--lh-off-white); }
body.lh-design .lt-events__cat--fundraising { background: var(--lh-cat-fund); border-color: var(--lh-cat-fund); color: var(--lh-off-white); }
body.lh-design .lt-events__cat--club-business { background: var(--lh-cat-business); border-color: var(--lh-cat-business); color: var(--lh-off-white); }
body.lh-design .lt-events__cat--venue-booked { background: var(--lh-cat-booked); border-color: var(--lh-cat-booked); color: var(--lh-off-white); }
body.lh-design .lt-events__cat--training { background: var(--lh-cat-football); border-color: var(--lh-cat-football); color: var(--lh-off-white); }

body.lh-design .lt-events__empty {
	background: var(--lh-placeholder);
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem;
	color: var(--lh-prose);
}

@media (max-width: 600px) {
	body.lh-design .lt-events__date {
		width: 100%;
	}
}

/* =========================================================================
   9. The calendar — our own month grid (lh-core plugin), styled to the
   WhatsOn artboard: square cells, hairline borders, greyed padding days, and
   event pills filled by category.
   ====================================================================== */

body.lh-design .lt-cal__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

body.lh-design .lt-cal__title {
	margin: 0;
	font-size: clamp(1.6rem, 2.4vw, 2.125rem);
}

body.lh-design .lt-cal__nav {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	flex-wrap: wrap;
}

body.lh-design .lt-cal__nav-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--lh-tap);
	padding: 0 0.875rem;
	border: 2px solid var(--lh-border);
	color: var(--lh-blue);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
}

body.lh-design .lt-cal__nav-link:hover {
	border-color: var(--lh-blue);
	background: var(--lh-blue);
	color: var(--lh-white);
}

body.lh-design .lt-cal__weekdays,
body.lh-design .lt-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

body.lh-design .lt-cal__weekday {
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: #5A5A5A;
}

body.lh-design .lt-cal__grid {
	gap: 4px;
}

body.lh-design .lt-cal__day {
	min-height: 104px;
	background: var(--lh-white);
	border: 1px solid var(--lh-border);
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

/* Days belonging to the neighbouring month sit back. */
body.lh-design .lt-cal__day--outside {
	background: #EDF0F5;
	border-color: #E1E5EE;
}

body.lh-design .lt-cal__day--today {
	border-color: var(--lh-blue);
	box-shadow: inset 0 0 0 1px var(--lh-blue);
}

body.lh-design .lt-cal__daynum {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--lh-navy);
}

body.lh-design .lt-cal__day--outside .lt-cal__daynum {
	color: var(--lh-muted);
}

/* Event pills. Base fill is club blue; the category classes below override it. */
body.lh-design .lt-cal__event {
	display: block;
	font-size: 0.75rem;
	line-height: 1.3;
	padding: 0.25rem 0.375rem;
	background: var(--lh-blue);
	color: var(--lh-off-white);
	text-decoration: none;
}

body.lh-design .lt-cal__event:hover {
	color: var(--lh-white);
	filter: brightness(1.15);
}

body.lh-design .lt-cal__event--football       { background: var(--lh-cat-football); }
body.lh-design .lt-cal__event--cricket        { background: var(--lh-cat-cricket); }
body.lh-design .lt-cal__event--social-bar     { background: var(--lh-cat-social); }
body.lh-design .lt-cal__event--fundraising    { background: var(--lh-cat-fund); }
body.lh-design .lt-cal__event--club-business  { background: var(--lh-cat-business); }
body.lh-design .lt-cal__event--venue-booked   { background: var(--lh-cat-booked); }
body.lh-design .lt-cal__event--training       { background: var(--lh-cat-football); }

/* Category key under the grid, so the colours mean something. */
body.lh-design .lt-cal__key {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	font-size: 0.875rem;
}

body.lh-design .lt-cal__key li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

body.lh-design .lt-cal__key-swatch {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

body.lh-design .lt-cal__subscribe {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
}

/* On a phone a seven-column grid of 104px cells is unusable, so the month becomes a list of
   the days that actually have something on. Empty days are dropped entirely. */
@media (max-width: 780px) {
	body.lh-design .lt-cal__weekdays {
		display: none;
	}

	body.lh-design .lt-cal__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	body.lh-design .lt-cal__day {
		min-height: 0;
		border-width: 0 0 1px 0;
		flex-direction: row;
		align-items: baseline;
		gap: 0.75rem;
	}

	body.lh-design .lt-cal__day:not(.lt-cal__day--has-events) {
		display: none;
	}

	body.lh-design .lt-cal__daynum {
		flex: 0 0 2.5rem;
		font-family: var(--lh-display);
		font-size: 1.125rem;
		color: var(--lh-blue);
	}
}

/* Single event: the when-and-where block above the description. */
body.lh-design .lt-event-meta {
	background: var(--lh-white);
	border-top: 4px solid var(--lh-blue);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

body.lh-design .lt-event-meta p {
	margin: 0 0 0.5rem;
}

body.lh-design .lt-event-meta p:last-child {
	margin-bottom: 0;
}

body.lh-design .lt-event-meta__repeat {
	color: var(--lh-muted);
}

/* =========================================================================
   10. Tables — our own schedule table (lh-core), styled to the MembersTraining artboard: blue
   uppercase header, zebra body, team name bold blue, and horizontal scroll
   rather than a squashed twelve-column grid on a phone.
   ====================================================================== */

body.lh-design .lt-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--lh-border);
}

body.lh-design .lt-table {
	border: 0;
	margin-bottom: 1rem;
	font-size: 0.9375rem;
	width: 100%;
}

body.lh-design .lt-table thead th,
body.lh-design .lt-table thead th button {
	background: var(--lh-blue);
	color: var(--lh-off-white);
	font-family: var(--lh-body);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.75rem 1rem;
	border: 0;
	white-space: nowrap;
}

body.lh-design .lt-table tbody td {
	padding: 0.875rem 1rem;
	border-top: 0;
	vertical-align: middle;
}

body.lh-design .lt-table tbody tr:nth-child(odd) td {
	background: var(--lh-white);
}

body.lh-design .lt-table tbody tr:nth-child(even) td {
	background: var(--lh-stripe);
}

/* First column is the team name in the artboard. */
body.lh-design .lt-table tbody td:first-child {
	font-weight: 600;
	color: var(--lh-blue);
	white-space: nowrap;
}

/* DataTables' search box, so it matches the mockup's filter row. */
body.lh-design .lt-table-filter,
body.lh-design .lt-table-wrap input[type="search"] {
	height: var(--lh-tap);
	border: 1px solid var(--lh-border-2);
	border-radius: var(--lh-radius);
	padding: 0 0.75rem;
	background: var(--lh-white);
}

/* =========================================================================
   11. Forms — our own enquiry forms (lh-core) and core comment/search fields. 44px controls,
   1px borders, square, label above in small caps-ish 600.
   ====================================================================== */

body.lh-design .lt-form label,
body.lh-design .lt-field label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--lh-prose);
	margin-bottom: 0.375rem;
}

body.lh-design input[type="text"],
body.lh-design input[type="email"],
body.lh-design input[type="search"],
body.lh-design input[type="tel"],
body.lh-design input[type="password"],
body.lh-design select,
body.lh-design textarea {
	min-height: var(--lh-tap);
	border: 1px solid var(--lh-border-2);
	border-radius: var(--lh-radius);
	background: var(--lh-white);
	color: var(--lh-navy);
	padding: 0.5rem 0.75rem;
	font-family: var(--lh-body);
	font-size: 0.875rem;
	box-shadow: none;
}

body.lh-design textarea {
	min-height: 7rem;
}

body.lh-design input:focus,
body.lh-design select:focus,
body.lh-design textarea:focus {
	border-color: var(--lh-blue);
	outline: 2px solid rgba(30, 76, 154, 0.25);
	outline-offset: 0;
}

/* =========================================================================
   12. Checklists and price rows (VenueHire artboard)
   ====================================================================== */

/* A list with blue ticks instead of bullets. The tick is a background image
   so it survives copy-paste into the block editor as a plain list. */
body.lh-design .lh-check {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}

body.lh-design .lh-check li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.625rem;
	font-size: 1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231E4C9A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 0.2em;
	background-size: 20px 20px;
}

/* Label left, value right, hairline under — the venue-hire price table. */
body.lh-design .lh-pricing {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
}

body.lh-design .lh-pricing li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--lh-border);
	font-size: 0.9375rem;
}

body.lh-design .lh-pricing li > :last-child {
	font-weight: 600;
	text-align: right;
}

/* =========================================================================
   13. Photography placeholders

   The artboards mark every unshot photo with a grey block. Keeping that
   convention in the build means a missing photo reads as "not supplied yet"
   rather than as a broken layout — and the blocks are impossible to miss
   when the committee reviews the site.
   ====================================================================== */

body.lh-design .lh-photo {
	background-color: var(--lh-placeholder);
	/* The club badge, faint, behind the caption. A flat grey box reads as a broken layout; the
	   same box with the badge behind it reads as "photography pending", which is what it is. */
	background-image: url("assets/badge.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 96px 96px;
	color: #5A6A8A;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-align: center;
	padding: 1.25rem;
	min-height: 220px;
	font-size: 0.8125rem;
	margin: 0 0 1rem;
}

body.lh-design .lh-hero .lh-photo {
	background-color: rgba(245, 247, 250, 0.1);
	color: var(--lh-pale-2);
	min-height: 0;
	padding: 0.75rem 1rem;
	background-image: none;   /* the hero already carries the ridge and the mast */
	display: inline-block;
	text-align: left;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}

body.lh-design .lh-photo--tall {
	min-height: 520px;
	background-size: 160px 160px;
}

/* --- Once a real photograph is assigned to the role --- */
body.lh-design .lh-photo--filled {
	display: block;
	background: none;
	padding: 0;
	min-height: 0;
}

body.lh-design .lh-photo__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A tall slot keeps its drawn proportion when filled, so the two-column venue-hire row does
   not jump about depending on the aspect ratio of whatever gets uploaded. */
body.lh-design .lh-photo--filled.lh-photo--tall .lh-photo__img {
	height: 520px;
}

body.lh-design .lh-social .lh-photo--filled .lh-photo__img {
	height: 150px;
}

/* A photograph the club did not take carries its credit under the frame. CC BY-SA holds only
   while the photographer and the licence are published with the picture, so this is a licence
   condition wearing a caption's clothes — quiet, but not optional, and not to be styled away. */
body.lh-design .lh-photo__credit {
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--lh-muted);
	padding: 0.375rem 0 0;
	text-align: left;
}

body.lh-design .lh-photo__credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.lh-design .lh-photo__credit a:hover,
body.lh-design .lh-photo__credit a:focus {
	color: var(--lh-blue);
}

/* =========================================================================
   14. Editorial markers — the outstanding-content system. Deliberately loud:
   a marker nobody notices is a marker that ships. All must be gone before
   launch (content pack §5.7).
   ====================================================================== */

body.lh-design .lh-confirm {
	color: var(--lh-red);
	font-weight: 700;
	background: #FDECEE;
	padding: 0.05em 0.3em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

body.lh-design .lh-todo {
	border-left: 4px solid var(--lh-red);
	background: #FDECEE;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}

body.lh-design .lh-todo p {
	margin: 0 0 0.5rem;
}

body.lh-design .lh-todo p:last-child {
	margin-bottom: 0;
	font-size: 0.9em;
	opacity: 0.85;
}

body.lh-design .lh-embed-slot {
	border: 2px dashed var(--lh-blue);
	background: var(--lh-pale);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}

body.lh-design .lh-embed-slot p {
	margin: 0 0 0.5rem;
}

body.lh-design .lh-embed-slot p:last-child {
	margin-bottom: 0;
	font-size: 0.9em;
}

/* "Sample data shown for layout" and similar captions. */
body.lh-design .lh-note,
body.lh-design .lt-note,
body.lh-design .lt-table-note,
body.lh-design .lt-form-note,
body.lh-design .lt-table-empty {
	font-size: 0.8125rem;
	color: var(--lh-muted);
	margin-top: 0.75rem;
}

/* A note that is a warning, not a footnote: the sample-events banner on the public calendar.
   Muted grey at 13px is right for "sample data shown for layout" sitting under a table nobody
   will act on; it is wrong for a calendar a visitor may plan their Thursday around. */
body.lh-design .lh-note--warning {
	font-size: 0.9375rem;
	color: var(--lh-navy);
	background: #FDECEE;
	border-left: 4px solid var(--lh-red);
	padding: 0.875rem 1.125rem;
	margin: 0 0 1.5rem;
}

body.lh-design .lh-note--warning strong {
	color: var(--lh-red);
}

/* An "updated on" pill — the trust signal at the top of the training page. */
body.lh-design .lh-stamp {
	display: inline-block;
	background: var(--lh-placeholder);
	color: var(--lh-blue);
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 0.5rem 0.75rem;
}

/* =========================================================================
   15. Social wall grid placeholder (homepage + News)
   ====================================================================== */

body.lh-design .lh-social .wp-block-column {
	background: var(--lh-white);
	border: 1px solid var(--lh-border);
	padding: 0;
}

body.lh-design .lh-social .wp-block-column > .lh-photo {
	min-height: 150px;
	padding: 1rem;
}

body.lh-design .lh-social .wp-block-column > p {
	padding: 1rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* =========================================================================
   16. Latest Posts block — used on Home and News
   ====================================================================== */

body.lh-design .wp-block-latest-posts__list li {
	border-bottom: 1px solid var(--lh-border);
	padding-bottom: 0.875rem;
	margin-bottom: 0.875rem;
}

body.lh-design .wp-block-latest-posts__post-title {
	font-family: var(--lh-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--lh-navy);
	text-decoration: none;
}

body.lh-design .wp-block-latest-posts__post-date {
	font-family: var(--lh-display);
	font-weight: 600;
	color: var(--lh-blue);
	font-size: 0.9375rem;
}

/* =========================================================================
   17. Footer — navy, three columns, pale text.
   ====================================================================== */

body.lh-design .site-footer,
body.lh-design .site-footer-wrap,
body.lh-design .site-middle-footer-wrap,
body.lh-design .site-bottom-footer-wrap {
	background: var(--lh-navy);
	color: var(--lh-on-navy);
}

body.lh-design .site-footer-wrap {
	font-size: 0.875rem;
	line-height: 1.6;
}

body.lh-design .site-footer-wrap a {
	color: var(--lh-on-navy);
	text-decoration: none;
}

body.lh-design .site-footer-wrap a:hover {
	color: var(--lh-white);
	text-decoration: underline;
}

body.lh-design .site-footer-wrap h2,
body.lh-design .site-footer-wrap h3,
body.lh-design .site-footer-wrap .widget-title {
	font-family: var(--lh-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--lh-off-white);
}

/* =========================================================================
   18. Members restriction notice — the Members plugin's message, given the
   weight of a real gate rather than a stray paragraph.
   ====================================================================== */

body.lh-design .members-access-error,
body.lh-design .members-error {
	background: var(--lh-white);
	border-top: 4px solid var(--lh-blue);
	padding: 2rem;
	font-size: 1.0625rem;
	color: var(--lh-prose);
}

/* =========================================================================
   19. Accessibility

   The mockup is a flat image and says nothing about focus states, but
   removing them is not an option: the members area is keyboard-navigated by
   coaches on club laptops.
   ====================================================================== */

body.lh-design a:focus-visible,
body.lh-design button:focus-visible,
body.lh-design .wp-block-button__link:focus-visible {
	outline: 3px solid var(--lh-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.lh-design * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Print: drop the decoration, keep the content. */
@media print {
	body.lh-design .lh-hero::before,
	body.lh-design .lh-hero::after,
	body.lh-design .site-header-wrap,
	body.lh-design .site-footer-wrap {
		display: none;
	}

	body.lh-design .lh-todo,
	body.lh-design .lh-embed-slot {
		border: 1px solid #000;
	}
}

/* =========================================================================
   20. Enquiry forms — markup from the lh-core plugin.

   The four forms (football, cricket, venue hire, contact) replaced Fluent
   Forms. Field styling is shared with §11; this is the surrounding furniture.
   ====================================================================== */

body.lh-design .lt-form {
	background: var(--lh-white);
	border-top: 4px solid var(--lh-blue);
	padding: 1.5rem;
	max-width: 40rem;
}

body.lh-design .lt-field {
	display: flex;
	flex-direction: column;
	margin: 0 0 1rem;
}

body.lh-design .lt-req {
	color: var(--lh-red);
}

/* The honeypot. Invisible to people, present to bots.

   NOT `display: none` — checking for that is the first thing any competent
   scraper does, and a field it can see is hidden is a field it skips. Moving
   it off-screen keeps it in the DOM and in the form submission. It is also
   aria-hidden and tabindex="-1" in the markup, so nobody using a keyboard or
   a screen reader can land in it by accident. */
body.lh-design .lt-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

body.lh-design .lt-form-ok {
	background: #ECF6EE;
	border-left: 4px solid #2E7D4F;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}

body.lh-design .lt-form-error {
	background: #FDECEE;
	border-left: 4px solid var(--lh-red);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}

body.lh-design .lt-form-ok p:last-child,
body.lh-design .lt-form-error p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   21. Schedule table furniture — the filter box and sort buttons.
   ====================================================================== */

body.lh-design .lt-table-filter__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--lh-prose);
	margin-bottom: 0.375rem;
}

body.lh-design .lt-table-filter {
	max-width: 22rem;
	margin-bottom: 0.5rem;
}

body.lh-design .lt-table-count {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--lh-muted);
	min-height: 1.2em;   /* reserve the line so the table does not jump when it fills */
}

body.lh-design .lt-table-scroll {
	overflow-x: auto;
}

/* The sort control is a real button inside the th — a bare clickable header
   cannot be reached from a keyboard, and coaches use this on club laptops. */
body.lh-design .lt-table thead th button {
	all: unset;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

body.lh-design .lt-table thead th button:hover .lt-table-sort__icon::after {
	opacity: 1;
}

body.lh-design .lt-table-sort__icon::after {
	content: "\2195";
	opacity: 0.45;
	font-size: 0.9em;
}

body.lh-design .lt-table thead th[aria-sort="ascending"] .lt-table-sort__icon::after {
	content: "\2191";
	opacity: 1;
}

body.lh-design .lt-table thead th[aria-sort="descending"] .lt-table-sort__icon::after {
	content: "\2193";
	opacity: 1;
}

body.lh-design .lt-table thead th button:focus-visible {
	outline: 3px solid var(--lh-gold);
	outline-offset: -3px;
}