/* flasteam.com — shared design tokens + site header.
   ONE place for brand colors and the header (action bar + nav) styles.
   Loaded by every page before its own <style>. Markup comes from nav.js. */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --crimson:      #96002E;
  --crimson-dark: #760023;
  --gold:         #FFD200;
  --gold-dark:    #D1AD00;
  --white:        #ffffff;
  --off-white:    #faf8f5;
  --gray-light:   #f0ece6;
  --gray-mid:     #888;
  --text:         #1a1a1a;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --max-w:        1100px;
  --section-pad:  80px 24px;
}

/* ─── SITE HEADER (action bar + nav, one sticky unit) ───── */
#site-header { position: sticky; top: 0; z-index: 100; }

/* ─── ACTION BAR ─────────────────────────────────────────── */
#action-bar {
  background: var(--gold);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.action-bar-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson-dark);
  opacity: 0.7;
  margin-right: 4px;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 22px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  text-decoration: none;
  line-height: 1;
}
.action-btn:hover { transform: translateY(-1px); }
.action-btn-donate { background: var(--crimson); color: var(--gold); border-color: var(--crimson); }
.action-btn-donate:hover { background: var(--crimson-dark); border-color: var(--crimson-dark); }
.action-btn-sign { background: var(--white); color: var(--crimson); border-color: var(--crimson); }
.action-btn-sign:hover { background: var(--off-white); }
.action-btn-icon { font-size: 1.1em; }
.action-btn .lbl-short { display: none; }

/* ─── DONATE BY MAIL (Jill; native <dialog> rendered by nav.js) ── */
button.action-btn { appearance: none; -webkit-appearance: none; }
dialog.donate-mail {
  border: 3px solid var(--crimson);
  border-radius: 0;
  background: var(--off-white);
  padding: 44px 32px 36px;
  width: min(92vw, 520px);
  text-align: center;
  margin: auto;            /* site reset zeroes margins; restore UA centering */
  position: fixed; inset: 0; /* stay in the top layer, centered */
  max-height: 90vh; overflow: auto;
}
dialog.donate-mail::backdrop { background: rgba(0,0,0,0.6); }
.donate-mail-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--crimson);
}
.donate-mail-close:hover { color: var(--crimson-dark); }
.donate-mail-inner { max-width: 460px; margin: 0 auto; }
.donate-mail h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 12px;
}
.donate-mail p { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--text); margin: 0 0 16px; }
.donate-mail address {
  display: inline-block;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--crimson-dark);
  background: var(--white);
  border: 2px solid var(--crimson);
  padding: 14px 28px;
  user-select: all;
}

/* ─── NAV (matches andiforflas.com) ─────────────────────── */
nav {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid rgba(150,0,46,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.95rem, 2.6vw, 1.4rem);
  letter-spacing: 0.08em;
  color: var(--crimson);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.nav-logo span { color: var(--gold-dark); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--crimson); border-bottom-color: var(--crimson); }
.nav-links a.nav-vote {
  background: var(--crimson);
  color: var(--white);
  padding: 10px 22px;
  border-bottom: none;
  transition: background 0.2s;
}
.nav-links a.nav-vote:hover { background: var(--crimson-dark); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--crimson); transition: 0.3s; }

@media (max-width: 768px) {
  #action-bar { gap: 8px; padding: 8px 16px; }
  .action-bar-label { display: none; }
  .action-btn { font-size: 0.78rem; padding: 8px 12px; gap: 6px; }
  .action-btn .lbl-full { display: none; }
  .action-btn .lbl-short { display: inline; }
  dialog.donate-mail { padding: 40px 18px 28px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 62px; left: 0; right: 0;
    background: var(--white);
    border-bottom: 2px solid var(--crimson);
    padding: 20px 24px;
    gap: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
}

/* ─── FOOTER (markup from nav.js) ───────────────────────── */
footer {
  background: #111;
  padding: 28px 24px;
  text-align: center;
}
footer p {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  line-height: 1.8;
}
footer a { color: rgba(255,255,255,0.5); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
footer a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footer-candidates {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.footer-candidates a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.footer-candidates a:hover { color: var(--gold); border-bottom: none; }