/* "Fjord Night": the public pages' look. Every page sets html[data-theme="fjord"] and every rule
   below is scoped to it, so the older look is still here underneath if it is ever wanted back. Tokens and names follow the shared Wardogs Nordic design pack (theme.css); fonts
   are served from this site (fonts/), nothing loads from elsewhere. */

@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap; src: url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-display: swap; src: url("fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600 900; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400 900; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Runic"; font-weight: 400; font-display: swap; src: url("fonts/noto-sans-runic-runic-400-normal.woff2") format("woff2"); unicode-range: U+16A0-16F8; }

/* Parts only the Fjord Night theme shows */
.fj-only { display: none; }

/* ---------- tokens ---------- */
html[data-theme="fjord"] {
  --wdn-bg: #0D1316;
  --wdn-surface: #141C20;
  --wdn-surface-2: #1B252A;
  --wdn-line: #26333A;
  --wdn-line-soft: #1E2A30;
  --wdn-line-strong: #3A4A52;
  --wdn-text: #ECE8DF;
  --wdn-text-2: #C4CCCF;
  --wdn-muted: #9AA8AE;
  --wdn-faint: #7F8E94;
  --wdn-accent: #6FD3A8;
  --wdn-ember: #E08A4B;
  --wdn-frost: #8EC5E8;
  --wdn-bone: #D9C9A3;
  --wdn-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --wdn-font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --wdn-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wdn-font-rune: "Noto Sans Runic", serif;
  --wdn-radius: 6px;
  --wdn-radius-sm: 4px;
  /* hero: night sky, aurora lines and the fjord's mountains, as drawn in the design */
  --wdn-hero-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 560' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M-20 170 C 240 90, 420 230, 700 140 S 1180 60, 1460 150' fill='none' stroke='%236FD3A8' stroke-opacity='.35' stroke-width='2'/%3E%3Cpath d='M-20 200 C 260 120, 460 260, 720 175 S 1200 100, 1460 185' fill='none' stroke='%236FD3A8' stroke-opacity='.18' stroke-width='2'/%3E%3Cpath d='M-20 230 C 300 160, 480 280, 760 210 S 1220 140, 1460 220' fill='none' stroke='%238EC5E8' stroke-opacity='.14' stroke-width='2'/%3E%3Cg fill='%23ECE8DF' opacity='.55'%3E%3Ccircle cx='120' cy='60' r='1.2'/%3E%3Ccircle cx='340' cy='40' r='1'/%3E%3Ccircle cx='560' cy='80' r='1.4'/%3E%3Ccircle cx='900' cy='34' r='1'/%3E%3Ccircle cx='1120' cy='70' r='1.2'/%3E%3Ccircle cx='1320' cy='44' r='1'/%3E%3Ccircle cx='1010' cy='110' r='.9'/%3E%3Ccircle cx='230' cy='120' r='.9'/%3E%3C/g%3E%3Cpath d='M0 560 L0 400 L120 330 L190 370 L300 270 L390 340 L470 300 L560 380 L640 330 L760 410 L860 320 L960 250 L1050 330 L1130 300 L1230 370 L1330 310 L1440 360 L1440 560 Z' fill='%23141C20'/%3E%3Cpath d='M300 270 L330 295 L310 300 L290 290 Z M960 250 L995 280 L970 284 L945 275 Z' fill='%23ECE8DF' opacity='.5'/%3E%3Cpath d='M0 560 L0 460 L160 420 L280 470 L420 410 L560 470 L700 430 L860 480 L1000 430 L1150 470 L1300 430 L1440 460 L1440 560 Z' fill='%230F171A'/%3E%3C/svg%3E");

  /* the site's own variables, pointed at the tokens */
  --yellow: var(--wdn-accent);
  --yellow-hi: #8FE0BD;
  --ink: var(--wdn-bg);
  --bg: var(--wdn-bg);
  --bg-2: var(--wdn-bg);
  --bg-3: var(--wdn-surface);
  --line: var(--wdn-line);
  --text: var(--wdn-text);
  --muted: var(--wdn-muted);
  --blue: var(--wdn-frost);
  --red: var(--wdn-ember);
  --green: var(--wdn-accent);
}

