/* UO Sagas Wiki — style per uosagas.com (dark medieval, gold accents) */
:root {
    --gold: #fbb03b;
    --gold-dark: #d49a2e;
    --gold-light: #ffc965;
    --bg-dark: #0a0a0a;
    --bg-card: #1a1a1a;
    --bg-card-hover: #252525;
    --text-white: #ffffff;
    --text-gray: #cccccc;
    --text-muted: #888888;
    --border-gold: rgba(251, 176, 59, 0.3);
    --shadow-gold: rgba(251, 176, 59, 0.2);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg-dark);
    color: var(--text-gray);
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
}
h1, h2, h3, h4 { font-family: 'Marcellus', serif; font-weight: 400; }

/* ---------- top bar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 24px;
    padding: 14px 28px;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-gold);
}
.topbar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.brand {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Marcellus', serif; font-size: 1.3rem;
    color: var(--text-white); text-decoration: none; white-space: nowrap;
}
.brand-logo { height: 42px; width: auto; display: block; }
.brand-text { color: var(--gold); }
.hero-logo { height: 90px; width: auto; margin-bottom: 14px; }
.site-link {
    margin-left: auto; color: var(--text-muted); text-decoration: none;
    font-size: 0.85rem; transition: color 0.3s ease;
}
.site-link:hover { color: var(--gold); }

/* ---------- search ---------- */
.searchbox { position: relative; flex: 1; max-width: 480px; }
.searchbox input {
    width: 100%; padding: 9px 16px;
    background: var(--bg-card); color: var(--text-white);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
    font-family: 'Open Sans', sans-serif; font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.searchbox input:focus {
    outline: none; border-color: var(--border-gold);
    box-shadow: 0 0 20px var(--shadow-gold);
}
#search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border-gold);
    border-radius: 12px; overflow: hidden; display: none;
    max-height: 60vh; overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
#search-results.open { display: block; }
#search-results a {
    display: block; padding: 10px 16px; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#search-results a:hover, #search-results a.sel { background: var(--bg-card-hover); }
#search-results .r-title { color: var(--text-white); font-family: 'Marcellus', serif; }
#search-results .r-cat {
    color: var(--gold); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 1px; margin-left: 8px;
}
#search-results .r-desc { color: var(--text-muted); font-size: 0.82rem; }
#search-results .r-none { padding: 12px 16px; color: var(--text-muted); font-size: 0.85rem; }

/* ---------- layout ---------- */
.layout { display: flex; max-width: 1400px; margin: 0 auto; min-height: calc(100vh - 120px); }
.sidebar {
    width: 280px; flex-shrink: 0; padding: 28px 20px 60px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-group { margin: 0 0 4px; }
.nav-cat {
    color: var(--gold); font-family: 'Marcellus', serif; font-size: 0.95rem;
    margin: 10px 0 4px; letter-spacing: 0.5px; cursor: pointer;
    list-style: none; padding: 4px 6px; border-radius: 6px;
    transition: background 0.2s ease;
}
.nav-cat::-webkit-details-marker { display: none; }
.nav-cat::before {
    content: '\25B8'; display: inline-block; margin-right: 7px;
    color: var(--gold-dark); font-size: 0.7rem; vertical-align: 1px;
    transition: transform 0.2s ease;
}
.nav-group[open] > .nav-cat::before { transform: rotate(90deg); }
.nav-cat:hover { background: rgba(251, 176, 59, 0.08); }
.nav-group > a { margin-left: 14px; }
.sidebar a {
    display: block; padding: 4px 10px; color: var(--text-gray);
    text-decoration: none; font-size: 0.88rem; border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background 0.2s ease, color 0.2s ease;
}
.sidebar a:hover { background: rgba(251, 176, 59, 0.08); color: var(--text-white); }
.sidebar a.active {
    border-left-color: var(--gold);
    background: linear-gradient(90deg, rgba(251, 176, 59, 0.15), transparent);
    color: var(--gold-light);
}
.content { flex: 1; padding: 32px 48px 80px; min-width: 0; }

/* ---------- article ---------- */
.crumbs { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 18px; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.article { max-width: 900px; animation: fadeInUp 0.4s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.article h1 {
    color: var(--gold); font-size: 2.4rem; margin-bottom: 18px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border-gold);
}
.article h2 { color: var(--gold); font-size: 1.6rem; margin: 36px 0 12px; }
.article h3 { color: var(--gold-light); font-size: 1.25rem; margin: 26px 0 10px; }
.article h4 { color: var(--text-white); font-size: 1.05rem; margin: 20px 0 8px; }
.article p { margin: 0 0 14px; }
.article a { color: var(--gold-light); text-decoration: none; border-bottom: 1px dotted var(--border-gold); }
.article a:hover { color: var(--gold); border-bottom-style: solid; }
.article ul, .article ol { margin: 0 0 14px 26px; }
.article li { margin-bottom: 5px; }
.article strong { color: var(--text-white); }
.article code {
    background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px; padding: 1px 6px; font-size: 0.88em; color: var(--gold-light);
}
.article pre {
    background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px; padding: 16px 20px; overflow-x: auto; margin: 0 0 16px;
}
.article pre code { background: none; border: none; padding: 0; color: var(--text-gray); }
.article blockquote {
    border-left: 3px solid var(--gold); background: rgba(251, 176, 59, 0.06);
    padding: 10px 18px; margin: 0 0 16px; border-radius: 0 8px 8px 0;
}
.article img {
    max-width: 100%; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08); margin: 6px 0 14px;
}
.video-embed {
    position: relative; width: 100%; max-width: 800px; aspect-ratio: 16 / 9;
    margin: 6px 0 18px; border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08); background: var(--bg-card);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.article hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 28px 0; }

