/* ============================================================
   URNow Games — Design System
   Matches URNow Foundation aesthetic exactly
   Navy / Parchment / Gold constitutional theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --navy:  #0a1628;
  --navy2: #122040;
  --gold:  #b8902a;
  --gold2: #d4a843;
  --gold3: #f0cc7a;
  --gold-readable: #8b6d20;
  --cream: #f5f0e8;
  --cream2:#ede5d4;
  --cream3:#e0d5be;
  --ink:   #1a1208;
  --muted: #6b5e45;
  --red:   #8b1a1a;
  --success:#2d6a4f;
  --danger: #8b1a1a;
}

/* ─────────────────────────────────────────────────────────────
   COLOR USAGE RULES (enforce these — inconsistency causes
   contrast failures like the one fixed in this pass):

   On NAVY backgrounds (dark surfaces):
     Headings/emphasis  → --cream, --cream2, or --gold3
     Body text          → --cream2
     Labels/eyebrow     → --gold2 (NOT --gold — fails WCAG body-text AA)
     Links              → --gold2
     Borders/dividers   → --gold (with opacity or rgba OK)
     Decorative accents → --gold (with opacity)

   On CREAM/PARCHMENT backgrounds (light surfaces):
     Headings           → --navy
     Body text          → --ink
     Eyebrow labels     → --navy    (decision 2026-04: we prefer navy over gold)
     Muted text         → --muted
     Hyperlinks         → --gold-readable (never --gold, fails AA on cream)
     Borders/dividers   → --gold with rgba alpha

   Rule: --gold alone is NEVER a text color. Use --gold2 for small text
   on navy, --gold-readable for text on cream. The dim --gold is for
   decoration only. ─────────────────────────────────────────── */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy);
  color: var(--cream2);
  font-family: 'Crimson Text', serif;
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  color: var(--cream);
  line-height: 1.2;
}
.gold-text    { color: var(--gold2) !important; }
.cream-text   { color: var(--cream) !important; }
.muted-text   { color: var(--cream2); opacity: .65; font-size: 15px; }
.gold-hr { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: none; margin: 20px 0; }
.font-monospace { font-family: 'Courier New', monospace; font-size: 14px; }

/* ── Navigation ───────────────────────────────────────────── */
/* NOTE: #header base styles are defined in HeaderTemplate.html.twig (single source of truth).
   This keeps the fixed-header height + spacer height + mobile-nav top offset all in one place. */
.logo {
  height: 38px;
  width: auto;
}
.title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold2);
  letter-spacing: .12em;
  margin-left: 10px;
  vertical-align: middle;
}
.title-sub { color: var(--gold3); font-weight: 400; }

/* Nav links */
#user-nav ul, #navbar ul { list-style: none; display: flex; gap: 24px; align-items: center; }
#user-nav li, #navbar li { }
#user-nav a, #navbar a {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cream2);
  text-decoration: none;
  opacity: .75;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: all .2s;
}
#user-nav a:hover, #navbar a:hover,
#navbar a.active-page {
  opacity: 1;
  color: var(--gold2);
  border-bottom-color: var(--gold2);
}
#user-nav { margin-left: auto; }
strong.gold-text { color: var(--gold2); }

/* Mobile nav toggle */
.nav-button { background: none; border: none; color: var(--gold2); font-size: 22px; cursor: pointer; }
@media (max-width: 991px) {
  #user-nav { display: none !important; }
  #navbar.collapse:not(.show) { display: none; }
  #navbar {
    position: fixed;
    top: 68px;
    left: 0; right: 0;
    background: var(--navy2);
    border-bottom: 2px solid var(--gold);
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  #navbar ul { flex-direction: column; gap: 0; width: 100%; }
  #navbar a { display: block; padding: 10px 0; border-bottom: 1px solid rgba(184,144,42,.1); width: 100%; }
  .title { font-size: 14px; }
}

/* ── Page body offset for fixed nav ──────────────────────── */
/* Padding handled dynamically by header-spacer JS in HeaderTemplate */
body { padding-top: 0; }

/* ── Message bar ──────────────────────────────────────────── */
.alert-error {
  background: rgba(139,26,26,.9);
  border-left: 4px solid #c0392b;
  border-bottom: 1px solid rgba(139,26,26,.4);
  color: #fff;
  padding: 14px 28px;
  font-family: 'Crimson Text', serif;
  font-size: 17px;
  text-align: center;
}
.alert-info {
  background: #1a3a1a;
  border-left: 4px solid #4caf7d;
  border-bottom: 1px solid rgba(76,175,80,.3);
  color: #ffffff !important;
  padding: 18px 40px;
  font-family: 'Crimson Text', serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  width: 100%;
  display: block;
  overflow: visible;
  min-height: 56px;
  transition: opacity 1s ease;
}
.alert-error {
  color: #ffffff !important;
  padding: 18px 40px;
  line-height: 1.5;
  width: 100%;
  display: block;
  transition: opacity 1s ease;
}

