/* ============================================================
   WDT Site Styles  — v2 (refined)
   Deliberately geocities-era aesthetic, circa 1999–2003.
   Royal purple + gold palette. Pure CSS, no JS required.

   FILE: style/styles.css  — base, layout, core components
   See also:
     style/model.css           — WDT tool page classes
     style/page-components.css — per-page classes (glossary,
                                 references, welcome, index,
                                 FAQ, author, footer widgets)

   Changes from v1:
     - Body font bumped to 16px (was 15px) for dense academic prose
     - Paragraph rhythm added (margin-bottom 0.9rem)
     - h2/h3 line-height tightened so multi-line headings don't balloon
     - Navbar padding nudged to 0.5rem (was 0.4rem) — less cramped
     - Content panel: added max-width 72ch for prose column legibility
     - Sidebar font 12.5px (was 12px) — marginally more readable
     - TOC font 12.5px; TOC background lightened to #210040 (less harsh)
     - Table td padding increased slightly; th/td font-size 14px
     - .wdt-ref-type and .wdt-ref-cited promoted to block display
       with top margin so they sit on their own visual lines
     - .wdt-ref-entry line-height bumped to 1.6
     - Blockquote font-size 15px so italic Times doesn't feel undersized
     - Link :visited colour shifted to #551a8b (purple-visited) —
       more distinctly different from #0000EE while remaining accessible
     - Internal bibliography gets explicit top margin
     - h2 border-bottom scoped to not look oversized on short headings
       (width: fit-content removed — Quarto wraps in block; left border
       approach used instead as a subtle alternative)
     - pre/code border-radius remains 0 (period-authentic)
     - All tool-page classes retained verbatim
   ============================================================ */

:root {
  --wdt-purple-deep:   #1a0033;
  --wdt-purple:        #2B0055;
  --wdt-purple-mid:    #3d0080;
  --wdt-gold:          #FFD700;
  --wdt-gold-dim:      #C0A000;
  --wdt-silver:        #C0C0C0;
  --wdt-lavender:      #F5F0FF;
  --wdt-accent:        #7c3aed;
  --wdt-accent-dark:   #6d28d9;
  --wdt-accent-light:  #c4b5fd;
  --wdt-green:         #16a34a;
  --wdt-red:           #c00;
}

/* ── Reset / base ─────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Tiled background ─────────────────────────────────────── */

body {
  background-color: #2B0055;
  background-image: repeating-linear-gradient(
    45deg,
    #2B0055,
    #2B0055 6px,
    #1A0033 6px,
    #1A0033 18px
  );
  background-attachment: fixed;
  color: #000000;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;           /* ↑ was 15px */
  line-height: 1.65;
  margin: 0;
  padding: 0;
}

/* ── Paragraph rhythm ─────────────────────────────────────── */
/* Quarto doesn't always set this; explicit margin keeps
   long academic prose from looking like a wall of text.   */

p {
  margin: 0 0 0.9rem 0;
}

/* ── Content panel ────────────────────────────────────────── */

.page-layout-article,
.page-layout-full,
#quarto-content {
  background-color: #C0C0C0;
  border: 3px double #FFD700;
  outline: 1px solid #000000;
  max-width: min(1400px, 100vw);
  margin: 1rem auto;
  padding: 0;
}

/* Inner content panel */
.quarto-container,
#quarto-document-content,
.content {
  background-color: #FFFFFF;
  padding: 1.25rem 1.5rem;
  border: 2px inset #808080;
  margin: 6px;
}


/* ── Navbar ───────────────────────────────────────────────── */

.navbar {
  background-color: #2B0055 !important;
  border-bottom: 3px solid #FFD700;
  padding: 0.5rem 0.75rem;   /* ↑ was 0.4rem — slightly less cramped */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.navbar-brand,
.navbar .nav-link,
.navbar-nav .nav-link {
  color: #FFD700 !important;
  font-weight: bold;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding: 0.2rem 0.5rem;
}

.navbar .nav-link:hover,
.navbar-nav .nav-link:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
  background-color: transparent;
}

.navbar-brand {
  font-size: 15px;
  letter-spacing: 0.03em;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: #1A0033;
  border: 2px solid #FFD700;
  border-radius: 0;
  padding: 0;
  min-width: 220px;
}