/* tables */
.article table {
    border-collapse: collapse; width: 100%; margin: 0 0 18px;
    background: var(--bg-card); border-radius: 12px; overflow: hidden;
    display: block; overflow-x: auto;
}
.article th {
    background: linear-gradient(180deg, rgba(251, 176, 59, 0.15), rgba(251, 176, 59, 0.05));
    color: var(--gold); font-family: 'Marcellus', serif; font-weight: 400;
    text-align: left; padding: 10px 14px; white-space: nowrap;
}
.article td {
    padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.92rem;
}
.article tr:hover td { background: var(--bg-card-hover); }
/* max-width:none overrides the .article img rule above: in a narrow picture
   column the 100% cap resolves against the column, not the image, and shrank
   item art to well under its native size (the mastery reset deeds rendered
   60x58 art at 25x24). Height is still capped, and every table image is item
   art, so nothing here can grow wide enough to overflow. */
.article td img, .article th img { max-width: none; max-height: 80px; width: auto; margin: 0; vertical-align: middle; border: none; }

/* Opt-in, for a table whose first column is a short label and whose second is
   long prose: auto-layout gives the label ~12% and breaks it one word per line.
   Wrap the table in <div class="wide-first-col" markdown="1"> to double it. */
.article .wide-first-col th:first-child,
.article .wide-first-col td:first-child { width: 25%; }

/* ---------- home ---------- */
.hero {
    /* the 56px top padding belonged to the removed golden box — without it the
       logo sits up near the top bar instead of floating in empty space */
    text-align: center; padding: 16px 20px 40px;
    margin-bottom: 36px;
    animation: fadeInUp 0.4s ease;
}
.hero h1 { color: var(--gold); font-size: 3rem; margin-bottom: 10px; }
.hero p { color: var(--text-gray); font-size: 1.05rem; }
.cat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; max-width: 1100px; margin: 0 auto;
}
.cat-card {
    background: var(--bg-card); border-radius: 12px; padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    animation: fadeInUp 0.4s ease both;
}
.cat-card:hover {
    transform: translateY(-5px); border-color: var(--border-gold);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 30px var(--shadow-gold);
}
.cat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.cat-card:hover::before { transform: scaleX(1); }
.cat-card h2 { color: var(--gold); font-size: 1.3rem; margin-bottom: 12px; }
.cat-card ul { list-style: none; }
.cat-card li { margin-bottom: 4px; }
.cat-card a {
    color: var(--text-gray); text-decoration: none; font-size: 0.9rem;
    transition: color 0.2s ease;
}
.cat-card a:hover { color: var(--gold-light); }

.footer {
    text-align: center; padding: 24px; color: var(--text-muted); font-size: 0.82rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .sidebar { display: none; }
    .content { padding: 24px 20px 60px; }
}
@media (max-width: 768px) {
    .topbar { flex-wrap: wrap; gap: 10px; }
    .searchbox { order: 3; max-width: none; flex-basis: 100%; }
    .site-link { display: none; }
    .hero h1 { font-size: 2.2rem; }
    .article h1 { font-size: 1.9rem; }
}

