/*
Theme Name: Hawks Jordan
Theme URI: https://hawksmc.com/
Author: HAWKS MC Jordan
Description: Dark, road-first theme for the HAWKS MC Jordan chapter. Built to sit alongside the global club site at hawksmc.org, using the same palette and typographic voice, but as a lightweight standalone theme rather than a page-builder stack. Right-to-left ready throughout.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hawksjo
Tags: club, dark, rtl-language-support, custom-menu, translation-ready
*/

/* ==========================================================================
   Tokens
   Palette lifted from the global club site so the two chapters read as one
   organisation: #E81938 is its Elementor primary, #131313 its ground, #8E8E8E
   its body text. The deep reds are what its buttons and notice bars use.
   ========================================================================== */

:root {
	--hmc-red:        #e81938;
	--hmc-red-deep:   #af1917;
	--hmc-red-dark:   #831311;

	--hmc-ink:        #131313;  /* page ground */
	--hmc-ink-raised: #1b1b1b;  /* cards, wells */
	--hmc-ink-edge:   #2a2a2a;  /* hairlines on dark */
	--hmc-black:      #000000;

	--hmc-white:      #ffffff;
	--hmc-grey:       #8e8e8e;  /* body copy on dark */
	--hmc-grey-dim:   #6a6a6a;  /* captions, meta */

	/* Light surfaces. The global site drops to white for its timeline and
	   article bodies; long reading copy on near-black is punishing. */
	--hmc-paper:      #ffffff;
	--hmc-paper-edge: #e4e4e4;
	--hmc-paper-ink:  #1a1a1a;
	--hmc-paper-grey: #5c5c5c;

	--hmc-ok:         #3c9a5f;
	--hmc-warn:       #c8880e;

	--hmc-display: "Playfair Display", "Times New Roman", Georgia, serif;
	--hmc-ui:      "Teko", "Oswald", "Arial Narrow", sans-serif;
	--hmc-body:    "Noto Sans", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--hmc-measure: 40rem;
	--hmc-gutter:  clamp(1rem, 4vw, 2.5rem);
	--hmc-section: clamp(3.5rem, 8vw, 6.5rem);
	--hmc-wide:    1240px;

	--hmc-shadow:  0 18px 44px rgba(0, 0, 0, .45);
}

/* Arabic needs a different body face and a touch more line height; Teko has no
   Arabic coverage at all, so the UI face falls back for RTL. */
html[dir="rtl"] {
	--hmc-body: "Noto Sans Arabic", "Noto Sans", "Segoe UI", Tahoma, sans-serif;
	--hmc-ui:   "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--hmc-display: "Noto Kufi Arabic", "Noto Sans Arabic", Georgia, serif;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

body {
	margin: 0;
	background: var(--hmc-ink);
	color: var(--hmc-grey);
	font-family: var(--hmc-body);
	font-size: 1rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--hmc-red); text-decoration: none; }
a:hover { color: var(--hmc-white); }

:focus-visible {
	outline: 2px solid var(--hmc-red);
	outline-offset: 3px;
}

h1, h2, h3, h4 {
	font-family: var(--hmc-display);
	color: var(--hmc-white);
	line-height: 1.1;
	margin: 0 0 .6em;
	text-wrap: balance;
	font-weight: 700;
}

h1 { font-size: clamp(2.2rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* The screen-reader skip link, visible only once focused. */
.hmc-skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 999;
	background: var(--hmc-red);
	color: var(--hmc-white);
	padding: .75rem 1.25rem;
	font-family: var(--hmc-ui);
	text-transform: uppercase;
}
.hmc-skip:focus { inset-inline-start: 0; }

/* ==========================================================================
   Layout
   ========================================================================== */

.hmc-wrap {
	width: 100%;
	max-width: var(--hmc-wide);
	margin-inline: auto;
	padding-inline: var(--hmc-gutter);
}

.hmc-section { padding-block: var(--hmc-section); }
.hmc-section--paper { background: var(--hmc-paper); color: var(--hmc-paper-grey); }
.hmc-section--paper h1,
.hmc-section--paper h2,
.hmc-section--paper h3,
.hmc-section--paper h4 { color: var(--hmc-paper-ink); }
.hmc-section--black { background: var(--hmc-black); }

.hmc-measure { max-width: var(--hmc-measure); }

/* ==========================================================================
   Eyebrow — the red label with flanking rules the club site puts above
   every section heading. The rules are drawn, not typed, so they scale.
   ========================================================================== */

.hmc-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .85rem;
	font-family: var(--hmc-ui);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hmc-red);
	margin: 0 0 .9rem;
}
.hmc-eyebrow::before,
.hmc-eyebrow::after {
	content: "";
	width: 34px;
	height: 2px;
	background: currentColor;
	opacity: .75;
}
.hmc-eyebrow--start { justify-content: flex-start; }
.hmc-eyebrow--start::before { display: none; }

