/* ============================================================
   BYTHERIM — shared header and footer for the RP apps.

   The NCAA RP and Draft RP have their own full stylesheet
   (rp/css/ncaa-styles.css) with their own colour tokens, so they can't
   load the main site's stylesheet without the two fighting. This file
   carries only the site header and footer, with the site's tokens set
   on those two elements, so they look identical to every other page and
   nothing else on the page is touched.

   Keep in step with the header/footer sections of assets/site.css.
   ============================================================ */

.site-header,
.site-footer {
  --r-sm: 8px;
  --r-pill: 999px;
  --surface: #0f1117;
  --hover: #1b1f2b;
  --border: #22262f;
  --border-strong: #2f3440;
  --text: #f4f5f7;
  --muted: #9aa3b2;
  --faint: #7d8596;
  --accent: #c86fb4;
  --accent-fill: #964282;
  --accent-fill-hover: #a54b90;
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.45);
  --maxw: 1180px;
  color: var(--text);
  font-family: 'Asap Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.site-header *, .site-footer * { box-sizing: border-box; }
/* Host pages may style bare header/nav/footer elements (the recruiting
   page does); reset what those rules could change. */
.site-header { display: block; padding: 0; margin: 0; }
.site-footer { display: block; padding: 0; }
.site-nav { flex-wrap: nowrap; }
.site-header .nav-toggle { padding: 0; }
.site-header a, .site-footer a { color: inherit; text-decoration: none; }
.site-header img, .site-footer img { max-width: 100%; display: block; }
.site-header button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.site-header svg, .site-footer svg { fill: currentColor; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 7, 10, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {

  max-width: var(--maxw);
  margin: 0 auto;
  height: 64px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-header .brand img { height: 38px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.site-nav a {
  font-family: 'Oswald', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-pill);
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover { color: var(--text); background: var(--hover); }
.site-nav a.active { color: var(--text); }
.site-nav a.active::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.site-nav .nav-rp { margin-left: 0.5rem; color: #fff; background: var(--accent-fill); }
.site-nav .nav-rp:hover { background: var(--accent-fill-hover); color: #fff; }
.site-nav .nav-rp.active::after { display: none; }
.site-nav .nav-rp.active { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }

.header-tools { display: flex; align-items: center; gap: 0.35rem; }
.site-header .icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid var(--border);
  transition: all 0.15s ease;
}
.site-header .icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

.site-header .nav-toggle { display: none; flex-direction: column; gap: 4px; }
.nav-toggle span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  background: #0d0f14;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
}
.site-footer .footer-brand img { height: 36px; width: auto; margin-bottom: 0.9rem; }
.site-footer .footer-brand p { color: var(--muted); font-size: 0.95rem; max-width: 330px; margin: 0 0 1rem; }
.site-footer .footer-col h4 {
  font-family: 'Oswald', 'Asap Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.12;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.8rem;
  padding: 0;
  border: 0;
}
.site-footer .footer-col a { display: block; color: var(--muted); font-size: 0.95rem; padding: 0.2rem 0; }
.site-footer .footer-col a:hover { color: var(--text); }
.site-footer .footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.1rem 1.5rem 1.6rem;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 0.85rem;
}
.site-footer .social-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.site-footer .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 38px;
  height: 38px;
  padding: 0 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.site-footer .social-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--hover); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .site-header .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1rem 1rem;
    background: #0b0d12;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.8rem 0.6rem; border-radius: var(--r-sm); font-size: 1rem; }
  .site-nav a.active::after { display: none; }
  .site-nav a.active { background: var(--hover); }
  .site-nav .nav-rp { margin: 0.5rem 0 0; text-align: center; }
  .header-tools { margin-left: auto; }
}
@media (max-width: 620px) {
  .site-header-inner { padding: 0 1rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; padding-top: 2.2rem; }
}

/* RP pages: fiction notice under the copyright line */
.footer-fiction { display: block; margin-top: 0.35rem; font-size: 0.8rem; }
.footer-legal { display: block; margin: 0.45rem 0 0; max-width: 72ch; font-size: 0.76rem; line-height: 1.45; opacity: 0.85; }
.site-footer .footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }