/* ===================================================================
   SportPoint.live — shared styles
   Design tokens, header (brand + login) and footer used across pages.
   Page-specific layout (hero, filters, race cards, admin table, etc.)
   stays in each page's own <style> block.
   =================================================================== */

:root{
  --pico-font-family: 'IBM Plex Sans', sans-serif;
  --pico-background-color: #F7F6F2;
  --pico-color: #14171C;
  --pico-muted-color: #6B6E73;
  --pico-muted-border-color: #DAD7CE;
  --pico-border-radius: 0px;
  --pico-form-element-spacing-vertical: 0.65rem;
  --success: #1B7A4A;
}

.display{ font-family:'Big Shoulders Display', sans-serif; }
.muted{ color:var(--pico-muted-color); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Brand / header ---- */

.brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0;
}

.brand{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--pico-color);
  margin:0;
}

.brand .tld{ color:var(--pico-color); }

.login-link{
  font-family:'Big Shoulders Display', sans-serif;
  font-size:.85rem;
  font-weight:900;
  letter-spacing:.04em;
}

.header-links{
  display:flex;
  align-items:center;
  gap:1.25rem;
}

/* ---- Buttons ----
   Same recipe as .hero a[role="button"] / .filters-actions — kept here once
   so new pages can share it via class="btn" instead of redefining it. */

.btn{
  display:inline-block;
  width:auto;
  margin:0;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  letter-spacing:.04em;
  font-size:.85rem;
  padding:.55rem 1.2rem;
  background:#FFFFFF !important;
  border:1px solid #DAD7CE !important;
  color:#14171C !important;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}

.btn:hover,
.btn:focus{
  background:#FFFFFF !important;
  border-color:var(--pico-primary) !important;
  color:var(--pico-primary) !important;
}

/* ---- Footer ---- */

footer.site-footer{
  border-top:1px solid var(--pico-muted-border-color);
  margin-top:2.5rem;
  padding:1.5rem 0 3rem;
  font-size:.85rem;
  color:var(--pico-muted-color);
}