/* The site menu (wrlserver/site_nav.py): the WRL header with the section pills, the quieter
   second row under it, and the thin strip that sits above an event's or league's own header.

   Self-contained on purpose. It loads next to event.css on the public pages and next to
   Bootstrap on the organiser pages, so it reads none of event.css's --ev-* tokens (an event's
   theme must not recolour the WRL menu) and it states every property Bootstrap's reboot would
   otherwise supply (heading margins, link underlines, fonts). Values are worldriichi.pro's. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/static/fonts/archivo-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/space-mono-700.woff2") format("woff2");
}

:root {
  --site-navy: #0b1530;
  --site-ink: #ffffff;
  --site-pink: #ff005d;
  --site-pink-ink: #111111;
  --site-bone: #f2f1ee;
  --site-card: #ffffff;
  --site-rule: color-mix(in srgb, var(--site-navy) 11%, var(--site-bone));
  --site-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --site-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.site-wrap {
  width: min(1100px, 100% - 2rem);
  margin: 0 auto;
}
/* The organiser pages run full width; their chrome lines up with the content gutter instead. */
.site-wide .site-wrap { width: calc(100% - 3rem); }

.site-header, .site-nav, .site-subnav, .site-strip { box-sizing: border-box; }
.site-header a, .site-nav a, .site-subnav a, .site-strip a { text-decoration: none; }

/* The label voice shared by every part of the menu. */
.site-nav a, .site-who, .site-subnav .site-wrap > a, .site-subnav .dropdown > a,
.site-subnav .site-subnav-ctx, .site-strip a, .site-kicker {
  font-family: var(--site-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.66rem;
  line-height: 1.2;
}

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

.site-header { background: var(--site-navy); color: var(--site-ink); }
.site-header .site-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0 0.9rem;
}
.site-title { flex: 1 1 auto; min-width: 0; }
.site-kicker { display: block; color: var(--site-pink); margin-bottom: 0.35rem; }
.site-title h1 {
  margin: 0;
  font-family: var(--site-font);
  font-variation-settings: "wdth" 118, "wght" 850;
  font-weight: 850;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
}
.site-title h1 a { color: inherit; }
.site-wrl { display: block; height: 40px; width: 40px; opacity: 0.95; flex: none; }

/* --- the section pills ------------------------------------------------------------------- */

.site-nav { background: var(--site-navy); position: sticky; top: 0; z-index: 1020; }
.site-nav .site-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0 0 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav a {
  display: inline-block;
  color: var(--site-ink);
  border: 1.5px solid color-mix(in srgb, var(--site-ink) 22%, var(--site-navy));
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
}
.site-nav a:hover { background: color-mix(in srgb, var(--site-ink) 10%, var(--site-navy)); color: var(--site-ink); }
.site-nav a.active { background: var(--site-pink); border-color: var(--site-pink); color: var(--site-pink-ink); }
.site-nav-right { margin-left: auto; display: flex; gap: 0.75rem; align-items: center; }
.site-who { color: var(--site-ink); opacity: 0.7; letter-spacing: 0.05em; text-transform: none; white-space: nowrap; }

/* --- the second row: inside a section ---------------------------------------------------- */

.site-subnav { background: var(--site-card); border-bottom: 1px solid var(--site-rule); }
.site-subnav .site-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: center;
  padding: 0.7rem 0;
}
/* Its own links only (direct children, and a dropdown's toggle) — the dropdown's items keep
   Bootstrap's look. */
.site-subnav .site-wrap > a,
.site-subnav .dropdown > a {
  color: var(--site-navy);
  opacity: 0.6;
  white-space: nowrap;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}
.site-subnav .site-wrap > a:hover, .site-subnav .dropdown > a:hover { opacity: 1; color: var(--site-navy); }
.site-subnav .site-wrap > a.active, .site-subnav .dropdown > a.active { opacity: 1; border-bottom-color: var(--site-pink); }
.site-subnav-sep { width: 1px; height: 1rem; background: var(--site-rule); }
/* The tournament's name carries the same (empty) underline room as the links, so its text sits on
   their line rather than the box's centre. */
.site-subnav .site-subnav-ctx {
  color: var(--site-pink);
  opacity: 1;
  white-space: nowrap;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}
.site-subnav .dropdown-menu { font-family: var(--site-font); font-size: 0.9rem; }
/* The Admin toggle sits inside a wrapper div, which would otherwise lay it out on a line box of
   the page's own (Bootstrap) line-height, with the caret raised by its own vertical-align, which
   leaves it off-centre from the plain links beside it. Flex it like them. */
.site-subnav .dropdown { display: flex; align-items: center; }
.site-subnav .dropdown > a { display: inline-flex; align-items: center; gap: 0.35em; }
.site-subnav .dropdown > a::after { margin-left: 0; vertical-align: 0; }

/* --- the thin strip above a branded page ------------------------------------------------- */

.site-strip { background: var(--site-navy); color: var(--site-ink); }
.site-strip .site-wrap {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 0.45rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-strip img { display: block; height: 22px; width: 22px; flex: none; }
.site-strip a { color: var(--site-ink); opacity: 0.75; white-space: nowrap; }
.site-strip a:hover { opacity: 1; color: var(--site-ink); }
.site-strip a.active { opacity: 1; color: var(--site-pink); }
.site-strip .site-nav-right a { opacity: 1; }