/* NASApunk for Org-mode.
   Adapted from the NASApunk theme for Tola by KKKZOZ (MIT licence, see
   NASAPUNK-LICENSE.txt). Targets the HTML that ox-html / org-publish writes:
   #preamble, #content, h1.title, #table-of-contents, .outline-N,
   .org-src-container, pre.src, table, #postamble. */

/* ========================================================================== */
/* Fonts                                                                      */
/* ========================================================================== */

@font-face { font-family: "Rajdhani"; font-weight: 500; font-display: swap; src: url("webfonts/rajdhani-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 600; font-display: swap; src: url("webfonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-display: swap; src: url("webfonts/rajdhani-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("webfonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: italic; font-display: swap; src: url("webfonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("webfonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url("webfonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); }

/* ========================================================================== */
/* Tokens: light-dark(day, night). Follows the system unless the header      */
/* toggle pins one through data-theme on <html>.                             */
/* ========================================================================== */

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  --paper: light-dark(#ffffff, #15191b);
  --ink: light-dark(#222a2d, #dde2dc);
  --orange: light-dark(#cb4b22, #ec6e42);
  --muted: light-dark(#65716f, #919c99);
  --rule: light-dark(#c5c9be, #3b4447);
  --blue: light-dark(#286379, #7db4c8);
  --emphasis: light-dark(#b44020, #f2875b);
  --success: light-dark(#35665b, #79b8a8);
  --hint-emphasis: light-dark(#326d65, #7fc2b6);
  --warning: light-dark(#8a5b13, #d9a24c);
  --hairline: light-dark(#b7c5c5, #3f4b4d);
  --dark-emph: #9fd4dc;
  --bar: light-dark(#222a2d, #303b3f);
  --on-bar: light-dark(#ffffff, #e8ebe4);
  --tint: light-dark(#fcf0e7, #3a2419);
  --code-bg: light-dark(#f0f3f2, #232b2e);
  --pre-bg: light-dark(#f5f7f6, #1b2225);
  --cell-line: light-dark(#d6deda, #2f393c);
  --cell-key: light-dark(#edf1ef, #1f272a);
  --cell-key-alt: light-dark(#e5ebe8, #252e31);

  --band-1: #b84636;
  --band-2: #de783c;
  --band-3: #e3b65a;
  --band-4: #719c98;
  --band-5: #355b70;

  --font-title: "Rajdhani", "Noto Sans Arabic", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Noto Sans Arabic", monospace;

  --measure: 760px;
  --gutter: 16px;
}

/* ========================================================================== */
/* Base                                                                       */
/* ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.75 var(--font-mono);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--tint); color: var(--emphasis); }

/* Org's three page regions share one centred column. */
#preamble, #content, #postamble {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
#content { flex: 1; }

/* ========================================================================== */
/* Header (Org preamble)                                                      */
/* ========================================================================== */

/* Full-width livery rail at the very top of the page. */
#preamble { max-width: none; padding-inline: 0; }
.rail {
  height: 10px;
  background: linear-gradient(to bottom,
    var(--band-1) 0 20%, var(--band-2) 20% 40%, var(--band-3) 40% 60%,
    var(--band-4) 60% 80%, var(--band-5) 80% 100%);
}
.header-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 20px var(--gutter) 10px;
}
.brand { text-decoration: none; color: var(--ink); }
.brand-title { display: block; font: 700 26px/1.1 var(--font-title); letter-spacing: .01em; }
.brand:hover .brand-title { color: var(--orange); }

.label, .site-nav a {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.label.accent { color: var(--orange); }

.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.site-nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* Orange lead-in on a hairline, under the header. */
.divider {
  max-width: var(--measure);
  margin-inline: auto;
  height: 1.5px;
  background: linear-gradient(90deg, var(--orange) 0 64px, var(--rule) 64px);
}
@media (max-width: 792px) { .divider { margin-inline: var(--gutter); } }

/* Day / night toggle (js/theme.js): a half-lit disc. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
:root:not([data-theme]) .theme-toggle { display: none; }
.theme-toggle::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--muted) 50%, transparent 50%);
  transition: transform .3s;
}
:root[data-theme="dark"] .theme-toggle::before { transform: rotate(180deg); }
.theme-toggle:hover::before { border-color: var(--orange); background-image: linear-gradient(90deg, var(--orange) 50%, transparent 50%); }

/* ========================================================================== */
/* Title block                                                                */
/* ========================================================================== */

h1.title {
  margin: 40px 0 28px;
  font: 700 clamp(34px, 6vw, 46px)/1.08 var(--font-title);
  text-align: left;
}
h1.title .subtitle {
  display: block;
  margin-top: 12px;
  font: 400 16px/1.6 var(--font-mono);
  color: var(--muted);
}

/* ========================================================================== */
/* Table of contents                                                          */
/* ========================================================================== */

#table-of-contents {
  margin: 0 0 32px;
  padding: 12px 14px;
  border: .5px solid var(--rule);
  border-top: 2px solid var(--ink);
}
#content #table-of-contents h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
}
#content #text-table-of-contents ul { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: toc; }
#content #text-table-of-contents ul ul { margin: 0; padding-left: 28px; }
#content #text-table-of-contents li { margin: 0; padding: 0; counter-increment: toc; }
#text-table-of-contents a {
  display: inline-block;
  padding: 3px 0 3px 10px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.45;
}
#text-table-of-contents > ul > li > a::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 8px;
  color: var(--orange);
  font-weight: 500;
}
#text-table-of-contents a:hover { color: var(--ink); border-left-color: var(--orange); }

/* ========================================================================== */
/* Prose                                                                      */
/* ========================================================================== */

#content p, #content ul, #content ol, #content dl,
#content blockquote, #content table, #content pre { margin: 0 0 1.1em; }

#content h2, #content h3, #content h4, #content h5 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 2em 0 .6em;
}
#content h2 {
  font-size: 30px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid;
  border-image: linear-gradient(90deg, var(--orange) 0 48px, var(--rule) 48px) 1;
}
#content h3 { font-size: 24px; }
#content h4 { font-size: 20px; }
#content h5 { font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }
.section-number-2, .section-number-3, .section-number-4 { margin-right: .45em; color: var(--orange); }

/* Org TODO keywords, tags and timestamps */
.todo, .done, .tag > span, .timestamp {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.todo { color: var(--orange); }
.done { color: var(--success); }
.tag { float: right; }
.tag > span { margin-left: 6px; padding: 3px 6px; border: .5px solid var(--hairline); color: var(--muted); }
.timestamp { color: var(--blue); text-transform: none; letter-spacing: 0; }

#content strong, #content b { color: var(--emphasis); font-weight: 700; }
#content em, #content i { color: var(--blue); font-style: italic; }
#content strong em, #content em strong { color: var(--hint-emphasis); }
#content .underline { text-decoration: underline; text-decoration-color: var(--orange); }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
a:hover { color: var(--orange); }

#content ul, #content ol { padding-left: 1.4em; }
#content li { margin: .25em 0; padding-left: .25em; }
#content li::marker { color: var(--orange); }
#content ol > li::marker { font: 700 1em var(--font-title); }
#content dt { font-weight: 700; color: var(--ink); }
#content dd { margin: 0 0 .6em 1.4em; color: var(--muted); }

#content blockquote {
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--blue);
  color: var(--muted);
  font-style: italic;
}

#content hr { border: 0; height: 1.5px; margin: 2.4em 0; background: linear-gradient(90deg, var(--orange) 0 48px, var(--rule) 48px); }

/* ========================================================================== */
/* Code                                                                       */
/* ========================================================================== */

code, kbd, samp, .verbatim { font-family: var(--font-mono); font-size: .93em; }
#content :not(pre) > code, #content :not(pre) > .verbatim { background: var(--code-bg); color: var(--blue); padding: .1em .35em; }

#content pre {
  overflow-x: auto;
  padding: 14px 16px;
  background: var(--pre-bg);
  border: 0;
  border-left: 3px solid var(--orange);
  box-shadow: none;
  font: 400 14px/1.55 var(--font-mono);
  color: var(--ink);
}

/* Source blocks: a language label above the code. Org adds pre.src-LANG,
   so the label comes from that class via data-lang (js/theme.js). */
.org-src-container { position: relative; margin: 0 0 1.1em; }
.org-src-container > pre { margin: 0 !important; }
#content .org-src-container > pre[data-lang] { padding-top: 36px; }
.org-src-container > pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  left: 19px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.org-src-name { font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }

/* Syntax colours (htmlize in css mode writes these classes). */
.org-keyword, .org-builtin { color: var(--orange); }
.org-string, .org-doc { color: var(--success); }
.org-comment, .org-comment-delimiter { color: var(--muted); font-style: italic; }
.org-function-name { color: var(--blue); font-weight: 500; }
.org-variable-name { color: var(--ink); font-weight: 500; }
.org-type, .org-constant { color: var(--warning); }
.org-preprocessor, .org-negation-char, .org-warning { color: var(--emphasis); }

/* ========================================================================== */
/* Tables: ink header with orange rule, zebra rows, tinted first column.     */
/* ========================================================================== */

#content table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  display: block;
  overflow-x: auto;
  font-size: 14px;
}
#content th, #content td {
  padding: 7px 10px;
  text-align: left;
  vertical-align: middle;
  border: 0;
  border-bottom: .4px solid var(--cell-line);
}
#content thead th {
  background: var(--bar);
  color: var(--on-bar);
  font: 700 17px/1.3 var(--font-title);
  border-top: 2px solid var(--orange);
  border-bottom: .8px solid var(--orange);
}
#content tbody td:first-child { font-weight: 500; background: var(--cell-key); }
#content tbody tr:nth-child(even) > td { background: var(--pre-bg); }
#content tbody tr:nth-child(even) > td:first-child { background: var(--cell-key-alt); }
#content caption { caption-side: bottom; margin-top: 8px; font: 500 12px/1.5 var(--font-mono); letter-spacing: .05em; color: var(--muted); }

/* ========================================================================== */
/* Figures and footnotes                                                      */
/* ========================================================================== */

#content .figure, #content figure { margin: 1.8em 0; text-align: center; }
#content .figure p:last-child, #content figcaption { margin-top: 8px; font: 500 12px/1.5 var(--font-mono); letter-spacing: .05em; color: var(--muted); }
#content img { max-width: 100%; height: auto; }

sup a.footref, .footref { font: 500 .72em/0 var(--font-mono); color: var(--orange); text-decoration: none; }
#footnotes { margin-top: 3em; }
#footnotes h2.footnotes {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
}
.footdef { display: flex; gap: 8px; font-size: 13px; color: var(--muted); }
.footdef sup a { color: var(--orange); text-decoration: none; }
.footpara { margin: 0 !important; }

/* ========================================================================== */
/* Footer (Org postamble)                                                     */
/* ========================================================================== */

#postamble { margin-top: 72px; padding-bottom: 28px; }
#postamble p { margin: 0; }
.footer-rule { display: flex; align-items: center; gap: 4px; }
.footer-rule span:nth-child(1) { flex: 1; height: .5px; background: var(--hairline); }
.footer-rule span:nth-child(2) { width: 60px; height: 2px; background: var(--blue); }
.footer-rule span:nth-child(3) { width: 20px; height: 2px; background: var(--band-4); }
.footer-rule span:nth-child(4) { width: 8px; height: 2px; background: var(--band-3); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; margin-top: 8px; }
.footer-row a { color: var(--muted); text-decoration: none; }
.footer-row a:hover { color: var(--orange); }

/* ========================================================================== */
/* Small screens                                                              */
/* ========================================================================== */

@media (max-width: 560px) {
  .header-bar { align-items: flex-start; flex-direction: column; }
  #content h2 { font-size: 26px; }
  .tag { float: none; display: block; margin-top: 6px; }
}