@import url("brand/brand.css");

/* ---------- Extended tokens (layered on brand.css, same identity) ---------- */
:root {
    --navy-ink:    #071F52;   /* headings on light ground */
    --ink:         #23293A;
    --ink-soft:    #5B6478;
    --surface:     #FFFFFF;
    --surface-2:   #FBF8F2;   /* faint cream tint for alternating sections */
    --border:      #E5DDC9;
    --radius:      10px;
    --shadow:      0 2px 10px rgba(10,48,117,0.08);
    --shadow-lift: 0 10px 30px rgba(10,48,117,0.14);
    --space-1: 0.5rem;  --space-2: 1rem;  --space-3: 1.5rem;
    --space-4: 2.25rem; --space-5: 3.5rem; --space-6: 5.5rem;
    --measure: 68ch;
}
@media (prefers-color-scheme: dark) {
    :root {
        --navy-ink: #C9D6F2; --ink: #E7E5DC; --ink-soft: #A2AAC0;
        --surface: #10182E; --surface-2: #0C1324; --border: #24304F;
        --bg: #0A1120; --brand-cream: #0A1120;
        --shadow: 0 2px 10px rgba(0,0,0,0.35); --shadow-lift: 0 12px 34px rgba(0,0,0,0.5);
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--brand-font);
    background: var(--brand-cream, #F3EEE3);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-navy); }
:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-3); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--space-3); }

/* ---------- Header ---------- */
header.site {
    background: var(--brand-navy);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
header.site .bar {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.85rem var(--space-3);
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
header.site img.logo { height: 46px; width: 46px; border-radius: 50%; flex-shrink: 0; }
header.site .titles { line-height: 1.2; margin-right: auto; }
header.site .titles a { color: #fff; text-decoration: none; }
header.site .titles .club { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-gold-light); }
header.site .titles .app  { font-size: 1.2rem; font-weight: 700; }
header.site nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
header.site nav a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.95rem; }
header.site nav a:hover, header.site nav a.current { color: var(--brand-gold-light); }
header.site nav a.current { border-bottom: 2px solid var(--brand-gold-light); padding-bottom: 2px; }

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(1100px 500px at 15% -10%, rgba(201,162,39,0.20), transparent 60%),
        linear-gradient(180deg, var(--brand-navy) 0%, var(--navy-ink) 100%);
    color: #fff;
    padding: var(--space-6) 0 var(--space-5);
    position: relative;
    overflow: hidden;
}
.hero .roundel-mark {
    position: absolute;
    right: -80px; top: -60px;
    width: 340px; height: 340px;
    border-radius: 50%;
    border: 2px solid rgba(201,162,39,0.28);
    opacity: 0.7;
}
.hero .roundel-mark::before {
    content: "";
    position: absolute; inset: 26px;
    border-radius: 50%;
    border: 1px solid rgba(201,162,39,0.18);
}
.hero .eyebrow {
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem;
    color: var(--brand-gold-light); font-weight: 700; margin: 0 0 0.9rem;
}
.hero h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.08;
    margin: 0 0 1rem;
    max-width: 18ch;
    text-wrap: balance;
}
.hero p.lede {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.82);
    max-width: 52ch;
    margin: 0 0 1.75rem;
}
.hero .actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--brand-gold); color: var(--navy-ink);
    font-weight: 700; text-decoration: none;
    padding: 0.75rem 1.4rem; border-radius: 999px;
    border: none; font-size: 0.95rem; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201,162,39,0.35); }
.btn.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.btn.btn-ghost:hover { border-color: #fff; box-shadow: none; }
.btn.btn-navy { background: var(--brand-navy); color: #fff; }
.btn.btn-navy:hover { box-shadow: 0 8px 20px rgba(10,48,117,0.3); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Sections ---------- */
section.block { padding: var(--space-5) 0; }
section.block.alt { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-3); flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 1.6rem; color: var(--navy-ink); }
.section-head .see-all { font-size: 0.9rem; font-weight: 700; text-decoration: none; }

/* ---------- News cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
a.card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card .cover { aspect-ratio: 16/9; width: 100%; object-fit: cover; background: linear-gradient(135deg, var(--brand-navy), var(--navy-ink)); }
.card .cover.placeholder { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: rgba(255,255,255,0.35); }
.card .body { padding: var(--space-2) var(--space-3) var(--space-3); }
.card .date { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-orange); font-weight: 700; }
.card h3 { margin: 0.35rem 0 0.5rem; font-size: 1.15rem; line-height: 1.3; color: var(--navy-ink); }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Article / page reading view ----------
 * Two column widths, deliberately decoupled: --measure (68ch) keeps body
 * TEXT at a readable line length regardless of screen size — that number
 * shouldn't change on a wide monitor, longer lines just get harder to read.
 * But images/media aren't limited by reading comfort, so they get the wider
 * --media-measure instead — otherwise a big screen leaves photos looking
 * small and cramped in a column sized for a paragraph (reported by user).
 */
:root { --media-measure: 900px; }

article.post, article.page {
    max-width: var(--media-measure);
    margin: 0 auto;
    padding: var(--space-5) var(--space-3);
}
article.post .meta,
article.post h1, article.page h1,
.prose > p, .prose > ul, .prose > ol, .prose > blockquote, .prose > h2, .prose > h3 {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}
article.post .meta { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.5rem; }
article.post h1, article.page h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.15; color: var(--navy-ink); margin-top: 0; margin-bottom: 1.25rem; text-wrap: balance;
}
/* Cover photo reads as the article's masthead: full width of the wider media
   column, no frame, sits above the fold before any body copy. Distinct from
   inline prose photos (below) so the two roles are never visually ambiguous. */
figure.cover-figure { margin: 0 0 var(--space-4); }
article.post img.cover-full { width: 100%; display: block; max-height: 460px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-lift); }

