/* EliteLevel shared look: the one header, the footer and the theme tokens of the EliteLevel site and the Sanctuary
   Codex. Source: site/shared/ (nav.json, header.html, item.html, footer.html, el.css, el.js); site/build_site.py and
   tools/wiki/build_wiki.py copy it to <out>/el/ with the images named in nav.json, so both load the same file.
   Classes: .elh (header), .elh-* (its parts), .elf (footer); tokens --el-*. docs/guides/site.md, Shared header. */
:root {
  --el-bg: #0a0302;
  --el-bg2: #170605;
  --el-iron: #3d2c23;
  --el-iron-lo: #140908;
  --el-gold: #f0c27a;
  --el-gold-hi: #ffe2a8;
  --el-gold-lo: #8a5a24;
  --el-ember: #ff6a1a;
  --el-blood: #7a0d06;
  --el-ink: #ecdcc4;
  --el-ink-dim: #a8927a;
  --el-title: 'Exocet', 'Trajan Pro', 'Cinzel', Georgia, serif;
  --el-body: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  /* the iron frame of cards and panels, and the same frame lit */
  --el-frame: inset 0 0 0 1px #000, inset 0 0 0 2px #4d382b, inset 0 0 0 4px #150a07, inset 0 0 0 5px rgba(180, 100, 45, 0.35);
  --el-frame-hi: inset 0 0 0 1px #000, inset 0 0 0 2px #7a5238, inset 0 0 0 4px #150a07, inset 0 0 0 5px rgba(255, 140, 60, 0.6);
  --el-panel-bg: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255, 60, 10, 0.12), transparent 70%), linear-gradient(#1a0b08, #0c0403);
  --el-top: 76px;                    /* header height (the Codex's two rows: 72px) */
  --el-scroll-thumb: #6b3c20;
  --el-scroll-track: #0d0504;
  color-scheme: dark;
}
html { scrollbar-color: var(--el-scroll-thumb) var(--el-scroll-track); }
::selection { background: rgba(255, 90, 20, 0.45); color: #fff6de; }
:focus-visible { outline: 2px solid var(--el-gold-hi); outline-offset: 2px; }

/* ------------------------------------------------------------------ header: iron, spikes, the EliteLevelD3 logo and the site menu */
.elh {
  position: sticky; top: 0; z-index: 50; height: var(--el-top); display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr); align-items: center; column-gap: 22px; padding: 0 26px;
  background:
    radial-gradient(ellipse 30% 140% at 12% 110%, rgba(255, 70, 10, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 120% at 70% 120%, rgba(255, 50, 10, 0.12), transparent 70%),
    linear-gradient(180deg, #221009 0%, #110605 55%, #070202 100%);
  box-shadow: inset 0 1px 0 rgba(255, 190, 140, 0.08), inset 0 -2px 0 var(--el-iron), inset 0 -3px 0 var(--el-iron-lo), 0 2px 0 rgba(255, 80, 20, 0.5), 0 12px 30px rgba(0, 0, 0, 0.75);
  font-family: var(--el-body);
}
.elh::after {                         /* a row of iron spikes hanging from the bar */
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; pointer-events: none;
  background: linear-gradient(135deg, #2c1e17 30%, transparent 31%) 0 0 / 14px 8px repeat-x, linear-gradient(225deg, #2c1e17 30%, transparent 31%) 0 0 / 14px 8px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 1px 3px rgba(255, 70, 10, 0.35));
}
.elh-brand { grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 2; display: flex; align-items: center; height: 100%; }
.elh-brand img { display: block; height: 64px; width: auto; max-width: none; filter: drop-shadow(0 0 10px rgba(255, 50, 10, 0.35)); transition: filter .25s; }
.elh-brand:hover img { filter: drop-shadow(0 0 16px rgba(255, 80, 20, 0.7)) brightness(1.1); }
.elh-menu { display: contents; }
/* "Skip to content": the first stop of the keyboard on every page; el.js moves the focus to <main> */
.el-skip {
  position: absolute; left: 12px; top: 8px; z-index: 60; padding: 7px 14px; transform: translateY(-200%);
  font: 14px var(--el-body); color: #1a0703; background: linear-gradient(#ffe2a8, #d9a05a); box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, 0.8);
  text-decoration: none; transition: transform .15s;
}
.el-skip:focus { transform: none; }
#main[tabindex="-1"]:focus { outline: 0; }
.elh-nav { grid-column: 2 / -1; grid-row: 1; justify-self: end; display: flex; align-items: stretch; gap: 2px; height: 100%; }
.elh-item {
  position: relative; display: flex; align-items: center; padding: 10px 12px 0; font: 15px/1 var(--el-title); letter-spacing: 0.08em; text-transform: uppercase;
  color: #cdb89a; text-decoration: none; white-space: nowrap; transition: color .2s, text-shadow .2s;
}
.elh-item:hover { color: var(--el-gold-hi); text-decoration: none; text-shadow: 0 0 10px rgba(255, 90, 20, 0.9), 0 0 2px #000; }
.elh-item.on { color: var(--el-gold-hi); text-shadow: 0 0 12px rgba(255, 90, 20, 0.85), 0 1px 2px #000; }
.elh-item.on::before {                /* the skull crest over the current page */
  content: ''; position: absolute; left: 50%; top: 4px; width: 58px; height: 24px; transform: translateX(-50%);
  background: url('img/crest-skull-winged.webp') center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255, 80, 20, 0.6));
}
.elh-item.on::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, transparent, #ff7a2a, #ffd28a, #ff7a2a, transparent); box-shadow: 0 0 10px #ff5a14;
}
.elh-item:focus-visible { outline-offset: -3px; }
.elh-toggle {
  display: none; grid-column: -2 / -1; grid-row: 1; justify-self: end; position: relative; width: 50px; height: 45px; padding: 0; border: 0; cursor: pointer;
  background: url('img/gear-normal.webp') center / contain no-repeat; filter: drop-shadow(0 2px 4px #000);
}
.elh-toggle:hover, .el-nav-open .elh-toggle { background-image: url('img/gear-hover.webp'); }
.elh-toggle:active { background-image: url('img/gear-pressed.webp'); }
.elh-toggle em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The Codex: the same bar in two rows, 40 + 32 px. The logo spans both; row 1 is the site menu (Sanctuary Codex lit),
   row 2 the Codex's own menus (Database, History, Tools), the page title and the search (.elh-sub, .crumb, .search:
   styled by the Codex's wiki.css). */
.elh.elh-codex { --el-top: 72px; grid-template-rows: 40px 32px; column-gap: 16px; padding: 0 16px 0 22px; }
.elh.elh-codex::before {              /* row 2: a darker band under the site menu */
  content: ''; position: absolute; left: 0; right: 0; top: 40px; bottom: 3px; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)); box-shadow: inset 0 1px 0 rgba(255, 120, 50, 0.22), inset 0 2px 0 rgba(0, 0, 0, 0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent 150px, #000 250px); mask-image: linear-gradient(90deg, transparent 150px, #000 250px);   /* fades out behind the logo */
}
.elh-codex .elh-nav { height: 40px; align-self: start; }
.elh-codex .elh-item { padding: 12px 11px 0; font-size: 14px; }
.elh-codex .elh-item.on::before { top: 0; width: 46px; height: 17px; }
.elh-codex .elh-item.on::after { bottom: 1px; }
.elh-codex .elh-sub { grid-column: 2; grid-row: 2; position: relative; }
.elh-codex > .crumb { grid-column: 3; grid-row: 2; position: relative; }
.elh-codex > .search { grid-column: 4; grid-row: 2; position: relative; }

@media (max-width: 1180px) {
  .elh { column-gap: 12px; padding: 0 16px; }
  .elh-item { padding: 10px 8px 0; font-size: 13.5px; }
  .elh-brand img { height: 56px; }
  .elh-codex .elh-item { padding: 12px 7px 0; font-size: 12.5px; }
  .elh-codex .elh-brand img { height: 52px; }
}
/* phones and tablets: the gear plate opens one menu with every page (and on Codex pages the Codex's menus under it) */
@media (max-width: 980px) {
  :root { --el-top: 62px; }
  .elh { grid-template-columns: auto minmax(0, 1fr) auto; }
  .elh-brand img, .elh-codex .elh-brand img { height: 50px; }
  .elh-toggle { display: block; }
  .elh-menu {
    display: block; position: fixed; top: var(--el-top); left: 0; right: 0; max-height: calc(100vh - var(--el-top)); max-height: calc(100dvh - var(--el-top));
    overflow-y: auto; overscroll-behavior: contain; padding: 14px 0 18px; z-index: 49;
    background: linear-gradient(#150706, #080202); box-shadow: inset 0 -2px 0 var(--el-iron), 0 2px 0 rgba(255, 80, 20, 0.45), 0 20px 40px rgba(0, 0, 0, 0.8);
    transform: translateY(calc(-100% - var(--el-top) - 8px)); visibility: hidden;
  }
  /* the slide runs only while the menu is being opened or closed (el-nav-anim), so a resize across this width does
     not slide a visible menu past the header */
  .el-nav-anim .elh-menu { transition: transform .25s, visibility 0s .25s; }
  .el-nav-open.el-nav-anim .elh-menu { transition: transform .25s; }
  .el-nav-open .elh-menu { transform: none; visibility: visible; }
  .elh-nav, .elh-codex .elh-nav { flex-direction: column; height: auto; gap: 0; justify-self: stretch; }
  .elh-item, .elh-codex .elh-item { padding: 14px 24px; font-size: 16px; border-left: 3px solid transparent; }
  .elh-item.on { border-left-color: var(--el-ember); background: linear-gradient(90deg, rgba(255, 70, 10, 0.18), transparent 70%); }
  .elh-item.on::before, .elh-item.on::after { display: none; }
  .elh.elh-codex { --el-top: 102px; grid-template-rows: 60px 42px; padding: 0 12px 0 16px; }
  .elh.elh-codex::before { top: 60px; -webkit-mask-image: none; mask-image: none; }
  .elh-codex .elh-brand { grid-row: 1; }
  .elh-codex > .search { grid-column: 1 / -1; grid-row: 2; }
  .elh-codex > .crumb { display: none; }
  /* on Codex pages the Codex's menus sit right under its item, the pages after it follow */
  .elh-codex .elh-menu { display: flex; flex-direction: column; }
  .elh-codex .elh-nav { display: contents; }
  .elh-codex .elh-item[data-key="codex"] ~ .elh-item { order: 2; }
  .elh-codex .elh-sub { order: 1; }
}

/* ------------------------------------------------------------------ footer: iron with spikes, the skull between blades */
.elf {
  position: relative; padding: 44px 20px 30px; text-align: center; font: 14px/1.55 var(--el-body); color: #a08a74;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255, 60, 10, 0.12), transparent 70%), linear-gradient(#120605, #050101);
  box-shadow: inset 0 2px 0 var(--el-iron), inset 0 3px 0 var(--el-iron-lo), 0 -2px 0 rgba(255, 80, 20, 0.4);
}
.elf::before {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; pointer-events: none;
  background: linear-gradient(45deg, #2c1e17 30%, transparent 31%) 0 0 / 14px 8px repeat-x, linear-gradient(-45deg, #2c1e17 30%, transparent 31%) 0 0 / 14px 8px repeat-x;
}
.elf-crest { position: absolute; left: 50%; top: -40px; width: 150px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 4px 8px #000) drop-shadow(0 0 10px rgba(255, 70, 10, 0.3)); }
.elf p { margin: 4px auto; max-width: 900px; }
.elf .elf-dim { color: var(--el-ink-dim); }
.elf a { color: var(--el-gold); }