/* OldRack site styles on top of Kadence. Deployed by Ansible (wordpress role, site plugin "oldrack"). */

/* ============================================================== tokens */
:root {
  --or-column: 900px;                /* article column: text, code, tables and images share it */
  --or-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --global-content-narrow-width: calc(var(--or-column) + 2 * var(--global-content-edge-padding, 1.5rem));

  --or-border: #d1d9e0;
  --or-surface: #f6f8fa;
  --or-muted: #59636e;
  --or-info-bg: #ddf4ff;  --or-info-bar: #0969da;
  --or-warn-bg: #fff8c5;  --or-warn-bar: #bf8700;

  /* code: GitHub light */
  --or-code-bg: #f6f8fa;  --or-code-fg: #1f2328;  --or-code-border: #d1d9e0;  --or-code-bar: #eaeef2;
  --or-tok-comment: #59636e;  --or-tok-keyword: #cf222e;  --or-tok-string: #0a3069;  --or-tok-number: #0550ae;
  --or-tok-title: #8250df;    --or-tok-attr: #0550ae;     --or-tok-builtin: #953800;  --or-tok-meta: #0550ae;
  --or-tok-add-fg: #116329;   --or-tok-add-bg: #dafbe1;   --or-tok-del-fg: #82071e;   --or-tok-del-bg: #ffebe9;
}

/* Dark palette: chosen with the toggle, or the system setting before JavaScript runs */
:root[data-theme="dark"] {
  color-scheme: dark;
  --global-palette1: #60a5fa;  --global-palette2: #93c5fd;
  --global-palette3: #f1f5f9;  --global-palette4: #e2e8f0;  --global-palette5: #cbd5e1;  --global-palette6: #94a3b8;
  --global-palette7: #2a303c;  --global-palette8: #1e222b;  --global-palette9: #16191f;
  --global-palette-btn: #ffffff;  --global-palette-btn-hover: #ffffff;  --global-palette-highlight-alt2: #ffffff;

  --or-border: #343b47;  --or-surface: #1e222b;  --or-muted: #94a3b8;
  --or-info-bg: #12263f;  --or-info-bar: #60a5fa;
  --or-warn-bg: #2e2715;  --or-warn-bar: #e3b341;

  /* code: Dracula */
  --or-code-bg: #282a36;  --or-code-fg: #f8f8f2;  --or-code-border: #3b3e4f;  --or-code-bar: #21222c;
  --or-tok-comment: #7f8ab8;  --or-tok-keyword: #ff79c6;  --or-tok-string: #f1fa8c;  --or-tok-number: #bd93f9;
  --or-tok-title: #50fa7b;    --or-tok-attr: #8be9fd;     --or-tok-builtin: #ffb86c;  --or-tok-meta: #8be9fd;
  --or-tok-add-fg: #50fa7b;   --or-tok-add-bg: #1f3a2a;   --or-tok-del-fg: #ff5555;   --or-tok-del-bg: #3d1f24;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --global-palette1: #60a5fa;  --global-palette2: #93c5fd;
    --global-palette3: #f1f5f9;  --global-palette4: #e2e8f0;  --global-palette5: #cbd5e1;  --global-palette6: #94a3b8;
    --global-palette7: #2a303c;  --global-palette8: #1e222b;  --global-palette9: #16191f;
    --or-border: #343b47;  --or-surface: #1e222b;  --or-muted: #94a3b8;
    --or-code-bg: #282a36;  --or-code-fg: #f8f8f2;  --or-code-border: #3b3e4f;  --or-code-bar: #21222c;
  }
}

/* ====================================================== typography */
body {
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, .entry-title  { font-size: 44px; line-height: 1.2;  font-weight: 700; letter-spacing: -0.02em; }
h2                { font-size: 34px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
h3                { font-size: 26px; line-height: 1.3;  font-weight: 650; letter-spacing: -0.01em; }
h4                { font-size: 21px; line-height: 1.4;  font-weight: 650; }
.single-content h2 { margin-top: 2.6em; margin-bottom: 0.6em; }
.single-content h3 { margin-top: 2em;   margin-bottom: 0.5em; }
.single-content h2[id], .single-content h3[id] { scroll-margin-top: 1.5rem; }
.single-content p, .single-content li { text-wrap: pretty; }

@media (max-width: 1024px) {
  h1, .entry-title { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
}
@media (max-width: 720px) {
  body { font-size: 17px; line-height: 1.65; }
  h1, .entry-title { font-size: 31px; }
  h2 { font-size: 26px; }
  h3 { font-size: 21px; }
}

/* ========================================== article layout (single posts) */
/* One column: title, text, code, tables and images all line up at --or-column. */
.single .entry-header,
.single .single-content > *,
.single .entry-footer {
  max-width: var(--or-column);
  margin-left: auto;
  margin-right: auto;
}
.single .single-content > .alignfull { max-width: none; }
.single .content-container .alignwide { margin-left: auto; margin-right: auto; width: auto; }

/* Links */
.single-content a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Images and screenshots */
.single-content img { border-radius: 4px; }
.single-content .wp-block-image figcaption { color: var(--or-muted); font-size: 0.85em; text-align: center; }
:root[data-theme="dark"] .single-content img:not(.no-dim) { filter: brightness(0.9) contrast(1.05); transition: filter 0.2s; }
:root[data-theme="dark"] .single-content img:hover { filter: none; }

/* Separators */
.single-content hr.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--or-border);
  width: 100%;
  margin: 3rem auto;
  opacity: 1;
}

/* ================================================================ code */
.single-content :not(pre) > code {
  font-family: var(--or-mono);
  font-size: 0.86em;
  background: var(--or-surface);
  border: 1px solid var(--or-border);
  border-radius: 4px;
  padding: 0.08em 0.35em;
  overflow-wrap: anywhere;
}
.or-code {
  margin: 1.6rem auto;
  border: 1px solid var(--or-code-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--or-code-bg);
}
.or-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0.5rem 0.3rem 1rem;
  background: var(--or-code-bar);
  border-bottom: 1px solid var(--or-code-border);
  font-family: var(--or-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--or-tok-comment);
}
.or-code-copy {
  font: inherit;
  color: var(--or-code-fg);
  background: transparent;
  border: 1px solid var(--or-code-border);
  border-radius: 4px;
  padding: 0.1rem 0.6rem;
  cursor: pointer;
  box-shadow: none;
}
.or-code-copy:hover, .or-code-copy:focus-visible { background: var(--or-code-bg); color: var(--or-code-fg); }
.or-code-copy.is-done { color: var(--or-tok-add-fg); border-color: currentColor; }
.single-content pre.wp-block-code,
.or-code pre.wp-block-code {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--or-code-bg);
  color: var(--or-code-fg);
  font-family: var(--or-mono);
  font-size: 14.5px;
  line-height: 1.6;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
}
.single-content > pre.wp-block-code { border: 1px solid var(--or-code-border); border-radius: 6px; margin: 1.6rem auto; }
pre.wp-block-code code { font: inherit; background: none; border: 0; padding: 0; color: inherit; white-space: pre; }
@media (max-width: 720px) {
  .single-content pre.wp-block-code, .or-code pre.wp-block-code { font-size: 13px; padding: 0.85rem 0.9rem; }
}

