/* =============================================================
   Public-facing styling for the website.
   Covers: news, fixtures, pages, documents, membership/join form.
   Clubs will style their public sites with their own theme later
   (Batch 7 settings -> CSS vars). This is a serviceable default.

   Drop-in replacement — supersedes the previous public.css.
   ============================================================= */

/* Playfair Display — used by the hero, About headline and Become-a-member
   headline. The @import MUST come before any other rule, otherwise CSS
   silently drops it and the font falls back to Georgia. (Was stuck at
   line ~1197 in earlier batches, hence the recent font regression.) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,700&display=swap');

:root {
    --pub-c-bg:       #ffffff;
    --pub-c-text:     #1a1a1a;
    --pub-c-muted:    #6b7280;
    --pub-c-soft:     #9ca3af;
    --pub-c-line:     #e5e7eb;
    --pub-c-link:     #1657d9;
    --pub-c-link-hover: #1146b3;
    --pub-c-bg-alt:   #f7f7f5;
    --pub-c-pill:     #e5e7eb;
    --pub-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --pill-c:         var(--pub-c-pill);
}

* { box-sizing: border-box; }

body.public-body {
    margin: 0;
    background: var(--pub-c-bg);
    color: var(--pub-c-text);
    font: 16px/1.6 var(--pub-font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--pub-c-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.public-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}
.public-container-narrow { max-width: 720px; }

/* ----------------------------------------------------------- */
/* Header                                                      */
/* ----------------------------------------------------------- */

.public-header {
    border-bottom: 1px solid var(--pub-c-line);
    padding: 18px 0;
    background: var(--pub-c-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}
.public-header .public-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.public-brand {
    font-weight: 700;
    color: var(--pub-c-text);
    font-size: 18px;
}
.public-brand:hover { text-decoration: none; }

.public-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.public-nav a {
    color: var(--pub-c-muted);
    font-weight: 500;
    font-size: 14px;
}
.public-nav a:hover { color: var(--pub-c-text); text-decoration: none; }
.public-nav a.is-active { color: var(--pub-c-text); }

/* ----------------------------------------------------------- */
/* Layout                                                      */
/* ----------------------------------------------------------- */

.public-main { padding: 40px 0 80px; }

.public-page-header { margin-bottom: 32px; }
.public-page-header h1 { font-size: 32px; margin: 0 0 16px; }

.public-empty {
    color: var(--pub-c-muted);
    text-align: center;
    padding: 60px 20px;
}

.public-footer {
    border-top: 1px solid var(--pub-c-line);
    padding: 24px 0;
    color: var(--pub-c-muted);
    font-size: 14px;
    text-align: center;
}

/* ----------------------------------------------------------- */
/* Category pills (used by news, fixtures, documents)          */
/* ----------------------------------------------------------- */

.news-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.news-category-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    background: var(--pill-c);
    color: var(--pub-c-text);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: opacity .12s;
}
.news-category-pill:hover { text-decoration: none; opacity: .85; }
.news-category-pill.is-active {
    background: var(--pub-c-text);
    color: var(--pub-c-bg);
}
.news-category-pill.is-small {
    font-size: 11px;
    padding: 2px 10px;
    color: var(--pub-c-bg);
    background: var(--pill-c);
}

/* ----------------------------------------------------------- */
/* News list + cards (Batch 4)                                 */
/* ----------------------------------------------------------- */

.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.news-card {
    border-radius: 8px;
    overflow: hidden;
    background: var(--pub-c-bg);
    border: 1px solid var(--pub-c-line);
    transition: border-color .12s, box-shadow .12s;
}
.news-card:hover {
    border-color: var(--pub-c-text);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.news-card-link { color: inherit; }
.news-card-link:hover { text-decoration: none; }
.news-card-image {
    aspect-ratio: 16 / 10;
    background: var(--pub-c-bg-alt);
    overflow: hidden;
}
.news-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-body { padding: 18px 20px 20px; }
.news-card-badge {
    display: inline-block;
    background: var(--pub-c-text);
    color: var(--pub-c-bg);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 8px;
}
.news-card-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.news-card-excerpt { margin: 0 0 12px; color: var(--pub-c-muted); font-size: 14px; }
.news-card-meta { font-size: 12px; color: var(--pub-c-muted); }
.news-card-meta time { font-weight: 500; }

.public-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--pub-c-line);
    font-size: 14px;
    color: var(--pub-c-muted);
}

/* Single article (used by news + fixtures detail) */
.news-article-hero {
    width: 100%;
    max-height: 480px;
    overflow: hidden;
    background: var(--pub-c-bg-alt);
    margin-bottom: 32px;
}
.news-article-hero img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    max-height: 480px;
}
.news-article-header { margin-bottom: 24px; }
.news-article-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.news-article-header h1 { font-size: 32px; margin: 0 0 12px; line-height: 1.2; }
.news-article-meta { color: var(--pub-c-muted); font-size: 14px; }
.news-article-body {
    font-size: 17px;
    line-height: 1.7;
}
.news-article-body p { margin: 0 0 1em; }
.news-article-body img { max-width: 100%; height: auto; border-radius: 4px; }
.news-article-body h2 { margin-top: 1.5em; font-size: 24px; }
.news-article-body h3 { margin-top: 1.5em; font-size: 20px; }
.news-article-body blockquote {
    border-left: 3px solid var(--pub-c-line);
    padding-left: 16px;
    margin: 1em 0;
    color: var(--pub-c-muted);
}
.news-article-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}
.news-article-body th, .news-article-body td {
    border: 1px solid var(--pub-c-line);
    padding: 8px 12px;
    text-align: left;
}
.news-article-back { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--pub-c-line); }

/* ----------------------------------------------------------- */
/* Fixtures (Batch 5)                                          */
/* ----------------------------------------------------------- */

.fixtures-list { display: flex; flex-direction: column; gap: 32px; }

.fixtures-month-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pub-c-muted);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pub-c-line);
}

.fixtures-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.fixture-row {
    border-bottom: 1px solid var(--pub-c-line);
}
.fixture-row:last-child { border-bottom: 0; }

.fixture-row-link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 8px;
    color: inherit;
    transition: background .12s;
}
.fixture-row-link:hover {
    background: var(--pub-c-bg-alt);
    text-decoration: none;
}

.fixture-date {
    flex-shrink: 0;
    width: 56px;
    text-align: center;
    border-right: 1px solid var(--pub-c-line);
    padding-right: 16px;
}
.fixture-date-day {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--pub-c-text);
}
.fixture-date-dow {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--pub-c-muted);
    margin-top: 4px;
    letter-spacing: .5px;
}

.fixture-body { flex: 1; min-width: 0; }
.fixture-name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}
.fixture-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: var(--pub-c-muted);
}
.fixture-time { font-weight: 500; }
.fixture-location { color: var(--pub-c-muted); }

.fixture-entry-badge {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--pub-c-link);
    white-space: nowrap;
}

/* Fixture detail page */
.fixture-detail-card {
    background: var(--pub-c-bg-alt);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fixture-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    flex-wrap: wrap;
}
.fixture-detail-label {
    color: var(--pub-c-muted);
    font-weight: 500;
}
.fixture-detail-value {
    color: var(--pub-c-text);
    font-weight: 500;
    text-align: right;
}

.fixture-entry-cta {
    margin: 32px 0;
    text-align: center;
}

/* Public buttons (used on fixture detail and elsewhere) */
.btn-pub {
    display: inline-block;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    transition: opacity .12s, transform .12s;
}
.btn-pub:hover { text-decoration: none; }
.btn-pub-primary {
    background: var(--pub-c-link);
    color: var(--pub-c-bg);
}
.btn-pub-primary:hover {
    background: var(--pub-c-link-hover);
    color: var(--pub-c-bg);
}

/* ----------------------------------------------------------- */
/* Pages (Batch 5)                                             */
/* ----------------------------------------------------------- */

.page-hero {
    background: var(--pub-c-bg-alt);
    padding: 60px 0 40px;
    border-bottom: 1px solid var(--pub-c-line);
}
.page-hero-with-image {
    padding: 0;
    position: relative;
    color: var(--pub-c-bg);
    background: var(--pub-c-text);
    overflow: hidden;
}
.page-hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}
.page-hero-with-image .public-container {
    position: relative;
    z-index: 1;
    padding-top: 100px;
    padding-bottom: 80px;
}
.page-hero-content h1 {
    font-size: 40px;
    margin: 0 0 12px;
    line-height: 1.1;
}
.page-hero-subtitle {
    font-size: 18px;
    margin: 0;
    opacity: .85;
    max-width: 640px;
}
.page-title {
    font-size: 32px;
    margin: 0 0 24px;
}

@media (max-width: 600px) {
    .page-hero-content h1 { font-size: 28px; }
    .page-hero-subtitle { font-size: 16px; }
    .page-hero-with-image .public-container { padding-top: 60px; padding-bottom: 50px; }
}

/* ----------------------------------------------------------- */
/* Documents (Batch 5)                                         */
/* ----------------------------------------------------------- */

.documents-category-group { margin-bottom: 40px; }
.documents-category-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pub-c-muted);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pub-c-line);
}

.documents-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.document-row {
    border-bottom: 1px solid var(--pub-c-line);
}
.document-row:last-child { border-bottom: 0; }

.document-row-link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 8px;
    color: inherit;
    transition: background .12s;
}
.document-row-link:hover {
    background: var(--pub-c-bg-alt);
    text-decoration: none;
}
.document-icon {
    flex-shrink: 0;
    color: var(--pub-c-link);
    margin-top: 2px;
}
.document-body { flex: 1; min-width: 0; }
.document-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--pub-c-link);
}
.document-row-link:hover .document-title { color: var(--pub-c-link-hover); }
.document-description {
    margin: 0 0 8px;
    color: var(--pub-c-muted);
    font-size: 14px;
}
.document-meta {
    font-size: 12px;
    color: var(--pub-c-soft);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ----------------------------------------------------------- */
/* Responsive                                                  */
/* ----------------------------------------------------------- */

@media (max-width: 600px) {
    .public-page-header h1 { font-size: 24px; }
    .news-article-header h1 { font-size: 24px; }
    .news-list { grid-template-columns: 1fr; }
    .public-main { padding: 24px 0 60px; }
    .fixture-row-link { gap: 14px; padding: 12px 4px; }
    .fixture-date { width: 48px; padding-right: 12px; }
    .fixture-date-day { font-size: 22px; }
}


/* ============================================================
   BATCH 6 — Public membership / join form
   ============================================================ */

.join-intro {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--pub-c-line);
    font-size: 17px;
    line-height: 1.65;
}
.join-intro p { margin: 0 0 1em; }
.join-intro p:last-child { margin-bottom: 0; }

.form-errors {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 14px;
}
.form-errors strong { display: block; margin-bottom: 6px; }
.form-errors ul { margin: 0; padding-left: 20px; }
.form-errors li { margin-bottom: 2px; }

/* Form sections */
.join-form .form-section {
    border: 1px solid var(--pub-c-line);
    border-radius: 8px;
    padding: 24px;
    margin: 0 0 20px;
    background: var(--pub-c-bg);
}
.join-form .form-section legend {
    padding: 0 8px;
    margin-left: -8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--pub-c-text);
}
.form-section-help {
    margin: 4px 0 16px;
    color: var(--pub-c-muted);
    font-size: 14px;
}

/* Form fields */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    flex: 1;
}
.form-field:last-child { margin-bottom: 0; }
.form-field-narrow { max-width: 140px; }

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--pub-c-text);
}
.form-req {
    color: #b91c1c;
    margin-left: 2px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field input[type="url"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    font-size: 15px;
    color: var(--pub-c-text);
    background: var(--pub-c-bg);
    transition: border-color .12s, box-shadow .12s;
    box-sizing: border-box;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--pub-c-link);
    box-shadow: 0 0 0 3px rgba(22, 87, 217, .15);
}
.form-field textarea { resize: vertical; min-height: 70px; }

.form-hint {
    font-size: 12px;
    color: var(--pub-c-soft);
    margin-top: 4px;
}

/* Multi-column row */
.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.form-row .form-field {
    min-width: 180px;
}

/* Checkbox style */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pub-c-line);
    cursor: pointer;
}
.form-checkbox:last-child { border-bottom: 0; }
.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--pub-c-link);
    flex-shrink: 0;
    cursor: pointer;
}
.form-checkbox span {
    font-size: 14px;
    color: var(--pub-c-text);
}
.form-checkbox span strong {
    display: block;
    margin-bottom: 2px;
}
.form-checkbox-required strong::after {
    content: ' *';
    color: #b91c1c;
}

/* Radio group (used for transferring yes/no, claim status) */
.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.form-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pub-c-line);
    cursor: pointer;
}
.form-radio:last-child { border-bottom: 0; }
.form-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--pub-c-link);
    flex-shrink: 0;
    cursor: pointer;
}
.form-radio span {
    font-size: 14px;
    color: var(--pub-c-text);
}
.form-radio span strong {
    display: block;
    margin-bottom: 2px;
}

/* Submit row */
.form-actions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--pub-c-line);
}
.form-actions .btn-pub {
    font-size: 16px;
    padding: 14px 32px;
    width: 100%;
    text-align: center;
    border: 0;
    cursor: pointer;
}

/* Public ghost button (used on thanks page) */
.btn-pub-ghost {
    background: transparent;
    color: var(--pub-c-link);
    border: 1px solid var(--pub-c-link);
}
.btn-pub-ghost:hover { background: var(--pub-c-link); color: var(--pub-c-bg); }

/* Thanks page */
.join-thanks {
    text-align: center;
    padding: 40px 20px;
}
.join-thanks-icon {
    color: #059669;
    margin-bottom: 16px;
}
.join-thanks h1 {
    font-size: 28px;
    margin: 0 0 16px;
}
.join-thanks-ref {
    background: var(--pub-c-bg-alt);
    padding: 12px 20px;
    border-radius: 6px;
    display: inline-block;
    margin: 16px 0;
    font-size: 16px;
}
.join-thanks p {
    max-width: 540px;
    margin: 16px auto;
    color: var(--pub-c-muted);
}
.join-thanks-actions {
    margin-top: 32px !important;
}

@media (max-width: 600px) {
    .join-form .form-section { padding: 18px; }
    .join-form .form-section legend { font-size: 16px; }
    .form-row { flex-direction: column; gap: 0; }
    .form-row .form-field { min-width: 0; }
    .form-field-narrow { max-width: none; }
}


/* ============================================================
   BATCH 7a — Membership category cards on /join
   ============================================================ */

.cat-section {
    margin: 32px 0 48px;
}
.cat-section-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 24px;
    text-align: center;
}

/* Card grid - responsive */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Individual card */
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pub-c-bg);
    border: 2px solid var(--pub-c-line);
    border-radius: 10px;
    padding: 24px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cat-card:hover {
    border-color: var(--pub-c-link);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 87, 217, .1);
}
.cat-card.is-selected {
    border-color: var(--pub-c-link);
    background: rgba(22, 87, 217, .03);
    box-shadow: 0 0 0 4px rgba(22, 87, 217, .12);
}
.cat-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cat-card-featured {
    border-color: var(--pub-c-link);
}
.cat-card-featured-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--pub-c-link);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 10px;
    border-radius: 10px;
}

.cat-card-tag {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--pub-c-muted);
    margin-bottom: 4px;
    font-weight: 600;
}

.cat-card-name {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--pub-c-text);
}

.cat-card-price {
    margin: 0 0 16px;
    line-height: 1;
}
.cat-card-price-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--pub-c-text);
}
.cat-card-price-period {
    font-size: 14px;
    color: var(--pub-c-muted);
    font-weight: 400;
    margin-left: 4px;
}

.cat-card-detail {
    margin: 0 0 16px;
    color: var(--pub-c-muted);
    font-size: 14px;
    line-height: 1.5;
}

.cat-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    flex-grow: 1;
}
.cat-card-features li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-size: 14px;
    color: var(--pub-c-text);
}
.cat-card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: 700;
}

.cat-card-select-state {
    margin-top: auto;
    text-align: center;
    padding: 10px 16px;
    background: var(--pub-c-bg-alt);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pub-c-muted);
}
.cat-card.is-selected .cat-card-select-state {
    background: var(--pub-c-link);
    color: #fff;
}
.cat-card-select-active { display: none; }
.cat-card.is-selected .cat-card-select-default { display: none; }
.cat-card.is-selected .cat-card-select-active { display: inline; }

/* Supporter card row - distinct from membership cards */
.cat-supporter-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px dashed var(--pub-c-line);
}
.cat-supporter-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--pub-c-bg-alt);
    border: 1px solid var(--pub-c-line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--pub-c-text);
    transition: border-color .15s, background .15s;
}
.cat-supporter-link:hover {
    border-color: var(--pub-c-link);
    background: var(--pub-c-bg);
    text-decoration: none;
}
.cat-supporter-link .cat-card-name { margin-bottom: 4px; font-size: 18px; }
.cat-supporter-link .cat-card-detail { margin: 0; font-size: 13px; }
.cat-supporter-cta {
    color: var(--pub-c-link);
    font-weight: 600;
    white-space: nowrap;
    margin-left: 16px;
}

/* Form summary at bottom of form */
.form-actions-summary {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--pub-c-bg-alt);
    border-radius: 6px;
    font-size: 14px;
    color: var(--pub-c-muted);
    text-align: center;
}
.form-actions-summary.is-good {
    background: rgba(5, 150, 105, .08);
    color: #047857;
    font-weight: 500;
}

/* ============================================================
   BATCH 7a — Supporter donation amount picker
   ============================================================ */

.amount-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.amount-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 8px;
    background: var(--pub-c-bg);
    border: 2px solid var(--pub-c-line);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.amount-option:hover {
    border-color: var(--pub-c-link);
}
.amount-option.is-selected {
    border-color: var(--pub-c-link);
    background: rgba(22, 87, 217, .05);
}
.amount-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.amount-option-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--pub-c-text);
}

/* Field prefix styles (used for £ symbol on amount input) */
.field-prefix {
    display: flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: var(--pub-c-bg);
}
.field-prefix:focus-within {
    border-color: var(--pub-c-link);
    box-shadow: 0 0 0 3px rgba(22, 87, 217, .15);
}
.field-prefix-tag {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--pub-c-bg-alt);
    color: var(--pub-c-muted);
    font-weight: 500;
    border-right: 1px solid var(--pub-c-line);
}
.field-prefix input {
    flex: 1;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    background: transparent !important;
}
.field-prefix input:focus { outline: none !important; }

/* ============================================================
   BATCH 7a — BACS payment card
   ============================================================ */

.bacs-card {
    margin-top: 24px;
    padding: 28px;
    background: var(--pub-c-bg);
    border: 2px solid var(--pub-c-line);
    border-radius: 10px;
}
.bacs-card h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
}
.bacs-card > p {
    margin: 0 0 20px;
    color: var(--pub-c-muted);
}

.bacs-pairs {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 16px;
    margin: 0;
    padding: 16px 20px;
    background: var(--pub-c-bg-alt);
    border-radius: 6px;
    font-size: 15px;
}
.bacs-pairs dt {
    color: var(--pub-c-muted);
    font-weight: 500;
}
.bacs-pairs dd {
    margin: 0;
    color: var(--pub-c-text);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.bacs-help {
    margin: 16px 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--pub-c-muted);
}

@media (max-width: 600px) {
    .cat-grid { grid-template-columns: 1fr; }
    .amount-grid { grid-template-columns: repeat(2, 1fr); }
    .bacs-pairs { grid-template-columns: 1fr; gap: 0; }
    .bacs-pairs dt { padding-top: 10px; }
    .bacs-pairs dd { padding-bottom: 8px; }
    .cat-supporter-link { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cat-supporter-cta { margin-left: 0; }
}


/* ============================================================
   BATCH 7a fix #4 — /support frequency picker
   ============================================================ */

.freq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.freq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--pub-c-bg);
    border: 2px solid var(--pub-c-line);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, background .12s, transform .12s;
    font: inherit;
    color: inherit;
}
.freq-card:hover:not(.is-disabled) {
    border-color: var(--pub-c-link);
    transform: translateY(-2px);
}
.freq-card.is-selected {
    border-color: var(--pub-c-link);
    background: rgba(22, 87, 217, .04);
    box-shadow: 0 0 0 3px rgba(22, 87, 217, .12);
}
.freq-card.is-disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.freq-card.is-disabled.is-selected {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, .05);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .12);
}
.freq-card-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--pub-c-text);
    margin-bottom: 4px;
}
.freq-card-sub {
    font-size: 13px;
    color: var(--pub-c-muted);
}
.freq-card-soon {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.form-notice {
    margin: 16px 0 0;
    padding: 14px 18px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    font-size: 14px;
    line-height: 1.5;
}

/* Suggested amounts grid - tighter for the support page */
.amount-grid-suggested {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 600px) {
    .freq-grid { grid-template-columns: 1fr 1fr; }
    .amount-grid-suggested { grid-template-columns: 1fr 1fr; }
}


/* =============================================================
   BATCH 8 — Public homepage (heritage aesthetic)
   ============================================================= */

/* ---- Heritage design tokens ---- */
:root {
    --hm-c-navy:      #0f1e3d;
    --hm-c-navy-deep: #0a1530;
    --hm-c-cream:     #f4ede0;
    --hm-c-cream-alt: #ebe2d2;
    --hm-c-paper:     #faf6ed;
    --hm-c-ink:       #1c2233;
    --hm-c-muted:     #5d6478;
    --hm-c-line:      #d8d0bf;
    --hm-c-accent:    #c1432e;
    --hm-c-accent-hover: #a3372d;
    --hm-c-gold:      #b8923a;

    --hm-font-serif:  Georgia, 'Times New Roman', Times, serif;
    --hm-font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
    --hm-font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hm-font-condensed: -apple-system, BlinkMacSystemFont, 'Segoe UI Condensed', 'Roboto Condensed', sans-serif;
}

/* ---- Body in heritage mode ---- */
body.heritage-body {
    margin: 0;
    background: var(--hm-c-paper);
    color: var(--hm-c-ink);
    font: 16px/1.7 var(--hm-font-serif);
    -webkit-font-smoothing: antialiased;
}

/* (Playfair Display @import moved to top of file — was here previously
   but @import after other rules is silently dropped by browsers.) */

.heritage-body h1, .heritage-body h2, .heritage-body h3 {
    font-family: var(--hm-font-display);
    font-weight: 600;
    color: var(--hm-c-navy);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.heritage-body h2 em, .heritage-body h1 em {
    font-style: italic;
    color: var(--hm-c-accent);
    font-weight: 700;
}

.heritage-body a {
    color: var(--hm-c-accent);
    text-decoration: none;
    transition: color .15s;
}
.heritage-body a:hover { color: var(--hm-c-accent-hover); }

/* ---- Heritage container ---- */
.h-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}
.h-container-narrow {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ---- Top utility bar ---- */
.h-utility-bar {
    background: var(--hm-c-navy-deep);
    color: var(--hm-c-cream);
    font-family: var(--hm-font-sans);
    font-size: 13px;
    padding: 8px 0;
}
.h-utility-bar .h-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.h-utility-bar-left {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--hm-c-cream-alt);
}
.h-utility-bar-right {
    display: flex;
    gap: 18px;
    align-items: center;
}
.h-utility-bar a {
    color: var(--hm-c-cream-alt);
    text-decoration: none;
    font-size: 13px;
    transition: color .15s;
}
.h-utility-bar a:hover { color: #fff; }
.h-utility-bar .h-cta-mini {
    background: var(--hm-c-accent);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 12px;
}
.h-utility-bar .h-cta-mini:hover {
    background: var(--hm-c-accent-hover);
    color: #fff !important;
}

/* ---- Main header (crest + nav) ---- */
.h-main-header {
    background: var(--hm-c-paper);
    border-bottom: 1px solid var(--hm-c-line);
    padding: 24px 0;
}
.h-main-header .h-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}
.h-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--hm-c-navy);
}
.h-brand:hover { color: var(--hm-c-navy); }
.h-brand-crest {
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.h-brand-text {
    line-height: 1.15;
}
.h-brand-name {
    font-family: var(--hm-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--hm-c-navy);
}
.h-brand-name em {
    font-style: italic;
    color: var(--hm-c-accent);
}
.h-brand-est {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hm-c-muted);
    margin-top: 2px;
}