.hmc-heading-center { text-align: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.hmc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--hmc-ui);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	padding: .95rem 1.9rem;
	border: 2px solid transparent;
	background: var(--hmc-red);
	color: var(--hmc-white);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.hmc-btn:hover { background: var(--hmc-red-deep); color: var(--hmc-white); }

.hmc-btn--ghost {
	background: transparent;
	border-color: var(--hmc-white);
	color: var(--hmc-white);
}
.hmc-btn--ghost:hover { background: var(--hmc-white); color: var(--hmc-ink); }

.hmc-btn--solid-light {
	background: var(--hmc-white);
	color: var(--hmc-ink);
}
.hmc-btn--solid-light:hover { background: var(--hmc-red); color: var(--hmc-white); }

/* ==========================================================================
   Top notice + utility bar
   ========================================================================== */

.hmc-notice {
	background: var(--hmc-red-deep);
	color: var(--hmc-white);
	text-align: center;
	font-size: .85rem;
	font-weight: 700;
	padding: .55rem var(--hmc-gutter);
}

.hmc-utility {
	background: #0d0d0d;
	border-bottom: 1px solid var(--hmc-ink-edge);
	font-size: .82rem;
	color: var(--hmc-grey-dim);
}
.hmc-utility .hmc-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	flex-wrap: wrap;
}
.hmc-utility a { color: var(--hmc-grey-dim); }
.hmc-utility a:hover { color: var(--hmc-white); }
.hmc-utility-left,
.hmc-utility-right { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.hmc-dot { color: var(--hmc-red); }

/* ==========================================================================
   Header
   ========================================================================== */

.hmc-header {
	background: var(--hmc-ink);
	border-bottom: 1px solid var(--hmc-ink-edge);
	position: sticky;
	top: 0;
	z-index: 100;
}
.hmc-header .hmc-wrap {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 84px;
}

.hmc-brand { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
/*
 * The chapter patch is a wide 4:3 badge whose top and bottom rockers carry the lettering, so it
 * needs real height to stay legible — a square-ish 60px crop turns "HAWKS" and "JORDAN" to mush.
 */
.hmc-brand img { max-height: 96px; width: auto; }   /* owner 2026-10-05: 74px read too small */
@media (max-width: 560px) { .hmc-brand img { max-height: 72px; } }
.hmc-brand-text {
	font-family: var(--hmc-ui);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hmc-white);
	line-height: 1;
}
.hmc-brand-text span { color: var(--hmc-red); }
.hmc-brand-sub {
	display: block;
	font-size: .72rem;
	letter-spacing: .3em;
	color: var(--hmc-grey-dim);
	font-family: var(--hmc-body);
}

.hmc-nav { margin-inline-start: auto; }
.hmc-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
}
.hmc-nav li { position: relative; }
.hmc-nav a {
	font-family: var(--hmc-ui);
	font-size: 1.12rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hmc-white);
	white-space: nowrap;
}
.hmc-nav a:hover,
.hmc-nav .current-menu-item > a,
.hmc-nav .current_page_item > a { color: var(--hmc-red); }

/* The red dot between top-level items, drawn on the gap rather than typed. */
.hmc-nav > ul > li + li::before {
	content: "";
	position: absolute;
	inset-inline-start: -.85rem;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--hmc-red);
}

/* Sub-menus */
.hmc-nav ul ul {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 230px;
	background: var(--hmc-ink-raised);
	border: 1px solid var(--hmc-ink-edge);
	box-shadow: var(--hmc-shadow);
	padding: .4rem 0;
	z-index: 50;
}
.hmc-nav li:hover > ul,
.hmc-nav li:focus-within > ul { display: flex; }
.hmc-nav ul ul li + li::before { display: none; }
.hmc-nav ul ul a {
	display: block;
	padding: .55rem 1.1rem;
	font-size: 1.02rem;
	letter-spacing: .06em;
}

.hmc-header-cta { flex: 0 0 auto; }

/* Mobile toggle */
.hmc-burger {
	display: none;
	margin-inline-start: auto;
	background: transparent;
	border: 1px solid var(--hmc-ink-edge);
	color: var(--hmc-white);
	padding: .55rem .8rem;
	font-family: var(--hmc-ui);
	font-size: 1.05rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hmc-hero {
	position: relative;
	min-height: min(72vh, 620px);
	display: grid;
	align-items: center;
	background: var(--hmc-black) center/cover no-repeat;
	isolation: isolate;
}
.hmc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 100%);
}
.hmc-hero-inner { padding-block: clamp(3rem, 10vw, 6rem); }
.hmc-hero h1 { margin-bottom: .4em; }
.hmc-hero h1 em {
	font-style: normal;
	color: var(--hmc-red);
}
.hmc-hero p {
	max-width: var(--hmc-measure);
	font-size: 1.05rem;
}
.hmc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin-top: 2rem;
}

