/* ==========================================================================
   Org-publish Wiki Theme (MediaWiki-inspired)
   - Works with Org HTML export / org-publish output
   - Focus: readable typography, clean layout, familiar wiki vibes
   ========================================================================== */

/* ---- CSS Variables (tweak here) ----------------------------------------- */
:root{
  --bg: #f6f6f6;
  --page-bg: #ffffff;
  --text: #202122;
  --muted: #54595d;
  --border: #a2a9b1;
  --border-soft: #c8ccd1;

  --link: #0645ad;
  --link-visited: #0b0080;
  --link-red: #ba0000; /* for "new page" style if you choose to use it */
  --link-hover: #0b63ce;

  --heading: #202122;
  --code-bg: #f8f9fa;
  --pre-bg: #f8f9fa;

  --mark-bg: #fff3cd;

  --accent: #36c; /* wiki-ish blue */
  --shadow: 0 1px 2px rgba(0,0,0,.06);

  --radius: 6px;
  --line: 1.6;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --content-max: 980px;
}

/* ---- Base --------------------------------------------------------------- */
html{ box-sizing: border-box; }
*, *:before, *:after{ box-sizing: inherit; }

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Org export commonly uses #content; sometimes #org-div-home-and-up appears. */
#content, .content{
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--page-bg);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem 2.25rem;
  border: 1px solid rgba(0,0,0,.06);
}

/* Nice top spacing if your pages start right away */
#content{ margin-top: 1.25rem; margin-bottom: 2rem; }

/* ---- Page title --------------------------------------------------------- */
h1.title{
  font-size: 2rem;
  font-weight: 650;
  margin: .25rem 0 1rem;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: .5rem;
  letter-spacing: -.01em;
}

/* Optional subtitle from org export */
.subtitle{
  color: var(--muted);
  margin-top: -.5rem;
  margin-bottom: 1rem;
}

/* ---- Headings ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6{
  color: var(--heading);
  line-height: 1.25;
  margin-top: 1.35em;
  margin-bottom: .45em;
  scroll-margin-top: 1rem;
}

h2{
  font-size: 1.55rem;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: .25rem;
}
h3{ font-size: 1.25rem; }
h4{ font-size: 1.10rem; }
h5, h6{ font-size: 1rem; color: var(--muted); }

/* Org section wrappers often are div.outline-* */
div.outline-2, div.outline-3, div.outline-4,
div.outline-5, div.outline-6{
  margin-top: 1rem;
}

/* ---- Paragraphs & Lists ------------------------------------------------- */
p{ margin: .6rem 0; }
ul, ol{ padding-left: 1.5rem; }
li{ margin: .25rem 0; }
dt{ font-weight: 600; }
dd{ margin: .25rem 0 .75rem 1rem; }

/* ---- Links (very MediaWiki-like) --------------------------------------- */
a{
  color: var(--link);
  text-decoration: none;
}
a:visited{ color: var(--link-visited); }
a:hover, a:focus{
  color: var(--link-hover);
  text-decoration: underline;
}
a:active{ opacity: .85; }

/* If you want MediaWiki "red links" for missing pages:
   add class="new" to your links or generate it yourself. */
a.new{ color: var(--link-red) !important; }

/* External link icon (optional):
   Add class="external" to links you want to mark. */
a.external:after{
  content: "↗";
  font-size: .85em;
  margin-left: .25em;
  vertical-align: text-top;
  opacity: .75;
}

/* ---- Blockquotes -------------------------------------------------------- */
blockquote{
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: #f8f9fa;
  border-left: 4px solid var(--border);
  color: var(--muted);
}
blockquote p{ margin: .4rem 0; }

/* ---- Inline code and code blocks --------------------------------------- */
code{
  font-family: var(--font-mono);
  font-size: .95em;
  background: var(--code-bg);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: .08em .25em;
}

pre{
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--pre-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  overflow: auto;
  line-height: 1.45;
  margin: 1rem 0;
}