/* Main nav */
.h-main-nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.h-main-nav a, .h-main-nav span.h-nav-disabled {
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hm-c-navy);
    padding: 8px 14px;
    text-decoration: none;
    transition: color .15s;
    position: relative;
}
.h-main-nav a:hover { color: var(--hm-c-accent); }
.h-main-nav a.is-active { color: var(--hm-c-accent); }
.h-main-nav .h-nav-disabled {
    color: var(--hm-c-muted);
    cursor: not-allowed;
    opacity: 0.65;
}
.h-main-nav .h-nav-soon {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    background: var(--hm-c-gold);
    color: #fff;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    vertical-align: middle;
    font-weight: 700;
}

.h-cta-primary {
    background: var(--hm-c-accent);
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 3px;
    font-family: var(--hm-font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background .15s, transform .15s;
    display: inline-block;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}
.h-cta-primary:hover {
    background: var(--hm-c-accent-hover);
    color: #fff !important;
    transform: translateY(-1px);
}

.h-cta-ghost {
    background: transparent;
    color: var(--hm-c-navy) !important;
    padding: 12px 24px;
    border: 2px solid var(--hm-c-navy);
    border-radius: 3px;
    font-family: var(--hm-font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background .15s, color .15s;
    display: inline-block;
    text-decoration: none;
}
.h-cta-ghost:hover {
    background: var(--hm-c-navy);
    color: #fff !important;
}

/* ---- Hero section ---- */
.h-hero {
    background: var(--hm-c-paper);
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--hm-c-line);
}
.h-hero .h-container {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 60px;
    align-items: center;
}
.h-hero-eyebrow {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hm-c-accent);
    margin-bottom: 16px;
    font-weight: 700;
}
.h-hero-tagline h1,
.h-hero-tagline > p {
    font-family: var(--hm-font-display);
    font-size: 64px;
    line-height: 1.05;
    font-weight: 700;
    color: var(--hm-c-navy);
    margin: 0 0 28px;
    letter-spacing: -0.02em;
}
.h-hero-tagline em {
    font-style: italic;
    color: var(--hm-c-accent);
}
.h-hero-lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--hm-c-ink);
    margin: 0 0 32px;
    max-width: 560px;
}
.h-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Next fixture card on right side of hero */
.h-next-fixture {
    background: var(--hm-c-navy);
    color: var(--hm-c-cream);
    padding: 32px 28px;
    border-radius: 4px;
    box-shadow: 0 18px 40px -20px rgba(15, 30, 61, .4);
}
.h-next-fixture-eyebrow {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hm-c-gold);
    font-weight: 700;
    margin-bottom: 18px;
}
.h-next-fixture-date {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--hm-font-display);
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 16px;
}
.h-next-fixture-day {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.h-next-fixture-month {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--hm-font-sans);
    color: var(--hm-c-cream-alt);
    font-weight: 600;
}
.h-next-fixture-name {
    font-family: var(--hm-font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
    line-height: 1.25;
}
.h-next-fixture-meta {
    font-family: var(--hm-font-sans);
    font-size: 14px;
    color: var(--hm-c-cream-alt);
    margin-bottom: 18px;
}
.h-next-fixture-link {
    color: var(--hm-c-gold) !important;
    font-family: var(--hm-font-sans);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.h-next-fixture-link:hover { color: #fff !important; }

/* ---- News ticker (scrolling marquee) ---- */
.h-ticker {
    background: var(--hm-c-navy);
    color: var(--hm-c-cream);
    padding: 14px 0;
    overflow: hidden;
    border-bottom: 4px solid var(--hm-c-gold);
}
.h-ticker-track {
    display: flex;
    gap: 40px;
    white-space: nowrap;
    animation: h-ticker-scroll 45s linear infinite;
    font-family: var(--hm-font-sans);
    font-size: 14px;
    letter-spacing: 0.04em;
}
.h-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.h-ticker-item::before {
    content: "★";
    color: var(--hm-c-gold);
    font-size: 12px;
}
@keyframes h-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---- Section base ---- */
.h-section {
    padding: 90px 0;
}
.h-section-eyebrow {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hm-c-accent);
    font-weight: 700;
    margin-bottom: 14px;
}
.h-section-title {
    font-family: var(--hm-font-display);
    font-size: 48px;
    font-weight: 700;
    color: var(--hm-c-navy);
    line-height: 1.1;
    margin: 0 0 32px;
    letter-spacing: -0.015em;
    max-width: 800px;
}
.h-section-title em {
    font-style: italic;
    color: var(--hm-c-accent);
}

/* ---- About section ---- */
.h-about {
    background: var(--hm-c-paper);
}
.h-about-prose {
    max-width: 720px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--hm-c-ink);
    margin-bottom: 50px;
}
.h-about-prose p { margin: 0 0 18px; }
.h-about-prose strong { color: var(--hm-c-navy); }

.h-discipline-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}
.h-discipline-pill {
    background: var(--hm-c-cream);
    color: var(--hm-c-navy);
    padding: 7px 18px;
    border-radius: 20px;
    font-family: var(--hm-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--hm-c-line);
}

/* Three-column stat blocks */
.h-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.h-stat {
    border-top: 3px solid var(--hm-c-accent);
    padding-top: 22px;
}
.h-stat h4 {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hm-c-accent);
    margin: 0 0 8px;
}
.h-stat h3 {
    font-family: var(--hm-font-display);
    font-size: 24px;
    color: var(--hm-c-navy);
    margin: 0 0 12px;
    line-height: 1.2;
    font-weight: 600;
}
.h-stat p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--hm-c-muted);
    margin: 0;
}

/* ---- News section ---- */
.h-news {
    background: var(--hm-c-cream);
    border-top: 1px solid var(--hm-c-line);
}
.h-news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}
.h-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.h-news-card {
    background: var(--hm-c-paper);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hm-c-line);
}
.h-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -16px rgba(15, 30, 61, .3);
    color: inherit;
}
.h-news-card-image {
    width: 100%;
    aspect-ratio: 16/10;
    background: var(--hm-c-navy);
    object-fit: cover;
    display: block;
}
.h-news-card-image-placeholder {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--hm-c-navy) 0%, var(--hm-c-navy-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hm-c-gold);
    font-family: var(--hm-font-display);
    font-size: 32px;
    font-style: italic;
}
.h-news-card-body {
    padding: 22px 24px 28px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.h-news-card-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hm-c-muted);
    margin-bottom: 12px;
}
.h-news-card-tag {
    color: var(--hm-c-accent);
    font-weight: 700;
}
.h-news-card-title {
    font-family: var(--hm-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--hm-c-navy);
    margin: 0;
    line-height: 1.3;
}

/* ---- Fixtures section ---- */
.h-fixtures {
    background: var(--hm-c-paper);
}
.h-fixtures-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}
.h-fixtures-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--hm-c-line);
}
.h-fixture-row {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    gap: 32px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid var(--hm-c-line);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.h-fixture-row:hover {
    background: var(--hm-c-cream);
    color: inherit;
}
.h-fixture-date {
    text-align: center;
    border-right: 2px solid var(--hm-c-accent);
    padding-right: 24px;
    line-height: 1;
}
.h-fixture-date-day {
    font-family: var(--hm-font-display);
    font-size: 38px;
    font-weight: 700;
    color: var(--hm-c-navy);
    display: block;
}
.h-fixture-date-month {
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hm-c-accent);
    font-weight: 700;
    display: block;
    margin-top: 4px;
}
.h-fixture-name {
    font-family: var(--hm-font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--hm-c-navy);
    margin: 0 0 4px;
    line-height: 1.3;
}
.h-fixture-meta {
    font-size: 14px;
    color: var(--hm-c-muted);
}
.h-fixture-discipline {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hm-c-muted);
    background: var(--hm-c-cream);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
}
.h-fixture-arrow {
    color: var(--hm-c-accent);
    font-size: 22px;
    font-weight: 700;
}

.h-section-link {
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hm-c-accent);
}
.h-section-link:hover { color: var(--hm-c-accent-hover); }

/* ---- Heritage block ---- */
.h-heritage {
    background: var(--hm-c-navy);
    color: var(--hm-c-cream);
    padding: 0;
}
.h-heritage .h-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    padding: 0;
    max-width: none;
}
.h-heritage-image {
    background: var(--hm-c-navy-deep);
    background-size: cover;
    background-position: center;
    min-height: 480px;
}
.h-heritage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.h-heritage-text {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
}
.h-heritage-text strong {
    display: block;
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hm-c-gold);
    font-weight: 700;
    margin-bottom: 18px;
}
.h-heritage-text p {
    font-family: var(--hm-font-display);
    font-size: 26px;
    line-height: 1.4;
    color: var(--hm-c-cream);
    margin: 0;
    font-style: italic;
    font-weight: 500;
}

/* ---- Join CTA section ---- */
.h-join-cta {
    background: var(--hm-c-cream);
    text-align: center;
    padding: 110px 0;
    border-top: 1px solid var(--hm-c-line);
}
.h-join-cta-eyebrow {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hm-c-accent);
    font-weight: 700;
    margin-bottom: 22px;
}
.h-join-cta-title {
    font-family: var(--hm-font-display);
    font-size: 56px;
    font-weight: 700;
    color: var(--hm-c-navy);
    line-height: 1.1;
    margin: 0 auto 24px;
    max-width: 800px;
    letter-spacing: -0.02em;
}
.h-join-cta-title em {
    font-style: italic;
    color: var(--hm-c-accent);
}
.h-join-cta-body {
    font-size: 18px;
    line-height: 1.65;
    color: var(--hm-c-ink);
    max-width: 660px;
    margin: 0 auto 36px;
}

/* ---- Footer ---- */
.h-footer {
    background: var(--hm-c-navy-deep);
    color: var(--hm-c-cream);
    padding: 70px 0 28px;
}
.h-footer .h-container {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 50px;
}
.h-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.h-footer-brand img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.h-footer-name {
    font-family: var(--hm-font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.h-footer-est {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hm-c-gold);
    margin-top: -6px;
}
.h-footer-blurb {
    font-size: 14px;
    line-height: 1.7;
    color: var(--hm-c-cream-alt);
    max-width: 280px;
}
.h-footer h4 {
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hm-c-gold);
    font-weight: 700;
    margin: 0 0 18px;
}
.h-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.h-footer li {
    margin-bottom: 10px;
}
.h-footer li a {
    color: var(--hm-c-cream-alt);
    text-decoration: none;
    font-size: 14px;
    transition: color .15s;
}
.h-footer li a:hover { color: #fff; }

.h-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 22px;
    text-align: center;
    font-size: 12px;
    color: var(--hm-c-cream-alt);
    font-family: var(--hm-font-sans);
    letter-spacing: 0.05em;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
    .h-hero .h-container { grid-template-columns: 1fr; gap: 40px; }
    .h-hero-tagline h1, .h-hero-tagline > p { font-size: 44px; }
    .h-section { padding: 60px 0; }
    .h-section-title { font-size: 36px; }
    .h-stats-grid { grid-template-columns: 1fr; }
    .h-news-grid { grid-template-columns: 1fr; }
    .h-heritage .h-container { grid-template-columns: 1fr; }
    .h-heritage-image { min-height: 280px; }
    .h-heritage-text { padding: 50px 28px; }
    .h-heritage-text p { font-size: 20px; }
    .h-join-cta-title { font-size: 36px; }
    .h-footer .h-container { grid-template-columns: 1fr 1fr; gap: 32px; }
    .h-main-header .h-container { grid-template-columns: 1fr; gap: 16px; }
    .h-main-nav { justify-content: flex-start; }
    .h-utility-bar .h-container { flex-direction: column; gap: 8px; }
    .h-fixture-row { grid-template-columns: 70px 1fr; gap: 16px; }
    .h-fixture-discipline, .h-fixture-arrow { display: none; }
}

@media (max-width: 600px) {
    .h-footer .h-container { grid-template-columns: 1fr; }
    .h-news-header, .h-fixtures-header { flex-direction: column; align-items: flex-start; gap: 16px; }
}


/* =============================================================
   BATCH 8 fix #1 — Tighter proposal match
   ============================================================= */

/* ---- Italic emphasis: gold instead of red ---- */
.heritage-body h1 em,
.heritage-body h2 em,
.h-brand-name em,
.h-hero-tagline em,
.h-section-title em,
.h-join-cta-title em {
    color: var(--hm-c-gold);
    font-style: italic;
    font-weight: 700;
}

/* ---- CTAs: navy primary, outline ghost ---- */
.h-cta-primary {
    background: var(--hm-c-navy);
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 3px;
    font-family: var(--hm-font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background .15s, transform .15s;
    display: inline-block;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}
.h-cta-primary:hover {
    background: var(--hm-c-navy-deep);
    color: #fff !important;
    transform: translateY(-1px);
}

/* The utility bar's tiny CTA stays red — needs to pop against navy bar */
.h-utility-bar .h-cta-mini {
    background: var(--hm-c-accent);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Ghost CTA on dark hero */
.h-cta-ghost-light {
    background: transparent;
    color: #fff !important;
    padding: 14px 28px;
    border: 2px solid #fff;
    border-radius: 3px;
    font-family: var(--hm-font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background .15s, color .15s;
    display: inline-block;
    text-decoration: none;
}
.h-cta-ghost-light:hover {
    background: #fff;
    color: var(--hm-c-navy) !important;
}

/* ---- Header layout: logo left, nav right (no header CTA) ---- */
.h-main-header {
    background: var(--hm-c-paper);
    border-bottom: 1px solid var(--hm-c-line);
    padding: 18px 0;
}
.h-main-header .h-container {
    display: flex;
    align-items: center;
    gap: 36px;
    grid-template-columns: none;
}
.h-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--hm-c-navy);
    flex-shrink: 0;
}
.h-brand-crest { width: 56px; height: 56px; }
.h-brand-name { font-size: 20px; }
.h-brand-est { font-size: 10px; }

.h-main-nav {
    display: flex;
    gap: 0;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Nav items + dropdowns */
.h-nav-item {
    position: relative;
}
.h-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hm-c-navy);
    padding: 12px 14px;
    text-decoration: none;
    transition: color .15s;
    line-height: 1;
    cursor: pointer;
}
.h-nav-link:hover { color: var(--hm-c-accent); }
.h-nav-link.is-active { color: var(--hm-c-accent); }
.h-nav-link.is-coming-soon {
    opacity: 0.5;
    pointer-events: auto; /* Still clickable - takes you to Coming Soon page */
}
.h-nav-soon-icon {
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.85;
}
.h-nav-chevron {
    margin-left: 4px;
    font-size: 9px;
    transition: transform .15s;
}
.h-nav-has-dropdown:hover .h-nav-chevron,
.h-nav-has-dropdown.is-open .h-nav-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */
.h-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--hm-c-paper);
    border: 1px solid var(--hm-c-line);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 14px 30px -16px rgba(15, 30, 61, .35);
    min-width: 220px;
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, visibility .15s, transform .15s;
    z-index: 100;
}

/* Hover on desktop reveals dropdown */
@media (hover: hover) {
    .h-nav-has-dropdown:hover .h-nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* Touch / tap-toggle behaviour on mobile (controlled by JS adding is-open) */
.h-nav-has-dropdown.is-open .h-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.h-nav-dropdown-link {
    display: block;
    padding: 10px 18px;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--hm-c-navy);
    text-decoration: none;
    transition: background .12s, color .12s;
    border-left: 3px solid transparent;
}
.h-nav-dropdown-link:hover {
    background: var(--hm-c-cream);
    color: var(--hm-c-accent);
    border-left-color: var(--hm-c-accent);
}
.h-nav-dropdown-link.is-active {
    color: var(--hm-c-accent);
    border-left-color: var(--hm-c-accent);
}
.h-nav-dropdown-link.is-coming-soon {
    opacity: 0.5;
}

/* Hide previous heritage CTA outside utility bar — header now has no CTA */
.h-main-header .h-cta-primary { display: none; }

/* ---- Hero: dark immersive ---- */
.h-hero-dark {
    background-color: var(--hm-c-navy-deep);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 130px 0 110px;
    color: var(--hm-c-cream);
    border-bottom: 0;
    position: relative;
}
.h-hero-dark .h-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
}
.h-hero-dark .h-hero-eyebrow {
    color: var(--hm-c-gold);
    font-size: 12px;
    letter-spacing: 0.22em;
    margin-bottom: 24px;
}
.h-hero-dark .h-hero-tagline h1,
.h-hero-dark .h-hero-tagline > p {
    font-family: var(--hm-font-display);
    font-size: 88px;
    line-height: 0.98;
    font-weight: 700;
    color: #fff;
    margin: 0 0 36px;
    letter-spacing: -0.025em;
}
.h-hero-dark .h-hero-tagline em {
    color: var(--hm-c-gold);
    font-style: italic;
    font-weight: 700;
}
.h-hero-dark .h-hero-lede {
    color: var(--hm-c-cream-alt);
    font-size: 19px;
    line-height: 1.65;
    max-width: 580px;
    margin: 0 0 38px;
}