/* ---------- type ---------- */
html[data-theme="fjord"] body { background: var(--wdn-bg); color: var(--wdn-text-2); font-family: var(--wdn-font-body); }
html[data-theme="fjord"] h1, html[data-theme="fjord"] h2, html[data-theme="fjord"] h3 { font-family: var(--wdn-font-display); font-weight: 800; letter-spacing: 0.02em; line-height: 0.95; color: var(--wdn-text); }
html[data-theme="fjord"] .sec-head h2 { font-size: clamp(36px, 5vw, 56px); }
html[data-theme="fjord"] .sec-head p { color: var(--wdn-text-2); }
html[data-theme="fjord"] :focus-visible { outline: 2px solid var(--wdn-accent); outline-offset: 2px; }

/* eyebrows: Plex Mono, led by a rune instead of a bar */
html[data-theme="fjord"] .sec-head .tag { font: 500 12px var(--wdn-font-mono); letter-spacing: 0.18em; color: var(--wdn-muted); }
html[data-theme="fjord"] .sec-head .tag::before { content: "ᚹ"; width: auto; height: auto; background: none; font: 16px/1 var(--wdn-font-rune); color: var(--wdn-accent); letter-spacing: 0; }
html[data-theme="fjord"] #about .tag::before { content: "ᚠ"; }
html[data-theme="fjord"] #servers .tag::before { content: "ᛊ"; }
html[data-theme="fjord"] #nordics .tag::before { content: "ᚾ"; }
html[data-theme="fjord"] #rules .tag::before { content: "ᛚ"; }
html[data-theme="fjord"] #events .tag::before { content: "ᛃ"; }

/* ---------- header ---------- */
/* The stripe along the top is the three teams in Wardogs: blue, red and green. It keeps the
   team colours in every theme. */
