/* ============================================
   Gildenhall Codex — wiki page. Builds on styles.css (tokens, header,
   footer, parchment, torn edges, blade-edge shapes).
   ============================================ */

.main-nav a[aria-current="page"] { color: var(--gold-h1); }

/* ---------- hero banner with search ---------- */
.wiki-hero { position: relative; padding: 156px 0 128px; text-align: center; }
.wiki-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wiki-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.wiki-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,5,0.97) 0, rgba(10,8,5,0.92) 84px, rgba(10,8,5,0.5) 170px, rgba(10,8,5,0.16) 250px, rgba(10,8,5,0) 340px),
    linear-gradient(0deg, rgba(232,214,178,0.95) 0, rgba(206,172,116,0.74) 90px, rgba(160,122,70,0.4) 200px, rgba(120,90,50,0.14) 300px, transparent 390px),
    radial-gradient(ellipse 70% 90% at 50% 45%, rgba(20,16,10,0.55), rgba(20,16,10,0.85));
}
.wiki-hero-inner { position: relative; z-index: 1; }
.wiki-hero h1 {
  margin: 16px 0 12px;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-light) 35%, #b9812f 70%, #8a5f24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 1px rgba(60,36,10,0.5));
}
.wiki-hero p { margin: 0 auto 30px; max-width: 52ch; color: #e6dcc6; font-size: 1.05rem; }

.wiki-search-wrap { position: relative; max-width: 560px; margin: 0 auto; text-align: left; }
.wiki-search {
  --cut: 12px;
  --edge-line: rgba(var(--gold-h1-rgb),0.6);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  background-color: rgba(18,14,9,0.82);
  border: 1px solid var(--edge-line);
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--edge-line) calc(50% - 0.6px), var(--edge-line) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--edge-line) calc(50% - 0.6px), var(--edge-line) calc(50% + 0.6px), transparent calc(50% + 0.6px));
  background-size: var(--cut) var(--cut);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  background-origin: border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: --edge-line 0.2s ease;
}
.wiki-search:focus-within { --edge-line: #ffe3a1; }
.wiki-search svg { width: 18px; height: 18px; color: var(--gold-h1); flex-shrink: 0; }
.wiki-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: #f8f1e0;
}
.wiki-search input::placeholder { color: #9d917a; }
.wiki-search input::-webkit-search-cancel-button { filter: sepia(1) saturate(3) hue-rotate(5deg); }
.wiki-search kbd {
  padding: 2px 8px;
  font: 700 0.75rem var(--font-body);
  color: #cbbfa6;
  border: 1px solid rgba(var(--gold-h1-rgb),0.35);
  border-radius: 3px;
}

.wiki-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  background: #fbf8f1;
  border: 1px solid rgba(var(--gold-deep-rgb),0.35);
  border-radius: 4px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.45);
}
.wiki-result { display: block; padding: 12px 14px; border-radius: 3px; transition: background 0.15s ease; }
.wiki-result:hover, .wiki-result:focus-visible { background: rgba(var(--gold-rgb),0.12); }
.wiki-result-title { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.wiki-result-title em { font: normal 700 0.68rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.wiki-result-text { display: block; margin-top: 4px; font-size: 0.84rem; line-height: 1.5; color: var(--ink-dim); }
.wiki-result mark { background: rgba(var(--gold-light-rgb),0.45); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.wiki-noresult { margin: 0; padding: 14px; font-size: 0.9rem; color: var(--ink-dim); }

/* ---------- three-column layout on parchment ---------- */
.wiki-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 200px;
  gap: 56px;
  align-items: start;
  padding: 76px 32px 150px;
}

/* sidebar */
.wiki-sidebar { position: sticky; top: 24px; }
.wiki-nav summary { display: none; }
.wiki-nav-group + .wiki-nav-group { margin-top: 26px; }
.wiki-nav h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.wiki-nav ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(var(--gold-deep-rgb),0.25); }
.wiki-nav a {
  position: relative;
  display: block;
  padding: 7px 0 7px 16px;
  font-size: 0.92rem;
  color: var(--ink-dim);
  transition: color 0.15s ease;
}
.wiki-nav a:hover { color: var(--ink); }
.wiki-nav a.is-active { color: var(--ink); font-weight: 800; }
.wiki-nav a.is-active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

/* article */
.wiki-article { min-width: 0; max-width: 760px; }
.wiki-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.wiki-crumbs span { color: var(--ink-soft); }
.wiki-body { color: #3a3024; font-size: 1rem; line-height: 1.75; }
.wiki-body h1 { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1.15; color: var(--ink); margin: 0 0 18px; }
.wiki-body h1 + p { font-size: 1.1rem; color: var(--ink-dim); }
.wiki-body h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
  margin: 48px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--gold-deep-rgb),0.3);
  scroll-margin-top: 24px;
}
.wiki-body h3 { font-size: 1.12rem; font-weight: 800; color: var(--ink); margin: 32px 0 8px; scroll-margin-top: 24px; }
.wiki-body p { margin: 0 0 16px; }
.wiki-body a { color: #8a6420; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(var(--gold-deep-rgb),0.45); text-underline-offset: 3px; }
.wiki-body a:hover { color: var(--ink); text-decoration-color: var(--gold); }
.wiki-body strong { color: var(--ink); }
.wiki-body ul, .wiki-body ol { margin: 0 0 18px; padding-left: 22px; }
.wiki-body li { margin-bottom: 6px; }
.wiki-body ul { list-style: none; padding-left: 20px; }
.wiki-body ul > li { position: relative; }
.wiki-body ul > li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.wiki-body ol li::marker { color: var(--gold-text); font-weight: 800; }
.wiki-body code {
  padding: 1px 6px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88em;
  color: #5a3f12;
  background: rgba(var(--gold-rgb),0.14);
  border: 1px solid rgba(var(--gold-deep-rgb),0.2);
  border-radius: 3px;
}
.wiki-body pre { padding: 16px 18px; overflow-x: auto; background: #1b1610; border-radius: 4px; }
.wiki-body pre code { padding: 0; background: none; border: none; color: #f1e9d6; }
.wiki-body img { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 14px 30px rgba(70,48,18,0.18); }
.wiki-body hr {
  position: relative;
  height: 1px;
  margin: 40px 0;
  border: none;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-deep-rgb),0.55), transparent);
  overflow: visible;
}
.wiki-body hr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* tables */
.wiki-table { margin: 0 0 22px; overflow-x: auto; border: 1px solid rgba(var(--gold-deep-rgb),0.3); border-radius: 4px; }
.wiki-body table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.wiki-body th {
  padding: 11px 16px;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-h1);
  background: #211a12;
}
.wiki-body td { padding: 11px 16px; border-top: 1px solid rgba(var(--gold-deep-rgb),0.18); background: rgba(255,253,248,0.6); }
/* pictures inside tables become small gold-ringed portraits (e.g. the races table) */
.wiki-body td img, .wiki-monogram {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px rgba(255,253,248,0.9), 0 0 0 5px rgba(var(--gold-deep-rgb),0.35);
}
.wiki-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-h1);
  background: radial-gradient(circle at 40% 30%, #4a3d2a, #1d1710);
}
.wiki-body td:first-child:has(img, .wiki-monogram) { width: 84px; }
.wiki-body tr:nth-child(even) td { background: rgba(245,238,224,0.7); }