/* Floating fixture card on hero (sits on photo) */
.h-next-fixture-floating {
    background: rgba(10, 21, 48, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 146, 58, 0.35);
    color: var(--hm-c-cream);
    padding: 32px 30px;
    border-radius: 4px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.h-next-fixture-floating .h-next-fixture-eyebrow {
    color: var(--hm-c-gold);
    font-size: 11px;
    letter-spacing: 0.22em;
}
.h-next-fixture-floating .h-next-fixture-day {
    font-size: 72px;
    color: #fff;
}
.h-next-fixture-floating .h-next-fixture-month {
    color: var(--hm-c-gold);
    font-size: 14px;
    letter-spacing: 0.12em;
}
.h-next-fixture-floating .h-next-fixture-name {
    color: #fff;
    font-size: 24px;
}
.h-next-fixture-floating .h-next-fixture-link {
    color: var(--hm-c-gold) !important;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 14px;
    display: block;
    margin-top: 6px;
}
.h-next-fixture-floating .h-next-fixture-link:hover {
    color: #fff !important;
}

/* ---- Coming Soon page styling ---- */
.h-coming-soon {
    background: var(--hm-c-paper);
    padding: 120px 0 140px;
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.h-coming-soon-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 28px;
    opacity: 0.85;
}
.h-coming-soon-title {
    font-family: var(--hm-font-display);
    font-size: 56px;
    font-weight: 700;
    color: var(--hm-c-navy);
    line-height: 1.05;
    margin: 0 0 22px;
    letter-spacing: -0.02em;
}
.h-coming-soon-lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--hm-c-muted);
    max-width: 540px;
    margin: 0 auto 36px;
}
.h-coming-soon-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.h-coming-soon-actions .h-cta-ghost {
    background: transparent;
    color: var(--hm-c-navy) !important;
    padding: 14px 28px;
    border: 2px solid var(--hm-c-navy);
    border-radius: 3px;
    font-family: var(--hm-font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background .15s, color .15s;
    display: inline-block;
    text-decoration: none;
}
.h-coming-soon-actions .h-cta-ghost:hover {
    background: var(--hm-c-navy);
    color: #fff !important;
}

/* ---- Regular page (heritage-styled) ---- */
.h-page {
    background: var(--hm-c-paper);
    padding-bottom: 80px;
}
.h-page-header {
    background: var(--hm-c-navy);
    color: var(--hm-c-cream);
    padding: 80px 0 60px;
    margin-bottom: 60px;
    border-bottom: 4px solid var(--hm-c-gold);
}
.h-page-title {
    font-family: var(--hm-font-display);
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.h-page-subtitle {
    font-size: 18px;
    color: var(--hm-c-cream-alt);
    margin: 0;
    max-width: 720px;
    line-height: 1.6;
}
.h-page-body {
    padding: 20px 0;
}
.h-prose {
    font-family: var(--hm-font-serif);
    font-size: 17px;
    line-height: 1.8;
    color: var(--hm-c-ink);
    max-width: 720px;
}
.h-prose h2 {
    font-family: var(--hm-font-display);
    font-size: 32px;
    color: var(--hm-c-navy);
    margin: 40px 0 16px;
}
.h-prose h3 {
    font-family: var(--hm-font-display);
    font-size: 24px;
    color: var(--hm-c-navy);
    margin: 32px 0 12px;
}
.h-prose p { margin: 0 0 18px; }
.h-prose strong { color: var(--hm-c-navy); }
.h-prose em { font-style: italic; color: var(--hm-c-accent); }
.h-prose ul, .h-prose ol { margin: 0 0 18px; padding-left: 22px; }
.h-prose li { margin-bottom: 6px; }
.h-prose a { color: var(--hm-c-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.h-prose a:hover { color: var(--hm-c-accent-hover); }

/* ---- Section title bumped up ---- */
.h-section { padding: 110px 0; }
.h-section-title { font-size: 56px; }

/* ---- Tighter proposal Responsive ---- */
@media (max-width: 1100px) {
    .h-hero-dark .h-container { grid-template-columns: 1fr; gap: 48px; }
    .h-hero-dark .h-hero-tagline h1,
    .h-hero-dark .h-hero-tagline > p { font-size: 64px; }
}
@media (max-width: 980px) {
    .h-hero-dark { padding: 80px 0 70px; }
    .h-hero-dark .h-hero-tagline h1,
    .h-hero-dark .h-hero-tagline > p { font-size: 48px; }
    .h-section-title { font-size: 36px; }
    .h-section { padding: 70px 0; }
    .h-page-title { font-size: 44px; }
    .h-coming-soon-title { font-size: 36px; }

    /* Header collapses */
    .h-main-header .h-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .h-main-nav {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 720px) {
    .h-main-nav { gap: 0; }
    .h-nav-link { padding: 10px 10px; font-size: 12px; }
    .h-nav-dropdown { left: 0; right: 0; }
}

@media (max-width: 720px) {
    .h-page-header {
        margin-bottom: 24px !important;
    }
}


/* =============================================================
   BATCH 8 fix #3 — Blue primary palette, frosted card, polish
   =============================================================
   Pivot: #1657d9 blue is now PRIMARY (italics, links, eyebrows,
   buttons), gold is reserved for tiny accents only.
   ============================================================= */

/* Override heritage tokens — keep variable names but redefine values */
:root {
    --hm-c-accent:       #1657d9;        /* blue primary (was red) */
    --hm-c-accent-hover: #1146b3;        /* blue darker */
    /* gold remains as-is — used sparingly in accents */
}

/* All italic emphasis becomes blue */
.heritage-body h1 em,
.heritage-body h2 em,
.h-brand-name em,
.h-hero-tagline em,
.h-section-title em,
.h-join-cta-title em,
.h-prose em {
    color: var(--hm-c-accent);
    font-style: italic;
    font-weight: 700;
}

/* Eyebrow text on light backgrounds: blue */
.h-section-eyebrow {
    color: var(--hm-c-accent);
}

/* Eyebrow text on DARK backgrounds (hero, fixtures, heritage, footer): gold */
.h-hero-dark .h-hero-eyebrow,
.h-fixtures .h-section-eyebrow,
.h-heritage .h-section-eyebrow,
.h-next-fixture-eyebrow,
.h-utility-bar-left,
.h-footer h4,
.h-footer-est,
.h-join-cta-eyebrow {
    color: var(--hm-c-gold);
}

/* Section title text inside dark sections stays white, italic stays gold accent */
.h-fixtures .h-section-title { color: #fff; }
.h-fixtures .h-section-title em { color: var(--hm-c-gold); }

/* Section link (e.g. "Full Calendar →" on dark, "All News →" on light) */
.h-section-link {
    color: var(--hm-c-accent);
}
.h-fixtures .h-section-link {
    color: #fff;
    border-bottom: 2px solid var(--hm-c-gold);
    padding-bottom: 4px;
}
.h-fixtures .h-section-link:hover {
    color: var(--hm-c-gold);
}

/* News section accents → blue */
.h-news-card-tag,
.h-news-card-title {
    color: var(--hm-c-accent);
}
.h-news .h-section-title em { color: var(--hm-c-accent); }

/* Discipline pills border + text on light */
.h-discipline-pill {
    color: var(--hm-c-accent);
    border-color: var(--hm-c-accent);
}

/* Stat top-borders: blue */
.h-stat {
    border-top-color: var(--hm-c-accent);
}
.h-stat h4 { color: var(--hm-c-accent); }

/* Page hero (regular page header) gold accent stays */

/* ---- Next Fixture card: frosted glass ---- */
.h-next-fixture-floating {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-left: 4px solid var(--hm-c-gold);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 32px;
    border-radius: 4px;
    color: var(--hm-c-cream);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}

/* ---- Fixtures section: dark navy with serif numbers ---- */
.h-fixtures {
    background: var(--hm-c-navy);
    color: var(--hm-c-cream);
    border-bottom: 4px solid var(--hm-c-gold);
}
.h-fixtures-list {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.h-fixture-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--hm-c-cream);
    grid-template-columns: 100px 1fr auto auto;
    gap: 28px;
    padding: 24px 0;
}
.h-fixture-row:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--hm-c-cream);
}
.h-fixture-date {
    border-right: 0;
    padding-right: 0;
}
.h-fixture-date-day {
    font-family: var(--hm-font-display);
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    display: block;
    line-height: 1;
}
.h-fixture-date-month {
    color: var(--hm-c-gold);
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-top: 6px;
}
.h-fixture-name {
    font-family: var(--hm-font-display);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
}
.h-fixture-meta {
    color: var(--hm-c-cream-alt);
    font-size: 14px;
    margin-top: 4px;
}

/* Discipline tags on dark fixture rows: bordered gold */
.h-fixture-discipline {
    color: var(--hm-c-gold);
    border: 1px solid var(--hm-c-gold);
    background: transparent;
    padding: 6px 14px;
    border-radius: 2px;
    font-size: 11px;
    letter-spacing: 0.14em;
    font-weight: 700;
    text-transform: uppercase;
}

.h-fixture-arrow {
    color: var(--hm-c-cream-alt);
    font-size: 20px;
    font-weight: 400;
}
.h-fixture-row:hover .h-fixture-arrow {
    color: #fff;
}

/* ---- Buttons: navy primary, blue is for italic emphasis only ---- */
/* h-cta-primary already navy from fix #1 */
/* CTA hover stays navy-deep */

/* Utility bar — blue accent for the tiny CTA matches new palette */
.h-utility-bar .h-cta-mini {
    background: var(--hm-c-accent);
    color: #fff !important;
}
.h-utility-bar .h-cta-mini:hover {
    background: var(--hm-c-accent-hover);
    color: #fff !important;
}

/* Hero "Upcoming Fixtures" ghost button stays white-on-dark */

/* ---- Heritage block (dark) — italic stays gold for visual contrast ---- */
.h-heritage-text strong {
    color: var(--hm-c-gold);
}
.h-heritage-text p em {
    color: var(--hm-c-accent);
    font-style: italic;
}

/* Heritage caption italic emphasis matches the proposal "blue italic" feel */
.h-heritage-text p {
    color: #fff;
}

/* ---- Join CTA section ---- */
.h-join-cta-title em {
    color: var(--hm-c-accent);
}

/* ---- Footer ---- */
.h-footer-name {
    color: #fff;
}
.h-footer-blurb {
    color: var(--hm-c-cream-alt);
}
.h-footer-bottom {
    color: rgba(255,255,255,0.45);
}

/* ---- Cross-page heritage tokens for OTHER public pages migration ---- */
/* These ensure /news, /fixtures, /join, /support pages also get the
   heritage palette when they use the public_header partial. */

.h-public-page {
    background: var(--hm-c-paper);
    min-height: 60vh;
    padding-bottom: 80px;
}

.h-public-page-hero {
    background: var(--hm-c-navy);
    color: var(--hm-c-cream);
    padding: 70px 0 50px;
    border-bottom: 4px solid var(--hm-c-gold);
    margin-bottom: 50px;
}
.h-public-page-hero h1 {
    font-family: var(--hm-font-display);
    font-size: 52px;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.h-public-page-hero h1 em {
    color: var(--hm-c-gold);
    font-style: italic;
    font-weight: 700;
}
.h-public-page-hero .h-public-page-eyebrow {
    color: var(--hm-c-gold);
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin-bottom: 16px;
}
.h-public-page-hero p {
    font-size: 17px;
    color: var(--hm-c-cream-alt);
    max-width: 720px;
    line-height: 1.6;
    margin: 0;
}

/* Forms restyled in heritage palette */
.h-public-page form input[type="text"],
.h-public-page form input[type="email"],
.h-public-page form input[type="tel"],
.h-public-page form input[type="date"],
.h-public-page form input[type="number"],
.h-public-page form input[type="password"],
.h-public-page form select,
.h-public-page form textarea {
    border: 1px solid var(--hm-c-line);
    background: #fff;
    color: var(--hm-c-ink);
    border-radius: 3px;
    padding: 10px 14px;
    font-size: 15px;
    font-family: var(--hm-font-sans);
    transition: border-color .12s, box-shadow .12s;
}
.h-public-page form input:focus,
.h-public-page form select:focus,
.h-public-page form textarea:focus {
    outline: none;
    border-color: var(--hm-c-accent);
    box-shadow: 0 0 0 3px rgba(22, 87, 217, 0.15);
}

/* ---- Mobile spacing fix for fixture rows ---- */
@media (max-width: 720px) {
    .h-fixture-row {
        grid-template-columns: 80px 1fr;
        gap: 16px;
    }
    .h-fixture-discipline { display: none; }
    .h-fixture-arrow { display: none; }
}

/* ---- Hide elements added in fix1 that are no longer wanted ---- */
.h-utility-bar-right .h-nav-disabled { display: none !important; }


/* =============================================================
   BATCH 9 — Page content styling (tables in prose)
   ============================================================= */

/* Tables inside heritage prose (Records, Club Kit, etc.) */
.h-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 32px;
    font-size: 15px;
    background: #fff;
    border: 1px solid var(--hm-c-line);
    border-radius: 4px;
    overflow: hidden;
}
.h-prose table thead {
    background: var(--hm-c-navy);
    color: #fff;
}
.h-prose table thead th {
    text-align: left;
    padding: 12px 16px;
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #fff;
    border: 0;
}
.h-prose table tbody td,
.h-prose table tbody th {
    padding: 10px 16px;
    border-top: 1px solid var(--hm-c-line);
    vertical-align: top;
    font-family: var(--hm-font-serif);
    color: var(--hm-c-ink);
}
.h-prose table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--hm-c-navy);
    background: var(--hm-c-cream);
    width: 30%;
}
.h-prose table tbody tr:hover {
    background: var(--hm-c-paper);
}

/* H4 inside prose (e.g. Training day headings) */
.h-prose h4 {
    font-family: var(--hm-font-display);
    font-size: 19px;
    color: var(--hm-c-navy);
    margin: 24px 0 10px;
    font-weight: 600;
}

/* Make tables responsive — scroll horizontally on small screens */
@media (max-width: 720px) {
    .h-prose table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* =============================================================
   BATCH 10 — Typography overhaul (Inter sans default)
   =============================================================
   - Inter as default body font everywhere
   - Playfair Display reserved for: hero tagline, heritage block,
     section titles only
   - Form, button, and card styling tightened across the site
   ============================================================= */

/* Load Inter from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Redefine the sans token to Inter */
:root {
    --hm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hm-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --hm-font-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hm-c-input-border: #c8c2b3;
    --hm-c-input-focus-shadow: rgba(22, 87, 217, 0.15);
}

/* Body default — sans everywhere */
.heritage-body {
    font-family: var(--hm-font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--hm-c-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Section titles, hero tagline, heritage block — KEEP SERIF */
.h-hero-tagline,
.h-hero-tagline > p,
.h-hero-tagline h1,
.h-section-title,
.h-fixtures .h-section-title,
.h-news .h-section-title,
.h-join-cta-title,
.h-heritage-text p {
    font-family: var(--hm-font-display) !important;
}

/* Page headers — SANS, just bold (per spec) */
.h-page-title,
.h-coming-soon-title,
.h-public-page-hero h1 {
    font-family: var(--hm-font-sans) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Fixture date day number — keep serif (the big "17" in Next Fixture card etc) */
.h-fixture-date-day,
.h-next-fixture-day {
    font-family: var(--hm-font-display) !important;
}

/* Brand name — sans (cleaner in header) */
.h-brand-name {
    font-family: var(--hm-font-sans) !important;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
}
.h-brand-name em {
    font-family: var(--hm-font-sans) !important;
    font-style: italic;
    font-weight: 700;
    color: var(--hm-c-accent);
}

/* All h1/h2/h3/h4/h5/h6 default to sans except the explicit display classes above */
.heritage-body h1, .heritage-body h2, .heritage-body h3,
.heritage-body h4, .heritage-body h5, .heritage-body h6 {
    font-family: var(--hm-font-sans);
    font-weight: 700;
    color: var(--hm-c-navy);
    letter-spacing: -0.01em;
}

/* Prose body becomes sans — better for reading */
.h-prose,
.h-prose p,
.h-prose li,
.h-prose td,
.h-prose th {
    font-family: var(--hm-font-sans);
}
.h-prose h2, .h-prose h3, .h-prose h4 {
    font-family: var(--hm-font-sans);
    color: var(--hm-c-navy);
    font-weight: 700;
}
.h-prose h2 { font-size: 26px; margin: 36px 0 14px; }
.h-prose h3 { font-size: 21px; margin: 28px 0 12px; }
.h-prose h4 { font-size: 17px; margin: 22px 0 8px; }

/* News card titles — sans, bold */
.h-news-card-title {
    font-family: var(--hm-font-sans) !important;
    font-weight: 700;
    font-size: 19px;
    color: var(--hm-c-accent);
    letter-spacing: -0.005em;
}
.h-news-card-image-placeholder {
    font-family: var(--hm-font-display);  /* placeholder "MH" stays serif */
}

/* Fixture names — sans, semibold */
.h-fixture-name {
    font-family: var(--hm-font-sans) !important;
    font-weight: 700;
    font-size: 19px;
    color: #fff;
}

/* Next Fixture card name — sans */
.h-next-fixture-name {
    font-family: var(--hm-font-sans) !important;
    font-weight: 700;
}

/* Coming Soon eyebrow / page eyebrow — sans */
.h-coming-soon .h-section-eyebrow,
.h-public-page-eyebrow {
    font-family: var(--hm-font-sans) !important;
}

/* Coming Soon page lede — sans */
.h-coming-soon-lede {
    font-family: var(--hm-font-sans) !important;
}

/* Page subtitle — sans */
.h-page-subtitle,
.h-public-page-hero p {
    font-family: var(--hm-font-sans) !important;
}

/* Footer brand name — sans */
.h-footer-name {
    font-family: var(--hm-font-sans) !important;
    font-weight: 700;
    font-size: 18px;
}


/* =============================================================
   FORM STYLING — consistent across all public forms
   ============================================================= */

/* The big container for form pages (join, support, etc.) */
.h-public-page form,
.h-page form,
.public-main form {
    font-family: var(--hm-font-sans);
}

/* Form section cards — clean white blocks with subtle border */
.h-public-page fieldset,
.h-page fieldset,
.public-main fieldset {
    background: #fff;
    border: 1px solid var(--hm-c-line);
    border-radius: 6px;
    padding: 24px 28px;
    margin: 0 0 20px;
}
.h-public-page legend,
.h-page legend,
.public-main legend {
    font-family: var(--hm-font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--hm-c-navy);
    padding: 0 8px;
    margin-left: -8px;
}

/* Section description text below fieldset titles */
.h-public-page fieldset > p:first-of-type,
.h-page fieldset > p:first-of-type {
    color: var(--hm-c-muted);
    font-size: 14px;
    margin: 4px 0 18px;
}

/* All inputs, selects, textareas — single source of truth */
.h-public-page input[type="text"],
.h-public-page input[type="email"],
.h-public-page input[type="tel"],
.h-public-page input[type="date"],
.h-public-page input[type="number"],
.h-public-page input[type="password"],
.h-public-page input[type="search"],
.h-public-page input[type="url"],
.h-public-page select,
.h-public-page textarea,
.h-page input[type="text"],
.h-page input[type="email"],
.h-page input[type="tel"],
.h-page input[type="date"],
.h-page input[type="number"],
.h-page input[type="password"],
.h-page input[type="search"],
.h-page input[type="url"],
.h-page select,
.h-page textarea,
.public-main input[type="text"],
.public-main input[type="email"],
.public-main input[type="tel"],
.public-main input[type="date"],
.public-main input[type="number"],
.public-main input[type="password"],
.public-main input[type="search"],
.public-main input[type="url"],
.public-main select,
.public-main textarea {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--hm-c-input-border);
    border-radius: 4px;
    background: #fff;
    color: var(--hm-c-ink);
    font-family: var(--hm-font-sans);
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .12s, box-shadow .12s;
}

.h-public-page textarea,
.h-page textarea,
.public-main textarea {
    height: auto;
    min-height: 84px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.h-public-page input:focus,
.h-public-page select:focus,
.h-public-page textarea:focus,
.h-page input:focus,
.h-page select:focus,
.h-page textarea:focus,
.public-main input:focus,
.public-main select:focus,
.public-main textarea:focus {
    outline: none;
    border-color: var(--hm-c-accent);
    box-shadow: 0 0 0 3px var(--hm-c-input-focus-shadow);
}

.h-public-page input[disabled],
.h-public-page select[disabled],
.h-public-page textarea[disabled] {
    background: var(--hm-c-cream);
    color: var(--hm-c-muted);
    cursor: not-allowed;
}

/* Form labels — clear hierarchy */
.h-public-page label,
.h-page label,
.public-main label {
    font-family: var(--hm-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--hm-c-ink);
    display: block;
    margin: 0 0 6px;
}

/* Required asterisk */
.h-public-page label .required,
.h-public-page label > span[style*="red"],
.h-public-page .form-req {
    color: var(--hm-c-accent);
    font-weight: 700;
    margin-left: 2px;
}

/* Field hints / help text */
.h-public-page .form-hint,
.h-public-page .field-hint,
.h-public-page small,
.h-page .form-hint,
.h-page .field-hint,
.h-page small {
    font-family: var(--hm-font-sans);
    font-size: 13px;
    color: var(--hm-c-muted);
    display: block;
    margin-top: 4px;
}

/* Field row layout - multi-column form rows */
.h-public-page .field-row,
.h-page .field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.h-public-page .field-row > * {
    margin-bottom: 0;
}

/* Single field block */
.h-public-page .field,
.h-page .field {
    margin-bottom: 16px;
}
.h-public-page .field:last-child,
.h-page .field:last-child {
    margin-bottom: 0;
}

/* Checkbox styling */
.h-public-page input[type="checkbox"],
.h-page input[type="checkbox"],
.public-main input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: var(--hm-c-accent);
    vertical-align: middle;
}

/* Checkbox-with-label rows */
.h-public-page .checkbox-row,
.h-public-page .form-checkbox,
.h-page .checkbox-row,
.h-page .form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--hm-c-line);
    border-radius: 4px;
    background: var(--hm-c-paper);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}
.h-public-page .checkbox-row:hover,
.h-public-page .form-checkbox:hover {
    border-color: var(--hm-c-accent);
    background: #fff;
}
.h-public-page .checkbox-row input[type="checkbox"],
.h-public-page .form-checkbox input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.h-public-page .checkbox-row label,
.h-public-page .form-checkbox label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    flex: 1;
}
.h-public-page .checkbox-row label strong,
.h-public-page .form-checkbox label strong {
    font-weight: 600;
    color: var(--hm-c-navy);
}


/* =============================================================
   BUTTONS — consistent across the site
   ============================================================= */

/* Universal button reset for forms */
.h-public-page button,
.h-public-page input[type="submit"],
.h-public-page input[type="button"],
.h-page button,
.h-page input[type="submit"],
.h-page input[type="button"],
.public-main button[type="submit"],
.public-main input[type="submit"] {
    font-family: var(--hm-font-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 13px 26px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
    border: 0;
    line-height: 1;
    display: inline-block;
    text-align: center;
}

/* Primary submit button (forms) — navy, matches site CTAs */
.h-public-page button[type="submit"],
.h-public-page input[type="submit"],
.h-page button[type="submit"],
.h-page input[type="submit"],
.public-main button[type="submit"],
.public-main input[type="submit"] {
    background: var(--hm-c-navy);
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 26px;
    margin-top: 8px;
}
.h-public-page button[type="submit"]:hover,
.h-public-page input[type="submit"]:hover,
.h-page button[type="submit"]:hover,
.h-page input[type="submit"]:hover,
.public-main button[type="submit"]:hover,
.public-main input[type="submit"]:hover {
    background: var(--hm-c-navy-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(15, 30, 61, 0.45);
}

/* Secondary / ghost button on forms */
.h-public-page .btn-ghost,
.h-page .btn-ghost,
.public-main .btn-ghost {
    background: transparent;
    color: var(--hm-c-navy);
    border: 2px solid var(--hm-c-navy);
    padding: 11px 24px;
}
.h-public-page .btn-ghost:hover,
.h-page .btn-ghost:hover,
.public-main .btn-ghost:hover {
    background: var(--hm-c-navy);
    color: #fff;
}


/* =============================================================
   "You're applying for" callout (under form, before submit)
   ============================================================= */
.h-public-page .applying-for-callout,
.h-public-page .form-summary,
.h-page .applying-for-callout {
    background: var(--hm-c-cream);
    border: 1px solid var(--hm-c-line);
    border-left: 4px solid var(--hm-c-accent);
    border-radius: 4px;
    padding: 16px 22px;
    margin: 16px 0;
    font-size: 15px;
    color: var(--hm-c-navy);
}
.h-public-page .applying-for-callout strong {
    color: var(--hm-c-accent);
}


/* =============================================================
   GENERAL — links & body refinements
   ============================================================= */

/* Body text default */
.h-public-page p,
.h-page p {
    font-family: var(--hm-font-sans);
    color: var(--hm-c-ink);
    line-height: 1.65;
}

/* Strong/bold default */
.h-public-page strong,
.h-page strong {
    color: var(--hm-c-navy);
    font-weight: 700;
}

/* Inline code */
.h-public-page code,
.h-page code {
    font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', monospace;
    font-size: 0.9em;
    background: var(--hm-c-cream);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Form errors */
.form-error,
.form-errors,
.error-msg {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}
.form-success {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #166534;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* Inputs that have errors */
input.has-error,
select.has-error,
textarea.has-error {
    border-color: #ef4444;
    background: #fef2f2;
}


/* =============================================================
   BATCH 10 — Override existing form classes to use heritage palette
   ============================================================= */

/* Existing .form-section fieldsets get heritage colours */
.heritage-body .join-form .form-section,
.heritage-body .form-section {
    border: 1px solid var(--hm-c-line);
    border-radius: 6px;
    padding: 24px 28px;
    margin: 0 0 20px;
    background: #fff;
}
.heritage-body .join-form .form-section legend,
.heritage-body .form-section legend {
    font-family: var(--hm-font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--hm-c-navy);
    padding: 0 8px;
    margin-left: -8px;
    letter-spacing: -0.005em;
}
.heritage-body .form-section-help {
    color: var(--hm-c-muted);
    font-size: 14px;
    margin: 4px 0 16px;
    font-family: var(--hm-font-sans);
}

/* form-row grid */
.heritage-body .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.heritage-body .form-row .form-field {
    flex: 1;
    min-width: 180px;
    margin: 0;
}
.heritage-body .form-field {
    margin-bottom: 16px;
}
.heritage-body .form-field-narrow {
    flex: 0 0 100px;
    max-width: 120px;
}

/* form-label */
.heritage-body .form-label {
    font-family: var(--hm-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--hm-c-ink);
    display: block;
    margin: 0 0 6px;
}
.heritage-body .form-label .req,
.heritage-body .form-label > [style*="red"] {
    color: var(--hm-c-accent);
    font-weight: 700;
}

/* form-help / hint text */
.heritage-body .form-help,
.heritage-body .form-hint {
    color: var(--hm-c-muted);
    font-size: 13px;
    display: block;
    margin-top: 4px;
    font-family: var(--hm-font-sans);
}

/* The applying-for callout (#form-summary in join page) */
.heritage-body .form-actions-summary,
.heritage-body #form-summary {
    background: var(--hm-c-cream);
    border: 1px solid var(--hm-c-line);
    border-left: 4px solid var(--hm-c-accent);
    border-radius: 4px;
    padding: 14px 20px;
    margin: 16px 0;
    font-size: 15px;
    color: var(--hm-c-navy);
    text-align: center;
    font-family: var(--hm-font-sans);
    font-weight: 500;
}
.heritage-body .form-actions-summary.is-good {
    border-left-color: #16a34a;
    background: #ecfdf5;
    color: #14532d;
}
.heritage-body .form-actions-summary.is-warn {
    border-left-color: #d97706;
    background: #fef3c7;
    color: #78350f;
}

/* Submit button override - join form has .form-submit class */
.heritage-body .join-form button[type="submit"],
.heritage-body .form-submit,
.heritage-body button.form-submit {
    background: var(--hm-c-navy);
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 26px;
    margin-top: 12px;
    font-family: var(--hm-font-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.heritage-body .join-form button[type="submit"]:hover,
.heritage-body .form-submit:hover {
    background: var(--hm-c-navy-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(15, 30, 61, 0.45);
    color: #fff;
}

/* Form-error pre-existing styling */
.heritage-body .form-errors,
.heritage-body .form-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-family: var(--hm-font-sans);
    font-size: 14px;
}

/* Category cards (membership category picker on join page) */
.heritage-body .cat-card {
    background: #fff;
    border: 1px solid var(--hm-c-line);
    border-radius: 6px;
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.heritage-body .cat-card:hover {
    border-color: var(--hm-c-accent);
    box-shadow: 0 8px 20px -10px rgba(22, 87, 217, 0.25);
}
.heritage-body .cat-card.is-selected {
    border-color: var(--hm-c-accent);
    border-width: 2px;
    background: #f7f9fe;
}
.heritage-body .cat-card-name {
    font-family: var(--hm-font-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--hm-c-navy);
}
.heritage-body .cat-card-price-amount {
    font-family: var(--hm-font-sans);
    color: var(--hm-c-accent);
    font-weight: 700;
}


/* =============================================================
   BATCH 11 — Gallery cards + contact form refinements
   ============================================================= */

/* Gallery grid */
.h-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 0 0 60px;
}

.h-gallery-card {
    background: #fff;
    border: 1px solid var(--hm-c-line);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex;
    flex-direction: column;
}
a.h-gallery-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -14px rgba(15, 30, 61, 0.30);
    border-color: var(--hm-c-accent);
}

.h-gallery-card-image {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}
.h-gallery-card-image-placeholder {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--hm-c-navy) 0%, var(--hm-c-navy-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hm-c-gold);
    font-family: var(--hm-font-display);
    font-size: 32px;
    font-style: italic;
}

.h-gallery-card-body {
    padding: 16px 18px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.h-gallery-card-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hm-c-muted);
    font-weight: 600;
}
.h-gallery-card-location {
    color: var(--hm-c-accent);
}
.h-gallery-card-title {
    font-family: var(--hm-font-sans) !important;
    font-size: 18px;
    font-weight: 700;
    color: var(--hm-c-navy);
    margin: 0;
    line-height: 1.3;
}
.h-gallery-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--hm-c-muted);
    margin: 0;
}
.h-gallery-card-link {
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--hm-font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hm-c-accent);
}

