/* =====================================================================
   MMGC 2027 look — layered over styles.css
   ---------------------------------------------------------------------
   Loaded by includes/header.php only when site_theme() === '2027', AFTER
   styles.css, so everything here wins by source order. Strategy: re-point the
   design tokens (most of the site follows them), then restyle the shared
   components that hardcode a look. The admin panel and its sign-in page load
   it too (includes/admin-header.php, admin/login.php); its rules are at the
   bottom of this file.

   Approved design: /design-2027-oe8As0hFPD3b5Ti0.html (Oct 2026).
   ===================================================================== */

:root {
  /* Palette: near-white ground, deep forest, fairway green accent, clay CTAs */
  --c-cream:        #fbfaf7;   /* page background */
  --c-cream-soft:   #ffffff;   /* card / surface */
  --c-cream-light:  #fbfaf7;
  --c-sand:         #efe6d4;
  --c-sand-deep:    #d9ccb2;
  --c-forest:       #224a3e;
  --c-forest-deep:  #16302a;
  --c-forest-soft:  #2f7a5a;   /* fairway green */
  --c-clay:         #c0643c;
  --c-clay-hover:   #a5522f;
  --c-ink:          #16201c;
  --c-ink-soft:     #45524c;
  --c-muted:        #6b7670;
  --c-line:         #e6e3dc;
  --c-line-soft:    #efece6;
  --c-success:      #2f7a5a;
  --c-warning:      #c0643c;

  /* New in 2027 */
  --c-tint:         #eef3ef;   /* pale green wash: hovers, table heads, soft bands */
  --c-fairway:      #2f7a5a;
  --c-mint:         #7fd3a6;   /* accent on dark backgrounds */

  /* Type: a modern sans throughout; Fraunces is retired */
  --f-serif: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1:   clamp(2.1rem, 3.4vw + 1rem, 3.5rem);

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --shadow:    0 1px 2px rgba(22, 32, 28, .05), 0 8px 24px rgba(22, 32, 28, .07);
  --shadow-lg: 0 20px 50px rgba(22, 32, 28, .14);
}

/* ---------- Base ------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h1 { font-weight: 800; }

a { text-decoration-color: rgba(34, 74, 62, .3); }
a:hover { color: var(--c-fairway); }

/* ---------- Eyebrow: a quiet green kicker, no rule ---------------------- */

.eyebrow {
  color: var(--c-fairway);
  letter-spacing: .08em;
  font-weight: 700;
}
.eyebrow::before { display: none; }

/* ---------- Buttons: pills ------------------------------------------- */

.btn { border-radius: 999px; }
.btn--ghost { background: var(--c-white); }
.btn--ghost:hover { background: var(--c-tint); border-color: var(--c-forest); }
.link-arrow:hover { color: var(--c-fairway); }

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

.site-header {
  background: rgba(251, 250, 247, .9);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
/* Kept under ~80px so the header stays below the 110px anchor offset on prose pages */
.brand__mark { height: 60px; }
@media (min-width: 768px) { .brand__mark { height: 76px; } }
.brand__name { font-size: 1.2rem; }
@media (max-width: 600px) { .brand__name { font-size: 1.05rem; } }
.brand__name { font-weight: 700; letter-spacing: -0.01em; }
.nav__link { border-radius: 999px; padding: .55rem .9rem; }
.nav__link:hover { background: var(--c-tint); color: var(--c-ink); }
.nav__link[aria-current="page"] {
  box-shadow: none;
  background: var(--c-tint);
  color: var(--c-forest-deep);
}
.nav-toggle { border-radius: 999px; background: var(--c-white); }
@media (max-width: 1024px) {
  .nav {
    background: var(--c-white);
    box-shadow: 0 12px 24px rgba(22, 32, 28, .08);
  }
  .nav__link { border-radius: 10px; }
}

/* ---------- Inner-page header band ------------------------------------ */

.page-header {
  background:
    radial-gradient(700px 320px at 92% 0%, rgba(127, 211, 166, .22), transparent 65%),
    var(--c-tint);
  border-bottom: 1px solid var(--c-line);
}
.page-header__title,
.page-header h1 { letter-spacing: -0.025em; }
.page-header__lede { color: var(--c-ink-soft); }

/* ---------- Sections -------------------------------------------------- */

.section--soft { background: var(--c-tint); }
.section--sand { background: var(--c-tint); }
.section--forest { background: var(--c-forest-deep); color: rgba(255, 255, 255, .85); }
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--c-white); }
.section--forest a { color: var(--c-mint); }
.section--forest .eyebrow { color: var(--c-mint) !important; }