.dropdown-item {
  color: #FFD700 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid #2B0055;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #2B0055;
  color: #FFFFFF !important;
  text-decoration: underline;
}

.dropdown-item:last-child {
  border-bottom: none;
}


/* ── Sidebar ──────────────────────────────────────────────── */

#quarto-sidebar,
.sidebar,
.sidebar-navigation {
  background-color: #2B0055 !important;
  border-right: 2px solid #FFD700;
}

.sidebar-navigation .sidebar-item-text,
.sidebar-navigation a,
.sidebar .nav-link {
  color: #FFD700 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12.5px;         /* ↑ was 12px */
  font-weight: normal;
  text-decoration: none;
}

.sidebar-navigation a:hover,
.sidebar .nav-link:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
}

.sidebar-navigation .sidebar-section-item,
.sidebar-navigation .sidebar-item {
  border-bottom: 1px solid #3d0080;
  padding: 0.1rem 0;
}

.sidebar-navigation .active > .nav-link,
.sidebar-navigation .active > .sidebar-item-text {
  color: #FFFFFF !important;
  font-weight: bold;
}

/* Sidebar section headers */
.sidebar-navigation .sidebar-section > .sidebar-item-text {
  color: #FFD700 !important;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #FFD700;
  margin-bottom: 0.2rem;
  padding-bottom: 0.2rem;
}


/* ── TOC (right panel) ────────────────────────────────────── */

#quarto-margin-sidebar,
.toc-active #TOC,
nav#TOC {
  background-color: #210040;
  border-left: 2px solid #FFD700;
  padding: 0.75rem;
}

/* "On this page" heading */
#quarto-margin-sidebar .toc-actions,
nav#TOC > h2,
#quarto-margin-sidebar p.sidebar-title {
  color: #FFD700 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

nav#TOC a,
.toc-active #TOC a {
  color: #FFD700 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12.5px;
  text-decoration: none;
  display: block;
  padding: 0.1rem 0 0.1rem 0.6rem;  /* left padding creates gap from border */
  border-left: 2px solid transparent; /* reserve space — prevents text jump */
  margin-left: -0.75rem;             /* pull to container edge */
}

nav#TOC a:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
}

/* Active link — gold indicator, white text */
nav#TOC a.active,
nav#TOC a:focus {
  color: #FFFFFF !important;
  border-left-color: #FFD700 !important;
}

nav#TOC .toc-section-number {
  color: #C0C0C0;
  font-size: 11px;
}

nav#TOC .nav-link {
  border-left: 2px solid transparent;  /* reserve the space so text doesn't jump */
  padding-left: 0.5rem;                /* gap between line and text */
}

nav#TOC .nav-link.active {
  border-left-color: #FFD700;           /* your gold when active */
  color: #FFFFFF !important;
}

/* ── Typography ───────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #2B0055;
  margin-top: 1.4rem;
  margin-bottom: 0.5rem;
  line-height: 1.25;          /* tighter than body — prevents balloon on
                                 multi-line headings */
}

h1 {
  font-size: 22px;
  text-align: center;
  border-bottom: 3px double #FFD700;
  padding-bottom: 0.4rem;
  color: #2B0055;
  background-color: #C0C0C0;
  margin: 2rem -1.5rem 1.25rem;   /* positive top margin for mid-page h1s */
  padding: 0.75rem 1.5rem 0.5rem;
}

/* Only the page title h1 bleeds flush to the top of the content panel */
#quarto-document-content > h1:first-of-type {
  margin-top: -1.25rem;
}

h2 {
  font-size: 18px;
  border-bottom: 2px solid #2B0055;
  padding-bottom: 0.2rem;
  margin-top: 2.0rem;        /* extra breathing room above section breaks */
}

h3 {
  font-size: 15px;
  color: #3d0080;
}

h4 {
  font-size: 14px;
  color: #2B0055;
  font-style: italic;
}


/* ── Links ────────────────────────────────────────────────── */

a {
  color: #0000EE;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;             /* ↑ was #000080 (navy) — purple-visited is
                                 more distinctly different from unvisited blue
                                 and fits the site palette */
}

a:hover {
  color: #CC0000;
  text-decoration: underline;
}

a:active {
  color: #FF0000;
}


/* ── Horizontal rules ─────────────────────────────────────── */