/* Contact form layout adjustments */
.heritage-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .heritage-body .form-row {
        grid-template-columns: 1fr;
    }
}

.heritage-body .form-field {
    margin-bottom: 16px;
}
.heritage-body .form-field input,
.heritage-body .form-field select,
.heritage-body .form-field textarea {
    margin-top: 6px;
}



/* =================================================================
   BATCH 12 — Style refresh
   - White as primary background (was cream)
   - Cream + navy reserved for featured/accent areas only
   - Container widened to 1320px on big screens
   - Hero h1 visibility fix (white on navy hero)
   - Utility bar: training info + see-training link
   - Nav: slide-in-from-left underline animation
   - Form refresh: cleaner cards, less cream
   ================================================================= */

/* ---------- Palette pivot ---------- */
:root {
    /* Paper (page bg) is now WHITE, not cream */
    --hm-c-paper: #ffffff;

    /* Cream becomes the FEATURED accent — used for highlight strips,
       form summaries, callouts. Lighter than before so it stays subtle. */
    --hm-c-cream: #faf6ed;
    --hm-c-cream-alt: #f4ede0;

    /* Lines become a softer neutral grey — better against white */
    --hm-c-line: #e5e5e5;
    --hm-c-line-soft: #f0f0f0;

    /* Slightly lighter muted tone for body copy hints on white */
    --hm-c-muted: #6b7280;
}

/* ---------- Body bg = white ---------- */
body.heritage-body {
    background: #ffffff;
}

/* ---------- Container widened on big screens ---------- */
.h-container {
    max-width: 1320px;
    padding-left: 24px;
    padding-right: 24px;
}
@media (max-width: 720px) {
    .h-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------- Hero h1 visibility fix ---------- */
/* On navy/dark hero, the h1 must be white. The earlier rule made it sans-bold
   but didn't set colour, leaving it inheriting navy from .heritage-body h1. */
.h-public-page-hero {
    background: linear-gradient(135deg, var(--hm-c-navy) 0%, var(--hm-c-navy-deep) 100%);
    border-bottom: 3px solid var(--hm-c-gold);
    padding: 56px 0 64px;
    color: #ffffff;
}
.h-public-page-hero h1 {
    color: #ffffff !important;
    font-size: 38px;
    line-height: 1.2;
    margin: 8px 0 12px;
}
.h-public-page-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    max-width: 640px;
    margin: 0;
}
.h-public-page-eyebrow {
    color: var(--hm-c-gold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
}
@media (max-width: 720px) {
    .h-public-page-hero { padding: 36px 0 44px; }
    .h-public-page-hero h1 { font-size: 28px; }
}

/* Same fix for coming-soon page hero */
.h-coming-soon {
    background: linear-gradient(135deg, var(--hm-c-navy) 0%, var(--hm-c-navy-deep) 100%);
    color: #ffffff;
}
.h-coming-soon-title {
    color: #ffffff !important;
}
.h-coming-soon-lede {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Utility bar — practical training info ---------- */
.h-utility-bar {
    background: var(--hm-c-navy-deep);
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 0;
    font-size: 13px;
}
.h-utility-bar .h-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.h-utility-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.h-utility-label {
    color: var(--hm-c-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}
.h-utility-link {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 1px;
    transition: border-color .15s, color .15s;
}
.h-utility-link:hover {
    color: var(--hm-c-gold);
    border-color: var(--hm-c-gold);
}
.h-cta-mini {
    background: var(--hm-c-accent);
    color: #fff !important;
    padding: 5px 14px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.h-cta-mini:hover {
    background: var(--hm-c-accent-hover);
    transform: translateY(-1px);
}
@media (max-width: 720px) {
    .h-utility-bar { font-size: 12px; padding: 6px 0; }
    .h-utility-bar .h-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .h-utility-link { border-bottom: 0; text-decoration: underline; }
}

/* ---------- Main header — white bg, not cream ---------- */
.h-main-header {
    background: #ffffff;
    border-bottom: 1px solid var(--hm-c-line);
}

/* ---------- Nav: slide-in-from-left underline animation ---------- */
.h-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    color: var(--hm-c-navy);
    text-decoration: none;
    font-family: var(--hm-font-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    transition: color .15s;
}
.h-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--hm-c-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease-out;
}
.h-nav-link:hover {
    color: var(--hm-c-accent);
}
.h-nav-link:hover::after,
.h-nav-link.is-active::after {
    transform: scaleX(1);
}
.h-nav-link.is-active {
    color: var(--hm-c-accent);
}

/* Same animation for dropdown links */
.h-nav-dropdown-link {
    position: relative;
    transition: background .15s, color .15s;
}
.h-nav-dropdown-link:hover {
    background: var(--hm-c-cream);
    color: var(--hm-c-accent);
}

/* Dropdown menu — white bg, not cream */
.h-nav-dropdown {
    background: #ffffff;
    border: 1px solid var(--hm-c-line);
    border-top: 3px solid var(--hm-c-accent);
    box-shadow: 0 14px 32px -16px rgba(15, 30, 61, 0.28);
}

/* Coming-soon nav items — slight opacity, no underline animation */
.h-nav-link.is-coming-soon::after,
.h-nav-dropdown-link.is-coming-soon::after {
    display: none;
}
.h-nav-link.is-coming-soon {
    opacity: 0.5;
    cursor: default;
}
.h-nav-link.is-coming-soon:hover {
    color: var(--hm-c-navy);
}

/* ---------- Brand area — sans, no cream ---------- */
.h-brand {
    text-decoration: none;
    color: inherit;
}
.h-brand-name {
    font-family: var(--hm-font-sans);
    font-weight: 700;
    color: var(--hm-c-navy);
}
.h-brand-name em {
    font-style: italic;
    color: var(--hm-c-accent);
}
.h-brand-est {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    color: var(--hm-c-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---------- Form refresh — clean white cards ---------- */

/* Public form fieldsets — pure white, soft border, no cream */
.heritage-body .join-form .form-section,
.heritage-body .form-section,
.heritage-body fieldset {
    background: #ffffff;
    border: 1px solid var(--hm-c-line);
    border-radius: 8px;
    padding: 28px 32px;
    margin: 0 0 18px;
    box-shadow: 0 1px 2px rgba(15, 30, 61, 0.04);
}
@media (max-width: 600px) {
    .heritage-body .join-form .form-section,
    .heritage-body .form-section,
    .heritage-body fieldset {
        padding: 20px 18px;
    }
}

/* Legend — bigger, navy, sans bold */
.heritage-body .join-form .form-section legend,
.heritage-body .form-section legend,
.heritage-body fieldset legend {
    font-family: var(--hm-font-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--hm-c-navy);
    letter-spacing: -0.01em;
    padding: 0 10px;
    margin-left: -10px;
}

/* Help text under legend */
.heritage-body .form-section-help {
    color: var(--hm-c-muted);
    font-size: 13px;
    margin: 6px 0 18px;
    line-height: 1.55;
}

/* Inputs — clean, slightly more breathing room */
.heritage-body .form-section input[type="text"],
.heritage-body .form-section input[type="email"],
.heritage-body .form-section input[type="tel"],
.heritage-body .form-section input[type="date"],
.heritage-body .form-section input[type="number"],
.heritage-body .form-section input[type="url"],
.heritage-body .form-section select,
.heritage-body .form-section textarea,
.heritage-body fieldset input[type="text"],
.heritage-body fieldset input[type="email"],
.heritage-body fieldset input[type="tel"],
.heritage-body fieldset input[type="date"],
.heritage-body fieldset input[type="number"],
.heritage-body fieldset input[type="url"],
.heritage-body fieldset select,
.heritage-body fieldset textarea {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: var(--hm-c-ink);
    font-family: var(--hm-font-sans);
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}
.heritage-body .form-section textarea,
.heritage-body fieldset textarea {
    height: auto;
    min-height: 100px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

.heritage-body .form-section input:hover,
.heritage-body .form-section select:hover,
.heritage-body .form-section textarea:hover,
.heritage-body fieldset input:hover,
.heritage-body fieldset select:hover,
.heritage-body fieldset textarea:hover {
    border-color: #9ca3af;
}

.heritage-body .form-section input:focus,
.heritage-body .form-section select:focus,
.heritage-body .form-section textarea:focus,
.heritage-body fieldset input:focus,
.heritage-body fieldset select:focus,
.heritage-body fieldset textarea:focus {
    outline: none;
    border-color: var(--hm-c-accent);
    box-shadow: 0 0 0 3px rgba(22, 87, 217, 0.12);
}

/* Form labels — proper hierarchy */
.heritage-body .form-label {
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--hm-c-ink);
    display: block;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}
.heritage-body .form-req {
    color: var(--hm-c-accent);
    font-weight: 700;
}

/* Field row layout — 2 columns on desktop, 1 on mobile */
.heritage-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 600px) {
    .heritage-body .form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.heritage-body .form-field {
    margin-bottom: 18px;
}
.heritage-body .form-field-narrow {
    max-width: 140px;
}

/* Help/hint text */
.heritage-body .form-help,
.heritage-body .form-hint {
    color: var(--hm-c-muted);
    font-size: 12.5px;
    display: block;
    margin-top: 6px;
    line-height: 1.5;
}

/* Submit button — refined */
.heritage-body .join-form button[type="submit"],
.heritage-body .form-submit,
.heritage-body button.form-submit {
    background: var(--hm-c-accent);
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 28px;
    margin-top: 8px;
    font-family: var(--hm-font-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 12px -4px rgba(22, 87, 217, 0.4);
}
.heritage-body .join-form button[type="submit"]:hover,
.heritage-body .form-submit:hover {
    background: var(--hm-c-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(22, 87, 217, 0.5);
    color: #ffffff;
}

/* "You're applying for" callout — keep cream since it's a featured area */
.heritage-body .form-actions-summary,
.heritage-body #form-summary {
    background: var(--hm-c-cream);
    border: 1px solid var(--hm-c-cream-alt);
    border-left: 3px solid var(--hm-c-accent);
    border-radius: 6px;
    padding: 14px 22px;
    margin: 18px 0;
    font-size: 14px;
    color: var(--hm-c-navy);
    text-align: center;
    font-family: var(--hm-font-sans);
    font-weight: 500;
}
.heritage-body .form-actions-summary.is-good {
    border-left-color: #16a34a;
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #14532d;
}

/* Checkbox rows in consents fieldset */
.heritage-body .form-checkbox,
.heritage-body .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--hm-c-line);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.55;
    transition: border-color .15s, background .15s;
}
.heritage-body .form-checkbox:hover,
.heritage-body .checkbox-row:hover {
    border-color: var(--hm-c-accent);
    background: #f7f9ff;
}
.heritage-body .form-checkbox input[type="checkbox"],
.heritage-body .checkbox-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--hm-c-accent);
}
.heritage-body .form-checkbox label,
.heritage-body .checkbox-row label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    flex: 1;
    color: var(--hm-c-ink);
}

/* Errors */
.heritage-body .form-errors,
.heritage-body .form-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #991b1b;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-family: var(--hm-font-sans);
    font-size: 14px;
}

/* ---------- Membership category cards (join page) ---------- */
.heritage-body .cat-card {
    background: #ffffff;
    border: 2px solid var(--hm-c-line);
    border-radius: 8px;
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.heritage-body .cat-card:hover {
    border-color: var(--hm-c-accent);
    box-shadow: 0 12px 24px -12px rgba(22, 87, 217, 0.25);
    transform: translateY(-2px);
}
.heritage-body .cat-card.is-selected {
    border-color: var(--hm-c-accent);
    background: #f7f9ff;
    box-shadow: 0 4px 12px -4px rgba(22, 87, 217, 0.2);
}

/* ---------- Page hero size up — better use of width ---------- */
.h-public-page-hero .h-container {
    max-width: 1320px;
}

/* ---------- News + fixtures sections — keep reading width sane ---------- */
.h-container-narrow {
    max-width: 820px;
    margin: 0 auto;
}

/* Public main section bgs — pure white */
.h-public-page,
.public-main {
    background: #ffffff;
}

/* Heritage block on home — keep its dark feel as a featured area */
.h-heritage-block {
    background: var(--hm-c-cream);
}

/* News + fixtures sections — alternate white and very-soft-cream for rhythm */
.h-news {
    background: #ffffff;
}
.h-news-card {
    background: #ffffff;
    border: 1px solid var(--hm-c-line);
    border-radius: 8px;
}
.h-news-card:hover {
    border-color: var(--hm-c-accent);
    box-shadow: 0 12px 28px -16px rgba(15, 30, 61, 0.25);
}

/* Footer stays dark navy as a featured area */

/* ---------- Prose — make sure body bg is white, not cream ---------- */
.h-prose {
    background: transparent;
}
.h-prose table {
    background: #ffffff;
    border: 1px solid var(--hm-c-line);
}
.h-prose table tbody tr:hover {
    background: #fafafa;
}
.h-prose table tbody th {
    background: #fafafa;
    color: var(--hm-c-navy);
}



/* =================================================================
   BATCH 14 — Homepage rebuild (functional styling)
   Mockup polish comes in batch 15. This is "looks reasonable, works".
   ================================================================= */

/* ---------- Ticker ---------- */
.hp-ticker {
    overflow: hidden;
    padding: 8px 0;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.hp-ticker-track {
    display: flex;
    gap: 32px;
    align-items: center;
    white-space: nowrap;
    animation: hp-ticker-scroll 60s linear infinite;
}
.hp-ticker-item { flex-shrink: 0; }
.hp-ticker-divider { font-size: 16px; flex-shrink: 0; }

@keyframes hp-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.hp-ticker:hover .hp-ticker-track { animation-play-state: paused; }

/* ---------- Hero ---------- */
.hp-hero { padding: 60px 0; background: #ffffff; }
.hp-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 880px) {
    .hp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .hp-hero { padding: 36px 0; }
}
.hp-hero-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}
.hp-hero-image-placeholder {
    aspect-ratio: 4/5;
    background: var(--hm-c-cream);
    border: 2px dashed var(--hm-c-line);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hm-c-muted);
    font-style: italic;
}
.hp-hero-title {
    font-family: var(--hm-font-display);
    font-size: 48px;
    line-height: 1.1;
    color: var(--hm-c-navy);
    margin: 0 0 16px;
    font-weight: 700;
}
.hp-hero-title em {
    color: var(--hm-c-accent);
    font-style: italic;
}
@media (max-width: 720px) {
    .hp-hero-title { font-size: 32px; }
}
.hp-hero-text {
    font-size: 17px;
    line-height: 1.55;
    color: var(--hm-c-ink);
    margin-bottom: 24px;
}
.hp-hero-text p { margin: 0 0 12px; }
.hp-hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.hp-hero-next-fixture {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 18px;
    background: var(--hm-c-cream);
    border-left: 3px solid var(--hm-c-accent);
    border-radius: 4px;
    font-family: var(--hm-font-sans);
}
.hp-hero-next-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--hm-c-muted);
}
.hp-hero-next-day {
    font-family: var(--hm-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--hm-c-accent);
}
.hp-hero-next-name {
    font-weight: 600;
    color: var(--hm-c-navy);
}

/* ---------- Buttons ---------- */
.hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 26px;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.hp-btn-primary {
    background: var(--hm-c-navy);
    color: #fff;
}
.hp-btn-primary:hover {
    background: var(--hm-c-navy-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(15, 30, 61, 0.45);
    color: #fff;
}
.hp-btn-ghost {
    background: transparent;
    color: var(--hm-c-navy);
    border: 2px solid var(--hm-c-navy);
    padding: 12px 24px;
}
.hp-btn-ghost:hover {
    background: var(--hm-c-navy);
    color: #fff;
}

/* ---------- Generic eyebrow / section title ---------- */
.hp-eyebrow {
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--hm-c-accent);
    margin-bottom: 8px;
}
.hp-eyebrow-blue { color: var(--hm-c-accent); }
.hp-eyebrow-gold { color: var(--hm-c-gold); }
.hp-section-title {
    font-family: var(--hm-font-display);
    font-size: 38px;
    line-height: 1.1;
    color: var(--hm-c-navy);
    margin: 0;
    font-weight: 700;
}
.hp-section-title em {
    color: var(--hm-c-accent);
    font-style: italic;
}
.hp-section-title-light { color: #fff; }
.hp-section-title-light em { color: var(--hm-c-gold); }
.hp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--hm-c-line);
}
.hp-section-link {
    font-family: var(--hm-font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hm-c-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--hm-c-navy);
    padding-bottom: 2px;
    white-space: nowrap;
}
.hp-section-link-light {
    color: var(--hm-c-gold);
    border-color: var(--hm-c-gold);
}

/* ---------- About ---------- */
.hp-about { padding: 80px 0; background: var(--hm-c-cream); }
.hp-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
@media (max-width: 880px) {
    .hp-about-grid { grid-template-columns: 1fr; gap: 24px; }
    .hp-about { padding: 48px 0; }
}
.hp-about-headline {
    font-family: var(--hm-font-display);
    font-size: 48px;
    line-height: 1.05;
    color: var(--hm-c-navy);
    margin: 0;
    font-weight: 700;
}
.hp-about-headline em {
    color: var(--hm-c-accent);
    font-style: italic;
}
@media (max-width: 720px) {
    .hp-about-headline { font-size: 32px; }
}
.hp-about-body {
    font-size: 16px;
    line-height: 1.65;
    color: var(--hm-c-ink);
}
.hp-about-body p { margin: 0 0 12px; }
.hp-disciplines {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-family: var(--hm-font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--hm-c-navy);
}
.hp-disciplines li {
    position: relative;
    padding-left: 18px;
}
.hp-disciplines li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--hm-c-accent);
}

