/* GolfSimPass — Contact / Privacy / Terms (2026-08-03).
   Loaded by contact.html, privacy.html and terms.html on top of style.css.

   These three pages have one job: let someone find a specific answer fast, and trust it when they
   do. So the treatment is documentary rather than promotional — a restrained header, a sticky
   section rail for the long documents, and body copy set at a comfortable reading measure. Every
   colour and radius comes from the tokens already in style.css; nothing new is invented here.

   All rules are .sup-* prefixed so they cannot collide with the player-facing or operator styles. */

:root {
    --sup-rail: #F0FDF4;          /* same tint .btn-pill.outline already hovers to */
    --sup-rail-line: #D6EADD;
    --sup-ink-soft: #3A4A40;      /* body copy: ink, relaxed a shade for long-form reading */

    /* ONE container measure for these pages. 1100px is not arbitrary: it is what
       .ops-footer-inner already uses, so the top bar, the page header, the body and the footer
       all share a left edge instead of the four different ones they had. Sections that own their
       own gutter add the 56px back so the CONTENT lands on the same line. */
    --sup-w: 1100px;
    --sup-gut: 28px;
}

/* Top bar: constrained like the home page's, and to the same measure as everything below it. */
.sup-topbar .topbar-inner {
    max-width: var(--sup-w); width: 100%; margin: 0 auto; padding: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

/* ===== Header band ===== */
.sup-head { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); padding: 52px var(--sup-gut) 40px; }
.sup-head-in { max-width: var(--sup-w); margin: 0 auto; }
.sup-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-light); margin: 0 0 12px; }
.sup-head h1 { font-size: 40px; line-height: 1.12; font-weight: 700; margin: 0 0 14px; color: var(--text); text-wrap: balance; }
.sup-lede { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 62ch; }
.sup-lede strong { color: var(--text); font-weight: 600; }
.sup-updated { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 12.5px; font-weight: 600; color: var(--green); background: var(--sup-rail); border: 1px solid var(--sup-rail-line); border-radius: 999px; padding: 6px 13px; }
.sup-updated::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); flex: 0 0 auto; }