hr {
  border: none;
  border-top: 2px solid #2B0055;
  border-bottom: 1px solid #808080;
  margin: 1.5rem 0;
}


/* ── Tables ───────────────────────────────────────────────── */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 14px;
  border: 2px solid #2B0055;
}

th {
  background-color: #2B0055;
  color: #FFD700;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 0.45rem 0.7rem;   /* ↑ slightly more padding */
  border: 1px solid #1A0033;
  text-align: left;
}

td {
  padding: 0.4rem 0.7rem;    /* ↑ was 0.35/0.6 */
  border: 1px solid #C0C0C0;
  vertical-align: top;
  font-size: 14px;
}

tr:nth-child(even) {
  background-color: #F0F0F0;
}

tr:hover {
  background-color: #E8E0FF;
}


/* ── Blockquotes ──────────────────────────────────────────── */

blockquote {
  border-left: 4px solid #FFD700;
  background-color: #F5F0FF;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  font-style: italic;
  font-size: 15px;            /* ↑ explicit — italic Times at 16px
                                 inherits fine but 15px helps density */
  color: #2B0055;
}


/* ── Code ─────────────────────────────────────────────────── */

code, pre {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  background-color: #F0F0F0;
  border: 1px solid #C0C0C0;
}

code {
  padding: 0.1rem 0.3rem;
}

pre {
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border-left: 3px solid #2B0055;
}


/* ── Callout boxes (Quarto) ───────────────────────────────── */

.callout {
  border: 2px solid #2B0055;
  border-left-width: 5px;
  border-radius: 0;
  background-color: #F5F0FF;
  margin: 1.25rem 0;
}

.callout-header {
  background-color: #2B0055;
  color: #FFD700;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 13px;
  padding: 0.4rem 0.75rem;
}

.callout-note {
  border-color: #2B0055;
}

.callout-tip {
  border-color: #006600;
}

.callout-warning {
  border-color: #CC6600;
}

.callout-important {
  border-color: #CC0000;
}


/* ── Page footer ──────────────────────────────────────────── */

#quarto-footer,
.nav-footer {
  background-color: #1A0033;
  border-top: 3px solid #FFD700;
  color: #C0C0C0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0.5rem 1rem;
  text-align: center;
}

#quarto-footer a,
.nav-footer a {
  color: #FFD700;
}

#quarto-footer a:visited,
.nav-footer a:visited {
  color: #C0A000;
}


/* ── Search (Quarto built-in) ─────────────────────────────── */