/* ---------- Highlight cards ---------- */
.hp-highlights { padding: 60px 0; background: var(--hm-c-cream); border-top: 1px solid var(--hm-c-line); }
.hp-highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 880px) {
    .hp-highlights-grid { grid-template-columns: 1fr; gap: 20px; }
}
.hp-highlight-card {
    border-left: 3px solid var(--hm-c-accent);
    padding: 6px 0 6px 24px;
}
.hp-highlight-headline {
    font-family: var(--hm-font-display);
    font-size: 24px;
    line-height: 1.2;
    color: var(--hm-c-navy);
    margin: 4px 0 12px;
    font-weight: 700;
}
.hp-highlight-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--hm-c-ink);
    margin: 0;
}

/* ---------- Latest news ---------- */
.hp-news { padding: 80px 0; background: #ffffff; }
@media (max-width: 880px) { .hp-news { padding: 48px 0; } }
.hp-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 880px) { .hp-news-grid { grid-template-columns: 1fr; gap: 16px; } }
.hp-news-card {
    background: #fff;
    border: 1px solid var(--hm-c-line);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hp-news-card:hover {
    border-color: var(--hm-c-accent);
    box-shadow: 0 12px 28px -16px rgba(15, 30, 61, 0.25);
    transform: translateY(-2px);
}
.hp-news-card-image {
    aspect-ratio: 16/10;
    overflow: hidden;
}
.hp-news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hp-news-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--hm-c-navy), var(--hm-c-navy-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hm-c-gold);
    font-family: var(--hm-font-display);
    font-size: 28px;
    font-style: italic;
}
.hp-news-card-body { padding: 16px 18px 20px; flex-grow: 1; }
.hp-news-card-meta {
    display: flex;
    gap: 12px;
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hm-c-muted);
    font-weight: 600;
    margin-bottom: 8px;
}
.hp-news-card-tag { color: var(--hm-c-accent); }
.hp-news-card-title {
    font-family: var(--hm-font-sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--hm-c-navy);
    margin: 0 0 8px;
    line-height: 1.3;
}
.hp-news-card-excerpt {
    font-size: 13px;
    line-height: 1.55;
    color: var(--hm-c-muted);
    margin: 0;
}

/* ---------- Upcoming fixtures ---------- */
.hp-fixtures {
    padding: 80px 0;
    background: var(--hm-c-navy);
    color: #fff;
}
@media (max-width: 880px) { .hp-fixtures { padding: 48px 0; } }
.hp-fixtures .hp-section-head { border-bottom-color: rgba(255,255,255,0.15); }
.hp-fixtures-list { display: flex; flex-direction: column; }
.hp-fixture-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hp-fixture-row:last-child { border-bottom: 0; }
.hp-fixture-date { display: flex; flex-direction: column; align-items: flex-start; }
.hp-fixture-day {
    font-family: var(--hm-font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.hp-fixture-month {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--hm-c-gold);
    margin-top: 4px;
}
.hp-fixture-name {
    color: #fff;
    font-family: var(--hm-font-sans);
    font-size: 16px;
}
.hp-fixture-name strong { font-weight: 700; }
.hp-fixture-venue {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}
.hp-fixture-link {
    font-family: var(--hm-font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hm-c-gold);
    text-decoration: none;
    border: 1px solid var(--hm-c-gold);
    padding: 8px 14px;
    border-radius: 3px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.hp-fixture-link:hover {
    background: var(--hm-c-gold);
    color: var(--hm-c-navy);
}
.hp-fixture-link-soft {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ---------- Become a member ---------- */
.hp-become-member {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}
@media (max-width: 880px) { .hp-become-member { padding: 60px 0; } }
.hp-become-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--hm-font-display);
    font-size: 360px;
    color: rgba(22, 87, 217, 0.08);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.hp-become-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
@media (max-width: 880px) {
    .hp-become-grid { grid-template-columns: 1fr; gap: 32px; }
    .hp-become-watermark { font-size: 220px; }
}
.hp-become-image {
    margin: 0;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(15, 30, 61, 0.4);
}
.hp-become-image img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(0.2);
}
.hp-become-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 22px 18px;
    background: linear-gradient(to top, rgba(15, 30, 61, 0.95), transparent);
    color: #fff;
}
.hp-become-caption-eyebrow {
    display: flex;
    gap: 12px;
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin-bottom: 6px;
}
.hp-become-caption-year { color: var(--hm-c-gold); }
.hp-become-caption-event { color: var(--hm-c-gold); }
.hp-become-caption-text {
    font-family: var(--hm-font-display);
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
}
.hp-become-image-placeholder {
    aspect-ratio: 3/4;
    background: var(--hm-c-cream);
    border: 2px dashed var(--hm-c-line);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hm-c-muted);
    font-style: italic;
}
.hp-become-headline {
    font-family: var(--hm-font-display);
    font-size: 48px;
    line-height: 1.05;
    color: var(--hm-c-navy);
    margin: 8px 0 20px;
    font-weight: 700;
}
.hp-become-headline em {
    color: var(--hm-c-accent);
    font-style: italic;
}
@media (max-width: 720px) { .hp-become-headline { font-size: 32px; } }
.hp-become-body {
    font-size: 16px;
    line-height: 1.65;
    color: var(--hm-c-ink);
    margin-bottom: 28px;
}
.hp-become-body p { margin: 0 0 12px; }


/* ---------- Renewal rescue card on /join ---------- */
.renewal-rescue {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fef9e7;
    border: 1px solid #f9d77e;
    border-left: 4px solid #d97706;
    border-radius: 6px;
    padding: 14px 18px;
    margin: 0 auto 28px;
    max-width: 820px;
    font-family: var(--hm-font-sans);
}
.renewal-rescue-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #d97706;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}
.renewal-rescue-content {
    font-size: 14px;
    line-height: 1.5;
    color: #78350f;
}
.renewal-rescue-content strong {
    color: #78350f;
    margin-right: 4px;
}
.renewal-rescue-content a {
    color: #b45309;
    text-decoration: underline;
    font-weight: 700;
}
.renewal-rescue-content a:hover { color: #92400e; }



/* =================================================================
   BATCH 14 fix #1 — Nav gap so hover underline doesn't touch next item
   ================================================================= */
.h-main-nav {
    gap: 1.5rem;
}
@media (max-width: 720px) {
    .h-main-nav { gap: 1rem; }
}

/* Make sure h-nav-item doesn't itself have margin/padding that compounds */
.h-nav-item {
    padding: 0;
}


/* =================================================================
   BATCH 15 — Mockup polish + visual fixes
   ================================================================= */

/* ---------- Utility bar copy + tone (single-line consistent typography) ---------- */
.h-utility-bar {
    background: var(--hm-c-navy-deep);
    color: rgba(255, 255, 255, 0.92);
    padding: 8px 0;
    font-family: var(--hm-font-sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.h-utility-bar .h-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.h-utility-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    text-transform: none;
}
.h-utility-label {
    color: var(--hm-c-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.h-utility-sep {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
    margin: 0 2px;
}
.h-utility-link {
    color: var(--hm-c-gold);
    text-decoration: none;
    font-weight: 600;
    margin-left: 6px;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}
.h-utility-link:hover {
    border-bottom-color: var(--hm-c-gold);
    color: var(--hm-c-gold);
}
.h-cta-mini {
    color: #fff;
    background: var(--hm-c-accent);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.h-cta-mini:hover {
    background: var(--hm-c-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}
@media (max-width: 720px) {
    .h-utility-bar { font-size: 11px; padding: 6px 0; }
    .h-utility-bar .h-container { gap: 8px; }
    .h-utility-bar-left { font-size: 11px; }
    .h-cta-mini { font-size: 10px; padding: 5px 10px; }
}

/* ---------- Hero polish — empty state cleaner, image fills better ---------- */
.hp-hero-image-placeholder {
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, var(--hm-c-cream) 0%, var(--hm-c-cream-alt) 100%);
    border: none;
    border-radius: 8px;
    color: var(--hm-c-muted);
    font-style: italic;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px rgba(15, 30, 61, 0.06);
}
.hp-hero-image img {
    border-radius: 8px;
    box-shadow: 0 30px 60px -30px rgba(15, 30, 61, 0.4);
}

/* Hero "next fixture" badge - gold accent matches mockup */
.hp-hero-next-fixture {
    background: var(--hm-c-cream);
    border-left: 3px solid var(--hm-c-gold);
    padding: 14px 20px;
}
.hp-hero-next-eyebrow {
    color: var(--hm-c-muted);
    font-size: 10px;
    letter-spacing: 0.18em;
}
.hp-hero-next-day {
    color: var(--hm-c-accent);
    font-family: var(--hm-font-display);
    font-weight: 700;
}
.hp-hero-next-name {
    color: var(--hm-c-navy);
    font-weight: 700;
}

/* ---------- Latest news — proper card styling (matches mockup) ---------- */
.hp-news {
    padding: 80px 0;
    background: var(--hm-c-cream);
}
.hp-news .hp-section-head {
    border-bottom-color: rgba(15, 30, 61, 0.15);
}
.hp-news-card {
    background: #ffffff;
    border: 1px solid rgba(15, 30, 61, 0.08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px -3px rgba(15, 30, 61, 0.08);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hp-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -18px rgba(15, 30, 61, 0.25);
    border-color: var(--hm-c-accent);
}
.hp-news-card-image-placeholder {
    background: linear-gradient(135deg, var(--hm-c-navy) 0%, var(--hm-c-navy-deep) 100%);
    color: var(--hm-c-gold);
    font-family: var(--hm-font-display);
    font-style: italic;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.hp-news-card-meta {
    color: var(--hm-c-muted);
}
.hp-news-card-tag {
    color: var(--hm-c-accent);
    font-weight: 700;
}
.hp-news-card-title {
    font-family: var(--hm-font-display);
    font-size: 21px;
    line-height: 1.25;
    color: var(--hm-c-navy);
    font-weight: 700;
}

/* ---------- Highlight cards — vertical blue line, polished ---------- */
.hp-highlights {
    background: #ffffff;
    border-top: none;
    padding: 80px 0;
}
.hp-highlight-card {
    border-left: 3px solid var(--hm-c-accent);
    padding: 4px 0 4px 28px;
}
.hp-highlight-card .hp-eyebrow {
    color: var(--hm-c-accent);
}
.hp-highlight-headline {
    font-size: 26px;
    line-height: 1.15;
    color: var(--hm-c-navy);
}

/* ---------- Upcoming fixtures — gold mockup-match ---------- */
.hp-fixtures {
    background: var(--hm-c-navy);
    padding: 100px 0;
}
.hp-fixtures .hp-section-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.hp-fixtures .hp-eyebrow-gold {
    color: var(--hm-c-gold);
    letter-spacing: 0.22em;
}
.hp-fixtures .hp-section-title {
    color: #ffffff;
    font-size: 42px;
}
.hp-fixtures .hp-section-title em {
    color: var(--hm-c-gold);
    font-style: italic;
}
.hp-fixtures .hp-section-link-light {
    color: var(--hm-c-gold);
    border-color: var(--hm-c-gold);
    padding-bottom: 4px;
}
.hp-fixture-row {
    grid-template-columns: 80px 1fr auto;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hp-fixture-day {
    color: #ffffff;
    font-size: 36px;
    font-family: var(--hm-font-display);
    font-weight: 700;
}
.hp-fixture-month {
    color: var(--hm-c-gold);
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-top: 6px;
    font-weight: 700;
}
.hp-fixture-name {
    color: #ffffff;
}
.hp-fixture-name strong {
    font-family: var(--hm-font-display);
    font-size: 22px;
    font-weight: 700;
}
.hp-fixture-venue {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    margin-top: 6px;
}
.hp-fixture-link {
    background: var(--hm-c-gold);
    color: var(--hm-c-navy);
    border: 0;
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background .15s, transform .15s;
}
.hp-fixture-link:hover {
    background: #d4ab47;
    color: var(--hm-c-navy);
    transform: translateY(-1px);
}
.hp-fixture-link-soft {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.hp-fixture-link-soft:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
@media (max-width: 720px) {
    .hp-fixtures { padding: 56px 0; }
    .hp-fixtures .hp-section-title { font-size: 28px; }
    .hp-fixture-row { grid-template-columns: 60px 1fr; gap: 12px; padding: 18px 0; }
    .hp-fixture-day { font-size: 26px; }
    .hp-fixture-name strong { font-size: 16px; }
    .hp-fixture-action { grid-column: 2; margin-top: 6px; }
}

/* ---------- Become a member — proper mockup match ---------- */
.hp-become-member {
    background: #ffffff;
    padding: 120px 0;
    overflow: hidden;
}
.hp-become-watermark {
    /* Move watermark to the right side, behind the content column.
       Was dead-center which overlapped image — now flush right, faded. */
    position: absolute;
    top: 50%;
    left: auto;
    right: -60px;
    transform: translateY(-50%);
    font-family: var(--hm-font-display);
    font-size: 480px;
    line-height: 0.85;
    color: rgba(22, 87, 217, 0.06);
    font-weight: 700;
    letter-spacing: -0.05em;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    white-space: nowrap;
}
.hp-become-grid {
    grid-template-columns: 5fr 6fr;
    gap: 80px;
    align-items: center;
}
.hp-become-image {
    position: relative;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(15, 30, 61, 0.5);
    aspect-ratio: 4/5;
}
.hp-become-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.3) contrast(1.05);
}
.hp-become-image::after {
    /* Navy gradient fade at bottom, supports the white caption text */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 45%,
        rgba(15, 30, 61, 0.4) 70%,
        rgba(15, 30, 61, 0.92) 100%
    );
    pointer-events: none;
}
.hp-become-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 26px 22px;
    z-index: 1;
    color: #fff;
    background: transparent;
}
.hp-become-caption-eyebrow {
    display: flex;
    gap: 14px;
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: var(--hm-c-gold);
    margin-bottom: 8px;
}
.hp-become-caption-year,
.hp-become-caption-event {
    color: var(--hm-c-gold);
}
.hp-become-caption-text {
    font-family: var(--hm-font-display);
    font-style: italic;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 92%;
}
.hp-become-image-placeholder {
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, var(--hm-c-cream), var(--hm-c-cream-alt));
    border: none;
    border-radius: 8px;
    color: var(--hm-c-muted);
    font-style: italic;
    box-shadow: inset 0 0 0 1px rgba(15, 30, 61, 0.06);
}
.hp-become-content-col {
    position: relative;
    z-index: 1;
}
.hp-become-content-col .hp-eyebrow {
    color: var(--hm-c-accent);
}
.hp-become-headline {
    font-family: var(--hm-font-display);
    font-size: 52px;
    line-height: 1.0;
    color: var(--hm-c-navy);
    margin: 8px 0 24px;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.hp-become-headline em {
    color: var(--hm-c-accent);
    font-style: italic;
    font-weight: 700;
}
.hp-become-body {
    font-size: 17px;
    line-height: 1.6;
    color: var(--hm-c-ink);
    margin-bottom: 32px;
    max-width: 520px;
}
.hp-become-content-col .hp-btn-primary {
    background: var(--hm-c-navy);
    color: #fff;
    padding: 16px 32px;
    font-size: 13px;
}
.hp-become-content-col .hp-btn-primary:hover {
    background: var(--hm-c-navy-deep);
}
@media (max-width: 880px) {
    .hp-become-member { padding: 64px 0; }
    .hp-become-grid { grid-template-columns: 1fr; gap: 36px; }
    .hp-become-watermark { font-size: 240px; right: -30px; }
    .hp-become-headline { font-size: 34px; }
}
@media (max-width: 600px) {
    .hp-become-watermark { font-size: 180px; }
}

/* ---------- About section — keep as is, slight refinement ---------- */
.hp-about {
    background: #ffffff;
    padding: 88px 0;
}
.hp-about-headline {
    font-size: 52px;
    line-height: 1.0;
    letter-spacing: -0.005em;
}
.hp-disciplines {
    border-top: 1px solid rgba(15, 30, 61, 0.1);
    margin-top: 32px;
    padding-top: 20px;
}
@media (max-width: 720px) {
    .hp-about { padding: 56px 0; }
    .hp-about-headline { font-size: 32px; }
}

/* ---------- Public footer — readable on navy ---------- */
.public-footer,
.h-footer,
footer.public-footer {
    background: var(--hm-c-navy);
    color: rgba(255, 255, 255, 0.85);
    padding: 56px 0 24px;
}
.public-footer h3,
.public-footer h4,
.h-footer h3,
.h-footer h4,
.public-footer .h-footer-col-title,
.public-footer .footer-col-title {
    color: var(--hm-c-gold) !important;
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin: 0 0 18px;
}
.public-footer a,
.h-footer a,
.public-footer .h-footer-link,
.public-footer .footer-link {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    transition: color .15s;
}
.public-footer a:hover,
.h-footer a:hover {
    color: var(--hm-c-gold) !important;
}
.public-footer .h-footer-brand,
.public-footer .h-footer-club-name,
.public-footer .footer-club-name {
    color: #ffffff !important;
}
.public-footer .h-footer-tagline,
.public-footer .footer-tagline,
.public-footer .h-footer-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.public-footer .h-footer-bottom,
.public-footer .footer-bottom {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 18px;
    margin-top: 36px;
}

/* ---------- Public page chrome (training, contact, etc.) — wider, fix navy-on-navy ---------- */
.public-container {
    max-width: 1200px; /* was 1080 */
}
.public-container-narrow {
    max-width: 880px; /* was 720 — still narrow for prose, less cramped on wide monitors */
}

/* When the page-hero is plain (no image), make sure h1 has explicit colour
   so it never inherits a navy text on navy bg by accident. */
.page-hero h1,
.page-hero-content h1 {
    color: #ffffff;
}
.page-hero:not(.page-hero-with-image) {
    background: var(--hm-c-navy);
    color: #fff;
    padding: 80px 0 60px;
    border-bottom: 0;
}
.page-hero:not(.page-hero-with-image) h1 {
    color: #ffffff;
    font-family: var(--hm-font-display);
    font-size: 48px;
    font-weight: 700;
    margin: 0;
}
.page-hero:not(.page-hero-with-image) .page-hero-subtitle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    margin-top: 12px;
}

/* Content area on public pages */
.public-main {
    padding: 56px 0 80px;
}
.public-main h2,
.public-main h3,
.public-main h4 {
    color: var(--hm-c-navy);
}
.public-main h2 { font-size: 28px; margin: 32px 0 16px; }
.public-main h3 { font-size: 22px; margin: 28px 0 14px; }
.public-main p {
    line-height: 1.7;
    font-size: 16px;
    color: var(--hm-c-ink);
}
.public-main ul,
.public-main ol {
    line-height: 1.75;
    color: var(--hm-c-ink);
}
.public-main strong { color: var(--hm-c-navy); }

/* Page header default — for pages without page-hero-with-image */
.public-page-header {
    margin-bottom: 32px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 30, 61, 0.1);
}
.public-page-header h1 {
    font-family: var(--hm-font-display);
    font-size: 38px;
    color: var(--hm-c-navy);
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}
@media (max-width: 720px) {
    .public-page-header h1 { font-size: 28px; }
    .public-main h2 { font-size: 22px; }
    .public-main h3 { font-size: 18px; }
}

/* Tables on public pages — readable */
.public-main table {
    border-collapse: collapse;
    margin: 18px 0;
    width: auto;
}
.public-main table th,
.public-main table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(15, 30, 61, 0.08);
}
.public-main table th {
    color: var(--hm-c-navy);
    font-weight: 700;
    background: rgba(15, 30, 61, 0.03);
}

/* News/blog post body — slightly wider container */
.post-show .public-container,
.news-show .public-container {
    max-width: 920px;
}

/* ---------- Container widening on homepage ---------- */
.h-container {
    max-width: 1320px; /* keep batch 12 width */
    margin: 0 auto;
    padding: 0 24px;
}


/* ---------- Footer fixes - brighter, readable on navy ---------- */
.h-footer h4,
.public-footer h4 {
    color: #d4ab47 !important; /* brighter than --hm-c-gold (#b8923a), more readable on navy */
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
}
.h-footer li a {
    color: rgba(255, 255, 255, 0.85) !important;
}
.h-footer li a:hover {
    color: #d4ab47 !important;
}
.h-footer-est {
    color: #d4ab47 !important;
}
.h-footer-name {
    color: #ffffff !important;
}
.h-footer-blurb {
    color: rgba(255, 255, 255, 0.6) !important;
}
.h-footer-bottom {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 12px;
}
.h-footer-bottom a {
    color: rgba(255, 255, 255, 0.65) !important;
}


/* =================================================================
   BATCH 16 — Page header fix + contact + about + volunteers polish
   ================================================================= */

/* ---------- CRITICAL: h1.h-page-title specificity fix ----------
   Heritage h1/h2/h3 default rules (.heritage-body h1) had specificity
   0,1,1 vs .h-page-title 0,1,0 — so `color: var(--hm-c-navy)` from
   the heritage default was winning over the intended white. Result:
   navy text on navy bg, invisible page titles.
   Force the override here with body-scope. */
body.heritage-body .h-page-title {
    color: #ffffff !important;
    font-family: var(--hm-font-display, 'Playfair Display', Georgia, serif) !important;
    font-weight: 700 !important;
    font-size: 56px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 14px !important;
}
body.heritage-body .h-page-subtitle {
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: var(--hm-font-sans) !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 640px !important;
}
@media (max-width: 720px) {
    body.heritage-body .h-page-title { font-size: 36px !important; }
    body.heritage-body .h-page-subtitle { font-size: 15px !important; }
}

/* h-public-page-hero is the contact page's hero — also ensure white-on-navy
   readable. Same specificity issue. */
body.heritage-body .h-public-page-hero {
    background: var(--hm-c-navy);
    color: #fff;
    padding: 72px 0 56px;
    border-bottom: 4px solid var(--hm-c-gold);
    margin-bottom: 56px;
}
body.heritage-body .h-public-page-hero h1 {
    color: #fff !important;
    font-family: var(--hm-font-display) !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 14px !important;
}
body.heritage-body .h-public-page-hero p {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 640px;
}
body.heritage-body .h-public-page-eyebrow {
    color: var(--hm-c-gold) !important;
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin-bottom: 14px;
}
@media (max-width: 720px) {
    body.heritage-body .h-public-page-hero h1 { font-size: 36px !important; }
    body.heritage-body .h-public-page-hero p { font-size: 15px !important; }
    body.heritage-body .h-public-page-hero { padding: 48px 0 36px; }
}

/* ---------- Page body content — wider, more comfortable reading ---------- */
.h-page-body { padding: 32px 0 80px; }
.h-container-narrow {
    max-width: 880px; /* widened from 720 in batch 15 */
}
.h-prose {
    font-family: var(--hm-font-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--hm-c-ink);
}
.h-prose p { margin: 0 0 18px; }
.h-prose .lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--hm-c-navy);
    font-weight: 500;
}
.h-prose h2 {
    font-family: var(--hm-font-display);
    font-size: 28px;
    color: var(--hm-c-navy);
    margin: 40px 0 16px;
    font-weight: 700;
    line-height: 1.2;
}
.h-prose h3 {
    font-family: var(--hm-font-sans);
    font-size: 18px;
    color: var(--hm-c-navy);
    margin: 28px 0 12px;
    font-weight: 700;
}
.h-prose ul, .h-prose ol {
    margin: 14px 0 18px;
    padding-left: 28px;
}
.h-prose ul li, .h-prose ol li { margin-bottom: 6px; }
.h-prose strong { color: var(--hm-c-navy); }
.h-prose a {
    color: var(--hm-c-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.h-prose a:hover {
    color: var(--hm-c-accent-hover);
    text-decoration-thickness: 2px;
}

/* ---------- Volunteers page — sectioned content ---------- */
.h-prose .vol-intro {
    background: var(--hm-c-cream);
    border-left: 3px solid var(--hm-c-accent);
    padding: 18px 24px;
    margin: 0 0 32px;
    border-radius: 4px;
}
.h-prose .vol-intro p {
    margin-bottom: 12px;
    font-size: 16px;
}
.h-prose .vol-intro p:last-child { margin-bottom: 0; }

.h-prose .vol-section {
    border-top: 1px solid rgba(15, 30, 61, 0.08);
    padding-top: 24px;
    margin-top: 28px;
}
.h-prose .vol-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.h-prose .vol-section-title {
    font-family: var(--hm-font-display);
    font-size: 24px;
    color: var(--hm-c-navy);
    margin: 0 0 12px;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.h-prose .vol-section ul {
    margin: 12px 0 0;
}
.h-prose .vol-section ul li {
    line-height: 1.7;
    margin-bottom: 8px;
}

.h-prose .vol-contact {
    margin-top: 48px;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--hm-c-navy) 0%, var(--hm-c-navy-deep) 100%);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 32px -16px rgba(15, 30, 61, 0.4);
}
.h-prose .vol-contact h3 {
    color: var(--hm-c-gold);
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 14px;
    font-weight: 700;
}
.h-prose .vol-contact-name {
    font-family: var(--hm-font-display);
    font-size: 22px;
    color: #fff;
    margin: 0 0 6px;
    font-weight: 700;
}
.h-prose .vol-contact-name strong { color: #fff; }
.h-prose .vol-contact-phone {
    margin: 0;
    font-size: 24px;
}
.h-prose .vol-contact-phone a {
    color: var(--hm-c-gold);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s;
}
.h-prose .vol-contact-phone a:hover {
    border-bottom-color: var(--hm-c-gold);
    color: var(--hm-c-gold);
}

/* ---------- About page — Olympian portrait cards ---------- */
.about-olympians {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid rgba(15, 30, 61, 0.08);
}
.about-olympians-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 36px;
}
.about-olympians-headline {
    font-family: var(--hm-font-display);
    font-size: 32px;
    color: var(--hm-c-navy);
    margin: 8px 0 12px;
    font-weight: 700;
    line-height: 1.2;
}
.about-olympians-lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--hm-c-ink);
    margin: 0;
}
.about-olympians-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 720px) {
    .about-olympians-grid { grid-template-columns: 1fr; }
    .about-olympians-headline { font-size: 24px; }
}
.about-olympian-card {
    margin: 0;
}
.about-olympian-image {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 48px -24px rgba(15, 30, 61, 0.45);
    aspect-ratio: 3/4;
}
.about-olympian-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.2) contrast(1.05);
}
.about-olympian-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 45%,
        rgba(15, 30, 61, 0.45) 70%,
        rgba(15, 30, 61, 0.94) 100%
    );
    pointer-events: none;
}
.about-olympian-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 18px 16px;
    z-index: 1;
    color: #fff;
}
.about-olympian-eyebrow {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--hm-font-sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--hm-c-gold);
    margin-bottom: 6px;
}
.about-olympian-year {
    color: var(--hm-c-gold);
    font-size: 9px;
    letter-spacing: 0.22em;
}
.about-olympian-event {
    color: var(--hm-c-gold);
    font-family: var(--hm-font-display);
    font-style: italic;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 700;
}
.about-olympian-text {
    font-family: var(--hm-font-display);
    font-style: italic;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* ---------- Contact page — locations + maps ---------- */
.contact-locations {
    margin-bottom: 56px;
}
.contact-locations-heading {
    font-family: var(--hm-font-display);
    font-size: 28px;
    color: var(--hm-c-navy);
    margin: 0 0 28px;
    font-weight: 700;
    text-align: center;
}
.contact-locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
@media (max-width: 720px) {
    .contact-locations-grid { grid-template-columns: 1fr; gap: 28px; }
    .contact-locations-heading { font-size: 22px; }
}
.contact-location {
    background: #fff;
    border: 1px solid rgba(15, 30, 61, 0.08);
    border-radius: 8px;
    padding: 24px 26px;
    box-shadow: 0 2px 8px -3px rgba(15, 30, 61, 0.06);
}
.contact-location-title {
    font-family: var(--hm-font-display);
    font-size: 22px;
    color: var(--hm-c-navy);
    margin: 0 0 14px;
    font-weight: 700;
}
.contact-location-address {
    font-style: normal;
    font-family: var(--hm-font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--hm-c-ink);
    margin: 0 0 12px;
}
.contact-location-w3w {
    font-family: var(--hm-font-sans);
    font-size: 14px;
    margin: 0 0 12px;
    color: var(--hm-c-ink);
}
.contact-w3w-label {
    color: var(--hm-c-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-right: 4px;
}
.contact-location-w3w a {
    color: var(--hm-c-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 13px;
}
.contact-w3w-note {
    color: var(--hm-c-muted);
    font-size: 12px;
    margin-left: 4px;
}
.contact-location-note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--hm-c-muted);
    margin: 0 0 16px;
    font-style: italic;
}
.contact-location-map {
    border-radius: 6px;
    overflow: hidden;
    margin-top: 12px;
}
.contact-location-map iframe {
    display: block;
    border-radius: 6px;
    background: var(--hm-c-cream);
}

/* Form section heading */
.contact-form-heading {
    font-family: var(--hm-font-display);
    font-size: 24px;
    color: var(--hm-c-navy);
    margin: 16px 0 24px;
    font-weight: 700;
}
.contact-prose-intro {
    margin-bottom: 36px;
}


/* =================================================================
   BATCH 17 — Full-bleed hero + width fix + Olympian text colour
   ================================================================= */

/* ---------- CRITICAL: kill the narrow-container habit ----------
   Ryan: "820px wide page content. STOP doing this." Repeat-offender bug.
   Make .h-container-narrow == .h-container. Reading-line width is
   handled by max-width on .h-prose p (not by container width).
   That way: full-width sections, comfortable paragraph lines.   */
.h-container-narrow {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* Prose paragraphs — NO width cap. Spans full container width on
   desktop (1320px). Reading-line length is intentionally long per
   Ryan's spec. Mobile: shrinks naturally with the container. */
.h-prose,
.h-prose p,
.h-prose ul,
.h-prose ol,
.h-prose li {
    max-width: none !important;
}

/* The page header + page body should already use full container.
   No need to override — they already use .h-container at 1320px. */

/* ---------- Full-bleed hero (replaces .hp-hero side-by-side) ---------- */
.hp-hero-v2 {
    position: relative;
    width: 100%;
    min-height: 640px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--hm-c-navy);
    color: #fff;
}
@media (max-width: 880px) {
    .hp-hero-v2 { min-height: 540px; }
}
@media (max-width: 600px) {
    .hp-hero-v2 { min-height: 480px; }
}

.hp-hero-v2-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hp-hero-v2-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-hero-v2-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(15, 30, 61, 0.92) 0%,
            rgba(15, 30, 61, 0.78) 35%,
            rgba(15, 30, 61, 0.55) 60%,
            rgba(15, 30, 61, 0.35) 100%
        );
    pointer-events: none;
}
@media (max-width: 720px) {
    .hp-hero-v2-overlay {
        background: linear-gradient(
            180deg,
            rgba(15, 30, 61, 0.7) 0%,
            rgba(15, 30, 61, 0.88) 100%
        );
    }
}

