/* ================================================================
   BodyBuilding Cast — Shared Theme
   theme.css
   Note: Google Fonts is loaded via <link> in header.php, not here.
   ================================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ── */
:root {
    --ink:        #f0ede8;
    --ink-mid:    #c8c2b8;
    --ink-soft:   #8a8278;
    --rule:       #2a2620;
    --rule-mid:   #3a3630;
    --page-bg:    #111009;
    --card-bg:    #1a1812;
    --card-bg2:   #161410;

    --gold:       #c99a4c;
    --gold-bright:#e8c260;
    --gold-dk:    #a07828;
    --gold-lt:    rgba(201,168,76,0.12);
    --gold-rule:  rgba(201,168,76,0.25);
    --gold-btn:   #d4a832;

    --radius:     4px;
    --radius-lg:  8px;
    --shadow:     0 2px 8px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
    --shadow-lg:  0 4px 24px rgba(0,0,0,0.5);

    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

/* ── Base ── */
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--page-bg);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ================================================================
   HEADER / NAV
   ================================================================ */
.site-header {
    background: #0a0900;
    border-bottom: 1px solid var(--gold-rule);
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    gap: 16px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.7);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-icon {
    width: 30px; height: 30px;
    background: var(--gold);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800; font-size: 1rem;
    color: #0a0900; letter-spacing: -1px;
}
.logo-mark {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.35rem;
    letter-spacing: 0.5px; color: #fff; text-transform: uppercase;
}
.logo-mark span { color: var(--gold); }

.site-nav {
    display: flex; align-items: center; gap: 4px;
    flex: 1; justify-content: center;
}
.nav-link {
    font-family: var(--font-display);
    font-weight: 700; font-size: 0.85rem;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-mid); text-decoration: none;
    padding: 6px 12px; border-radius: var(--radius);
    transition: color 0.12s, background 0.12s;
    position: relative;
}
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.nav-link.active { color: var(--gold); }
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -17px; left: 12px; right: 12px;
    height: 2px; background: var(--gold);
    border-radius: 2px 2px 0 0;
}

.header-actions {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.header-search {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--rule-mid); border-radius: var(--radius);
    padding: 0 10px; height: 34px; gap: 7px;
    transition: border-color 0.12s;
}
.header-search:focus-within { border-color: var(--gold-rule); }
.header-search input {
    background: none; border: none; outline: none;
    color: var(--ink); font-size: 0.78rem; width: 160px;
    font-family: var(--font-body);
}
.header-search input::placeholder { color: var(--ink-soft); }
.header-search svg { opacity: 0.4; flex-shrink: 0; }

.btn-signup {
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase;
    background: var(--gold-btn); color: #0a0900;
    border: none; border-radius: var(--radius);
    padding: 7px 18px; cursor: pointer; text-decoration: none;
    transition: background 0.12s; white-space: nowrap;
}
.btn-signup:hover { background: var(--gold-bright); }
.btn-signup-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--rule-mid);
    color: var(--ink-soft);
}

.header-bell {
    background: none; border: none; cursor: pointer;
    color: var(--ink-soft); padding: 4px;
    border-radius: var(--radius);
    display: flex; align-items: center;
    transition: color 0.12s;
}
.header-bell:hover { color: var(--gold); }

/* ================================================================
   HERO (shared base — pages extend with page-specific rules)
   ================================================================ */
.hero {
    background: linear-gradient(180deg, #0f0d06 0%, #111009 100%);
    border-bottom: 1px solid var(--gold-rule);
    padding: 48px 0 0;
    position: relative; overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        -55deg,
        transparent, transparent 22px,
        rgba(201,168,76,0.025) 22px, rgba(201,168,76,0.025) 23px
    );
    pointer-events: none;
}
/* Pages without tabs use padding on the bottom too */
.hero.hero-padded { padding-bottom: 40px; }

.hero-eyebrow {
    font-size: 0.68rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold); font-weight: 600; margin-bottom: 10px;
}
.hero-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 0.95; text-transform: uppercase;
    letter-spacing: 0.5px; color: #fff; margin-bottom: 14px;
}
.hero-title em { color: var(--gold); font-style: normal; display: block; }
.hero-sub {
    font-size: 0.88rem; color: var(--ink-soft);
    max-width: 460px; margin-bottom: 24px;
}

/* ================================================================
   FEDERATION BADGES
   ================================================================ */