/* Page banner for interior pages */
.hmc-banner {
	background: var(--hmc-black);
	border-bottom: 1px solid var(--hmc-ink-edge);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	text-align: center;
}
.hmc-banner h1 { margin-bottom: .25em; }
.hmc-banner p { color: var(--hmc-grey-dim); margin: 0; }

/* ==========================================================================
   Split / feature rows
   ========================================================================== */

.hmc-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) {
	.hmc-split { grid-template-columns: 1.15fr .85fr; }
	.hmc-split--flip > :first-child { order: 2; }
}
.hmc-split img { width: 100%; }

/* ==========================================================================
   Cards
   ========================================================================== */

.hmc-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.hmc-card {
	background: var(--hmc-ink-raised);
	border: 1px solid var(--hmc-ink-edge);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.hmc-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hmc-black); }
.hmc-card-media img { width: 100%; height: 100%; object-fit: cover; }
.hmc-card-body { padding: 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.hmc-card h3 { margin: 0; font-size: 1.35rem; }
.hmc-card p { margin: 0; font-size: .94rem; }
.hmc-card-meta {
	font-family: var(--hmc-ui);
	font-size: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hmc-red);
}
.hmc-card-foot { margin-top: auto; padding-top: .9rem; }

/* Mission tiles — icon boxes, no border, closer to the club site's row of three */
.hmc-tile { text-align: center; padding: 1.25rem; }
.hmc-tile-num {
	font-family: var(--hmc-display);
	font-size: 3rem;
	line-height: 1;
	color: var(--hmc-red);
	display: block;
	margin-bottom: .5rem;
}

/* Counters */
.hmc-stats {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	text-align: center;
}
.hmc-stat-value {
	font-family: var(--hmc-display);
	font-size: clamp(2.4rem, 6vw, 3.6rem);
	line-height: 1;
	color: var(--hmc-white);
	font-variant-numeric: tabular-nums;
	display: block;
}
.hmc-stat-label {
	font-family: var(--hmc-ui);
	font-size: 1.05rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hmc-red);
	margin-top: .35rem;
	display: block;
}

/* ==========================================================================
   Ride list — the one layout the global site does not have. A ride is a
   scannable row: date block, then what a rider needs before committing.
   ========================================================================== */

.hmc-ride {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: start;
	background: var(--hmc-ink-raised);
	border: 1px solid var(--hmc-ink-edge);
	border-inline-start: 4px solid var(--hmc-red);
	padding: 1.35rem;
}
.hmc-ride + .hmc-ride { margin-top: 1rem; }
.hmc-ride-date {
	text-align: center;
	background: var(--hmc-black);
	padding: .8rem 1rem;
	min-width: 84px;
}
.hmc-ride-day {
	font-family: var(--hmc-display);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--hmc-white);
	font-variant-numeric: tabular-nums;
	display: block;
}
.hmc-ride-month {
	font-family: var(--hmc-ui);
	font-size: 1rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hmc-red);
	display: block;
}
.hmc-ride-body { min-width: 0; }
.hmc-ride h3 { margin: 0 0 .4rem; font-size: 1.45rem; }
.hmc-ride-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
	font-size: .9rem;
	color: var(--hmc-grey-dim);
}
.hmc-ride-facts strong {
	color: var(--hmc-white);
	font-weight: 600;
}

/* Difficulty is information, so it gets form as well as colour. */
.hmc-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--hmc-ui);
	font-size: .95rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .2rem .7rem;
	border: 1px solid currentColor;
	line-height: 1.6;
}
.hmc-pill--easy   { color: var(--hmc-ok); }
.hmc-pill--medium { color: var(--hmc-warn); }
.hmc-pill--hard   { color: var(--hmc-red); }
.hmc-pill--members { color: var(--hmc-grey); }
.hmc-pill--event   { color: var(--hmc-white); }
.hmc-pill--cancelled { color: var(--hmc-red); }

/* A cancelled run stays on the list so nobody turns up for it, but it reads as struck. */
.hmc-ride.is-cancelled h3 a { text-decoration: line-through; color: var(--hmc-grey-dim); }
.hmc-ride.is-cancelled .hmc-ride-date { opacity: .5; }

/* ==========================================================================
   Long-form content
   ========================================================================== */

.hmc-content { max-width: var(--hmc-measure); }
.hmc-content > * + * { margin-top: 1.15em; }
.hmc-content h2 { margin-top: 1.8em; }
.hmc-content h3 { margin-top: 1.5em; }
.hmc-content ul,
.hmc-content ol { padding-inline-start: 1.3em; }
.hmc-content li + li { margin-top: .4em; }
.hmc-content blockquote {
	margin: 1.5em 0;
	padding-inline-start: 1.2rem;
	border-inline-start: 3px solid var(--hmc-red);
	font-size: 1.1rem;
	color: var(--hmc-white);
}
.hmc-content img { margin-block: 1.5em; }
.hmc-content table { width: 100%; border-collapse: collapse; }
.hmc-content th,
.hmc-content td { border: 1px solid var(--hmc-ink-edge); padding: .6rem .8rem; text-align: start; }
.hmc-section--paper .hmc-content th,
.hmc-section--paper .hmc-content td { border-color: var(--hmc-paper-edge); }