/* callouts */
.wiki-body blockquote { margin: 0 0 20px; padding: 14px 20px; border-left: 3px solid var(--gold); background: rgba(255,252,245,0.7); color: var(--ink-dim); }
.wiki-callout { position: relative; padding: 16px 20px 16px 22px !important; border-radius: 0 4px 4px 0; }
.wiki-callout p:last-child { margin-bottom: 0; }
.wiki-callout-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wiki-callout--tip { border-left-color: var(--gold) !important; background: rgba(var(--gold-light-rgb),0.14) !important; }
.wiki-callout--tip .wiki-callout-label { color: var(--gold-text); }
.wiki-callout--note { border-left-color: #7d6a4c !important; background: rgba(125,106,76,0.1) !important; }
.wiki-callout--note .wiki-callout-label { color: #6b5a3e; }
.wiki-callout--warning { border-left-color: #b4532a !important; background: rgba(180,83,42,0.09) !important; }
.wiki-callout--warning .wiki-callout-label { color: #9a4420; }
.wiki-callout--lore {
  border-left: none !important;
  background: #1d1710 !important;
  color: #d8cbaf;
  font-family: var(--font-numeral);
  font-style: italic;
  font-size: 1.04rem;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(var(--gold-h1-rgb),0.3);
}
.wiki-callout--lore .wiki-callout-label { color: var(--gold-h1); font-family: var(--font-body); font-style: normal; }

.wiki-updated { margin: 36px 0 0; font-size: 0.8rem; color: var(--ink-soft); }

/* previous / next */
.wiki-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.wiki-pager-link {
  --cut: 10px;
  --edge-line: rgba(var(--gold-deep-rgb),0.4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  background-color: rgba(255,253,248,0.65);
  border: 1px solid var(--edge-line);
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--edge-line) calc(50% - 0.6px), var(--edge-line) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--edge-line) calc(50% - 0.6px), var(--edge-line) calc(50% + 0.6px), transparent calc(50% + 0.6px));
  background-size: var(--cut) var(--cut);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  background-origin: border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: --edge-line 0.2s ease, background-color 0.2s ease;
}
.wiki-pager-link span { font: 800 0.7rem var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.wiki-pager-link:hover { --edge-line: var(--gold); background-color: rgba(255,253,248,0.95); }
.wiki-pager-next { text-align: right; }

.wiki-empty h1 { font-family: var(--font-display); font-size: 1.8rem; color: var(--ink); margin: 0 0 12px; }
.wiki-empty p { color: var(--ink-dim); }

/* on this page */
.wiki-toc { position: sticky; top: 24px; }
.wiki-toc h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.wiki-toc ul { list-style: none; margin: 0; padding: 0; }
.wiki-toc a { display: block; padding: 5px 0; font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); transition: color 0.15s ease; }
.wiki-toc .toc-h3 a { padding-left: 14px; font-size: 0.8rem; }
.wiki-toc a:hover { color: var(--ink); }
.wiki-toc a.is-active { color: var(--gold-text); font-weight: 800; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .wiki-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .wiki-toc { display: none; }
}
@media (max-width: 980px) {
  .wiki-layout { grid-template-columns: 1fr; gap: 28px; padding: 56px 20px 130px; }
  .wiki-sidebar { position: static; }
  .wiki-nav {
    --cut: 10px;
    background: rgba(255,253,248,0.7);
    border: 1px solid rgba(var(--gold-deep-rgb),0.3);
    border-radius: 4px;
    padding: 0 18px;
  }
  .wiki-nav summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
  }
  .wiki-nav summary::-webkit-details-marker { display: none; }
  .wiki-nav summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(45deg); transition: transform 0.2s ease; }
  .wiki-nav[open] summary::after { transform: rotate(-135deg); }
  .wiki-nav[open] { padding-bottom: 16px; }
}
@media (max-width: 640px) {
  .wiki-hero { padding: 48px 0 96px; }
  .wiki-search kbd { display: none; }
  .wiki-pager { grid-template-columns: 1fr; }
}

