/* Section: New Mercia Survival Guide (Wiki-style)
   Apply by setting menu Page Class to: section-guide
   Goal: In-world guidebook feel; warm, readable, with subtle texture.
*/

body.section-guide {
  --guide-bg: #0b0f1c;            /* deep corporate navy */
  --guide-panel: rgba(16,22,40,0.85);
  --guide-ink: #e6f0ff;          /* cool light text */
  --guide-muted: #b5c7e6;
  --guide-line: rgba(56, 189, 248, 0.22);
  --guide-accent: #38bdf8;       /* cyan accent */
  --guide-accent-2: #a78bfa;     /* purple accent */
  background: radial-gradient(1100px 700px at 10% -10%, #111833 0%, #0b0f1c 60%, #080b15 100%) fixed;
  color: var(--guide-ink);
}

.section-guide .navbar, .section-guide .footer { background: #0d1428 !important; border-bottom: 1px solid var(--guide-line); }
.section-guide .siteBody .container { max-width: 980px; }
.section-guide main {
  background:
    radial-gradient(1200px 300px at -10% -20%, rgba(56,189,248,0.08), transparent 60%),
    radial-gradient(1000px 260px at 120% 120%, rgba(167,139,250,0.06), transparent 60%),
    var(--guide-panel);
  border: 1px solid var(--guide-line);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 6px 24px rgba(0,0,0,0.45), 0 0 24px rgba(56, 189, 248, 0.12);
  border-radius: 12px; padding: 24px;
}

.section-guide h1, .section-guide h2, .section-guide h3 { font-weight: 800; color: var(--guide-ink); text-shadow: 0 0 8px rgba(56,189,248,.2); }
.section-guide h2 { margin-top: 1.75rem; border-bottom: 1px solid var(--guide-line); padding-bottom: .35rem; }
.section-guide p { line-height: 1.85; font-size: 1.06rem; color: var(--guide-ink); }
.section-guide blockquote { border-left: 4px solid rgba(56,189,248,.3); padding-left: 1rem; font-style: italic; color: var(--guide-muted); }

.section-guide .category-description { opacity: .9; margin-bottom: .5rem; color: var(--guide-muted); }
.section-guide .cat-list-row, .section-guide .blog-items .item { border-bottom: 1px solid rgba(255,255,255,0.06); padding: .75rem 0; }

/* Callouts for a professional guide style */
.section-guide .callout { border-left: 4px solid #d6c6b1; background:#fff6eb; padding: .75rem 1rem; border-radius:8px; margin: 1rem 0; color:#3b2a1b }
.section-guide .callout-note { border-color:#60a5fa; background:#eef6ff }
.section-guide .callout-warning { border-color:#f59e0b; background:#fff7ed }
.section-guide .guide-toc { background: rgba(13,20,40,0.6); border:1px solid var(--guide-line); border-radius:10px; padding:.75rem 1rem; margin-bottom:1rem; color: var(--guide-muted) }
.section-guide .guide-toc ul { list-style:none; margin:0; padding:0 }
.section-guide .guide-toc li { margin:.2rem 0 }
.section-guide .guide-toc li.sub { padding-left:1rem }

/* Anchor icon next to headings */
.section-guide .guide-anchor { margin-right:.35rem; color: var(--guide-accent); text-decoration:none; opacity:.7 }
.section-guide .guide-anchor:hover { opacity:1; color: var(--guide-accent-2) }

/* Wiki-like components */
/* Wikilinks */
.section-guide a.guide-wikilink { color: var(--guide-accent); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em }
.section-guide a.guide-wikilink:hover { color: var(--guide-accent-2) }
.section-guide .guide-wikilink-missing { color: #9bb4d8; border-bottom: 1px dotted var(--guide-line); cursor: help }

/* Hatnote (small disambiguation/summary notes) */
.section-guide .guide-hatnote { font-size: .95rem; color: var(--guide-muted); background: rgba(16,22,40,0.7); border: 1px solid var(--guide-line); border-radius: 8px; padding: .5rem .75rem; margin: .5rem 0 1rem }

/* Infobox (float-right info panel) */
.section-guide .guide-infobox { float: right; width: min(320px, 42%); margin: 0 0 1rem 1rem; background: rgba(13,20,40,0.7); border: 1px solid var(--guide-line); border-radius: 12px; padding: .75rem }
.section-guide .guide-infobox h3 { margin-top: 0; font-size: 1rem; color: var(--guide-ink); border-bottom: 1px solid var(--guide-line); padding-bottom: .25rem }
.section-guide .guide-infobox dl { margin: 0 }
.section-guide .guide-infobox dt { font-weight: 700; color: var(--guide-muted); width: 40%; float: left; clear: left }
.section-guide .guide-infobox dd { margin-left: 42%; margin-bottom: .35rem; color: var(--guide-ink) }

/* Thumbnail image with caption */
.section-guide .guide-thumb { float: right; width: min(360px, 48%); margin: 0 0 1rem 1rem; background: rgba(13,20,40,0.7); border: 1px solid var(--guide-line); border-radius: 10px; overflow: hidden }
.section-guide .guide-thumb img { display: block; width: 100%; height: auto }
.section-guide .guide-thumb .caption { font-size: .9rem; color: var(--guide-muted); padding: .5rem .75rem; background: rgba(16,22,40,0.6) }

/* Navbox (at bottom: related pages) */
.section-guide .guide-navbox { margin-top: 1.5rem; background: rgba(13,20,40,0.6); border: 1px solid var(--guide-line); border-radius: 10px; padding: .75rem 1rem }
.section-guide .guide-navbox .title { font-weight: 700; color: var(--guide-ink); margin-bottom: .35rem }
.section-guide .guide-navbox .links { display: flex; flex-wrap: wrap; gap: .5rem .75rem }
.section-guide .guide-navbox .links a { color: var(--guide-accent); text-decoration: none; border-bottom: 1px dotted var(--guide-line) }
.section-guide .guide-navbox .links a:hover { color: var(--guide-accent-2) }

/* References/footnotes */
.section-guide .references { margin-top: 1.25rem; padding-top: .5rem; border-top: 1px solid var(--guide-line) }
.section-guide .references ol { margin: .5rem 0 0 1.25rem }
.section-guide .references li { margin: .25rem 0; color: var(--guide-muted) }

/* Category badges */
.section-guide .guide-categories { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem }
.section-guide .guide-categories .badge { display: inline-block; padding: .2rem .5rem; border-radius: 999px; background: rgba(13,20,40,0.7); color: var(--guide-ink); border: 1px solid var(--guide-line); font-size: .85rem }

/* Tables more readable */
.section-guide table { border-collapse: separate; border-spacing: 0; width: 100%; background: rgba(13,20,40,0.6); border: 1px solid var(--guide-line); border-radius: 10px; overflow: hidden }
.section-guide thead th { background: rgba(16,22,40,0.8); color: var(--guide-muted); border-bottom: 1px solid var(--guide-line); font-weight: 700 }
.section-guide th, .section-guide td { padding: .5rem .6rem; border-right: 1px solid rgba(255,255,255,0.06); color: var(--guide-ink) }
.section-guide th:last-child, .section-guide td:last-child { border-right: 0 }
.section-guide tbody tr:nth-child(odd) { background: rgba(56,189,248,0.04) }

/* Responsive: drop floats on small screens */
@media (max-width: 768px) {
  .section-guide .guide-infobox,
  .section-guide .guide-thumb { float: none; width: 100%; margin: 0 0 1rem 0 }
  .section-guide .guide-infobox dt { width: auto; float: none }
  .section-guide .guide-infobox dd { margin-left: 0 }
}