/* Tables, code and diagrams may exceed the measure; nothing else may. */
.hmc-scroll-x { overflow-x: auto; }

/* ==========================================================================
   Forms — covers the theme's own forms plus Fluent Forms, Ultimate Member
   and WooCommerce, which all render into a dark page and default to light.
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	width: 100%;
	background: var(--hmc-black);
	border: 1px solid var(--hmc-ink-edge);
	color: var(--hmc-white);
	font-family: var(--hmc-body);
	font-size: .97rem;
	padding: .7rem .85rem;
	border-radius: 0;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--hmc-red);
	outline: none;
}
label {
	display: block;
	font-family: var(--hmc-ui);
	font-size: 1.05rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hmc-white);
	margin-bottom: .35rem;
}
.hmc-field + .hmc-field { margin-top: 1.1rem; }
.hmc-field-hint {
	font-size: .83rem;
	color: var(--hmc-grey-dim);
	margin-top: .3rem;
}

button, input[type="submit"] {
	font-family: var(--hmc-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Light-surface forms keep readable contrast. */
.hmc-section--paper input[type="text"],
.hmc-section--paper input[type="email"],
.hmc-section--paper input[type="tel"],
.hmc-section--paper select,
.hmc-section--paper textarea {
	background: var(--hmc-paper);
	border-color: var(--hmc-paper-edge);
	color: var(--hmc-paper-ink);
}
.hmc-section--paper label { color: var(--hmc-paper-ink); }

/* ==========================================================================
   Member area
   ========================================================================== */

.hmc-member-bar {
	background: var(--hmc-black);
	border-bottom: 1px solid var(--hmc-ink-edge);
	padding-block: .7rem;
	font-size: .9rem;
}
.hmc-member-bar .hmc-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1.4rem;
}
.hmc-member-bar strong { color: var(--hmc-white); }

.hmc-status {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--hmc-ui);
	font-size: 1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.hmc-status::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}
.hmc-status--active  { color: var(--hmc-ok); }
.hmc-status--due     { color: var(--hmc-warn); }
.hmc-status--lapsed  { color: var(--hmc-red); }
.hmc-status--pending { color: var(--hmc-grey); }

/*
 * Ultimate Member ships its own blue (#3ba1da) on every button and a light-surface form. The
 * application form sits on a paper section, so the fields stay light and only the chrome is
 * brought back to the club's palette.
 */
.um .um-button,
.um .um-button:focus,
.um input[type="submit"].um-button,
.um-form input[type="submit"],
.um .um-request-button {
	background: var(--hmc-red) !important;
	border-radius: 0 !important;
	font-family: var(--hmc-ui);
	font-size: 1.15rem !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hmc-white) !important;
	box-shadow: none !important;
	line-height: 1.4;
}
.um .um-button:hover,
.um input[type="submit"].um-button:hover,
.um-form input[type="submit"]:hover { background: var(--hmc-red-deep) !important; }

.um .um-button.um-alt {
	background: transparent !important;
	border: 2px solid var(--hmc-paper-edge) !important;
	color: var(--hmc-paper-ink) !important;
}

/* UM's field labels default to a light grey that disappears on paper. */
.um .um-field-label label,
.um .um-field-label { color: var(--hmc-paper-ink) !important; }
.um .um-field-area input[type="text"],
.um .um-field-area input[type="email"],
.um .um-field-area input[type="tel"],
.um .um-field-area input[type="date"],
.um .um-field-area input[type="password"],
.um .um-field-area input[type="number"],
.um .um-field-area select,
.um .um-field-area textarea {
	background: var(--hmc-paper) !important;
	border: 1px solid var(--hmc-paper-edge) !important;
	color: var(--hmc-paper-ink) !important;
	border-radius: 0 !important;
}
.um .um-field-area input:focus,
.um .um-field-area select:focus,
.um .um-field-area textarea:focus { border-color: var(--hmc-red) !important; }
/* UM renders radio and checkbox captions in a pale grey that fails contrast on white. */
.um .um-field-checkbox-option,
.um .um-field-radio-option,
.um .um-field-radio span,
.um .um-field-checkbox span,
.um .um-field-radio label,
.um .um-field-checkbox label {
	color: var(--hmc-paper-ink) !important;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--hmc-body);
	font-size: .95rem;
}
.um .um-field-radio.active .um-field-radio-state i,
.um .um-field-checkbox.active .um-field-checkbox-state i { color: var(--hmc-red) !important; }

/* The application is long; give its groups room to breathe. */
.um .um-field { margin-bottom: 1.1rem; }