/* ===== Document layout: sticky section rail + body ===== */
.sup-doc { max-width: calc(var(--sup-w) + var(--sup-gut) * 2); margin: 0 auto; padding: 38px var(--sup-gut) 72px; display: grid; grid-template-columns: 232px 1fr; gap: 46px; align-items: start; }
.sup-rail { position: sticky; top: 84px; }
.sup-rail h2 { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.sup-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: sup; border-left: 2px solid var(--border); }
.sup-rail li { counter-increment: sup; }
.sup-rail a {
    display: block; padding: 7px 0 7px 14px; margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 13.5px; line-height: 1.4; color: var(--muted); text-decoration: none;
    transition: color .12s, border-color .12s;
}
.sup-rail a::before { content: counter(sup) ". "; font-variant-numeric: tabular-nums; color: #9AA5B1; }
.sup-rail a:hover { color: var(--text); text-decoration: none; }
/* The rail doubles as a position indicator — support.js flips .is-here as you scroll. */
.sup-rail a.is-here { color: var(--green); font-weight: 600; border-left-color: var(--green); }
.sup-rail a.is-here::before { color: var(--green-light); }

/* Mobile: the rail becomes a collapsed "jump to" list rather than 16 links of preamble. */
.sup-jump { display: none; background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin: 0 0 24px; overflow: hidden; }
.sup-jump > summary { cursor: pointer; padding: 14px 16px; font-size: 14.5px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.sup-jump > summary::-webkit-details-marker { display: none; }
.sup-jump > summary::after { content: "\203A"; transform: rotate(90deg); font-size: 19px; color: var(--muted); line-height: 1; }
.sup-jump[open] > summary::after { transform: rotate(-90deg); }
.sup-jump ol { margin: 0; padding: 0 16px 14px 34px; }
.sup-jump li { margin: 5px 0; font-size: 14px; }

/* ===== Document body ===== */
.sup-body { min-width: 0; }
.sup-sec { scroll-margin-top: 88px; padding-bottom: 6px; }
.sup-sec + .sup-sec { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--border); }
.sup-sec h2 { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; color: var(--text); }
.sup-sec h2 .sup-n { color: var(--green-light); font-variant-numeric: tabular-nums; margin-right: 8px; font-weight: 700; }
.sup-sec h3 { font-size: 15.5px; font-weight: 600; margin: 22px 0 7px; color: var(--text); }
.sup-sec p, .sup-sec li { font-size: 15.5px; line-height: 1.75; color: var(--sup-ink-soft); }
.sup-sec p { margin: 0 0 13px; max-width: 68ch; }
.sup-sec ul { margin: 0 0 14px; padding-left: 20px; max-width: 68ch; }
.sup-sec li { margin-bottom: 7px; }
.sup-sec li::marker { color: #9AA5B1; }
.sup-sec strong { color: var(--text); font-weight: 600; }
.sup-sec code { font-family: inherit; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 14px; }
/* Postal / contact blocks inside a section — set apart from the prose so they read as a card of
   details rather than a run-on paragraph. */
.sup-addr { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--green-light);
            border-radius: 10px; padding: 13px 16px; margin: 0 0 14px; max-width: 68ch;
            font-size: 14.5px; line-height: 1.7; color: var(--sup-ink-soft); }

/* A short, plain-English restatement of a dense section. Used sparingly — it earns its keep only
   where the legal wording genuinely needs a translation. */
.sup-plain { background: var(--sup-rail); border: 1px solid var(--sup-rail-line); border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; max-width: 68ch; }
.sup-plain p { margin: 0; font-size: 14.5px; color: #205037; }
.sup-plain b { color: #0F5132; }

/* ===== Contact page ===== */
.sup-contact { max-width: calc(var(--sup-w) + var(--sup-gut) * 2); margin: 0 auto; padding: 38px var(--sup-gut) 72px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
.sup-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 28px; }
.sup-card h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.sup-card-sub { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; }

.sup-field { margin-bottom: 16px; }
.sup-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.sup-field label .sup-opt { font-weight: 400; color: var(--muted); }
.sup-field input, .sup-field select, .sup-field textarea {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--text);
    background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px;
    transition: border-color .12s, box-shadow .12s;
}
.sup-field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.sup-field select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat; background-position: right 13px center; }
.sup-field input:focus, .sup-field select:focus, .sup-field textarea:focus {
    outline: none; border-color: var(--green-light); box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}
.sup-field.is-bad input, .sup-field.is-bad textarea { border-color: #DC2626; }
.sup-err { display: none; margin: 6px 0 0; font-size: 13px; color: #B91C1C; }
.sup-field.is-bad .sup-err { display: block; }
.sup-count { float: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Honeypot: a real person never sees this, a naive bot fills it in. */
.sup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sup-submit { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.sup-submit .btn-pill[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.sup-note { font-size: 13px; color: var(--muted); margin: 0; }
.sup-formmsg { display: none; margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.55; }
.sup-formmsg.is-bad { display: block; background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; }

/* Success replaces the form outright — nothing left to fill in, so nothing left on screen. */
.sup-sent { text-align: center; padding: 12px 4px 4px; }
.sup-sent-mark { width: 54px; height: 54px; border-radius: 50%; background: var(--sup-rail); border: 1px solid var(--sup-rail-line); color: var(--green-light); display: grid; place-items: center; margin: 0 auto 16px; font-size: 26px; line-height: 1; }
.sup-sent h2 { margin: 0 0 8px; }
.sup-sent p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 auto 18px; max-width: 44ch; }

/* Right-hand column: the things people actually need before they write to us. */
.sup-aside { display: grid; gap: 16px; }
.sup-aside .sup-card { padding: 22px; box-shadow: none; }
.sup-aside h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 7px; color: var(--text); }
.sup-aside p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 10px; }
.sup-aside p:last-child { margin-bottom: 0; }
.sup-aside a { font-weight: 600; }
.sup-first { border-color: var(--sup-rail-line); background: var(--sup-rail); }
.sup-first h3 { color: #0F5132; }
.sup-first p { color: #205037; }
.sup-linklist { list-style: none; margin: 0; padding: 0; }
.sup-linklist li { border-top: 1px solid var(--border); }
.sup-linklist li:first-child { border-top: 0; }
.sup-linklist a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.sup-linklist a:hover { color: var(--green); text-decoration: none; }
.sup-linklist a::after { content: "\2192"; color: #9AA5B1; }
.sup-linklist a:hover::after { color: var(--green); }
.sup-linklist span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }

.sup-faq { margin: 0; }
.sup-faq details { border-top: 1px solid var(--border); }
.sup-faq details:first-of-type { border-top: 0; }
.sup-faq summary {
    cursor: pointer; padding: 11px 0; font-size: 14.5px; font-weight: 600; color: var(--text);
    list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.sup-faq summary::-webkit-details-marker { display: none; }
.sup-faq summary::after { content: "+"; color: #9AA5B1; font-weight: 400; font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.sup-faq details[open] summary::after { content: "‘2"; }
.sup-faq summary:hover { color: var(--green); }
.sup-faq details > p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--muted); padding-right: 24px; }
.sup-faq details > p:last-child { margin-bottom: 12px; }

/* The venue-owner route: present, but clearly not the main road on a player page. */
.sup-owner { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; font-size: 13.5px; color: var(--muted); }
.sup-owner a { font-weight: 600; }

/* ===== Cross-links between the three pages ===== */
.sup-also { max-width: calc(var(--sup-w) + var(--sup-gut) * 2); margin: 0 auto; padding: 0 var(--sup-gut) 66px; }
.sup-also-in { border-top: 1px solid var(--border); padding-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sup-also-in span { font-size: 13.5px; color: var(--muted); margin-right: 4px; }
.sup-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 13.5px; font-weight: 600; color: var(--text); }
.sup-chip:hover { border-color: var(--green); color: var(--green); text-decoration: none; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .sup-doc { grid-template-columns: 1fr; gap: 0; padding-top: 26px; }
    .sup-rail { display: none; }
    .sup-jump { display: block; }
    .sup-contact { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
    :root { --sup-gut: 18px; }
    .sup-head { padding: 34px var(--sup-gut) 28px; }
    .sup-topbar { padding-left: var(--sup-gut); padding-right: var(--sup-gut); }
    .sup-head h1 { font-size: 28px; }
    .sup-lede { font-size: 15.5px; }
    .sup-doc, .sup-contact { padding-bottom: 52px; }
    .sup-card { padding: 20px; }
    .sup-sec h2 { font-size: 18.5px; }
    .sup-sec p, .sup-sec li { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .sup-rail a, .sup-field input, .sup-field textarea, .btn-pill { transition: none; }
    html { scroll-behavior: auto; }
}