.hp-hero-v2-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 80px 24px;
}
@media (max-width: 720px) {
    .hp-hero-v2-inner { padding: 56px 24px; }
}

.hp-hero-v2-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
}
@media (max-width: 880px) {
    .hp-hero-v2-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: stretch;
    }
}

/* ---- Hero LEFT: title, body, buttons ---- */
.hp-hero-v2-content { max-width: 720px; }

.hp-hero-v2-eyebrow {
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: var(--hm-c-gold);
    margin-bottom: 22px;
    position: relative;
    padding-left: 32px;
}
.hp-hero-v2-eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 1px;
    background: var(--hm-c-gold);
}

.hp-hero-v2-title {
    font-family: var(--hm-font-display);
    font-size: 72px;
    font-weight: 700;
    line-height: 1.0;
    color: #ffffff;
    margin: 0 0 28px;
    letter-spacing: -0.015em;
}
.hp-hero-v2-title em {
    color: var(--hm-c-gold);
    font-style: italic;
}
@media (max-width: 1100px) {
    .hp-hero-v2-title { font-size: 56px; }
}
@media (max-width: 720px) {
    .hp-hero-v2-title { font-size: 40px; }
}
@media (max-width: 480px) {
    .hp-hero-v2-title { font-size: 32px; }
}

.hp-hero-v2-text {
    font-family: var(--hm-font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 32px;
    max-width: 540px;
}
.hp-hero-v2-text p { margin: 0 0 12px; }
.hp-hero-v2-text p:last-child { margin-bottom: 0; }

.hp-hero-v2-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hp-hero-v2-btn {
    display: inline-flex;
    align-items: center;
    padding: 18px 32px;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s, transform .15s, color .15s, border-color .15s;
}
.hp-hero-v2-btn-primary {
    background: var(--hm-c-accent);
    color: #ffffff;
}
.hp-hero-v2-btn-primary:hover {
    background: var(--hm-c-accent-hover);
    color: #ffffff;
    transform: translateY(-1px);
}
.hp-hero-v2-btn-ghost {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    padding: 16.5px 30px; /* compensate border */
}
.hp-hero-v2-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
}

/* ---- Hero RIGHT: next-fixture card ---- */
.hp-hero-v2-card {
    background: rgba(15, 30, 61, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(184, 146, 58, 0.4);
    border-left: 3px solid var(--hm-c-gold);
    padding: 32px 28px 28px;
    border-radius: 4px;
    color: #fff;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
    align-self: end;
    max-width: 380px;
}
@media (max-width: 880px) {
    .hp-hero-v2-card { max-width: 100%; }
}
.hp-hero-v2-card-eyebrow {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--hm-c-gold);
    margin-bottom: 14px;
}
.hp-hero-v2-card-day {
    font-family: var(--hm-font-display);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.hp-hero-v2-card-month {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--hm-c-gold);
    margin-top: 4px;
    margin-bottom: 18px;
    font-weight: 700;
}
.hp-hero-v2-card-name {
    font-family: var(--hm-font-display);
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 6px;
}
.hp-hero-v2-card-venue {
    font-family: var(--hm-font-sans);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 22px;
}
.hp-hero-v2-card-link {
    display: inline-block;
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hm-c-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--hm-c-gold);
    padding-bottom: 3px;
    font-weight: 700;
    transition: color .15s, border-color .15s;
}
.hp-hero-v2-card-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Hide the OLD hero (.hp-hero) just in case it's cached anywhere — defensive */
.hp-hero { display: none; }

/* ---------- Olympian text colour fix ----------
   .about-olympian-text was inheriting body color (dark) on the navy
   gradient — invisible. Force white. Scoped to the class so it does
   NOT affect any other text on the page. */
.about-olympian-text {
    color: rgba(255, 255, 255, 0.95) !important;
}
.about-olympian-eyebrow,
.about-olympian-year,
.about-olympian-event {
    color: var(--hm-c-gold) !important;
}

/* 3-up grid on the Olympian portraits (was 2-up) */
.about-olympians-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
@media (max-width: 1100px) {
    .about-olympians-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 720px) {
    .about-olympians-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* The Olympian section sits inside the about page body — don't let
   .h-prose max-width clamp it to a column. Use full available width. */
.about-olympians {
    max-width: 100% !important;
}


/* =================================================================
   BATCH 18 — Utility bar uniform · filter pills · events grid ·
              equal-height location cards · membership/events hero
   ================================================================= */

/* ---------- Utility bar — UNIFORM font size across all elements ----------
   Ryan: "make sure ALL this is the same font size". Force everything to
   render at the same size (12px). Label loses its uppercase-bold-divergence. */
.h-utility-bar,
.h-utility-bar .h-utility-bar-left,
.h-utility-bar .h-utility-bar-left > *,
.h-utility-bar .h-utility-label,
.h-utility-bar .h-utility-sep,
.h-utility-bar .h-utility-link {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-weight: 400 !important;
    font-family: var(--hm-font-sans) !important;
    line-height: 1.4 !important;
}
/* Keep the label visually distinguished but not font-size-different */
.h-utility-bar .h-utility-label {
    color: var(--hm-c-gold) !important;
    font-weight: 600 !important;
}
.h-utility-bar .h-utility-link {
    color: var(--hm-c-gold) !important;
    font-weight: 500 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
    margin-left: 8px;
}
.h-utility-bar .h-utility-link:hover {
    border-bottom-color: var(--hm-c-gold);
}
.h-utility-bar .h-utility-sep {
    color: rgba(255, 255, 255, 0.3) !important;
    margin: 0 2px;
}
@media (max-width: 720px) {
    .h-utility-bar,
    .h-utility-bar .h-utility-bar-left,
    .h-utility-bar .h-utility-bar-left > *,
    .h-utility-bar .h-utility-label,
    .h-utility-bar .h-utility-sep,
    .h-utility-bar .h-utility-link {
        font-size: 11px !important;
    }
}

/* ---------- Equal-height location cards ----------
   Cards now have content section (flex-grows) + map section (fixed).
   Both maps line up at the bottom regardless of content above. */
.contact-location {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(15, 30, 61, 0.08);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px -3px rgba(15, 30, 61, 0.06);
}
.contact-location-content {
    flex: 1;
    padding: 24px 26px 18px;
    display: flex;
    flex-direction: column;
}
.contact-locations-grid {
    align-items: stretch; /* not 'start' — both cards same height */
}
.contact-location-map {
    margin: 0;
    border-radius: 0;
    border-top: 1px solid rgba(15, 30, 61, 0.08);
}
.contact-location-map iframe {
    border-radius: 0;
    display: block;
}

/* ---------- Events page filter pills (refined) ----------
   Was: solid candy-coloured fills, contrast issues with dark colours.
   Now: outlined pills with a coloured dot. Active state fills navy. */
.ev-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(15, 30, 61, 0.08);
}
.ev-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    background: #fff;
    border: 1px solid rgba(15, 30, 61, 0.18);
    border-radius: 999px;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--hm-c-ink);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    line-height: 1;
}
.ev-filter-pill:hover {
    border-color: var(--hm-c-navy);
    background: var(--hm-c-cream);
    color: var(--hm-c-navy);
    transform: translateY(-1px);
}
.ev-filter-pill.is-active {
    background: var(--hm-c-navy);
    border-color: var(--hm-c-navy);
    color: #fff;
}
.ev-filter-pill.is-active:hover {
    background: var(--hm-c-navy-deep);
    color: #fff;
}
.ev-filter-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pill-c, var(--hm-c-muted));
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.ev-filter-dot-all {
    background: linear-gradient(135deg,
        #d4544f 0%, #d4544f 25%,
        #f0c64a 25%, #f0c64a 50%,
        #4a8ad4 50%, #4a8ad4 75%,
        #5cb85c 75%, #5cb85c 100%);
    border: 0;
}

/* ---------- Events list — 2-col grid (was 1-row) ---------- */
.ev-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.ev-month-title {
    font-family: var(--hm-font-display);
    font-size: 24px;
    color: var(--hm-c-navy);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 30, 61, 0.1);
    font-weight: 700;
    letter-spacing: -0.005em;
}
.ev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 720px) {
    .ev-grid { grid-template-columns: 1fr; }
}

.ev-card {
    background: #fff;
    border: 1px solid rgba(15, 30, 61, 0.08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px -3px rgba(15, 30, 61, 0.06);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ev-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(15, 30, 61, 0.18);
    border-color: var(--hm-c-accent);
}
.ev-card-link {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
}
@media (max-width: 480px) {
    .ev-card-link {
        grid-template-columns: 64px 1fr;
        gap: 12px;
    }
}
.ev-card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 0;
    background: var(--hm-c-cream);
    border-radius: 4px;
    line-height: 1;
}
.ev-card-day {
    font-family: var(--hm-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--hm-c-navy);
    line-height: 1;
    margin-bottom: 2px;
}
.ev-card-month {
    font-family: var(--hm-font-sans);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--hm-c-accent);
    font-weight: 700;
    margin-bottom: 4px;
}
.ev-card-dow {
    font-family: var(--hm-font-sans);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--hm-c-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.ev-card-body {
    min-width: 0;
}
.ev-card-discipline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hm-font-sans);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hm-c-muted);
    font-weight: 700;
    margin-bottom: 6px;
}
.ev-card-discipline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pill-c, var(--hm-c-muted));
}
.ev-card-name {
    font-family: var(--hm-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--hm-c-navy);
    margin: 0 0 6px;
    line-height: 1.25;
}
.ev-card-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hm-font-sans);
    font-size: 12px;
    color: var(--hm-c-muted);
}
.ev-card-location > span {
    color: var(--hm-c-accent);
    font-size: 7px;
}
.ev-card-entry {
    font-family: var(--hm-font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hm-c-accent);
    font-weight: 700;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .ev-card-entry { display: none; }
}

/* Title sub-tag for filtered events */
.h-page-title-sub {
    font-style: italic;
    color: var(--hm-c-gold) !important;
    font-size: 0.7em;
    letter-spacing: 0;
    font-weight: 500;
}

/* ---------- Young Athletes feature image ---------- */
.page-feature-image {
    margin: 0 0 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 24px 48px -24px rgba(15, 30, 61, 0.3);
    aspect-ratio: 16 / 9;
    background: var(--hm-c-cream);
}
.page-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Membership /join page — make the header look like other pages ----------
   Was using .public-page-header (light, plain). Now uses .h-page-header
   (navy hero with white title, gold underline) just like /about, /training etc. */
.h-public-page > .h-page-header {
    margin-bottom: 56px;
}
/* Keep the rest of /join's content area at its existing width — only the
   hero gets the navy treatment. */

/* ---------- Defensive: hide the OLD fixtures-list classes if cached ----------
   These got replaced by .ev-* in this batch. */
.fixtures-list { display: none; }


/* =================================================================
   BATCH 19 — Supporter form · membership form tidy · hero polish ·
              news polish · footer socials · renewal page · existing-members CTA
   ================================================================= */

/* Footer social icons — proper brand SVGs */
.h-footer-socials li {
    margin-bottom: 8px;
}
.h-footer-socials a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color .15s;
    padding: 4px 0;
}
.h-footer-socials a:hover {
    color: #ffffff !important;
}
.h-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    transition: background .2s, color .2s, transform .2s;
}
.h-social-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}
.h-footer-socials a:hover .h-social-icon {
    transform: translateY(-1px);
}

/* Facebook — brand blue on hover */
.h-footer-socials a:hover .h-social-icon-facebook {
    background: #1877F2;
    color: #ffffff;
}

/* Instagram — gradient on hover */
.h-footer-socials a:hover .h-social-icon-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
}

/* Strava — brand orange on hover */
.h-footer-socials a:hover .h-social-icon-strava {
    background: #FC4C02;
    color: #ffffff;
}

/* ---------- Hero polish — match the mockup ----------
   Title: white with gold italic emphasis on key phrase
   Buttons: blue solid (white text, darkens on hover) + outlined ghost
   Next-fixture card: white headings, gold accents, subtle underline that
   brightens on hover for "View Details →"  */
.hp-hero-v2-title {
    color: #ffffff !important;
    font-weight: 700;
}
.hp-hero-v2-title em,
.hp-hero-v2-title i,
.hp-hero-v2-title strong em {
    color: var(--hm-c-gold) !important;
    font-style: italic;
    font-weight: 700;
}

.hp-hero-v2-text {
    color: rgba(255, 255, 255, 0.92) !important;
}

.hp-hero-v2-btn-primary {
    background: var(--hm-c-accent);
    color: #ffffff !important;
    border: 0;
}
.hp-hero-v2-btn-primary:hover {
    background: #1146b3; /* darker blue on hover */
    color: #ffffff !important;
    transform: translateY(-1px);
}
.hp-hero-v2-btn-ghost {
    background: transparent;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.hp-hero-v2-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.85);
    color: #ffffff !important;
}