/* Ultimate Member and WooCommerce both ship light-surface defaults. */
.um, .um-form, .woocommerce { color: var(--hmc-grey); }
.woocommerce table.shop_table,
.woocommerce-MyAccount-content {
	background: var(--hmc-ink-raised);
	border-color: var(--hmc-ink-edge);
	color: var(--hmc-grey);
}
.woocommerce .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hmc-ink-edge);
}
.woocommerce .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--hmc-ink-edge); }
.woocommerce .woocommerce-MyAccount-navigation a {
	display: block;
	padding: .7rem 1rem;
	font-family: var(--hmc-ui);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hmc-white);
}
.woocommerce .woocommerce-MyAccount-navigation a:hover,
.woocommerce .woocommerce-MyAccount-navigation .is-active a { background: var(--hmc-red); }
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button {
	background: var(--hmc-red);
	color: var(--hmc-white);
	border-radius: 0;
	font-family: var(--hmc-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--hmc-red-deep); color: var(--hmc-white); }

/* ==========================================================================
   Digital membership card

   Sized and proportioned like the loyalty cards members already keep in their
   phone wallet: one dark panel, a few labelled facts, and a barcode that has to
   stay crisp and high-contrast because it gets scanned off a screen.
   ========================================================================== */

.hmc-mcard {
	max-width: 460px;
	background: linear-gradient(160deg, #1d1d1d 0%, var(--hmc-ink) 55%, #0b0b0b 100%);
	border: 1px solid var(--hmc-ink-edge);
	border-radius: 18px;
	padding: 1.6rem 1.5rem 1.4rem;
	box-shadow: var(--hmc-shadow);
	position: relative;
	overflow: hidden;
}
.hmc-mcard::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 100%;
	height: 4px;
	background: var(--hmc-red);
}

.hmc-mcard-head {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	flex-wrap: wrap;
	margin-bottom: 1.6rem;
}
.hmc-mcard-brand {
	font-family: var(--hmc-ui);
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--hmc-white);
	line-height: 1;
}
.hmc-mcard-brand span { color: var(--hmc-red); margin-inline-start: .25rem; }
.hmc-mcard-chapter {
	font-family: var(--hmc-ui);
	font-size: .95rem;
	letter-spacing: .24em;
	color: var(--hmc-grey-dim);
	margin-inline-start: auto;
}

.hmc-mcard-key {
	font-family: var(--hmc-ui);
	font-size: .92rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hmc-grey-dim);
	margin: 0 0 .15rem;
	line-height: 1.2;
}
/*
 * Compact by request: the owner chose the tighter card over the larger typographic one. These are
 * the sizes the card rendered at originally — it reached them by accident, through a collision
 * with the article-card rules, but it is the look that was approved, so they are set here on
 * purpose and will not move if those other rules change.
 */
.hmc-mcard-name {
	font-family: var(--hmc-display);
	font-size: .94rem;
	line-height: 1.3;
	color: var(--hmc-white);
	margin: 0;
	text-wrap: balance;
}
.hmc-mcard-val {
	font-family: var(--hmc-body);
	font-size: .94rem;
	color: var(--hmc-white);
	margin: 0;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}
.hmc-mcard-val.is-lapsed { color: var(--hmc-red); }
.hmc-mcard-val.is-active { color: var(--hmc-ok); }

/*
 * The committee's card is red (owner, 2026-10-05). Same card, the brand's dark red for a ground,
 * the accent rule turned white, labels in a pale pink-grey, and amber for anything that was red as
 * an alarm — a lapsed date in red would vanish.
 */
