/* ==========================================================================
   Plunge Masters — shared "Pool" design system (swim.team brand).
   Tokens, fonts, and components used by every refreshed page. Page-specific
   styles live in their own sheets (homepage.css, piers-beers.css) and load
   after this one. Everything is scoped under .hp so nothing leaks into the
   Bootstrap-based admin pages.
   ========================================================================== */

/* --- Self-hosted fonts (Latin subset, from the swim.team system) --------- */
@font-face { font-family:"Inter"; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:500; font-display:swap; src:url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-display:swap; src:url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:700; font-display:swap; src:url("/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:italic; font-weight:400; font-display:swap; src:url("/fonts/source-serif-4-italic.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-display:swap; src:url("/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap; src:url("/fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* --- Design tokens (Pool palette) ---------------------------------------- */
:root {
    --brand-blue:   #1e78c4;
    --brand-deep:   #15507d;  /* links, prices, emphasis */
    --hero-navy:    #0c2f4a;  /* hero/confirmation grounds, timeline badges */
    --ink:          #0f172a;  /* headings */
    --body:         #334155;
    --muted:        #64748b;
    --faint:        #94a3b8;  /* price units, footer, de-emphasized meta */
    --tint:         #eaf2f8;  /* badges, pills, active tier */
    --tint-border:  #cfe0ef;
    --panel:        #f7f8fa;
    --border:       #e2e6ec;  /* strong */
    --border-faint: #eceff3;
    --input-border: #d7dde4;
    --sky:          #8ec7f0;  /* mono eyebrows on dark grounds */

    /* Status (badges only — the only non-blue accents) */
    --ok-bg:        #eafaf0;
    --ok-border:    #b7e5c9;
    --ok-text:      #166b3d;
    --ok-dot:       #2ea968;
    --warn-bg:      #fff7ed;
    --warn-border:  #fed7aa;
    --warn-text:    #9a3412;
    --warn-dot:     #ea9a4c;

    --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --serif: "Source Serif 4", Georgia, serif;

    --pad-x: 56px;   /* section horizontal padding */
    --gap-col: 36px; /* two-column gap */
    --gap-card: 22px;
    --radius-card: 14px;
    --radius-ui: 9px;
}

/* --- Page frame: full-bleed white page, content capped at 1100px --------- */
.hp, .hp * { box-sizing:border-box; }
.hp-vh {
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
body.hp-body {
    margin:0;
    background:#fff;
    font-family:var(--sans);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.hp-container {
    max-width:1100px;
    margin:0 auto;
}

/* --- Base type & links ---------------------------------------------------- */
.hp h1 {
    font-size:27px;
    font-weight:800;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin:0 0 4px;
}
.hp h2 {
    font-size:27px;
    font-weight:700;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin:10px 0 22px;
}
.hp h3 {
    font-size:19px;
    font-weight:700;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0;
}
/* Zero-specificity resets (:where) so single-class modifiers always win. */
:where(.hp p) { margin:0; }
/* Body/prose links: deep blue, underlined. Structural links (nav, footer,
   wordmark, buttons, breadcrumbs) opt out via their own class selectors. */
:where(.hp a) { color:var(--brand-deep); text-decoration:underline; text-underline-offset:2px; }

/* Serif-italic subtitle under an h1 (form pages, event pages) */
.hp-sub {
    font-family:var(--serif);
    font-style:italic;
    font-size:17px;
    color:var(--muted);
    margin-bottom:28px;
}

/* --- Masthead / nav ------------------------------------------------------ */
.hp-masthead {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px var(--pad-x);
    border-bottom:1px solid var(--border-faint);
}
.hp-wordmark {
    font-size:22px;
    font-weight:800;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-decoration:none;
    white-space:nowrap;
}
.hp-wordmark span { color:var(--brand-blue); }
.hp-nav { display:flex; gap:26px; }
.hp-nav a {
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--body);
    text-decoration:none;
}
.hp-nav a:hover { color:var(--brand-deep); }

/* --- Eyebrows ------------------------------------------------------------- */
.hp-eyebrow {
    font-family:var(--mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
}
.hp-eyebrow__num { color:var(--brand-blue); }
.hp-eyebrow--label { letter-spacing:0.14em; }  /* card eyebrows */
.hp-eyebrow--brand { color:var(--brand-blue); }

/* --- Layout helpers -------------------------------------------------------- */
.hp-section { padding:8px var(--pad-x) 44px; }
.hp-row {
    display:flex;
    gap:var(--gap-col);
    align-items:flex-start;
}
.hp-col { flex:1; min-width:0; }
.hp-lead {
    font-size:15px;
    line-height:1.6;
    color:var(--body);
    max-width:620px;
    margin:0 0 36px;
}

/* --- Breadcrumb ------------------------------------------------------------ */
.hp-crumb {
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.06em;
    color:var(--faint);
    margin-bottom:16px;
}
.hp-crumb a { color:inherit; text-decoration:none; }
.hp-crumb a:hover { color:var(--brand-deep); }
.hp-crumb__current { color:var(--muted); }

/* --- Step indicator (Register · Waiver · Pay) ------------------------------ */
.hp-flow {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:22px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.04em;
}
.hp-flow__step { display:flex; align-items:center; gap:6px; color:var(--faint); }
.hp-flow__dot {
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--border-faint);
    color:var(--faint);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
}
.hp-flow__step--active { color:var(--brand-deep); }
.hp-flow__step--active .hp-flow__dot { background:var(--brand-blue); color:#fff; }
.hp-flow__step--done { color:var(--brand-deep); }
.hp-flow__step--done .hp-flow__dot {
    background:var(--tint);
    border:1px solid var(--brand-blue);
    color:var(--brand-blue);
}
.hp-flow__line { flex:1; height:1px; background:var(--border); }
.hp-flow__line--done { background:var(--brand-blue); opacity:0.4; }

/* --- Buttons ---------------------------------------------------------------
   Works as <a>, <button>, or <input type="submit">. */
.hp-btn {
    display:block;
    width:100%;
    border:none;
    cursor:pointer;
    text-align:center;
    background:var(--brand-blue);
    color:#fff;
    text-decoration:none;
    font-family:var(--sans);
    font-size:15px;
    font-weight:600;
    padding:13px 16px;
    border-radius:10px;
}
.hp-btn:hover { background:#1a6bb0; color:#fff; }

/* --- Status pills ----------------------------------------------------------- */
.hp-status {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:var(--mono);
    font-size:12px;
    font-weight:500;
    padding:5px 11px;
    border-radius:999px;
}
.hp-status__dot { width:7px; height:7px; border-radius:50%; }
.hp-status--warn { background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn-text); }
.hp-status--warn .hp-status__dot { background:var(--warn-dot); }
.hp-status--ok { background:var(--ok-bg); border:1px solid var(--ok-border); color:var(--ok-text); }
.hp-status--ok .hp-status__dot { background:var(--ok-dot); }

/* Amber notice row (deadline warnings) */
.hp-notice {
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:14px 16px;
    background:var(--warn-bg);
    border:1px solid var(--warn-border);
    border-radius:11px;
}
.hp-notice__icon { color:var(--warn-dot); font-size:15px; line-height:1.3; }
.hp-notice__text { font-size:13.5px; line-height:1.55; color:var(--warn-text); }
.hp-notice__text strong { font-weight:600; }

/* --- Quiet cards ------------------------------------------------------------ */
.hp-quiet {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px 18px;
}
.hp-quiet__title { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.hp-quiet__body { font-size:13.5px; line-height:1.5; color:var(--muted); }

/* --- Form fields -------------------------------------------------------------
   Styles the class names emitted by the InputField / Checkbox helpers
   (Bootstrap naming, bespoke look) so the helpers stay untouched. */
.hp .form-label {
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--body);
    margin-bottom:7px;
}
.hp .input-group { display:flex; flex-wrap:wrap; }
.hp .form-control {
    flex:1 1 100%;
    width:100%;
    border:1px solid var(--input-border);
    border-radius:10px;
    padding:12px 14px;
    font-family:var(--sans);
    font-size:15px;
    color:var(--ink);
    background:#fff;
}
.hp .form-control:focus {
    outline:none;
    border-color:var(--brand-blue);
    box-shadow:0 0 0 3px rgba(30,120,196,0.15);
}
.hp .form-control.is-invalid { border-color:var(--warn-dot); }
.hp .form-control.is-valid { border-color:var(--ok-border); }
.hp .invalid-feedback {
    display:none;
    flex-basis:100%;
    font-size:13px;
    line-height:1.5;
    color:var(--warn-text);
    margin-top:6px;
}
.hp .is-invalid ~ .invalid-feedback { display:block; }

.hp .form-check {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:11px;
}
.hp .form-check-input {
    appearance:none;
    -webkit-appearance:none;
    flex:0 0 auto;
    width:20px;
    height:20px;
    margin:1px 0 0;
    border:1.5px solid var(--brand-blue);
    border-radius:6px;
    background:#fff;
    cursor:pointer;
}
.hp .form-check-input:checked {
    background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%231e78c4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.5 3.5L15 7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.hp .form-check-input.is-invalid { border-color:var(--warn-dot); }
.hp .form-check-label {
    font-size:14.5px;
    line-height:1.5;
    color:var(--body);
    cursor:pointer;
    flex:1;
    min-width:0;
}

/* --- Footer ------------------------------------------------------------------ */
.hp-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:26px var(--pad-x) 30px;
    border-top:1px solid var(--border-faint);
}
.hp-footer__meta { font-family:var(--mono); font-size:12px; color:var(--faint); }
.hp-footer__meta a { color:var(--muted); text-decoration:none; }
.hp-footer__meta a:hover { color:var(--brand-deep); }
.hp-footer img { height:34px; width:auto; opacity:0.8; }

/* --- Responsive base --------------------------------------------------------- */
@media (max-width:760px) {
    :root { --pad-x:22px; }
    .hp-nav { display:none; }
    .hp-row { flex-direction:column; gap:26px; }
    .hp-col { flex:1 1 auto; width:100%; }
    .hp h2 { font-size:24px; }
    .hp-footer { flex-direction:column; align-items:flex-start; gap:14px; }
}