/* ── Cards ────────────────────────────────────────────────── */
.card-dark {
  background: var(--navy2);
  border: 1px solid rgba(184,144,42,.25);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: 28px;
}
.balance-card {
  background: var(--navy2);
  border: 1px solid rgba(184,144,42,.25);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: 24px;
}
.balance-label {
  font-family: 'IM Fell English SC', serif;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--gold3);
  opacity: .75;
  margin-bottom: 8px;
}
.balance-value {
  font-family: 'Cinzel', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--gold2);
}
.balance-usd {
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  color: var(--cream2);
  opacity: .6;
  margin-top: 4px;
}

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-control-lg {
  background: rgba(10,22,40,.6) !important;
  border: 1px solid rgba(184,144,42,.35) !important;
  color: var(--cream) !important;
  border-radius: 2px !important;
  font-family: 'Crimson Text', serif;
  font-size: 17px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color .2s;
}
.form-control:focus, .form-control-lg:focus {
  border-color: var(--gold2) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(184,144,42,.15) !important;
  background: rgba(18,32,64,.8) !important;
}
.border-gold { border-color: rgba(184,144,42,.35) !important; }
label, .form-label {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold2);
  margin-bottom: 6px;
  display: block;
}
.form-check-input { accent-color: var(--gold); }
.form-check-label {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  color: var(--cream2);
}
select.form-control {
  cursor: pointer;
}
select.form-control option {
  background: var(--navy2);
  color: var(--cream);
}
.input-group-text {
  background: rgba(10,22,40,.8) !important;
  border: 1px solid rgba(184,144,42,.35) !important;
  color: var(--gold2) !important;
  font-family: 'Cinzel', serif;
}

/* ── Buttons ──────────────────────────────────────────────── */
.future-button, .btn-gold {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 600;
  padding: 13px 36px;
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold2);
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: all .2s;
}
.future-button:hover, .btn-gold:hover {
  background: var(--gold2);
  color: var(--navy);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(184,144,42,.3);
}
.future-button:disabled, .btn-gold:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.btn-outline-gold,
.btn-outline {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .12em;
  padding: 10px 24px;
  background: transparent;
  color: var(--gold2);
  border: 1px solid var(--gold2);
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  display: inline-block;
}
.btn-outline-gold:hover,
.btn-outline:hover {
  background: rgba(184,144,42,.12);
  color: var(--gold2);
  text-decoration: none;
}
.effect-button {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 9px 20px;
  background: transparent;
  color: var(--gold2);
  border: 1px solid var(--gold);
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  display: inline-block;
}
.effect-button:hover {
  background: rgba(184,144,42,.12);
  color: var(--gold2);
  text-decoration: none;
}

/* ── Points preview box ───────────────────────────────────── */
.points-preview {
  background: rgba(184,144,42,.08);
  border: 1px solid rgba(184,144,42,.2);
  border-radius: 2px;
  padding: 16px;
  text-align: center;
  font-family: 'Crimson Text', serif;
}
.points-preview .gold-text {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  font-weight: 700;
  display: block;
}

/* ── How it works steps ───────────────────────────────────── */
.how-it-works { }
.step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  color: var(--cream2);
  border-bottom: 1px solid rgba(184,144,42,.1);
}
.step:last-child { border-bottom: none; }
.step-num {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: var(--gold);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Already member box ───────────────────────────────────── */
.already-member {
  background: rgba(184,144,42,.08);
  border: 1px solid rgba(184,144,42,.2);
  border-radius: 2px;
  padding: 14px 20px;
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  color: var(--cream2);
  text-align: center;
}

/* ── Fineprint / terms scroll box ────────────────────────── */
.fineprint {
  background: rgba(10,22,40,.4);
  border: 1px solid rgba(184,144,42,.15);
  border-radius: 2px;
  padding: 16px;
  font-size: 14px;
  color: var(--cream2);
  opacity: .75;
  max-height: 200px;
  overflow-y: scroll;
}

/* ── Tables ───────────────────────────────────────────────── */
.table { color: var(--cream2); }
.table th {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gold2);
  border-bottom: 2px solid rgba(184,144,42,.3);
  padding: 10px 12px;
}
.table td {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  color: var(--cream2);
  border-bottom: 1px solid rgba(184,144,42,.1);
  padding: 10px 12px;
}
.table-dark { background: transparent; }

/* ── Hero section (home page) ────────────────────────────── */
.urnow-hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  padding: 70px 48px 60px;
  text-align: center;
  border-bottom: 3px solid var(--gold);
}
.urnow-hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(184,144,42,.07) 0%, transparent 68%);
  pointer-events: none;
}
.hero-eyebrow {
  font-family: 'IM Fell English SC', serif;
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--gold3);
  margin-bottom: 18px;
  opacity: .85;
  display: block;
}
.hero-title {
  font-family: 'Cinzel', serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 10px;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.hero-title em { font-style: normal; color: var(--gold2); }
.hero-subtitle {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--gold3);
  margin-bottom: 22px;
  opacity: .88;
}
.hero-rule {
  width: 200px; height: 1px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border: none;
}
.hero-body {
  font-family: 'Crimson Text', serif;
  font-size: 18px;
  color: var(--cream2);
  max-width: 580px;
  margin: 0 auto 34px;
  line-height: 1.75;
  opacity: .82;
}
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Section styles ───────────────────────────────────────── */
.urnow-section { padding: 60px 48px; }
.urnow-section.dark-bg { background: var(--navy2); border-top: 1px solid rgba(184,144,42,.15); border-bottom: 1px solid rgba(184,144,42,.15); }
.section-inner { max-width: 1040px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 44px; }
.section-eyebrow {
  font-family: 'IM Fell English SC', serif;
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--gold2);
  margin-bottom: 10px;
  display: block;
}
.section-title {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
}
.section-rule {
  width: 120px; height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border: none;
}