.fed-badge {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; padding: 2px 7px; border-radius: 3px;
}
.fed-wnbf  { background: rgba(59,130,246,0.18);  color: #7eb8f7; border: 1px solid rgba(59,130,246,0.3); }
.fed-nanbf { background: rgba(34,197,94,0.14);   color: #6ee79b; border: 1px solid rgba(34,197,94,0.28); }
.fed-nbaff { background: rgba(168,85,247,0.16);  color: #c084fc; border: 1px solid rgba(168,85,247,0.3); }
.fed-default { background: var(--gold-lt); color: var(--gold); border: 1px solid var(--gold-rule); }

/* ================================================================
   SHOW / RESULT CARDS (shared structure)
   ================================================================ */
.card-list {
    display: flex; flex-direction: column; gap: 6px;
}

.show-card,
.result-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    cursor: pointer;
    display: grid;
    grid-template-columns: 76px 1fr auto;
    min-height: 78px;
    align-items: stretch;
}
.show-card:hover,
.result-card:hover {
    border-color: var(--gold-rule);
    box-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,168,76,0.12);
    transform: translateY(-1px);
}
.show-card.no-event-page { cursor: default; }
.show-card.no-event-page:hover { transform: none; box-shadow: var(--shadow); border-color: var(--rule); }

/* Date column */
.card-date-col {
    background: linear-gradient(160deg, #2a2210 0%, #1a1608 100%);
    border-right: 1px solid var(--gold-rule);
    color: var(--gold);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 10px 6px; text-align: center;
}
.card-date-col.past {
    background: linear-gradient(160deg, #1e1e1e 0%, #141414 100%);
    border-right-color: var(--rule);
    color: var(--ink-soft);
}
.date-month { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; opacity: 0.8; line-height: 1; }
.date-day   { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; margin: 2px 0; }
.date-year  { font-size: 0.56rem; opacity: 0.55; letter-spacing: 0.5px; }

/* Content column */
.card-content {
    padding: 11px 14px;
    display: flex; flex-direction: column;
    justify-content: center; gap: 5px;
}
.card-name {
    font-weight: 600; font-size: 0.95rem;
    color: var(--ink); line-height: 1.25;
}
.card-name a { color: inherit; text-decoration: none; }
.card-name a:hover { color: var(--gold); }

.card-meta-row {
    display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center;
}
.card-location {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.76rem; color: var(--ink-soft);
}
.card-location svg { flex-shrink: 0; opacity: 0.45; }

.card-links-row {
    display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
}
.card-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem; font-weight: 600;
    padding: 3px 10px; border-radius: 3px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    letter-spacing: 0.3px; white-space: nowrap;
}
.link-event   { background: var(--gold-lt); color: var(--gold); border: 1px solid var(--gold-rule); }
.link-event:hover { background: var(--gold); color: #0a0900; }
.link-results { background: var(--gold-lt); color: var(--gold); border: 1px solid var(--gold-rule); }
.link-results:hover { background: var(--gold); color: #0a0900; }
.link-website { background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); }
.link-website:hover { background: var(--rule); color: var(--ink); }
.link-signup  { background: transparent; color: var(--gold); border: 1px solid var(--gold-rule); }
.link-signup:hover { background: var(--gold); color: #0a0900; }

/* Chevron column */
.card-chevron {
    display: flex; align-items: center;
    padding: 0 14px 0 8px; color: var(--rule-mid);
    flex-shrink: 0; transition: color 0.12s;
}
.show-card:hover .card-chevron,
.result-card:hover .card-chevron { color: var(--gold); }

/* ================================================================
   SECTION LABELS
   ================================================================ */
.section-label {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; margin-top: 32px;
}
.section-label:first-child { margin-top: 0; }
.section-label-text {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.1rem; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--gold); white-space: nowrap;
}
.section-label-pill {
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px;
}
.pill-upcoming { background: var(--gold); color: #0a0900; }
.pill-past     { background: var(--rule); color: var(--ink-soft); }
.section-rule  { flex: 1; height: 1px; background: var(--rule); }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state {
    text-align: center; padding: 40px 20px;
    color: var(--ink-soft); font-size: 0.875rem;
    background: var(--card-bg); border-radius: var(--radius);
    border: 1px dashed var(--rule);
}
.empty-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; opacity: 0.3; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
    background: #0a0900;
    border-top: 1px solid var(--gold-rule);
    color: var(--ink-soft);
    padding: 18px 24px; font-size: 0.75rem;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--ink-soft); text-decoration: none; transition: color 0.12s; }
.footer-links a:hover { color: var(--gold); }

/* ================================================================
   SVG LOCATION PIN (inline helper used across cards)
   ================================================================ */
.pin-svg { display: inline-block; }

/* ================================================================
   RESPONSIVE — shared breakpoints
   ================================================================ */
@media (max-width: 900px) {
    .sidebar { position: static; }
}
@media (max-width: 600px) {
    .site-nav      { display: none; }
    .header-search { display: none; }
    .btn-signup    { display: none; }
    .header-bell   { display: none; }
    .site-header   { padding: 0 14px; }
    .site-footer   { padding: 14px; }
    .footer-links  { gap: 12px; }
    .show-card,
    .result-card   { grid-template-columns: 68px 1fr auto; }
    .date-day      { font-size: 1.6rem; }
}