/* highlight.js tokens */
.hljs-comment, .hljs-quote { color: var(--or-tok-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-type, .hljs-doctag, .hljs-template-tag { color: var(--or-tok-keyword); }
.hljs-string, .hljs-regexp, .hljs-char.escape_, .hljs-template-variable { color: var(--or-tok-string); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--or-tok-number); }
.hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section, .hljs-name { color: var(--or-tok-title); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: var(--or-tok-attr); }
.hljs-built_in, .hljs-variable, .hljs-params, .hljs-subst { color: var(--or-tok-builtin); }
.hljs-meta, .hljs-meta .hljs-keyword { color: var(--or-tok-meta); }
.hljs-section, .hljs-strong { font-weight: 600; }
.hljs-emphasis { font-style: italic; }
.hljs-addition { color: var(--or-tok-add-fg); background: var(--or-tok-add-bg); }
.hljs-deletion { color: var(--or-tok-del-fg); background: var(--or-tok-del-bg); }

/* ============================================================== tables */
.single-content .wp-block-table { overflow-x: auto; margin: 1.8rem auto; }
.single-content .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 0.86em; line-height: 1.55; }
.single-content .wp-block-table th,
.single-content .wp-block-table td { border: 1px solid var(--or-border); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.single-content .wp-block-table thead th { background: var(--or-surface); font-weight: 650; border-bottom-width: 2px; }
.single-content .wp-block-table thead { border-bottom: 0; }
.single-content .wp-block-table.is-style-stripes { border-bottom: 0; }
.single-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: transparent; }
.single-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) { background: var(--or-surface); }

/* ===================================================== table of contents */
.or-toc {
  margin: 2.2rem auto;
  border: 1px solid var(--or-border);
  border-radius: 6px;
  background: var(--or-surface);
  font-size: 0.9em;
}
.or-toc summary {
  cursor: pointer;
  padding: 0.7rem 1.1rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.85em;
  color: var(--or-muted);
}
.or-toc details[open] summary { border-bottom: 1px solid var(--or-border); }
.or-toc ol { margin: 0; padding: 0.8rem 1.1rem 0.9rem 2.4rem; counter-reset: none; }
.or-toc ol ol { padding: 0.15rem 0 0.2rem 1.2rem; list-style: lower-alpha; }
.or-toc li { margin: 0.2rem 0; }
.or-toc a { text-decoration: none; }
.or-toc a:hover { text-decoration: underline; }

/* ================================================= article info box */
.single-content .wp-block-table.or-article-info table { font-size: 0.86em; border: 1px solid var(--or-border); border-radius: 6px; }
.single-content .wp-block-table.or-article-info td { border-width: 0 0 1px 0; padding: 0.45rem 0.9rem; }
.single-content .wp-block-table.or-article-info tr:last-child td { border-bottom: 0; }
.single-content .wp-block-table.or-article-info td:first-child {
  width: 11rem;
  color: var(--or-muted);
  font-weight: 600;
  background: var(--or-surface);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .single-content .wp-block-table.or-article-info td:first-child { width: auto; white-space: normal; }
}

/* ===================================== panels (Group block + CSS class) */
.single-content .or-panel {
  background: var(--or-info-bg);
  border-left: 4px solid var(--or-info-bar);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 1.8rem auto;
}
.single-content .or-panel-warning { background: var(--or-warn-bg); border-left-color: var(--or-warn-bar); }
.single-content .or-panel > :first-child,
.single-content .or-panel .wp-block-group__inner-container > :first-child { margin-top: 0; }
.single-content .or-panel > :last-child,
.single-content .or-panel .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* ======================================================= header toggle */
.or-theme-toggle-item { display: flex; align-items: center; margin-left: 0.75rem; }
.or-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--or-border);
  border-radius: 50%;
  background: transparent;
  color: var(--global-palette4);
  cursor: pointer;
  box-shadow: none;
}
.or-theme-toggle:hover, .or-theme-toggle:focus-visible { background: var(--global-palette7); color: var(--global-palette3); }
.or-theme-toggle svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.or-theme-toggle .or-icon-sun { display: none; }
:root[data-theme="dark"] .or-theme-toggle .or-icon-sun { display: block; }
:root[data-theme="dark"] .or-theme-toggle .or-icon-moon { display: none; }