html[data-theme="fjord"] .tri i:nth-child(1) { background: #2a6de0; }
html[data-theme="fjord"] .tri i:nth-child(2) { background: #d4222f; }
html[data-theme="fjord"] .tri i:nth-child(3) { background: #00833f; }
html[data-theme="fjord"] header.solid { background: rgba(13, 19, 22, 0.94); border-bottom-color: var(--wdn-line-soft); }
html[data-theme="fjord"] .brand { font: 900 22px/1 var(--wdn-font-display); letter-spacing: 0.03em; text-transform: uppercase; }
html[data-theme="fjord"] .brand i { color: var(--wdn-accent); font-style: normal; }
html[data-theme="fjord"] .nav-links { font: 500 15px var(--wdn-font-body); letter-spacing: 0; text-transform: none; }
html[data-theme="fjord"] .nav-links a { color: var(--wdn-text-2); }
html[data-theme="fjord"] .nav-links a:hover, html[data-theme="fjord"] .here { color: var(--wdn-accent) !important; }
html[data-theme="fjord"] .status { font-family: var(--wdn-font-mono); }
html[data-theme="fjord"] .status.up .sdot { background: var(--wdn-accent); box-shadow: none; animation: none; }

/* the live strip under the menu */
html[data-theme="fjord"] .ticker { display: block; background: #101A1E; border-top: 1px solid var(--wdn-line-soft); font-size: 14px; }
html[data-theme="fjord"] .ticker .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding-top: 8px; padding-bottom: 8px; }
html[data-theme="fjord"] .ticker a { color: var(--wdn-text); min-height: 28px; display: inline-flex; align-items: center; gap: 6px; }
html[data-theme="fjord"] .ticker a:hover { color: var(--wdn-accent); }
html[data-theme="fjord"] .ticker b { font-weight: 600; }
html[data-theme="fjord"] .tk-m, html[data-theme="fjord"] .tk-dc { font-family: var(--wdn-font-mono); font-size: 13px; color: var(--wdn-muted); }
html[data-theme="fjord"] .tk-live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--wdn-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wdn-accent); }
html[data-theme="fjord"] .tk-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: fj-pulse 1.6s ease-in-out infinite; }
html[data-theme="fjord"] header:not(.solid) .ticker { background: rgba(16, 26, 30, 0.85); }
@keyframes fj-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* phones: one line that scrolls sideways inside the strip, so the header stays short */
@media (max-width: 640px) {
  html[data-theme="fjord"] .ticker { font-size: 13px; }
  html[data-theme="fjord"] .ticker .wrap { flex-wrap: nowrap; gap: 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  html[data-theme="fjord"] .ticker .wrap > * { flex: none; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme="fjord"] .tk-live i { animation: none; } }

/* ---------- buttons ---------- */
html[data-theme="fjord"] .btn { min-height: 48px; border-radius: var(--wdn-radius-sm); background: var(--wdn-accent); color: var(--wdn-bg); font: 600 15px var(--wdn-font-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html[data-theme="fjord"] .btn:hover { background: #8FE0BD; color: var(--wdn-bg); transform: none; box-shadow: none; }
html[data-theme="fjord"] .btn.ghost { background: transparent; color: var(--wdn-text); border: 1px solid var(--wdn-line-strong); }
html[data-theme="fjord"] .btn.ghost:hover { border-color: var(--wdn-muted); color: var(--wdn-text); background: transparent; }
html[data-theme="fjord"] .btn, html[data-theme="fjord"] .nav-links a.btn { clip-path: none; color: var(--wdn-bg); }
html[data-theme="fjord"] .nav-links a.btn { min-height: 44px; padding: 0 16px; }
html[data-theme="fjord"] .nav-links a.btn:hover { color: var(--wdn-bg); }
html[data-theme="fjord"] .nav-links a.btn.donate { background: transparent; color: var(--wdn-text); border: 1px solid var(--wdn-line-strong); }
html[data-theme="fjord"] .nav-links a.btn.donate:hover { border-color: var(--wdn-muted); color: var(--wdn-text); }
/* On the support page itself: the classic look forces dark text for its green button, which has no background here */
html[data-theme="fjord"] .nav-links a.btn.donate.here { color: var(--wdn-text) !important; border-color: var(--wdn-accent); }
/* The stats site: its own button in the menu, outlined in the accent so it stands apart from Donate */
html[data-theme="fjord"] .nav-links a.btn.stats { background: transparent; color: var(--wdn-accent); border: 1px solid var(--wdn-accent); gap: 8px; }
html[data-theme="fjord"] .nav-links a.btn.stats:hover { background: rgba(111, 211, 168, 0.12); color: var(--wdn-accent); }
html[data-theme="fjord"] .nav-links a.btn.stats svg { width: 17px; height: 17px; }
@media (max-width: 900px) { html[data-theme="fjord"] .nav-links.open { max-height: 560px; } }

/* ---------- hero: the photo gives way to the fjord at night ---------- */
html[data-theme="fjord"] .hero { border-bottom: 1px solid var(--wdn-line-soft); }
html[data-theme="fjord"] .hero-bg { background: var(--wdn-hero-art) center bottom / cover no-repeat, var(--wdn-bg); }
html[data-theme="fjord"] .hero-bg::after { content: none; }
html[data-theme="fjord"] .hero-logo { filter: none; }
html[data-theme="fjord"] .kicker { font: 500 13px var(--wdn-font-mono); letter-spacing: 0.24em; color: var(--wdn-accent); }
html[data-theme="fjord"] .kicker::before { content: "ᚹᚨᚱᛞᛟᚷᛋ ᛫ ᚾᛟᚱᛞᛁᚲ"; /* WARDOGS NORDIC in Elder Futhark */ display: block; margin-bottom: 10px; font: 18px/1 var(--wdn-font-rune); letter-spacing: 0.3em; }
html[data-theme="fjord"] .hero p.lede { color: var(--wdn-text-2); }
html[data-theme="fjord"] .scroll-hint { font-family: var(--wdn-font-mono); color: var(--wdn-faint); }

/* ---------- bands and cards: flat, one border ---------- */
html[data-theme="fjord"] .alt { background: var(--wdn-bg); border-top: 1px solid var(--wdn-line-soft); }
html[data-theme="fjord"] .stats { background: var(--wdn-surface); border-color: var(--wdn-line-soft); }
html[data-theme="fjord"] .stats .wrap { background: var(--wdn-line-soft); }
html[data-theme="fjord"] .stat { background: var(--wdn-surface); }
html[data-theme="fjord"] .stat b { font: 800 48px/1 var(--wdn-font-display); color: var(--wdn-text); }
html[data-theme="fjord"] .stat span { font: 500 11px var(--wdn-font-mono); letter-spacing: 0.18em; }
html[data-theme="fjord"] .card,
html[data-theme="fjord"] .country,
html[data-theme="fjord"] .applyform { background: var(--wdn-surface); border: 1px solid var(--wdn-line); border-radius: var(--wdn-radius); box-shadow: none; }
html[data-theme="fjord"] .card:hover, html[data-theme="fjord"] .country:hover { transform: none; border-color: var(--wdn-line-strong); }
html[data-theme="fjord"] .card .ico { background: none; border: 0; width: auto; height: auto; justify-content: start; }
html[data-theme="fjord"] .card .ico svg { width: 30px; height: 30px; fill: var(--wdn-accent); }
html[data-theme="fjord"] .card h3 { font-size: 26px; }
html[data-theme="fjord"] .card p, html[data-theme="fjord"] .srv p { color: var(--wdn-text-2); }

/* servers */
html[data-theme="fjord"] .srv { background: var(--wdn-surface); border: 1px solid var(--wdn-line); border-radius: var(--wdn-radius); }
html[data-theme="fjord"] .srv:hover { transform: none; background: var(--wdn-surface-2); }
html[data-theme="fjord"] .srv-badge { background: var(--wdn-bg); border-color: var(--wdn-line); border-radius: var(--wdn-radius-sm); font: 900 20px var(--wdn-font-display); color: var(--wdn-accent); }
html[data-theme="fjord"] .srv h3 { font-size: 26px; }
html[data-theme="fjord"] .srv .meta { font: 500 12px var(--wdn-font-mono); color: var(--wdn-muted); }
html[data-theme="fjord"] .dot { background: var(--wdn-accent); box-shadow: none; }
html[data-theme="fjord"] .dot.warm { background: var(--wdn-bone); box-shadow: none; }
html[data-theme="fjord"] .dot.down { background: var(--wdn-ember); box-shadow: none; }

/* the Nordics */
html[data-theme="fjord"] .country img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); border-radius: 2px; }
html[data-theme="fjord"] .country b { font: 800 20px/1 var(--wdn-font-display); letter-spacing: 0.02em; color: var(--wdn-text); }
html[data-theme="fjord"] .country span { font-family: var(--wdn-font-mono); }

/* standards, counted in runes */
html[data-theme="fjord"] .rule { border-bottom-color: var(--wdn-line); padding: 22px 4px; }
html[data-theme="fjord"] .rule b { font-size: 0; width: 36px; }
html[data-theme="fjord"] .rule b::before { content: "ᚠ"; font: 30px/1 var(--wdn-font-rune); color: var(--wdn-accent); }
html[data-theme="fjord"] .rule:nth-child(2) b::before { content: "ᚢ"; }
html[data-theme="fjord"] .rule:nth-child(3) b::before { content: "ᚦ"; }
html[data-theme="fjord"] .rule:nth-child(4) b::before { content: "ᚨ"; }
html[data-theme="fjord"] .rule:nth-child(5) b::before { content: "ᚱ"; }
html[data-theme="fjord"] .rule:nth-child(6) b::before { content: "ᚲ"; }
html[data-theme="fjord"] .rule:nth-child(7) b::before { content: "ᚷ"; }
html[data-theme="fjord"] .rule:nth-child(8) b::before { content: "ᚹ"; }
html[data-theme="fjord"] .rule:nth-child(9) b::before { content: "ᚺ"; }
html[data-theme="fjord"] .rule:nth-child(10) b::before { content: "ᚾ"; }
html[data-theme="fjord"] .rule strong { font: 600 18px var(--wdn-font-body); letter-spacing: 0; text-transform: none; color: var(--wdn-text); }
html[data-theme="fjord"] .rule p { color: var(--wdn-text-2); }

/* the closing call: mountains again rather than the photo */
html[data-theme="fjord"] .cta { background: var(--wdn-bg); border-top: 1px solid var(--wdn-line-soft); }
html[data-theme="fjord"] .cta::before { background: var(--wdn-hero-art) center bottom / cover no-repeat; opacity: 0.7; }
html[data-theme="fjord"] .cta h2 { font-weight: 900; }
html[data-theme="fjord"] .cta h2 em { color: var(--wdn-accent); }
html[data-theme="fjord"] .cta small { font-family: var(--wdn-font-mono); color: var(--wdn-faint); }
html[data-theme="fjord"] footer { background: var(--wdn-bg); border-top-color: var(--wdn-line-soft); }

/* forms and tabs on the apply and support pages */
html[data-theme="fjord"] .tab { border-radius: var(--wdn-radius-sm); background: transparent; border-color: var(--wdn-line-strong); color: var(--wdn-text-2); font: 500 14px var(--wdn-font-body); letter-spacing: 0; text-transform: none; min-height: 44px; }
html[data-theme="fjord"] .tab.on { background: var(--wdn-text); border-color: var(--wdn-text); color: var(--wdn-bg); }
html[data-theme="fjord"] .applyform input, html[data-theme="fjord"] .applyform textarea, html[data-theme="fjord"] .applyform select { background-color: var(--wdn-bg); border-color: var(--wdn-line-strong); border-radius: var(--wdn-radius-sm); font-family: var(--wdn-font-body); }
html[data-theme="fjord"] .applyform label > span { font: 500 11px var(--wdn-font-mono); letter-spacing: 0.16em; }

/* ---------- the landing page's server cards ---------- */
html[data-theme="fjord"] .lservers-head h2 { color: var(--wdn-accent); font-family: var(--wdn-font-mono); font-weight: 500; }
html[data-theme="fjord"] .lservers-head h2::before { background: var(--wdn-accent); }
html[data-theme="fjord"] .lservers-live { color: var(--wdn-accent); font-family: var(--wdn-font-mono); font-weight: 500; }
html[data-theme="fjord"] .lsrv { background: rgba(20, 28, 32, 0.92); border: 1px solid var(--wdn-line); border-left-width: 3px; border-radius: var(--wdn-radius); backdrop-filter: none; }
html[data-theme="fjord"] .lsrv.on { border-left-color: var(--wdn-accent); }
html[data-theme="fjord"] .lsrv.off { border-left-color: var(--wdn-ember); }
html[data-theme="fjord"] .lsrv-top { font-family: var(--wdn-font-mono); font-weight: 500; color: var(--wdn-muted); }
html[data-theme="fjord"] .lsrv.on .lsrv-state { color: var(--wdn-accent); }
html[data-theme="fjord"] .lsrv.on .lsrv-state i { background: var(--wdn-accent); box-shadow: 0 0 0 4px rgba(111, 211, 168, 0.18); }
html[data-theme="fjord"] .lsrv.off .lsrv-state { color: var(--wdn-ember); }
html[data-theme="fjord"] .lsrv.off .lsrv-state i { background: var(--wdn-ember); }
html[data-theme="fjord"] .lsrv-count { font-family: var(--wdn-font-body); color: var(--wdn-text-2); }
html[data-theme="fjord"] .lsrv-count b { font: 800 24px var(--wdn-font-display); color: var(--wdn-text); }
html[data-theme="fjord"] .lsrv-name { font: 800 24px/1.1 var(--wdn-font-display); color: var(--wdn-text); }
html[data-theme="fjord"] .lsrv-meta span { border-color: var(--wdn-line); border-radius: 3px; font: 500 11px var(--wdn-font-mono); color: var(--wdn-text-2); }
html[data-theme="fjord"] .lsrv-bar { background: var(--wdn-line-soft); border-radius: 2px; }
html[data-theme="fjord"] .lsrv-bar i { background: var(--wdn-accent); }
html[data-theme="fjord"] .lsrv-copy { border-color: var(--wdn-line-strong); border-radius: var(--wdn-radius-sm); font-family: var(--wdn-font-body); font-weight: 600; letter-spacing: 0.04em; text-transform: none; font-size: 13px; color: var(--wdn-text); }
html[data-theme="fjord"] .lsrv-copy:hover { border-color: var(--wdn-accent); color: var(--wdn-accent); }
html[data-theme="fjord"] .lservers-note a, html[data-theme="fjord"] .f-mini a:hover { color: var(--wdn-accent); }
html[data-theme="fjord"] .f-mini { font-family: var(--wdn-font-body); font-weight: 600; letter-spacing: 0.04em; text-transform: none; font-size: 14px; }
html[data-theme="fjord"] .f-mini a { color: var(--wdn-text-2); }