.hmc-mcard--committee {
	background: linear-gradient(160deg, #a51d1b 0%, #831311 55%, #5c0c0b 100%);
	border-color: #b03230;
}
.hmc-mcard--committee::before { background: #fff; }
.hmc-mcard--committee .hmc-mcard-brand span { color: #fff; }
.hmc-mcard--committee .hmc-mcard-key,
.hmc-mcard--committee .hmc-mcard-chapter { color: #ebb9b9; }
.hmc-mcard--committee .hmc-mcard-val.is-lapsed,
.hmc-mcard--committee .hmc-mcard-warn { color: #ffd60a; }
.hmc-mcard--committee .hmc-mcard-val.is-active { color: #9be39f; }

.hmc-mcard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1rem;
	margin-bottom: 1.8rem;
}

/*
 * The QR sits on white: scanners need the quiet zone and the contrast, and a code rendered onto
 * the card's near-black ground will not read at all. Square, so it is centred rather than stretched.
 */
.hmc-mcard-code {
	background: #fff;
	border-radius: 8px;
	padding: .9rem .8rem .6rem;
	text-align: center;
}
/* Sized to sit in the compact card without stretching it the way a 170px code did. */
.hmc-mcard-code svg {
	display: block;
	margin-inline: auto;
	width: 196px;
	height: 196px;
	max-width: 100%;
}
.hmc-mcard-code span {
	display: block;
	margin-top: .45rem;
	font-family: var(--hmc-body);
	font-size: .78rem;
	letter-spacing: .26em;
	color: #333;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
	.hmc-mcard-code svg { width: 168px; height: 168px; }
}

.hmc-mcard-warn {
	margin: 1rem 0 0;
	font-size: .88rem;
	color: var(--hmc-red);
}

@media (max-width: 420px) {
	.hmc-mcard-grid { grid-template-columns: 1fr; gap: .9rem; }
	.hmc-mcard-chapter { margin-inline-start: 0; }
}

/* The card is meant to be shown at a meet point, so it has to print cleanly. */
@media print {
	.hmc-mcard {
		background: #fff !important;
		border: 1px solid #000;
		box-shadow: none;
		color: #000;
	}
	.hmc-mcard-brand, .hmc-mcard-name, .hmc-mcard-val { color: #000 !important; }
	.hmc-mcard-key, .hmc-mcard-chapter { color: #444 !important; }
}

/* ==========================================================================
   Ride check-in code
   The QR sits on white (scanners need the contrast) beside its explanation;
   stacks on a phone.
   ========================================================================== */

.hmc-checkin { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.hmc-checkin-code { background: #fff; border-radius: 8px; padding: .8rem; flex: 0 0 auto; }
.hmc-checkin-code svg { display: block; width: 200px; height: 200px; max-width: 100%; }
.hmc-checkin-text { flex: 1 1 240px; min-width: 0; }
@media (max-width: 480px) {
	.hmc-checkin-code { margin-inline: auto; }
}

/* ==========================================================================
   Member level

   Earned from years and rides, never assigned, so it is set like a rocker on
   a cut rather than a badge handed out: the level name in the condensed UI
   face, the season badge as a thin green pill beside it, and the counts in
   caption grey underneath. The compact variant sits under the name on a
   directory card, where UM centres everything.
   ========================================================================== */

.hmc-level {
	font-family: var(--hmc-body);
	color: var(--hmc-grey);
	margin: .7rem 0 0;
}
.hmc-level-row {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
}
.hmc-level-name {
	font-family: var(--hmc-ui);
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hmc-white);
	line-height: 1;
}
.hmc-level-active {
	display: inline-block;
	font-family: var(--hmc-body);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hmc-ok);
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: .25rem .6rem .2rem;
	line-height: 1;
	white-space: nowrap;
}
.hmc-level-rides,
.hmc-level-next {
	margin: .35rem 0 0;
	font-size: .88rem;
	line-height: 1.45;
	color: var(--hmc-grey-dim);
}
.hmc-level-next { color: var(--hmc-grey); }

/* Inside the dark card the badge sits on the LEVEL line itself. */
.hmc-mcard-val .hmc-level-active { margin-inline-start: .45rem; vertical-align: 2px; }

.hmc-level--compact { margin-top: .45rem; }
.hmc-level--compact .hmc-level-row { justify-content: center; gap: .45rem; }
.hmc-level--compact .hmc-level-name { font-size: 1.05rem; }
.hmc-level--compact .hmc-level-rides { font-size: .8rem; text-align: center; margin-top: .25rem; }

/*
 * The directory, the profile and the card page all sit on a paper section (page.php puts every
 * plugin-shortcode page on white), so outside the dark card itself the block has to read on white.
 */
.hmc-section--paper .hmc-level-name { color: var(--hmc-paper-ink); }
.hmc-section--paper .hmc-level-rides,
.hmc-section--paper .hmc-level-next { color: var(--hmc-paper-grey); }
.hmc-section--paper .hmc-level { color: var(--hmc-paper-grey); }

@media print {
	.hmc-level-name { color: #000 !important; }
}

/* ==========================================================================
   Shop (WooCommerce)

   WooCommerce's stylesheet assumes a white page. On the club's black ground
   only the parts that fight it are corrected — prices, buttons, tabs, the
   quantity box — in the brand's own tokens. Specificity is kept above
   WooCommerce's own .woocommerce rules by leaning on the body class.
   ========================================================================== */

.woocommerce .hmc-shop ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--hmc-display);
	font-size: 1.2rem;
	color: var(--hmc-white);
}
.woocommerce .hmc-shop ul.products li.product .price,
.woocommerce .hmc-shop div.product p.price,
.woocommerce .hmc-shop div.product span.price,
.woocommerce .hmc-shop .woocommerce-Price-amount {
	color: var(--hmc-white);
	font-family: var(--hmc-ui);
	font-size: 1.5rem;
	letter-spacing: .04em;
}
.woocommerce .hmc-shop div.product .woocommerce-product-details__short-description,
.woocommerce .hmc-shop div.product .product_meta,
.woocommerce .hmc-shop div.product .woocommerce-tabs .panel,
.woocommerce .hmc-shop table.variations th,
.woocommerce .hmc-shop table.variations td { color: var(--hmc-grey); }
.woocommerce .hmc-shop table.variations th { font-family: var(--hmc-ui); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }

.woocommerce .hmc-shop a.button,
.woocommerce .hmc-shop button.button,
.woocommerce .hmc-shop button.single_add_to_cart_button {
	background: var(--hmc-red);
	color: #fff;
	border-radius: 0;
	font-family: var(--hmc-ui);
	font-size: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
}
.woocommerce .hmc-shop a.button:hover,
.woocommerce .hmc-shop button.button:hover,
.woocommerce .hmc-shop button.single_add_to_cart_button:hover { background: var(--hmc-red-deep); color: #fff; }
.woocommerce .hmc-shop button.single_add_to_cart_button.disabled,
.woocommerce .hmc-shop button.single_add_to_cart_button:disabled {
	background: var(--hmc-ink-edge);
	color: var(--hmc-grey-dim);
	opacity: 1;
}
.woocommerce .hmc-shop .quantity .qty {
	background: var(--hmc-ink-raised);
	color: var(--hmc-white);
	border: 1px solid var(--hmc-ink-edge);
	border-radius: 0;
}
.woocommerce .hmc-shop .reset_variations { color: var(--hmc-grey-dim); }

.woocommerce .hmc-shop div.product .woocommerce-tabs ul.tabs::before,
.woocommerce .hmc-shop div.product .woocommerce-tabs ul.tabs li { border-color: var(--hmc-ink-edge); }
.woocommerce .hmc-shop div.product .woocommerce-tabs ul.tabs li { background: var(--hmc-ink-raised); border-radius: 0; }
.woocommerce .hmc-shop div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce .hmc-shop div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce .hmc-shop div.product .woocommerce-tabs ul.tabs li a { color: var(--hmc-grey); font-family: var(--hmc-ui); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.woocommerce .hmc-shop div.product .woocommerce-tabs ul.tabs li.active { background: var(--hmc-ink); border-bottom-color: var(--hmc-ink); }
.woocommerce .hmc-shop div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hmc-white); }
.woocommerce .hmc-shop div.product .woocommerce-tabs .panel h2 { font-family: var(--hmc-display); color: var(--hmc-white); font-size: 1.6rem; }
.woocommerce .hmc-shop span.onsale { background: var(--hmc-red); }
.woocommerce .hmc-shop .woocommerce-message,
.woocommerce .hmc-shop .woocommerce-info,
.woocommerce .hmc-shop .woocommerce-error { background: var(--hmc-ink-raised); color: var(--hmc-grey); border-top-color: var(--hmc-red); }

/*
 * One tile, one size. Every product card is a square picture on white, the name, the price, and
 * the button pinned to the bottom — in the shop and in a product page's "Related products" alike.
 * WooCommerce floats its cards, which lets a wide mockup or a two-line name throw the row out of
 * line; a grid does not, and the mockups all sit on white so the square tile reads as one set.
 */
.woocommerce .hmc-shop ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.2rem 1.5rem;
	margin: 0;
}
.woocommerce .hmc-shop ul.products::before,
.woocommerce .hmc-shop ul.products::after { display: none; }
.woocommerce .hmc-shop ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.woocommerce .hmc-shop ul.products li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; }
.woocommerce .hmc-shop ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	margin: 0 0 1rem;
}
.woocommerce .hmc-shop ul.products li.product .woocommerce-loop-product__title { min-height: 2.6em; margin: 0 0 .4rem; padding: 0; }
.woocommerce .hmc-shop ul.products li.product .price { margin: 0 0 1rem; }
.woocommerce .hmc-shop ul.products li.product .button { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) {
	.woocommerce .hmc-shop ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.woocommerce .hmc-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
}
.woocommerce .hmc-shop section.related > h2,
.woocommerce .hmc-shop section.up-sells > h2 { font-family: var(--hmc-display); color: var(--hmc-white); font-size: 1.6rem; margin: 2.5rem 0 1.2rem; }

/* ==========================================================================
   Social sign-in

   Google's branding guidance wants its own mark on a light surface with its own
   wording, so this button deliberately does NOT take the club's red. It sits on
   the application form, which is a paper section.
   ========================================================================== */

.hmc-social { margin: 0 0 1.75rem; }

.hmc-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	width: 100%;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 4px;
	padding: .8rem 1.2rem;
	font-family: var(--hmc-body);
	font-size: .98rem;
	font-weight: 600;
	color: #3c4043;
	line-height: 1.2;
	transition: background .15s ease, box-shadow .15s ease;
}
.hmc-social-btn:hover {
	background: #f7f8f8;
	color: #3c4043;
	box-shadow: 0 1px 3px rgba(60, 64, 67, .25);
}
.hmc-social-btn:focus-visible { outline: 2px solid var(--hmc-red); outline-offset: 2px; }
.hmc-social-btn svg { flex: 0 0 auto; }

.hmc-social-note {
	margin: .7rem 0 0;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--hmc-paper-grey);
}

/* A rule with the word sitting in the gap, rather than a typed row of dashes. */
.hmc-social-or {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-top: 1.4rem;
	color: var(--hmc-paper-grey);
	font-family: var(--hmc-ui);
	font-size: 1rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.hmc-social-or::before,
.hmc-social-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--hmc-paper-edge);
}