/* ---------- callout box ---------- */
/* Pull a key fact out of the flow. Usage in markdown (md_in_html):
   <div class="callout" markdown="1">
   <span class="callout-title">Title</span>
   Body text.
   </div>                                                              */
.callout {
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-left: 4px solid var(--gold);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0 0 18px;
    box-shadow: 0 0 18px var(--shadow-gold);
}
.callout > :last-child { margin-bottom: 0; }
.callout-title {
    display: block;
    font-family: 'Marcellus', serif;
    font-size: 1.1rem;
    color: var(--gold-light);
    margin-bottom: 6px;
}
.article .callout table { margin-bottom: 0; }

/* ---------- weapon damage simulator (items/damage-simulator) ---------- */
.article .simgrid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; margin-bottom: 20px; }
.article .sim-card {
    background: var(--bg-card); border: 1px solid rgba(255,255,255,.05);
    border-radius: 12px; padding: 20px;
}
.article .controls label {
    display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); margin: 14px 0 4px;
}
.article .controls select {
    width: 100%; background: #111; border: 1px solid rgba(255,255,255,.15);
    color: var(--text-white); border-radius: 8px; padding: 9px 10px;
    font-family: 'Open Sans', sans-serif; font-size: .9rem;
}
.article .controls select:focus { outline: none; border-color: var(--gold); }
.article .controls input[type=range] { width: 100%; accent-color: var(--gold); height: 6px; }
.article .rangeval { float: right; color: var(--gold); font-weight: 600; font-size: .85rem; }
.article .sim-btn {
    display: block; width: 100%; margin-top: 16px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #111; font-weight: 600; border: none; border-radius: 8px;
    padding: 12px; font-size: .95rem; cursor: pointer; transition: .3s ease;
}
.article .sim-btn:hover { box-shadow: 0 4px 20px var(--shadow-gold); transform: translateY(-2px); }
.article .sim-btn:active { transform: scale(.98); }
.article .toggle {
    display: flex; border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px; overflow: hidden; margin-top: 4px;
}
.article .toggle button {
    flex: 1; background: #111; color: var(--text-muted); border: none;
    padding: 9px; cursor: pointer; font-size: .85rem; transition: .3s;
}
.article .toggle button.on { background: rgba(251,176,59,.15); color: var(--gold); font-weight: 600; }
.article .statrow {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.article .stat {
    background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 10px; text-align: center;
}
.article .stat .lbl {
    display: block; font-size: .66rem; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-muted);
}
.article .stat .val { font-family: 'Marcellus', serif; font-size: 1.5rem; color: var(--gold); }
.article .stat .val.red { color: #e05c5c; }
.article .stat .val.green { color: #5cc98a; }
.article .stat .val.blue { color: #5ca8e0; }
.article .sim-note { font-size: .82rem; color: var(--text-muted); font-style: italic; margin-top: 10px; }
.article canvas { max-width: 100%; }
@media (max-width: 820px) { .article .simgrid { grid-template-columns: 1fr; } }

/* Second sidebar level: pages with a parent render indented under it */
.nav-group a.nav-sub {
  padding-left: 34px;
  font-size: 0.93em;
  position: relative;
}

.nav-group a.nav-sub::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 5px;
  height: 1px;
  background: rgba(251, 176, 59, 0.5);
}

/* Visually hidden, kept for screen readers and SEO */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden;
  white-space: nowrap;
}

/* The wiki home uses the same callout outside .article — constrain it to the
   category grid's width so it lines up with the cards below. */
.home-callout {
    max-width: 1100px;
    margin: 0 auto 28px;
}
.home-callout p { margin: 0; }
/* Link styling lives under `.article a`; the home callout is outside <article>,
   so it needs the same treatment or the link falls back to browser blue. */
.home-callout a {
    color: var(--gold-light);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-gold);
}
.home-callout a:hover { color: var(--gold); border-bottom-style: solid; }
.home-callout .callout-date {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Sidebar sub-group: a heading with nested links, but not itself a page.
   Gives Crafting/Gathering the same two-level shape The World gets from `parent:`. */
.nav-group .nav-subgroup {
  display: block;
  padding: 7px 14px 3px 22px;
  font-size: 0.9em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Item-name cells should not wrap mid-name. Applies to the bolded first text
   column used by the item/craftable tables (Pigments and Dyes, weapons, ...). */
.article table td strong {
  white-space: nowrap;
}