.prose { font-size: 1.08rem; }
.prose p { margin: 0 0 1.2em; }
/* Inline photos use the full media column (wider than the text they sit
   between) — framed and captioned-feeling, clearly "a photo referenced in
   this paragraph", not the article's cover. */
.prose img { width: 100%; border: 1px solid var(--border); border-radius: 8px; margin: 0.4em 0 1.6em; }
.prose h2 { max-width: var(--measure); margin-left: auto; margin-right: auto; color: var(--navy-ink); margin-top: 1.8em; }
.prose a { text-decoration-color: var(--brand-gold); text-underline-offset: 3px; }
.prose blockquote { border-left: 3px solid var(--brand-gold); margin: 1.4em 0; padding: 0.2em 0 0.2em 1.2em; color: var(--ink-soft); font-style: italic; }
.back-link { display: inline-block; margin-bottom: var(--space-3); font-size: 0.9rem; font-weight: 700; text-decoration: none; }

/* ---------- Footer ---------- */
footer.site { background: var(--navy-ink); color: rgba(255,255,255,0.75); padding: var(--space-4) 0; margin-top: var(--space-5); }
footer.site .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; font-size: 0.85rem; }
footer.site a { color: rgba(255,255,255,0.75); }
footer.site a:hover { color: var(--brand-gold-light); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: var(--space-5) var(--space-2); color: var(--ink-soft); }

/* ---------- Photo gallery ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
}
.gallery-item {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: var(--shadow);
    cursor: zoom-in;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.gallery-item:hover img { transform: scale(1.06); }

.lightbox {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(7,31,82,0.92);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem;
}
.lightbox img { max-width: min(90vw, 1100px); max-height: 80vh; object-fit: contain; border-radius: 4px; }
.lightbox-caption { color: #fff; margin-top: 1rem; font-size: 0.95rem; text-align: center; }
.lightbox-close {
    position: absolute; top: 1rem; right: 1.25rem;
    background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1;
    cursor: pointer; padding: 0.4rem;
}

/* ---------- Admin (utilitarian — reuses card/btn but tighter) ---------- */
main.admin { max-width: 980px; margin: var(--space-4) auto; padding: 0 var(--space-3); }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow); margin-bottom: var(--space-3); }
.admin-card h1 { font-size: 1.4rem; color: var(--navy-ink); margin: 0 0 var(--space-2); }
table.admin-list { width: 100%; border-collapse: collapse; }
table.admin-list th, table.admin-list td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.admin-list th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.status-pill { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; }
.status-pill.published { background: #E7F3EC; color: #1F7A4D; }
.status-pill.draft { background: #F3EEE3; color: #8A7B4E; }

label { display: block; margin: 1rem 0 0.35rem; font-weight: 700; font-size: 0.88rem; color: var(--navy-ink); }
input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="number"], select, textarea {
    width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 6px;
    font-size: 1rem; font-family: inherit; background: var(--surface); color: var(--ink);
}
.helptext { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.3rem; }
.flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.92rem; }
.flash.success { background: #E7F3EC; color: #1F7A4D; }
.flash.error { background: #FBEAE1; color: #B23B12; }
.table-scroll { overflow-x: auto; }

#quill-editor { background: var(--surface); min-height: 320px; border-radius: 0 0 6px 6px; }
.ql-toolbar.ql-snow { border-radius: 6px 6px 0 0; background: var(--surface-2); }

/* Custom confirm() replacement — see assets/confirm.js */
.confirm-overlay { position: fixed; inset: 0; background: rgba(10,48,117,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.confirm-box { background: var(--surface); border-radius: 8px; padding: 1.5rem; max-width: 26rem; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.confirm-box p { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.confirm-actions .confirm-ok { background: var(--brand-navy); color: #fff; border: none; padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 0.95rem; cursor: pointer; }
.confirm-actions .confirm-cancel { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 0.95rem; cursor: pointer; }

@media (max-width: 640px) {
    header.site .bar { flex-wrap: wrap; }
    header.site nav { width: 100%; order: 3; gap: 1rem; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.12); }
    .hero .roundel-mark { display: none; }
}