pre code{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* Org exports source blocks as pre.src with a language label. */
pre.src{
  position: relative;
  padding-top: 1.6rem;
}
pre.src:before{
  position: absolute;
  top: .4rem;
  right: .65rem;
  font-size: .75rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: .10rem .5rem;
}

/* Org adds language name via classes like src-srcname, plus :before content mapping.
   If your HTML exporter already sets content, this won't override it. */
pre.src:before{ content: attr(class); }

/* If you prefer no auto label, uncomment:
pre.src:before{ content: ""; display:none; }
*/

/* ---- Tables (wiki-ish) -------------------------------------------------- */
table{
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: .98rem;
}

th, td{
  border: 1px solid var(--border-soft);
  padding: .5rem .65rem;
  vertical-align: top;
}

th{
  background: #eaecf0;
  font-weight: 650;
  text-align: left;
}

tr:nth-child(even) td{
  background: #fcfcfd;
}

/* Org might wrap tables in .table-number or similar; keep it calm */
.table-number{ color: var(--muted); font-size: .9rem; }

/* ---- Figures, images ---------------------------------------------------- */
figure{ margin: 1rem 0; }
figcaption{
  margin-top: .35rem;
  color: var(--muted);
  font-size: .92rem;
}
img{
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ---- TOC (Org default: #table-of-contents) ------------------------------ */
#table-of-contents{
  background: #f8f9fa;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin: 1rem 0 1.25rem;
}

#table-of-contents h2{
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  border: 0;
  padding: 0;
}

#table-of-contents ul{
  margin: 0;
  padding-left: 1.1rem;
}
#table-of-contents li{ margin: .2rem 0; }

/* ---- Footnotes ---------------------------------------------------------- */
.footpara{ display: inline; }
.footdef{
  margin: .5rem 0;
  padding: .25rem 0;
}
.footdef .footpara{ color: var(--muted); }

#footnotes{
  margin-top: 2rem;
  border-top: 1px solid var(--border-soft);
  padding-top: 1rem;
}

/* ---- “Info boxes” / callouts (you can use Org blocks) ------------------- */
/* Example in Org:
   #+begin_quote
   ...
   #+end_quote
   or use #+begin_note / #+begin_warning if you post-process to add classes.
*/
.note, .tip, .warning{
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent);
  background: #f8f9fa;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin: 1rem 0;
}
.warning{
  border-left-color: #d33;
  background: #fff5f5;
}

/* ---- Org metadata / timestamps ----------------------------------------- */
.timestamp, .timestamp-kwd{
  color: var(--muted);
  font-size: .95em;
}

/* ---- Org “tags” in headings (if enabled) -------------------------------- */
.tag{
  font-size: .8rem;
  color: var(--muted);
  background: #eaecf0;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: .1rem .45rem;
  margin-left: .35rem;
}

/* ---- Horizontal rule ---------------------------------------------------- */
hr{
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 1.25rem 0;
}

/* ---- Mark / highlight --------------------------------------------------- */
mark{
  background: var(--mark-bg);
  padding: 0 .15em;
  border-radius: 3px;
}

/* ---- Small “nav-like” area if you have home/up links -------------------- */
#org-div-home-and-up{
  max-width: var(--content-max);
  margin: 1rem auto 0;
  padding: 0 .5rem;
  color: var(--muted);
}
#org-div-home-and-up a{ color: var(--link); }

/* ---- Responsiveness ----------------------------------------------------- */
@media (max-width: 760px){
  #content, .content{
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 1rem 1rem 2rem;
  }
  h1.title{ font-size: 1.65rem; }
}

/* ---- Print -------------------------------------------------------------- */
@media print{
  body{ background: #fff; }
  #content, .content{
    box-shadow: none;
    border: 0;
    margin: 0;
    padding: 0;
    max-width: none;
  }
  a{ text-decoration: underline; }
}

/* ==========================================================================
   Wiki Header / Navbar (MediaWiki-inspired)
   ========================================================================== */

.wiki-header{
  background: #ffffff;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.wiki-header-inner{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: .55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ---- Brand / Logo ------------------------------------------------------- */
.wiki-brand{
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.wiki-logo{
  color: var(--text);
  text-decoration: none;
}
.wiki-logo:hover{
  text-decoration: none;
  color: var(--accent);
}

/* ---- Navigation --------------------------------------------------------- */
.wiki-nav{
  display: flex;
  gap: .75rem;
  margin-left: 1rem;
  flex-wrap: wrap;
}

.wiki-nav a{
  font-size: .95rem;
  padding: .25rem .45rem;
  border-radius: 4px;
  color: var(--link);
}

.wiki-nav a:hover{
  background: #eaecf0;
  text-decoration: none;
}

/* ---- Search box --------------------------------------------------------- */
.wiki-search{
  margin-left: auto;
}

.wiki-search input{
  font-size: .9rem;
  padding: .3rem .6rem;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  background: #f8f9fa;
  min-width: 180px;
}

.wiki-search input:focus{
  outline: none;
  border-color: var(--accent);
  background: #ffffff;
}

/* ---- Space between header and content --------------------------------- */
.wiki-header + #content,
.wiki-header + .content{
  margin-top: 1rem;
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 760px){
  .wiki-header-inner{
    flex-wrap: wrap;
    gap: .5rem;
  }
  .wiki-nav{
    width: 100%;
    margin-left: 0;
  }
  .wiki-search{
    width: 100%;
  }
  .wiki-search input{
    width: 100%;
  }
}