/* ---------- Cards, tiles ---------------------------------------------- */

.card, .tile {
  border-color: var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(22, 32, 28, .05), 0 8px 24px rgba(22, 32, 28, .06);
}
.card:hover, .tile:hover { border-color: var(--c-fairway); }
.tile__icon, .tile__arrow { color: var(--c-fairway); }
.t-card__date { color: var(--c-fairway); }
.t-card__title, .tile__title { font-weight: 700; letter-spacing: -0.015em; }

/* ---------- Forms ----------------------------------------------------- */

.input, .textarea, .select { border-radius: var(--radius-sm); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--c-fairway);
  box-shadow: 0 0 0 3px rgba(47, 122, 90, .18);
}

/* ---------- Tables ---------------------------------------------------- */

.data-table {
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(22, 32, 28, .05), 0 8px 24px rgba(22, 32, 28, .05);
}
.data-table th {
  background: var(--c-tint);
  color: var(--c-forest-deep);
  font-weight: 700;
}
.data-table tbody tr:hover { background: #f7faf8; }

/* ---------- Callouts, badges ------------------------------------------ */

.callout {
  border-radius: var(--radius-sm);
  border-left-width: 4px;
  background: rgba(239, 230, 212, .55);
}
.callout--info    { border-color: var(--c-fairway); background: var(--c-tint); }
.callout--success { border-color: var(--c-fairway); background: var(--c-tint); }
.badge { background: var(--c-tint); color: var(--c-forest-deep); }

/* ---------- Footer: light, not a dark slab ----------------------------- */

.site-footer {
  background: var(--c-white);
  color: var(--c-ink-soft);
  border-top: 1px solid var(--c-line);
}
.site-footer a { color: var(--c-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--c-forest-deep); text-decoration: underline; }
.site-footer__brand { color: var(--c-forest-deep); font-weight: 700; letter-spacing: -0.01em; }
.site-footer__tag { color: var(--c-ink-soft); }
.site-footer__heading { color: var(--c-ink); font-family: var(--f-sans); font-weight: 700; }
.site-footer__bottom { border-top-color: var(--c-line); color: var(--c-muted); }

/* =====================================================================
   Homepage (includes/home-2027.php) — h27- prefix keeps it from leaking
   ===================================================================== */

.h27-hero {
  position: relative; color: #fff; min-height: 620px; display: flex; align-items: flex-end;
  background: var(--c-forest-deep); overflow: hidden;
}
.h27-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
                 object-fit: cover; object-position: 50% 45%; }
.h27-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 30, 26, .72) 0%, rgba(14, 30, 26, .35) 55%, rgba(14, 30, 26, 0) 80%),
    linear-gradient(180deg, rgba(14, 30, 26, .1) 0%, rgba(14, 30, 26, .3) 45%, rgba(14, 30, 26, .85) 100%);
}
.h27-hero__in {
  position: relative; z-index: 1; width: 100%; padding-top: 140px; padding-bottom: 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: end;
}
.h27-pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
}
.h27-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-mint); display: block; }
.h27-hero h1 { color: #fff; font-size: clamp(2.5rem, 6vw, 4.75rem); margin: 18px 0 16px; max-width: 13ch; }
.h27-hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .88); max-width: 40rem; margin: 0; }
.h27-hero__lede a { color: #fff; }
.h27-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.h27-btn-line { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.h27-btn-line:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.h27-btn-light { background: #fff; color: var(--c-forest-deep); }
.h27-btn-light:hover { background: var(--c-tint); color: var(--c-forest-deep); }

.h27-next { background: rgba(255, 255, 255, .97); color: var(--c-ink); border-radius: 18px; padding: 22px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.h27-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-fairway); }
.h27-next__row { display: flex; gap: 16px; align-items: center; margin: 12px 0 16px; }
.h27-date { flex: none; width: 64px; text-align: center; border-radius: 12px; background: var(--c-forest-deep);
            color: #fff; padding: 8px 0 10px; }
.h27-date small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.h27-date b { display: block; font: 800 1.75rem/1 var(--f-serif); }
.h27-next h3 { font-size: 1.25rem; margin: 0; color: var(--c-ink); }
.h27-next__meta { font-size: .875rem; color: var(--c-muted); margin-top: 2px; }
.h27-next__deadline { font-size: .875rem; background: var(--c-sand); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.h27-next .btn { width: 100%; }
.h27-next p { font-size: .9375rem; color: var(--c-ink-soft); margin: 8px 0 14px; }

.h27-stats { background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.h27-stats__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.h27-stat { padding: 26px 20px; border-left: 1px solid var(--c-line); }
.h27-stat:first-child { border-left: 0; }
.h27-stat b { display: block; font: 800 2rem/1 var(--f-serif); color: var(--c-forest-deep); letter-spacing: -0.02em; }
.h27-stat span { display: block; margin-top: 6px; font-size: .875rem; color: var(--c-muted); }

.h27-sec { padding: 88px 0; }
.h27-sec--tint { background: var(--c-tint); }
.h27-sec h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); margin: 10px 0 14px; max-width: 22ch; }
.h27-lede { color: var(--c-ink-soft); max-width: 42rem; margin: 0; }
.h27-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.h27-head h2 { margin-bottom: 0; }
.h27-link { font-weight: 600; color: var(--c-forest-deep); text-decoration: none; white-space: nowrap; }
.h27-link:hover { text-decoration: underline; color: var(--c-forest-deep); }

.h27-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.h27-card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 18px; padding: 28px;
            box-shadow: 0 1px 2px rgba(22, 32, 28, .05), 0 8px 24px rgba(22, 32, 28, .06); }
.h27-card__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--c-tint); color: var(--c-fairway);
                 display: grid; place-items: center; margin-bottom: 18px; }