/* On a dark surface (the sign-in page sits on the dark ground) flip the supporting text. */
.hmc-section:not(.hmc-section--paper) .hmc-social-note,
.hmc-section:not(.hmc-section--paper) .hmc-social-or { color: var(--hmc-grey-dim); }
.hmc-section:not(.hmc-section--paper) .hmc-social-or::before,
.hmc-section:not(.hmc-section--paper) .hmc-social-or::after { background: var(--hmc-ink-edge); }

/* Nextend's own button still appears on wp-login.php; keep it tidy there. */
.nsl-container { margin-bottom: 1.25rem; }
.nsl-container-buttons { display: flex; flex-direction: column; gap: .6rem; }

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

.hmc-footer {
	background: var(--hmc-black);
	border-top: 3px solid var(--hmc-red);
	padding-block: var(--hmc-section) 0;
	font-size: .92rem;
}
.hmc-footer-cols {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.hmc-footer h4 {
	font-family: var(--hmc-ui);
	font-size: 1.25rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hmc-white);
	margin-bottom: .9rem;
}
.hmc-footer ul { list-style: none; margin: 0; padding: 0; }
.hmc-footer li + li { margin-top: .45rem; }
.hmc-footer a { color: var(--hmc-grey); }
.hmc-footer a:hover { color: var(--hmc-red); }
.hmc-colophon {
	margin-top: var(--hmc-section);
	border-top: 1px solid var(--hmc-ink-edge);
	padding-block: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	color: var(--hmc-grey-dim);
	font-size: .85rem;
}
/* Payment marks, each on a small white tile so the brands' own colours read on the black ground. */
.hmc-payments { display: flex; align-items: center; gap: .5rem; }
.hmc-payments img {
	display: block;
	height: 26px;
	width: auto;
	padding: 4px 7px;
	background: #fff;
	border-radius: 4px;
	box-sizing: content-box;
}