.quarto-search input {
  background-color: #1A0033;
  color: #FFD700;
  border: 1px solid #FFD700;
  border-radius: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.quarto-search input::placeholder {
  color: #C0A000;
}


/* ── WDT: internal bibliography ───────────────────────────── */

.internal-bibliography {
  background-color: #F5F0FF;
  border-left: 4px solid #2B0055;
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  border-right: 1px solid #C0C0C0;
  padding: 0.75rem 1.25rem;
  margin: 1.75rem 0 1.5rem;  /* ↑ explicit top margin — separates from
                                 preceding paragraph more clearly */
  font-size: 13px;
  font-family: "Times New Roman", Times, serif;
}


/* ── WDT: PDF download button ─────────────────────────────── */

.pdf-download {
  display: inline-block;
  margin: 1rem 0;
  padding: 0.35rem 1rem;
  background-color: #2B0055;
  color: #FFD700 !important;
  border: 2px outset #808080;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.pdf-download:hover {
  background-color: #3d0080;
  color: #FFFFFF !important;
  border-style: inset;
  text-decoration: none;
}


/* ── WDT: Mermaid diagram containers ─────────────────────── */

.wdt-diagram-tabset {
  margin: 1.5rem 0;
  border: 2px solid #2B0055;
  background: #F5F0FF;
}

.wdt-diagram-tabset .nav-tabs {
  background-color: #2B0055;
  border-bottom: 2px solid #FFD700;
}

.wdt-diagram-tabset .nav-tabs .nav-link {
  color: #FFD700;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-radius: 0;
  border: 1px solid #3d0080;
  margin-right: 2px;
  background-color: #1A0033;
}

.wdt-diagram-tabset .nav-tabs .nav-link.active {
  background-color: #C0C0C0;
  color: #2B0055;
  font-weight: bold;
  border-bottom-color: #C0C0C0;
}

.wdt-diagram-tabset .tab-pane {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem;
}

.wdt-diagram-tabset svg {
  display: block;
  height: auto;
  margin: 0 auto;
}

.wdt-diagram-tabset .tab-pane:first-of-type svg {
  min-width: 860px;
}

.wdt-diagram-tabset .tab-pane:nth-of-type(2) svg {
  max-width: 100%;
}

.wdt-diagram-tabset .node a,
.wdt-diagram-tabset a.clickable {
  cursor: pointer;
}

.wdt-diagram-tabset .node:has(a):hover rect,
.wdt-diagram-tabset .node:has(a):hover polygon,
.wdt-diagram-tabset .node:has(a):hover circle {
  filter: brightness(1.15);
  transition: filter 0.15s ease;
}


/* ── WDT: External references page ───────────────────────── */

.wdt-references {
  margin-top: 1rem;
}

.wdt-ref-entry {
  border-left: 4px solid #2B0055;
  border-top: 1px solid #C0C0C0;
  border-right: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  padding: 0.7rem 1.1rem 0.8rem; /* ↑ slightly more bottom padding */
  margin-bottom: 1rem;
  background-color: #FAFAFA;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.6;              /* ↑ was inheriting body 1.65 which
                                    inflated multi-line author strings */
}

.wdt-ref-entry:hover {
  background-color: #F5F0FF;
  border-left-color: #FFD700;
}

.wdt-ref-entry p {
  margin: 0 0 0.3rem 0;
}

/* Type badge and cited-in: promote from inline-span to block so they
   each sit on their own visual line within the card.                */
.wdt-ref-type {
  display: inline-block;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #2B0055;
  color: #FFD700;
  border: 1px solid #1A0033;
  border-radius: 0;
  padding: 0.1rem 0.45rem;
  margin-right: 0.5rem;
  margin-top: 0.35rem;           /* ↑ breathing room from preceding source line */
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wdt-ref-cited {
  display: block;                /* ↑ was inline; now sits on its own line */
  margin-top: 0.3rem;            /* ↑ gap from the type badge */
  font-size: 12px;
  color: #2B0055;
  font-family: Arial, Helvetica, sans-serif;
}

.wdt-ref-cited a {
  color: #2B0055;
  text-decoration: underline;
  font-weight: bold;
}

.wdt-ref-cited a:hover {
  color: #CC0000;
}

.wdt-ref-cited a:visited {
  color: #551a8b;               /* matches the updated global :visited */
}

.wdt-ref-verified {
  color: #006600;
  font-size: 12px;
  margin-left: 0.2rem;
  vertical-align: middle;
  font-weight: bold;
}

/* Unlinked entry indicator — muted grey ↗ after title */
.wdt-ref-no-link {
  color: #aaa;
  font-size: 11px;
  margin-left: 0.2rem;
  vertical-align: middle;
  font-style: normal;
  cursor: default;
}


/* ── Visitor counter ──────────────────────────────────────── */

.wdt-counter {
  display: inline-block;
  background-color: #000000;
  border: 3px inset #808080;
  padding: 0.4rem 0.75rem;
  margin: 1rem 0;
  text-align: center;
}

.wdt-counter-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #C0C0C0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.wdt-counter-digits {
  font-family: "Courier New", Courier, monospace;
  font-size: 24px;
  color: #00FF00;
  letter-spacing: 0.1em;
  font-weight: bold;
}


/* ── Under construction banner ────────────────────────────── */

.wdt-under-construction {
  background-color: #FFD700;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  padding: 0.35rem 0;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
  margin: 1rem 0;
  letter-spacing: 0.05em;
}


/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-layout-article,
  .page-layout-full,
  #quarto-content {
    margin: 0;
    border-left: none;
    border-right: none;
    max-width: 100%;
  }

  .quarto-container,
  #quarto-document-content,
  .content {
    padding: 0.75rem;
    margin: 3px;
  }

  h1 {
    font-size: 18px;
    margin: -0.75rem -0.75rem 1rem;
    padding: 0.5rem 0.75rem 0.4rem;
  }

  table {
    font-size: 12px;
  }

  td {
    font-size: 12px;
    padding: 0.3rem 0.5rem;
  }
}


/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}