/* Next fixture card — white headings, gold accents */
.hp-hero-v2-card {
    background: rgba(15, 30, 61, 0.55);
    border: 1px solid rgba(184, 146, 58, 0.3);
    border-left: 3px solid var(--hm-c-gold);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hp-hero-v2-card-eyebrow {
    color: var(--hm-c-gold) !important;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.hp-hero-v2-card-day {
    color: #ffffff !important;
}
.hp-hero-v2-card-month {
    color: var(--hm-c-gold) !important;
}
.hp-hero-v2-card-name {
    color: #ffffff !important;
}
.hp-hero-v2-card-venue {
    color: rgba(255, 255, 255, 0.7);
}
.hp-hero-v2-card-link {
    color: var(--hm-c-gold) !important;
    border-bottom: 1px solid rgba(184, 146, 58, 0.4);
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.hp-hero-v2-card-link:hover {
    color: #ffffff !important;
    border-bottom-color: #ffffff;
}

/* ---------- News card hover — underline appears on hover (no underline at rest) ---------- */
.hp-news-card,
.hp-news-card:hover,
.hp-news-card:focus,
.news-card,
.news-card:hover {
    text-decoration: none;
}
.hp-news-card .hp-news-card-title,
.news-card .news-card-title {
    text-decoration: none !important;
    transition: color .15s;
}
.hp-news-card:hover .hp-news-card-title,
.hp-news-card:focus-visible .hp-news-card-title,
.news-card:hover .news-card-title,
.news-card:focus-visible .news-card-title {
    text-decoration: underline !important;
    text-decoration-color: var(--hm-c-accent);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* ---------- News placeholder — club crest at 60px (was "MH" gold text) ---------- */
.hp-news-card-image-placeholder {
    background: linear-gradient(135deg, var(--hm-c-navy) 0%, var(--hm-c-navy-deep) 100%);
    color: transparent !important;
    font-size: 0 !important; /* hide any "MH" text content */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hp-news-card-image-placeholder::before {
    content: '';
    width: 60px;
    height: 60px;
    background-image: url('/assets/img/crest.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
    display: block;
}

/* ---------- Membership form tidy ----------
   - Radios on the LEFT of label text (not above)
   - Consent labels: prevent multi-line wrap on critical phrase
   - Compact spacing, less wasted whitespace */
.join-form .consent-row,
.join-form label.consent {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    margin: 0 0 8px !important;
    border: 1px solid rgba(15, 30, 61, 0.1) !important;
    border-radius: 6px !important;
    background: #fff;
    cursor: pointer;
}
.join-form .consent-row:hover,
.join-form label.consent:hover {
    border-color: var(--hm-c-accent);
    background: rgba(22, 87, 217, 0.025);
}

.join-form .consent-row > input[type="checkbox"],
.join-form .consent-row > input[type="radio"],
.join-form label.consent > input[type="checkbox"],
.join-form label.consent > input[type="radio"] {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin-top: 4px;
    flex-shrink: 0;
}

.join-form .consent-row > .consent-text,
.join-form label.consent > .consent-text,
.join-form .consent-row > div,
.join-form label.consent > div:not(:has(input)) {
    grid-column: 2;
}

/* Athletics-background radio rows — same treatment */
.join-form fieldset.form-section > div > label,
.join-form .athletics-bg label,
.join-form .radio-row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: start !important;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 30, 61, 0.1);
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
    cursor: pointer;
}
.join-form fieldset.form-section > div > label:hover,
.join-form .athletics-bg label:hover,
.join-form .radio-row:hover {
    border-color: var(--hm-c-accent);
    background: rgba(22, 87, 217, 0.025);
}
.join-form fieldset.form-section > div > label > input,
.join-form .athletics-bg label > input,
.join-form .radio-row > input {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 4px;
}

/* Form field spacing in general — tighter */
.join-form fieldset.form-section {
    padding: 28px 32px !important;
    margin-bottom: 28px !important;
    border: 1px solid rgba(15, 30, 61, 0.1);
    border-radius: 8px;
    background: #fff;
}
.join-form fieldset.form-section > legend {
    font-family: var(--hm-font-display);
    font-size: 22px;
    color: var(--hm-c-navy);
    font-weight: 700;
    padding: 0 12px;
    margin-bottom: 14px;
}
.join-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .join-form .form-row { grid-template-columns: 1fr; }
    .join-form fieldset.form-section { padding: 20px 18px !important; }
}
.join-form .form-field {
    display: block;
    margin-bottom: 16px;
}
.join-form .form-field-narrow {
    max-width: 200px;
}
.join-form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hm-c-navy);
    margin-bottom: 6px;
}
.join-form .form-help {
    display: block;
    font-size: 12px;
    color: var(--hm-c-muted);
    margin-top: 4px;
}
.join-form input[type="text"],
.join-form input[type="email"],
.join-form input[type="tel"],
.join-form input[type="number"],
.join-form input[type="date"],
.join-form select,
.join-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(15, 30, 61, 0.18);
    border-radius: 4px;
    font-family: var(--hm-font-sans);
    font-size: 15px;
    background: #fff;
    transition: border-color .15s;
}
.join-form input:focus,
.join-form select:focus,
.join-form textarea:focus {
    outline: 2px solid var(--hm-c-accent);
    outline-offset: 1px;
    border-color: var(--hm-c-accent);
}

/* "I do NOT wish..." — keep that critical phrase on a single readable line */
.join-form .consent strong {
    color: var(--hm-c-navy);
    font-weight: 700;
}

/* ---------- Renewal context banner ---------- */
.renewal-context-banner {
    background: rgba(184, 146, 58, 0.08);
    border-left: 3px solid var(--hm-c-gold);
    padding: 14px 18px;
    margin: 0 0 32px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--hm-c-ink);
}
.renewal-context-banner strong {
    color: var(--hm-c-navy);
}
.renewal-context-banner a {
    color: var(--hm-c-accent);
    font-weight: 600;
}

/* ---------- Renewal payment grid ---------- */
.renew-payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 720px) {
    .renew-payment-grid { grid-template-columns: 1fr; }
}
.renew-payment-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(15, 30, 61, 0.12);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    align-items: start;
}
.renew-payment-tile:hover {
    border-color: var(--hm-c-accent);
    background: rgba(22, 87, 217, 0.025);
}
.renew-payment-tile:has(input:checked) {
    border-color: var(--hm-c-accent);
    background: rgba(22, 87, 217, 0.06);
    box-shadow: 0 0 0 1px var(--hm-c-accent) inset;
}
.renew-payment-tile input[type="radio"] {
    margin-top: 4px;
}
.renew-payment-tile-content {
    display: block;
}
.renew-payment-tile-title {
    display: block;
    font-family: var(--hm-font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--hm-c-navy);
    margin-bottom: 4px;
}
.renew-payment-tile-detail {
    display: block;
    font-size: 13px;
    color: var(--hm-c-muted);
    line-height: 1.45;
}

/* ---------- Existing-members + Supporter info-page CTA blocks ---------- */
.renew-cta-block {
    margin: 40px 0 0;
    padding: 36px 40px;
    background: linear-gradient(135deg, var(--hm-c-navy) 0%, var(--hm-c-navy-deep) 100%);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 48px -24px rgba(15, 30, 61, 0.4);
}
.renew-cta-title {
    font-family: var(--hm-font-display);
    font-size: 28px;
    color: #fff;
    margin: 0 0 12px;
    font-weight: 700;
}
.renew-cta-text {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 22px;
    max-width: 580px;
}
.renew-cta-block .hp-btn-primary {
    display: inline-block;
    background: var(--hm-c-accent);
    color: #fff;
    padding: 14px 28px;
    text-decoration: none;
    border-radius: 4px;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background .15s, transform .15s;
}
.renew-cta-block .hp-btn-primary:hover {
    background: #1146b3;
    color: #fff;
    transform: translateY(-1px);
}
@media (max-width: 600px) {
    .renew-cta-block { padding: 24px 22px; }
    .renew-cta-title { font-size: 22px; }
}

/* ---------- Supporter form — re-framed Supporting Membership ---------- */
.sup-intro {
    background: var(--hm-c-cream);
    border-left: 3px solid var(--hm-c-accent);
    padding: 22px 28px;
    border-radius: 4px;
    margin-bottom: 32px;
}
.sup-intro p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--hm-c-ink);
}
.sup-intro p:last-child { margin-bottom: 0; }
.sup-intro .lead {
    font-size: 17px;
    color: var(--hm-c-navy);
    font-weight: 500;
}
.sup-intro-note {
    font-size: 13px !important;
    color: var(--hm-c-muted) !important;
    font-style: italic;
}

.sup-form {
    max-width: 720px;
}

.sup-amount-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}
@media (max-width: 600px) {
    .sup-amount-grid { grid-template-columns: 1fr 1fr; }
}
.sup-amount-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 18px;
    border: 1.5px solid rgba(15, 30, 61, 0.15);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.sup-amount-tile:hover {
    border-color: var(--hm-c-accent);
    background: rgba(22, 87, 217, 0.025);
    transform: translateY(-1px);
}
.sup-amount-tile.is-active {
    border-color: var(--hm-c-accent);
    background: rgba(22, 87, 217, 0.06);
    box-shadow: 0 0 0 1px var(--hm-c-accent) inset;
}
.sup-amount-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sup-amount-figure {
    font-family: var(--hm-font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--hm-c-navy);
    line-height: 1;
}
.sup-amount-period {
    font-size: 11px;
    color: var(--hm-c-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.sup-amount-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9px;
    color: var(--hm-c-gold);
    background: rgba(184, 146, 58, 0.12);
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.sup-custom-amount {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 30, 61, 0.08);
}
.sup-custom-amount summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--hm-c-accent);
    font-weight: 600;
    user-select: none;
}
.sup-custom-amount summary:hover {
    color: var(--hm-c-accent-hover);
}

.sup-form .form-section {
    padding: 28px 32px;
    margin-bottom: 24px;
    border: 1px solid rgba(15, 30, 61, 0.1);
    border-radius: 8px;
    background: #fff;
}
.sup-form .form-section > legend {
    font-family: var(--hm-font-display);
    font-size: 22px;
    color: var(--hm-c-navy);
    font-weight: 700;
    padding: 0 12px;
}
.sup-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .sup-form .form-row { grid-template-columns: 1fr; }
    .sup-form .form-section { padding: 20px 18px; }
}
.sup-form .form-field {
    display: block;
    margin-bottom: 16px;
}
.sup-form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hm-c-navy);
    margin-bottom: 6px;
}
.sup-form input[type="text"],
.sup-form input[type="email"],
.sup-form input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(15, 30, 61, 0.18);
    border-radius: 4px;
    font-family: var(--hm-font-sans);
    font-size: 15px;
    background: #fff;
}
.sup-form input:focus {
    outline: 2px solid var(--hm-c-accent);
    outline-offset: 1px;
    border-color: var(--hm-c-accent);
}
.sup-form .form-section-help {
    font-size: 13px;
    color: var(--hm-c-muted);
    line-height: 1.55;
    margin: -4px 0 14px;
}
.sup-form .form-submit {
    background: var(--hm-c-accent);
    color: #fff;
    padding: 16px 32px;
    border: 0;
    border-radius: 4px;
    font-family: var(--hm-font-sans);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.sup-form .form-submit:hover {
    background: #1146b3;
    transform: translateY(-1px);
}
.sup-form-footer-note {
    text-align: center;
    font-size: 13px;
    color: var(--hm-c-muted);
    margin-top: 14px;
    line-height: 1.5;
}
.sup-form .form-opt {
    color: var(--hm-c-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.sup-form .form-req {
    color: #c0392b;
}

/* The /support page hero needs the same treatment as join (was using
   the older public-page-header) — rendered already in the form view
   using h-page-header so this is just defensive. */


/* =================================================================
   BATCH 20 — Mobile menu · hero 900px · top bar mobile hide · button
              fixes · news polish · renew form · stripe modal
   ================================================================= */

/* ---------- Hero min-height 900px on desktop ---------- */
.hp-hero-v2 {
    min-height: 900px;
}
@media (max-width: 1100px) {
    .hp-hero-v2 { min-height: 720px; }
}
@media (max-width: 880px) {
    .hp-hero-v2 { min-height: 540px; }
}
@media (max-width: 600px) {
    .hp-hero-v2 { min-height: 480px; }
}

/* ---------- Top utility bar — HIDE on mobile (saves ~30px of header) ---------- */
@media (max-width: 720px) {
    .h-utility-bar {
        display: none !important;
    }
}

/* ---------- Mobile hamburger toggle button ---------- */
.h-nav-toggle {
    display: none; /* hidden on desktop */
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    padding: 10px 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
}
.h-nav-toggle-bar {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--hm-c-navy);
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
    transform-origin: center;
}
.h-nav-toggle.is-open .h-nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.h-nav-toggle.is-open .h-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.h-nav-toggle.is-open .h-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Show hamburger + hide desktop nav under 960px */
@media (max-width: 960px) {
    .h-nav-toggle {
        display: inline-flex;
    }
    .h-main-nav {
        display: none !important;
    }
    .h-main-header .h-container {
        grid-template-columns: 1fr auto !important; /* brand + hamburger */
    }
}

/* Tighten desktop nav gap so News fits */
@media (min-width: 961px) {
    .h-main-nav {
        gap: 1.1rem !important;
    }
    @media (max-width: 1180px) {
        .h-main-nav { gap: 0.85rem !important; }
        .h-nav-link { font-size: 12.5px !important; }
    }
}

/* ---------- Mobile slide-in drawer ---------- */
.h-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
}
.h-mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 30, 61, 0.5);
    opacity: 0;
    transition: opacity .22s ease;
}
.h-mobile-drawer.is-open .h-mobile-drawer-backdrop {
    opacity: 1;
}
.h-mobile-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 380px);
    background: var(--hm-c-navy);
    color: #fff;
    transform: translateX(100%);
    transition: transform .22s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -16px 0 32px -16px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}
.h-mobile-drawer.is-open .h-mobile-drawer-panel {
    transform: translateX(0);
}
.h-mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.h-mobile-drawer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-family: var(--hm-font-display);
    font-size: 18px;
    font-weight: 700;
}
.h-mobile-drawer-brand img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.h-mobile-drawer-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.h-mobile-drawer-nav {
    padding: 12px 0 32px;
    display: flex;
    flex-direction: column;
}

.h-mobile-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-family: var(--hm-font-sans);
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.h-mobile-drawer-link:hover,
.h-mobile-drawer-link:focus,
.h-mobile-drawer-link.is-active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--hm-c-gold);
}
.h-mobile-drawer-link.is-coming-soon {
    opacity: 0.5;
}

.h-mobile-drawer-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.h-mobile-drawer-group .h-mobile-drawer-link {
    border-bottom: 0;
}
.h-mobile-drawer-summary {
    list-style: none;
    cursor: pointer;
}
.h-mobile-drawer-summary::-webkit-details-marker {
    display: none;
}
.h-mobile-drawer-chevron {
    transition: transform .2s;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}
.h-mobile-drawer-group[open] .h-mobile-drawer-chevron {
    transform: rotate(180deg);
}
.h-mobile-drawer-children {
    background: rgba(0, 0, 0, 0.18);
    padding: 6px 0;
}
.h-mobile-drawer-child-link {
    display: block;
    padding: 11px 24px 11px 44px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 14.5px;
    transition: color .15s, background .15s;
}
.h-mobile-drawer-child-link:hover,
.h-mobile-drawer-child-link.is-active {
    color: var(--hm-c-gold);
    background: rgba(255, 255, 255, 0.04);
}
.h-mobile-drawer-child-overview {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.h-mobile-drawer-cta {
    display: block;
    margin: 20px 24px 0;
    padding: 14px 18px;
    background: var(--hm-c-accent);
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.h-mobile-drawer-cta:hover {
    background: #1146b3;
}

/* Hide drawer on desktop entirely */
@media (min-width: 961px) {
    .h-mobile-drawer {
        display: none !important;
    }
}

/* ---------- Coaches page button border bug ----------
   .btn-ghost has been picking up the .btn class which has a thick
   border. On editorial body content (.h-prose), buttons should be
   simple text-style links — not bordered buttons that look like form fields. */
.h-prose .btn,
.h-prose .btn-ghost,
.h-prose .btn-small,
.h-prose .btn-pub-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid rgba(22, 87, 217, 0.3);
    border-radius: 4px;
    color: var(--hm-c-accent) !important;
    text-decoration: none !important;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}
.h-prose .btn:hover,
.h-prose .btn-ghost:hover {
    background: var(--hm-c-accent);
    color: #fff !important;
    border-color: var(--hm-c-accent);
}

/* Plain inline links keep their underline — no border-becoming-button */
.h-prose a:not(.btn):not(.btn-ghost):not(.btn-small):not(.btn-pub-ghost) {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ---------- Homepage fixtures "Race website" button — WHITE text ---------- */
.hp-fixture-link,
.hp-fixture-link-light,
.hp-fixtures .hp-btn-primary,
.hp-fixtures .btn-primary,
a.hp-fixture-link {
    color: #ffffff !important;
}
.hp-fixture-link:hover,
.hp-fixture-link-light:hover {
    color: #ffffff !important;
}

/* ---------- Supporter form — centred + wider on desktop ---------- */
.sup-form {
    max-width: 880px;
    margin: 0 auto;
}
.sup-intro {
    max-width: 880px;
    margin: 0 auto 32px;
}

/* ---------- Renewal form (simplified) ---------- */
.renew-intro {
    background: rgba(184, 146, 58, 0.08);
    border-left: 3px solid var(--hm-c-gold);
    padding: 16px 20px;
    margin: 0 0 32px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--hm-c-ink);
}
.renew-intro a {
    color: var(--hm-c-accent);
    font-weight: 600;
}

.renew-form {
    max-width: 880px;
    margin: 0 auto;
}
.renew-form fieldset.form-section {
    padding: 28px 32px;
    margin-bottom: 24px;
    border: 1px solid rgba(15, 30, 61, 0.1);
    border-radius: 8px;
    background: #fff;
}
.renew-form fieldset.form-section > legend {
    font-family: var(--hm-font-display);
    font-size: 22px;
    color: var(--hm-c-navy);
    font-weight: 700;
    padding: 0 12px;
}
.renew-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .renew-form .form-row { grid-template-columns: 1fr; }
    .renew-form fieldset.form-section { padding: 20px 18px; }
}
.renew-form .form-field {
    display: block;
    margin-bottom: 16px;
}
.renew-form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hm-c-navy);
    margin-bottom: 6px;
}
.renew-form .form-help {
    display: block;
    font-size: 12px;
    color: var(--hm-c-muted);
    margin-top: 4px;
}
.renew-form input[type="text"],
.renew-form input[type="email"],
.renew-form input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(15, 30, 61, 0.18);
    border-radius: 4px;
    font-family: var(--hm-font-sans);
    font-size: 15px;
    background: #fff;
}
.renew-form input:focus {
    outline: 2px solid var(--hm-c-accent);
    outline-offset: 1px;
    border-color: var(--hm-c-accent);
}
.renew-form .form-opt,
.renew-form .form-req {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.renew-form .form-opt {
    color: var(--hm-c-muted);
}
.renew-form .form-req {
    color: #c0392b;
}
.renew-form .form-submit {
    display: block;
    margin: 20px auto 0;
    background: var(--hm-c-accent);
    color: #fff;
    padding: 16px 36px;
    border: 0;
    border-radius: 4px;
    font-family: var(--hm-font-sans);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.renew-form .form-submit:hover {
    background: #1146b3;
    transform: translateY(-1px);
}
.renew-form-footer-note {
    text-align: center;
    font-size: 13px;
    color: var(--hm-c-muted);
    margin-top: 14px;
    line-height: 1.5;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* Renewal category tiles */
.renew-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 720px) {
    .renew-cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .renew-cat-grid { grid-template-columns: 1fr; }
}
.renew-cat-tile {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 18px;
    border: 1.5px solid rgba(15, 30, 61, 0.15);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.renew-cat-tile:hover {
    border-color: var(--hm-c-accent);
    background: rgba(22, 87, 217, 0.025);
}
.renew-cat-tile.is-selected,
.renew-cat-tile:has(input:checked) {
    border-color: var(--hm-c-accent);
    background: rgba(22, 87, 217, 0.06);
    box-shadow: 0 0 0 1px var(--hm-c-accent) inset;
}
.renew-cat-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.renew-cat-tile-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.renew-cat-tile-name {
    font-family: var(--hm-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--hm-c-navy);
}
.renew-cat-tile-price {
    font-size: 13px;
    color: var(--hm-c-accent);
    font-weight: 600;
}
.renew-cat-tile-period {
    color: var(--hm-c-muted);
    font-weight: 500;
    margin-left: 4px;
}

/* Stripe payment tile — looks enabled but click-handler intercepts */
.renew-payment-stripe {
    border-style: solid;
}
.renew-payment-stripe::after {
    content: 'Coming soon';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 9px;
    color: var(--hm-c-gold);
    background: rgba(184, 146, 58, 0.12);
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    pointer-events: none;
}

/* ---------- Stripe coming-soon modal ---------- */
.stripe-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.stripe-modal[hidden] {
    display: none !important;
}
.stripe-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 30, 61, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.stripe-modal-panel {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 32px 36px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 32px 64px -16px rgba(15, 30, 61, 0.5);
}
.stripe-modal-panel h3 {
    font-family: var(--hm-font-display);
    font-size: 24px;
    color: var(--hm-c-navy);
    margin: 0 0 14px;
    font-weight: 700;
}
.stripe-modal-panel p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--hm-c-ink);
    margin: 0 0 12px;
}
.stripe-modal-panel p strong {
    color: var(--hm-c-navy);
}
.stripe-modal-actions {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
}
.stripe-modal-actions .form-submit {
    background: var(--hm-c-accent);
    color: #fff;
    padding: 12px 24px;
    border: 0;
    border-radius: 4px;
    font-family: var(--hm-font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background .15s;
}
.stripe-modal-actions .form-submit:hover {
    background: #1146b3;
}

/* ---------- Existing-members CTA on info page (defensive override of batch 19's hp-btn-primary) ---------- */
.renew-cta-block .hp-btn-primary,
.renew-cta-block a.hp-btn-primary {
    color: #fff !important;
}

/* ---------- News page list grid (consistent with homepage news cards) ---------- */
.news-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
@media (max-width: 960px) {
    .news-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .news-list-grid { grid-template-columns: 1fr; }
}

.hp-news-card-featured {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--hm-c-gold);
    color: var(--hm-c-navy);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 3px;
    z-index: 1;
}
.hp-news-card .hp-news-card-image {
    position: relative;
}

/* News page pagination */
.public-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 40px 0;
    font-size: 14px;
    color: var(--hm-c-muted);
}
.public-pagination a {
    color: var(--hm-c-accent);
    text-decoration: none;
    font-weight: 600;
    padding: 8px 16px;
    border: 1px solid rgba(22, 87, 217, 0.25);
    border-radius: 4px;
    transition: background .15s;
}
.public-pagination a:hover {
    background: var(--hm-c-accent);
    color: #fff;
    border-color: var(--hm-c-accent);
}