/* ---------- Gildenhall's own wiki layout (wide screens): compact header with the search beside the title, the article first,
   and the contents on the right like the index of a book. Small screens keep the shared accordion above. ---------- */
@media (min-width: 981px) {
  .wiki-hero { padding: 132px 0 64px; text-align: left; }
  .wiki-hero-inner { display: grid; grid-template-columns: 1fr minmax(340px, 470px); grid-template-areas: "tag search" "title search" "sub search"; column-gap: 60px; align-items: end; }
  .wiki-hero-inner > .season-tag { grid-area: tag; justify-self: start; }
  .wiki-hero-inner > h1 { grid-area: title; margin: 6px 0 8px; }
  .wiki-hero-inner > p { grid-area: sub; margin: 0; }
  .wiki-hero-inner > .wiki-search-wrap { grid-area: search; max-width: none; margin: 0; }
  .wiki-layout { grid-template-columns: minmax(0, 1fr) 250px; grid-template-areas: "article nav" "article toc"; grid-template-rows: auto 1fr; gap: 0 64px; }
  .wiki-article { grid-area: article; }
  .wiki-sidebar { grid-area: nav; position: static; padding-left: 26px; border-left: 1px solid rgba(var(--gold-deep-rgb), 0.3); }
  .wiki-toc { grid-area: toc; position: static; margin-top: 34px; padding-left: 26px; border-left: 1px solid rgba(var(--gold-deep-rgb), 0.3); }
}