/* ── Feature cards grid ───────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card {
  background: var(--navy2);
  border: 1px solid rgba(184,144,42,.2);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: 28px 22px;
  text-align: center;
  transition: transform .2s, border-color .2s;
}
.feature-card:hover { transform: translateY(-4px); border-top-color: var(--gold2); }
.feature-roman {
  font-family: 'Cinzel', serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--gold2);
  opacity: .5;
  margin-bottom: 12px;
}
.feature-title {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 10px;
  letter-spacing: .05em;
}
.feature-body {
  font-family: 'Crimson Text', serif;
  font-size: 16px;
  color: var(--cream2);
  line-height: 1.65;
  opacity: .72;
}

/* ── Footer ───────────────────────────────────────────────── */
footer, #footer {
  background: var(--navy);
  border-top: 3px solid var(--gold);
  padding: 40px 48px 22px;
}
.footer-brand {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold2);
  margin-bottom: 8px;
}
.footer-tagline {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--cream2);
  opacity: .5;
  line-height: 1.6;
}
.footer-col-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--gold2);
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  font-family: 'Crimson Text', serif;
  font-size: 15px;
  color: var(--cream2);
  opacity: .5;
  text-decoration: none;
  margin-bottom: 6px;
  transition: opacity .18s, color .18s;
}
.footer-col a:hover { opacity: 1; color: var(--gold3); }
.footer-bottom {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--cream2);
  opacity: .25;
  text-align: center;
  padding-top: 18px;
  border-top: 1px solid rgba(184,144,42,.12);
  margin-top: 28px;
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 8px 0; margin: 0; }
.breadcrumb-item a { color: var(--gold-readable); font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .08em; }
.breadcrumb-item.active { color: var(--ink); opacity: .65; font-family: 'Cinzel', serif; font-size: 11px; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); opacity: .5; }

/* ── Admin / utility ──────────────────────────────────────── */
.badge { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .08em; }
.text-success { color: #4caf7d !important; }
.text-danger  { color: var(--red) !important; }
.text-warning { color: var(--gold3) !important; }
.bg-dark  { background: var(--navy2) !important; }
.bg-dark2 { background: rgba(10,22,40,.5) !important; }
.text-white, .text-light { color: var(--cream) !important; }
.border-gold { border-color: rgba(184,144,42,.35) !important; }
.secondfont { font-family: 'Crimson Text', serif; }
.tahoma { font-family: 'Cinzel', serif; }
.tahoma-small { font-family: 'Crimson Text', serif; font-size: 13px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-title { font-size: 28px; }
  .urnow-hero, .urnow-section { padding: 36px 16px; }
  .feature-grid { grid-template-columns: 1fr; }
  footer, #footer { padding: 32px 16px 18px; }
  .balance-value { font-size: 24px; }
  .mb-page { padding: 24px 16px 48px !important; }
  .mb-stats { grid-template-columns: 1fr !important; }
  .mb-grid { grid-template-columns: 1fr !important; }
  .action-grid { grid-template-columns: 1fr 1fr !important; }
  .tier-cards { grid-template-columns: 1fr !important; }
  .mem-card, .quote-box { margin-bottom: 16px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 22px; }
  .section-title { font-size: 22px !important; }
  .action-grid { grid-template-columns: 1fr !important; }
  .future-button { width: 100%; text-align: center; box-sizing: border-box; }
  .d-flex.gap-3 { flex-direction: column !important; }
  .d-flex.gap-3 .future-button,
  .d-flex.gap-3 .btn-outline-gold { width: 100%; text-align: center; }
  .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-8 { width: 100% !important; }
  #header .brand-title-text { font-size: 20px !important; }
}

/* ── Donation org buttons ────────────────────────────────────────────────── */
.donation-org-btn {
  display: block;
  text-decoration: none;
  padding: 24px 16px;
  border: 1px solid rgba(184,144,42,.2);
  border-radius: 4px;
  background: rgba(184,144,42,.04);
  transition: all .25s;
  height: 100%;
}
.donation-org-btn:hover {
  border-color: rgba(184,144,42,.6);
  background: rgba(184,144,42,.1);
  transform: translateY(-3px);
  text-decoration: none;
}
.donation-org-logo {
  margin: 0 auto 14px;
  text-align: center;
}
.donation-org-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: var(--gold2);
  letter-spacing: .06em;
  margin-bottom: 4px;
  line-height: 1.3;
}
.donation-org-sub {
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: var(--cream2);
  opacity: .6;
}