.h27-card__ico svg { width: 22px; height: 22px; }
.h27-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.h27-card p { color: var(--c-ink-soft); font-size: .975rem; margin: 0; }
.h27-net { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: .8125rem; color: var(--c-ink-soft); }
.h27-net div { background: var(--c-cream); border: 1px solid var(--c-line); border-radius: 10px; padding: 10px; }
.h27-net b { display: block; font: 700 1.125rem/1.2 var(--f-serif); color: var(--c-forest-deep); }

.h27-season { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.h27-ev { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px; padding: 16px;
          display: flex; gap: 14px; align-items: center; color: var(--c-ink); text-decoration: none; }
a.h27-ev:hover { border-color: var(--c-fairway); color: var(--c-ink); }
.h27-ev .h27-date { width: 54px; padding: 6px 0 8px; background: var(--c-tint); color: var(--c-forest-deep); }
.h27-ev .h27-date b { font-size: 1.4rem; }
.h27-ev h3 { font: 600 .975rem/1.25 var(--f-sans); letter-spacing: 0; margin: 0; color: inherit; }
.h27-ev small { display: block; font-size: .8125rem; color: var(--c-muted); margin-top: 2px; }
.h27-ev--casual .h27-date { background: var(--c-sand); color: var(--c-clay-hover); }
.h27-ev--feature { background: var(--c-forest-deep); border-color: var(--c-forest-deep); color: #fff; }
a.h27-ev--feature:hover { color: #fff; }
.h27-ev--feature .h27-date { background: rgba(255, 255, 255, .14); color: #fff; }
.h27-ev--feature small { color: rgba(255, 255, 255, .75); }
.h27-ev--done { opacity: .6; }
.h27-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-size: .8125rem; color: var(--c-muted); }
.h27-legend span { display: inline-flex; align-items: center; gap: 8px; }
.h27-legend i { width: 12px; height: 12px; border-radius: 4px; display: block; }

.h27-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.h27-poy { background: var(--c-forest-deep); color: #fff; border-radius: 18px; padding: 32px; position: relative; overflow: hidden; }
.h27-poy::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
                  background: radial-gradient(circle, rgba(127, 211, 166, .28), transparent 70%); }
.h27-poy .h27-label { color: var(--c-mint); }
.h27-poy h3 { color: #fff; font-size: 2.25rem; margin: 10px 0 6px; }
.h27-poy p { color: rgba(255, 255, 255, .8); margin: 0; }
.h27-poy__pts { display: flex; gap: 28px; margin-top: 24px; position: relative; z-index: 1; }
.h27-poy__pts b { display: block; font: 800 1.75rem/1 var(--f-serif); }
.h27-poy__pts span { font-size: .8125rem; color: rgba(255, 255, 255, .7); }
.h27-board { list-style: none; margin: 0; padding: 0; background: var(--c-white); border: 1px solid var(--c-line);
             border-radius: 18px; box-shadow: 0 1px 2px rgba(22, 32, 28, .05), 0 8px 24px rgba(22, 32, 28, .06); overflow: hidden; }
.h27-board li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
                padding: 14px 20px; border-top: 1px solid var(--c-line); }
.h27-board li:first-child { border-top: 0; }
.h27-rank { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
            font: 700 .875rem/1 var(--f-serif); background: var(--c-tint); color: var(--c-forest-deep); }
.h27-rank--1 { background: #e9c46a; color: #3d2f00; }
.h27-rank--2 { background: #d9dde0; color: #2b3135; }
.h27-rank--3 { background: #e7b98f; color: #4a2a10; }
.h27-who { font-weight: 600; min-width: 0; }
.h27-who small { display: block; font-weight: 400; color: var(--c-muted); font-size: .8125rem; }
.h27-pts { font: 700 1.05rem/1 var(--f-serif); color: var(--c-forest-deep); white-space: nowrap; }
.h27-pts small { font: 500 .75rem var(--f-sans); color: var(--c-muted); margin-left: 2px; }
.h27-bar { height: 6px; border-radius: 3px; background: var(--c-tint); margin-top: 8px; overflow: hidden; }
.h27-bar i { display: block; height: 100%; background: var(--c-fairway); border-radius: 3px; }

.h27-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.h27-qlink { text-decoration: none; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px;
             padding: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--c-ink);
             transition: border-color .15s, transform .15s; }
.h27-qlink:hover { border-color: var(--c-fairway); transform: translateY(-2px); color: var(--c-ink); text-decoration: none; }
.h27-qlink svg { width: 24px; height: 24px; color: var(--c-fairway); margin-bottom: 6px; }
.h27-qlink b { font: 700 1rem/1.25 var(--f-serif); }
.h27-qlink span { font-size: .875rem; color: var(--c-muted); }

.h27-join { background: var(--c-forest-deep); color: #fff; border-radius: 28px; padding: 56px;
            display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.h27-join h2 { color: #fff; margin: 10px 0 12px; }
.h27-join .h27-label { color: var(--c-mint); }
.h27-join p { color: rgba(255, 255, 255, .82); max-width: 36rem; margin: 0; }
.h27-join ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9375rem; }
.h27-join li::before { content: "\2713"; color: var(--c-mint); font-weight: 700; margin-right: 8px; }
.h27-price { text-align: center; }
.h27-price b { display: block; font: 800 3.5rem/1 var(--f-serif); }
.h27-price span { display: block; color: rgba(255, 255, 255, .7); font-size: .875rem; margin: 6px 0 18px; }

/* The homepage's own last section is the join panel, so the footer's
   generous top margin would double the gap. */
.theme-2027 .h27-sec--last { padding-bottom: 0; }

@media (max-width: 1000px) {
  .h27-hero__in { grid-template-columns: 1fr; }
  .h27-next { max-width: 420px; }
  .h27-how { grid-template-columns: 1fr; }
  .h27-split { grid-template-columns: 1fr; gap: 28px; }
  .h27-links { grid-template-columns: repeat(2, 1fr); }
  .h27-join { grid-template-columns: 1fr; padding: 40px 28px; }
  .h27-price { text-align: left; }
}
@media (max-width: 640px) {
  .h27-hero { min-height: 0; }
  .h27-hero__in { padding-top: 120px; padding-bottom: 32px; }
  .h27-stats__in { grid-template-columns: repeat(2, 1fr); }
  .h27-stat { padding: 20px 16px; }
  .h27-stat:nth-child(3) { border-left: 0; }
  .h27-stat:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .h27-sec { padding: 60px 0; }
  .h27-card { padding: 22px; }
  .h27-links { grid-template-columns: 1fr; }
  .h27-board li { padding: 12px 14px; }
}

/* Tournament subtitle carries an inline serif-italic clay style (view.php),
   so only !important can re-point it. */
.theme-2027 .page-header__subtitle {
  font-family: var(--f-sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--c-fairway) !important;
}

/* ---------- Leaderboard: green highlight instead of clay -------------- */

.leaderboard-row--poy .leaderboard-rank,
.leaderboard-row--poy .player { color: var(--c-forest-deep); }
.leaderboard-row--poy { background: linear-gradient(90deg, rgba(47, 122, 90, .10) 0%, rgba(47, 122, 90, .02) 100%); }
.leaderboard-row--rank-1 { background: linear-gradient(90deg, rgba(233, 196, 106, .28) 0%, rgba(233, 196, 106, .05) 100%); }
.leaderboard-medal { width: 12px; height: 12px; box-shadow: none; }
.leaderboard-row--rank-1 .leaderboard-medal { background: #e9c46a; }
.leaderboard-row--rank-2 .leaderboard-medal { background: #c3c9cd; }
.leaderboard-row--rank-3 .leaderboard-medal { background: #e0a878; }

/* ---------- Homepage: course bar, season welcome, club vs course ------- */

/* Quiet pointer for course visitors, under the hero buttons */
.h27-hero__course { margin: 16px 0 0; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.h27-hero__course a { color: #fff; font-weight: 600; text-decoration-color: rgba(255, 255, 255, .45); }
.h27-hero__course a:hover { color: var(--c-mint); }

.h27-welcome__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.h27-welcome h2 { margin-top: 10px; }
.h27-welcome .h27-lede strong { color: var(--c-forest-deep); }
.h27-welcome .h27-hero__cta .btn--ghost { color: var(--c-forest-deep); }
.h27-new { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.h27-new li { background: var(--c-white); border: 1px solid var(--c-line); border-left: 4px solid var(--c-fairway);
              border-radius: 12px; padding: 14px 18px; }
.h27-new b { display: block; font: 700 1rem/1.3 var(--f-serif); color: var(--c-forest-deep); }
.h27-new span { display: block; font-size: .9375rem; color: var(--c-ink-soft); margin-top: 2px; }

.h27-cvc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.h27-cvc__card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: 18px; padding: 26px;
                 display: flex; flex-direction: column; gap: 16px; }
.h27-cvc__card--club { border: 2px solid var(--c-fairway); }
.h27-cvc__who { display: flex; align-items: center; gap: 12px; }
.h27-cvc__who img { height: 40px; width: auto; }
.h27-cvc__who b { display: block; font: 700 1.1rem/1.2 var(--f-serif); color: var(--c-forest-deep); }
.h27-cvc__who small { display: block; color: var(--c-muted); font-size: .8125rem; }
.h27-cvc__flag { width: 40px; height: 40px; border-radius: 10px; background: var(--c-sand); color: var(--c-clay-hover);
                 display: grid; place-items: center; flex: none; }
.h27-cvc__flag svg { width: 22px; height: 22px; }
.h27-cvc ul { margin: 0; padding-left: 1.1rem; color: var(--c-ink-soft); display: grid; gap: 6px; }
.h27-cvc .h27-link { margin-top: auto; }

@media (max-width: 1000px) {
  .h27-welcome__in { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .h27-cvc { grid-template-columns: 1fr; }
}
.h27-hero__kicker { font: 700 clamp(1.25rem, 2.2vw, 1.6rem)/1.2 var(--f-serif); color: var(--c-mint); margin: -6px 0 14px; letter-spacing: -0.01em; }
/* Force the headline break after "Every golfer" so line one never ends on "a". */
.h27-line { display: block; }
.h27-hero h1 { max-width: none; }
/* Smallest phones (320-359px): keep "has a game here." on one line. */
@media (max-width: 359px) { .h27-hero h1 { font-size: 2.15rem; } }

/* Footer: the club-vs-course note, on every page in the 2027 look */
.site-footer__course { margin-top: var(--s-4); max-width: 40ch; font-size: var(--fs-small); color: var(--c-ink-soft);
                       background: var(--c-sand); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4); }
.site-footer__course strong { display: block; color: var(--c-forest-deep); margin-bottom: 2px; }
.site-footer .site-footer__course a { color: var(--c-forest-deep); font-weight: 600; }
/* Avoid a lone last word ("Year.") in the hero paragraph; ignored by older browsers. */
.h27-hero__lede { text-wrap: pretty; }
/* Welcome section: newcomer note (points start in January, membership activates Jan 1) */
.h27-newcomer { margin-top: 18px; background: var(--c-sand); border-radius: 12px; padding: 14px 18px;
                font-size: .9375rem; color: var(--c-ink-soft); line-height: 1.5; }
.h27-newcomer b { display: block; font: 700 1rem/1.3 var(--f-serif); color: var(--c-forest-deep); margin-bottom: 4px; }
.h27-newcomer strong { color: var(--c-forest-deep); }
/* A heading that should read as one statement on wide screens */
.h27-sec h2.h27-h2--wide { max-width: none; }
.h27-nowrap { white-space: nowrap; }
/* Stats bar: a phrase instead of a number, sized so it doesn't overpower the figures */
.h27-stat b.h27-stat__word { font-size: 1.35rem; line-height: 1.15; padding-top: 4px; }
/* Stats bar: big figure + a short title on one line, detail underneath */
.h27-stat b:not(.h27-stat__word) { display: inline; }
.h27-stat__title { display: inline; margin-left: 8px; font: 700 1.1rem/1.2 var(--f-serif); color: var(--c-forest-deep); letter-spacing: -0.01em; }
.h27-stat__title + span { margin-top: 8px; }
@media (max-width: 640px) {
  .h27-stat__title { display: block; margin: 4px 0 0; font-size: 1rem; }
  .h27-stat__title + span { margin-top: 4px; }
}

/* Last season's champions (homepage, shown until the new season's first points event) */
.h27-honors__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 28px; }
.h27-honors .h27-poy h3 { font-size: 1.75rem; }
.h27-honors .h27-poy p a { color: var(--c-mint); font-weight: 600; white-space: nowrap; position: relative; z-index: 1; }


/* ---------- Admin panel ---------------------------------------------------
   Option B (approved Oct 26 2026): keep the dark top bar so admin never looks
   like the public site, in the 2027 deep forest with a fairway rule under it;
   white sidebar with a tinted active row; pale-green table heads; pill
   buttons. Layout, widths and padding are untouched - the members and
   registrations tables were tuned to fit a laptop without sideways scroll. */

.admin-body { background: var(--c-cream); }

.admin-topbar {
  background: var(--c-forest-deep);
  color: var(--c-white);
  border-bottom: 3px solid var(--c-fairway);
  box-shadow: none;
}
.admin-brand,
.admin-brand:hover {
  color: var(--c-white);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.admin-brand small {
  background: var(--c-fairway);
  color: var(--c-white);
  border: 0;
  border-radius: 999px;
  letter-spacing: .06em;
}
.admin-topbar__right a { color: rgba(255, 255, 255, .85); border-radius: 999px; }
.admin-topbar__right a[target="_blank"] { color: var(--c-mint); }
.admin-topbar__right a:hover { background: rgba(255, 255, 255, .1); color: var(--c-white); }
.admin-topbar__user { color: rgba(255, 255, 255, .65); }
.admin-topbar__user strong { color: var(--c-white); }

.admin-nav { background: var(--c-white); }
.admin-nav__link { border-radius: var(--radius-sm); }
.admin-nav__link:hover { background: var(--c-tint); color: var(--c-forest-deep); }
.admin-nav__link.is-active,
.admin-nav__link.is-active:hover {
  background: var(--c-tint);
  color: var(--c-forest-deep);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--c-fairway);   /* phones: the nav is a row */
}
@media (min-width: 800px) {
  .admin-nav__link.is-active,
  .admin-nav__link.is-active:hover { box-shadow: inset 3px 0 0 var(--c-fairway); }
}

.admin-h1 { font-weight: 800; letter-spacing: -0.02em; }
.admin-card,
.admin-table-wrap { border-radius: var(--radius); }

.stat-card { border-radius: var(--radius-sm); border-left-color: var(--c-fairway); }
.stat-card--attention { border-left-color: var(--c-clay); }
.stat-card--warn { border-left-color: var(--c-error); }
.stat-card__value { font-weight: 800; letter-spacing: -0.02em; }

.admin-table th { background: var(--c-tint); color: var(--c-forest); }
.admin-table tbody tr:hover { background: #f7faf8; }

.pill--paid      { background: rgba(47, 122, 90, .14); color: var(--c-forest); }
.pill--pending   { background: rgba(192, 100, 60, .14); color: var(--c-clay-hover); }
.pill--upcoming  { background: var(--c-tint); color: var(--c-forest); }

.btn-sm { border-radius: 999px; background: var(--c-white); }
.btn-sm:hover { background: var(--c-tint); border-color: var(--c-fairway); color: var(--c-forest-deep); }
.btn-sm--primary { background: var(--c-forest); color: var(--c-white); }
.btn-sm--primary:hover { background: var(--c-forest-deep); color: var(--c-white); }
.btn-sm--danger { background: rgba(162, 59, 46, .06); }

.login-shell { background: var(--c-cream); }
.login-card { border-radius: var(--radius-lg); }
.login-card__brand-text { font-weight: 800; letter-spacing: -0.02em; }
.login-card__brand-tag { color: var(--c-fairway); font-weight: 700; }