/* Title sub on filtered pages */
.h-page-title-sub {
    font-style: italic;
    color: var(--hm-c-gold) !important;
    font-size: 0.7em;
    letter-spacing: 0;
    font-weight: 500;
}

/* Hide the old news-list / news-card layout (defensive — replaced by .hp-news-card grid) */
.news-list { display: contents; }
.news-card { display: none; }

/* ---------- Mobile scaling for pages we haven't covered explicitly ---------- */
@media (max-width: 720px) {
    /* Page titles smaller on mobile */
    body.heritage-body .h-page-title {
        font-size: 32px !important;
    }
    body.heritage-body .h-page-subtitle {
        font-size: 14px !important;
    }
    .h-page-header {
        padding: 48px 0 36px !important;
    }

    /* Container padding tighter */
    .h-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Body content typography on mobile */
    .h-prose { font-size: 15px; line-height: 1.7; }
    .h-prose h2 { font-size: 22px; margin-top: 28px; }
    .h-prose h3 { font-size: 17px; }
    .h-prose .lead { font-size: 17px; }

    /* Forms */
    .form-section,
    fieldset.form-section { padding: 18px 16px !important; }

    /* Locations grid on mobile */
    .contact-locations-heading { font-size: 22px !important; }

    /* Olympian portraits */
    .about-olympians-headline { font-size: 24px !important; }

    /* Hero text scaling */
    .hp-hero-v2-title { font-size: 32px !important; }
    .hp-hero-v2-eyebrow { font-size: 11px !important; padding-left: 26px; }
    .hp-hero-v2-text { font-size: 15px !important; }
    .hp-hero-v2-buttons { flex-direction: column; gap: 10px; }
    .hp-hero-v2-btn { width: 100%; justify-content: center; padding: 14px 24px; }
    .hp-hero-v2-card { max-width: 100%; padding: 22px 22px 20px; }

    /* News cards on mobile */
    .hp-news-card-title { font-size: 17px; }

    /* Footer columns stack */
    .h-footer .h-container {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        margin-bottom: 32px !important;
    }
    .h-footer h4 { margin-bottom: 12px !important; }

    /* Become-a-member section */
    .hp-become-headline { font-size: 28px !important; }
    .hp-become-watermark { font-size: 140px !important; }

    /* Filter pills don't need their own override — already responsive */

    /* Membership cat-grid stacks */
    .cat-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .cat-section-title { font-size: 22px !important; }
}

@media (max-width: 480px) {
    body.heritage-body .h-page-title {
        font-size: 26px !important;
    }
    .hp-hero-v2-title { font-size: 28px !important; }
    .h-brand-name { font-size: 16px !important; }
    .h-brand-est { display: none; }
}


/* =============================================================
   BATCH 21 — fixes
   - White bar above navy hero on /join + /support
   - Hamburger placement (right side, same row as logo) + open
   - "Run with a club..." Join CTA button → brand blue
   - Hero ghost button → blue border + white text variant
     (so a hollow-blue-bordered "About" button can sit next to
     "Join the Club"; same look applies to current ghost button)
   ============================================================= */

/* ---- White bar above navy hero on /join + /support ----
   Both views wrap their content in <main class="public-main h-public-page">
   followed by a navy <header class="h-page-header"> hero. The legacy
   `.public-main` rule adds 40px top padding which appears as a white
   bar between the site header and the navy hero. Other pages use
   <main class="h-page"> without `.public-main` and don't have this
   problem. Strip the top padding when `.public-main` directly contains
   a navy `.h-page-header` as its first child. */
.public-main:has(> .h-page-header:first-child) {
    padding-top: 0 !important;
}
/* :has() fallback for older browsers — cover the two known pages */
main.public-main.h-public-page {
    padding-top: 0 !important;
}

/* ---- Hamburger placement & functionality ----
   Earlier rules (line ~2091, ~2444) override the header's grid layout
   to display:flex / flex-direction:column on mobile. That stacks the
   brand on top and the hamburger underneath. Force grid back on mobile
   so brand sits left and hamburger sits right on a single row. */
@media (max-width: 960px) {
    .h-main-header .h-container,
    body.heritage-body .h-main-header .h-container {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto !important;
        flex-direction: row !important; /* in case flex still wins */
        align-items: center !important;
        gap: 12px !important;
    }
    /* Brand goes in column 1, hamburger in column 2.
       The desktop nav (3rd child) is display:none anyway. */
    .h-main-header .h-brand {
        grid-column: 1;
        grid-row: 1;
    }
    .h-nav-toggle {
        grid-column: 2;
        grid-row: 1;
        margin-left: auto; /* belt-and-braces if grid placement is ignored */
    }
    /* Tighten brand on mobile so the hamburger has room */
    .h-brand-crest { width: 44px !important; height: 44px !important; }
    .h-brand-name { font-size: 17px !important; }
}

/* Hamburger button styling — make sure it's clickable + visible.
   Previous version may have had pointer-events issues from a
   transparent overlay. Force interactivity. */
.h-nav-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 50;
    pointer-events: auto !important;
    width: 44px;
    height: 44px;
    display: none;          /* hidden by default; shown <=960px below */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: center;
}
.h-nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--hm-c-navy);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: none;
}
.h-nav-toggle.is-open .h-nav-toggle-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}
.h-nav-toggle.is-open .h-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.h-nav-toggle.is-open .h-nav-toggle-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}
@media (max-width: 960px) {
    .h-nav-toggle { display: inline-flex !important; }
}

/* Mobile drawer — make sure backdrop click registers,
   z-index sits above utility bar/header. */
.h-mobile-drawer { z-index: 9999 !important; }
.h-mobile-drawer[hidden] { display: none !important; }

/* ---- "Run with a club..." Join CTA button → brand blue ----
   The .h-cta-primary class was redefined later in the cascade to use
   --hm-c-navy (dark navy) for its background. The user wants the
   brand blue (#1657d9) for consistency with other primary buttons,
   darkening on hover without changing text colour. */
.h-join-cta .h-cta-primary,
.h-join-cta a.h-cta-primary,
a.h-cta-primary,
.h-cta-primary {
    background: var(--hm-c-accent) !important;        /* #1657d9 brand blue */
    color: #ffffff !important;
    border: 0 !important;
}
.h-join-cta .h-cta-primary:hover,
.h-join-cta a.h-cta-primary:hover,
a.h-cta-primary:hover,
.h-cta-primary:hover {
    background: var(--hm-c-accent-hover) !important;  /* #1146b3 darker blue */
    color: #ffffff !important;                         /* don't change text colour */
    transform: translateY(-1px);
}

/* ---- Hero "About" hollow button — white text, blue border ----
   Site uses .hp-hero-v2-btn-ghost on the homepage hero. The user
   wants a hollow button next to "Join the Club" with white text and
   a BLUE border (not the current translucent-white border).
   This restyle applies to .hp-hero-v2-btn-ghost so any second hero
   button (whether labelled "About" or "Upcoming Fixtures") gets the
   blue-border-on-dark look. */
.hp-hero-v2-btn-ghost {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid var(--hm-c-accent) !important;   /* brand blue border */
}
.hp-hero-v2-btn-ghost:hover {
    background: var(--hm-c-accent) !important;        /* fill blue on hover */
    border-color: var(--hm-c-accent) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}


/* =============================================================
   BATCH 22 — drawer recolour + button hover darken
   - Mobile drawer: white background, brand blue text, soft
     grey-bar hover/active state
   - "Run with a club..." button: pure darken on hover (no hue
     shift) instead of a different colour value
   ============================================================= */

/* ---- Mobile drawer: white panel, blue text ---- */
.h-mobile-drawer-panel {
    background: #ffffff !important;
    color: var(--hm-c-navy) !important;
    box-shadow: -16px 0 32px -16px rgba(15, 30, 61, 0.18) !important;
}

/* Drawer head — white with subtle bottom line */
.h-mobile-drawer-head {
    border-bottom: 1px solid var(--hm-c-line) !important;
}
.h-mobile-drawer-brand {
    color: var(--hm-c-navy) !important;
}
.h-mobile-drawer-close {
    color: var(--hm-c-navy) !important;
}

/* Top-level links: brand blue text */
.h-mobile-drawer-link {
    color: var(--hm-c-accent) !important;             /* brand blue text */
    font-weight: 600 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.h-mobile-drawer-link:hover,
.h-mobile-drawer-link:focus {
    background: #f5f5f5 !important;                   /* soft grey shaded bar */
    color: var(--hm-c-accent-hover) !important;       /* slightly darker on hover */
}
.h-mobile-drawer-link.is-active {
    background: #eef3fc !important;                   /* tinted blue bar for current page */
    color: var(--hm-c-accent) !important;
    border-left: 3px solid var(--hm-c-accent) !important;
    padding-left: 21px !important;                    /* keep label aligned despite border */
}
.h-mobile-drawer-link.is-coming-soon {
    opacity: 0.5;
}

/* Group containers (parent items with children) */
.h-mobile-drawer-group {
    border-bottom: 1px solid #f0f0f0 !important;
}
.h-mobile-drawer-chevron {
    color: rgba(22, 87, 217, 0.55) !important;        /* soft brand blue chevron */
}

/* Expanded children area — slightly tinted background */
.h-mobile-drawer-children {
    background: #f9f9f9 !important;
    padding: 6px 0 !important;
}
.h-mobile-drawer-child-link {
    color: var(--hm-c-navy) !important;               /* slightly muted (navy) for child links */
    font-weight: 500 !important;
}
.h-mobile-drawer-child-link:hover {
    background: #eef3fc !important;
    color: var(--hm-c-accent) !important;
}
.h-mobile-drawer-child-link.is-active {
    background: #eef3fc !important;
    color: var(--hm-c-accent) !important;
}
.h-mobile-drawer-child-overview {
    color: rgba(15, 30, 61, 0.5) !important;          /* muted overview label */
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
}

/* Bottom CTA stays brand blue with white text — already correct,
   just confirm here for clarity against new white panel. */
.h-mobile-drawer-cta {
    background: var(--hm-c-accent) !important;
    color: #ffffff !important;
}
.h-mobile-drawer-cta:hover {
    filter: brightness(0.9);                          /* pure darken, no hue shift */
}

/* ---- "Run with a club..." button — pure darken on hover ----
   Replacing the colour-swap (which read as a hue shift towards navy
   to the eye) with a brightness filter. Same hue, just darker.
   Keeps the brand-blue identity all the way through the interaction. */
.h-join-cta .h-cta-primary:hover,
.h-join-cta a.h-cta-primary:hover,
a.h-cta-primary:hover,
.h-cta-primary:hover {
    background: var(--hm-c-accent) !important;        /* same base colour */
    filter: brightness(0.88);                          /* darken via filter — no hue shift */
    color: #ffffff !important;                         /* text stays white */
    transform: translateY(-1px);
}


/* =============================================================
   BATCH 23 — Playfair font restore + footer polish
   - @import moved to top of file (was being silently dropped),
     so Playfair Display now actually loads on the hero, About
     headline and Become-a-member headline
   - Footer logo 100px wide
   - "Morpeth Harriers & AC" forced onto one line
   ============================================================= */

/* ---- Hero / About / Become headlines: explicit font stack ----
   Even though these classes already use var(--hm-font-display),
   nail it down here with an explicit stack including Playfair as the
   first preference. If the browser hasn't picked up the new @import
   from cache yet, Georgia is still a respectable fallback. */
.hp-hero-v2-title,
.hp-about-headline,
.hp-become-headline {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em;
}

/* ---- Footer logo 100px wide ---- */
.h-footer-brand img,
.public-footer .h-footer-brand img,
footer .h-footer-brand img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain;
}

/* ---- "Morpeth Harriers & AC" on one line ----
   Force nowrap, slightly tighten the font size so it fits the
   1.4fr footer column even on narrower viewports. */
.h-footer-name,
.public-footer .h-footer-name,
footer .h-footer-name {
    white-space: nowrap !important;
    font-size: 20px !important;        /* tightened from 22px so it fits */
    letter-spacing: -0.005em;
}
@media (max-width: 720px) {
    .h-footer-name {
        font-size: 18px !important;    /* a touch smaller on mobile */
    }
}


/* =============================================================
   BATCH 24 — home polish, contact thanks restyle, mobile disciplines
   - Hero card "fixture" title → normal text (was display-serif/700)
   - hp-disciplines: single row on mobile (smaller text + tighter gaps)
   - /contact/thanks restyle: dark-on-navy text bug + white-stripe fix
   ============================================================= */

/* ---- Hero card "next event" title ----
   Was display-serif/700 (which read as a "headline" inside the card).
   User wants normal sans-serif text since the date and venue do the
   visual heavy lifting; the event name is just a label. */
.hp-hero-v2-card-name {
    font-family: var(--hm-font-sans) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

/* ---- hp-disciplines: single row on mobile ----
   At ≤720px: shrink the bullet items so they fit on one line. Smaller
   font, tighter gap, tighter left padding for the bullet dot. */
@media (max-width: 720px) {
    .hp-disciplines {
        gap: 12px !important;
        font-size: 13px !important;
        flex-wrap: nowrap !important;        /* keep on one line */
        justify-content: flex-start;
        white-space: nowrap;
    }
    .hp-disciplines li {
        padding-left: 11px !important;       /* tighter bullet spacing */
    }
}
@media (max-width: 480px) {
    .hp-disciplines {
        gap: 9px !important;
        font-size: 12px !important;
    }
    .hp-disciplines li {
        padding-left: 10px !important;
    }
}

/* ---- /contact/thanks restyle ----
   Without the view file we target the symptoms defensively:
   1) Body text inside .h-page-header → cream-alt (currently dark grey
      because the p tag has no class and inherits from heritage body)
   2) Ghost button on navy hero → white text + white-translucent border
      so "READ THE NEWS" is actually visible
   3) Kill the white stripe between the navy header and the navy footer
      when the page has only a header (no h-page-body content).
      We force the whole .h-public-page background to navy in that case
      via a :has() rule, with a fallback we'll wire up once the view
      file is available. */

/* Body paragraphs sitting inside the navy hero — make them readable */
.h-page-header p,
.h-page-header > p,
.h-page-header .h-container > p,
.h-page-header > div > p {
    color: var(--hm-c-cream-alt) !important;       /* readable on navy */
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 640px;
}

/* Centred thanks-style header (icon + eyebrow + title + body + buttons)
   — center everything via :has() detection of a child eyebrow + heading */
.h-page-header.is-thanks,
.h-page-header.is-thanks .h-container,
.h-page-header.is-thanks > div {
    text-align: center;
}
.h-page-header.is-thanks p {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Buttons inside the navy header — primary stays brand blue, ghost
   gets white-on-translucent so it's actually visible on navy */
.h-page-header .btn-pub-ghost,
.h-page-header a.btn-pub-ghost,
.h-page-header .btn-ghost,
.h-page-header a.btn-ghost {
    background: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
}
.h-page-header .btn-pub-ghost:hover,
.h-page-header a.btn-pub-ghost:hover,
.h-page-header .btn-ghost:hover,
.h-page-header a.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    color: #ffffff !important;
}

/* Primary button inside the hero — already brand-blue from earlier
   batches, but force it explicitly here to be sure */
.h-page-header .btn-primary,
.h-page-header a.btn-primary,
.h-page-header .h-cta-primary,
.h-page-header a.h-cta-primary {
    background: var(--hm-c-accent) !important;
    color: #ffffff !important;
    border: 0 !important;
}
.h-page-header .btn-primary:hover,
.h-page-header a.btn-primary:hover,
.h-page-header .h-cta-primary:hover,
.h-page-header a.h-cta-primary:hover {
    filter: brightness(0.88);
    color: #ffffff !important;
}

/* Kill the white stripe between header and footer on thanks pages.
   When .h-public-page contains a .h-page-header but no meaningful
   .h-page-body content, paint the whole main navy so the page reads
   as a single navy block until the footer.
   Modern browsers honour :has(); the .is-thanks class on the main
   element is the explicit hook for older browsers (added when you
   ship the view file). */
main.h-public-page:has(> .h-page-header:only-child),
main.h-public-page.is-thanks,
main.public-main.h-public-page.is-thanks {
    background: var(--hm-c-navy) !important;
}
/* Ensure the navy hero has no margin-bottom in this case so it visually
   merges with the surrounding navy main */
main.h-public-page:has(> .h-page-header:only-child) > .h-page-header,
main.h-public-page.is-thanks > .h-page-header {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}

/* Larger check icon / success svg defaults — soften from white outline
   to something a touch more refined */
.h-page-header svg[class*="check"],
.h-page-header .h-thanks-icon {
    width: 56px;
    height: 56px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}


/* =============================================================
   BATCH 25 — thanks page restyle (with view file shipped)
   ============================================================= */

/* The contact thanks view now uses the standard .h-page-header pattern
   with explicit .is-thanks hooks. These styles centre the contents,
   handle the icon/eyebrow/title/body/buttons spacing, and pair with
   the batch 24 :has()/.is-thanks white-stripe fix. */

.h-page-header.is-thanks {
    text-align: center;
    padding: 90px 0 100px;          /* generous vertical breathing room */
    border-bottom: 0 !important;    /* merges with surrounding navy main */
    margin-bottom: 0 !important;
}
.h-page-header.is-thanks > .h-container {
    max-width: 720px;
    margin: 0 auto;
}

/* Thanks icon */
.h-thanks-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: #ffffff;
}
.h-thanks-icon svg {
    width: 64px;
    height: 64px;
}

/* Eyebrow above the H1 — brand blue (replaces the old grey eyebrow) */
.h-page-eyebrow {
    font-family: var(--hm-font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--hm-c-accent);                 /* brand blue */
    margin-bottom: 18px;
}

/* H1 inside .is-thanks already inherits white from earlier .h-page-title
   rules — confirm here for clarity */
.h-page-header.is-thanks .h-page-title {
    color: #ffffff !important;
    margin: 0 0 18px !important;
}

/* Body paragraph — readable on navy, centered, comfortable reading width */
.h-page-header.is-thanks .h-page-subtitle,
.h-page-header.is-thanks p {
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 560px;
    margin: 0 auto 36px !important;
    font-size: 17px;
    line-height: 1.6;
}

/* Action buttons row */
.h-thanks-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.h-thanks-actions .h-cta-primary,
.h-thanks-actions .h-cta-ghost-light {
    min-width: 180px;
    text-align: center;
}

/* Mobile: stack the buttons full-width */
@media (max-width: 560px) {
    .h-page-header.is-thanks {
        padding: 64px 0 72px;
    }
    .h-thanks-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .h-thanks-actions .h-cta-primary,
    .h-thanks-actions .h-cta-ghost-light {
        width: 100%;
    }
}

/* Belt-and-braces: when .is-thanks is on the main, the entire page
   (including any white space the browser might paint) is navy. The
   :has() rule from batch 24 already covers this for modern browsers
   but the explicit class hook is cleaner. */
main.public-main.h-public-page.is-thanks,
main.h-public-page.is-thanks {
    background: var(--hm-c-navy) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 60vh;
}


/* =============================================================
   BATCH 28 — event detail page padding
   ============================================================= */

/* Event detail page (PublicFixtureController@show, /events/{slug})
   uses <main class="h-public-page"> with the content directly inside
   a .h-container — NOT wrapped in a navy .h-page-header hero. So
   there's nothing providing top padding, and the badge + h1 sit hard
   against the site header.

   Fix: any .h-public-page that does NOT contain a .h-page-header as
   its first child gets a sensible top padding. Pages that DO have
   the navy hero (e.g. /news, /contact, /existing-members) already
   provide their own top spacing through that hero, so they're
   unaffected by this rule. */
.h-public-page:not(:has(> .h-page-header)) {
    padding-top: 48px;
}

/* Mobile: tighter */
@media (max-width: 720px) {
    .h-public-page:not(:has(> .h-page-header)) {
        padding-top: 28px;
    }
}

/* ============================================================
   Hero next-event card — compact mobile layout
   ============================================================ */
@media (max-width: 768px) {
    .hp-hero-v2-card {
        padding: 14px 16px !important;
    }
    .hp-hero-v2-card-eyebrow {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }
    /* Compress date — small day number + month inline */
    .hp-hero-v2-card-day {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        display: inline-block !important;
        margin: 0 !important;
    }
    .hp-hero-v2-card-month {
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.04em !important;
        display: inline-block !important;
        margin: 0 0 0 6px !important;
        vertical-align: baseline !important;
    }
    .hp-hero-v2-card-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-top: 4px !important;
        line-height: 1.3 !important;
    }
    /* Hide venue and CTA link on mobile — tap the card if you want details */
    .hp-hero-v2-card-venue,
    .hp-hero-v2-card-link {
        display: none !important;
    }
}

/* ============================================================
   Ticker — mobile tweaks (smaller, faster)
   ============================================================ */
@media (max-width: 768px) {
    .hp-ticker {
        font-size: 12px !important;
        padding: 8px 0 !important;
    }
    .hp-ticker-item {
        font-size: 12px !important;
        letter-spacing: 0.02em !important;
    }
    .hp-ticker-divider {
        font-size: 10px !important;
        margin: 0 8px !important;
    }
    /* Speed up the scrolling animation on mobile */
    .hp-ticker-track {
        animation-duration: 5s !important;
    }
}

/* Mobile drawer — "X overview" links match the other child links */
.h-mobile-drawer-child-overview {
    /* Match h-mobile-drawer-child-link styling exactly */
    color: var(--hm-c-navy) !important;
    font-size: 14.5px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
}
.h-mobile-drawer-child-overview:hover,
.h-mobile-drawer-child-overview.is-active {
    background: #eef3fc !important;
    color: var(--hm-c-accent) !important;
}

/* Desktop dropdown — parent page link styled as a soft "overview" item */
.h-nav-dropdown-overview {

    font-weight: 600 !important;
    padding-bottom: 12px !important;
    margin-bottom: 4px;
}
.h-nav-dropdown-overview:hover {
    background: var(--hm-c-cream) !important;
    color: var(--hm-c-accent) !important;
}