/* ==========================================================================
   Pagination, 404, misc
   ========================================================================== */

.hmc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 2.5rem;
	font-family: var(--hmc-ui);
	letter-spacing: .1em;
}
.hmc-pagination .page-numbers {
	padding: .5rem .9rem;
	border: 1px solid var(--hmc-ink-edge);
	color: var(--hmc-white);
}
.hmc-pagination .current,
.hmc-pagination a:hover { background: var(--hmc-red); border-color: var(--hmc-red); color: var(--hmc-white); }

.hmc-404-code {
	font-family: var(--hmc-ui);
	font-size: clamp(6rem, 22vw, 14rem);
	line-height: .85;
	color: var(--hmc-red);
	font-weight: 500;
}

.hmc-notice-box {
	border: 1px solid var(--hmc-ink-edge);
	border-inline-start: 4px solid var(--hmc-red);
	background: var(--hmc-ink-raised);
	padding: 1.2rem 1.4rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.hmc-nav {
		display: none;
		position: absolute;
		top: 100%;
		inset-inline: 0;
		background: var(--hmc-ink-raised);
		border-top: 1px solid var(--hmc-ink-edge);
		box-shadow: var(--hmc-shadow);
		padding: 1rem var(--hmc-gutter);
	}
	.hmc-nav.is-open { display: block; }
	.hmc-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.hmc-nav > ul > li + li::before { display: none; }
	.hmc-nav > ul > li { border-top: 1px solid var(--hmc-ink-edge); }
	.hmc-nav a { display: block; padding: .8rem 0; }
	.hmc-nav ul ul {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 .5rem;
		min-width: 0;
	}
	.hmc-nav ul ul a { padding-inline-start: 1rem; opacity: .85; }
	.hmc-burger { display: inline-block; }
	.hmc-header .hmc-wrap { position: relative; flex-wrap: wrap; }
	.hmc-header-cta { display: none; }
}

@media (max-width: 560px) {
	.hmc-ride { grid-template-columns: 1fr; }
	.hmc-ride-date { justify-self: start; }
	.hmc-utility-left .hmc-utility-hide { display: none; }
}

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

/* Print: the ride safety sheet is meant to be carried, so it has to print. */
@media print {
	.hmc-notice, .hmc-utility, .hmc-header, .hmc-footer, .hmc-hero-actions { display: none !important; }
	body { background: #fff; color: #000; }
	h1, h2, h3, h4 { color: #000; }
	.hmc-ride { border: 1px solid #999; break-inside: avoid; }
}