/*!
 * Cascading Style Sheet (CSS) for a simple website
 *
 * Copyright (c) 2024-2026 David David Uhden Collado <david@uhden.dev>
 *
 * Permission to use, copy, modify, and distribute this cascading style sheet
 * for any purpose with or without fee is hereby granted, provided that the
 * above copyright notice and this permission notice appear in all copies.
 *
 * THE CASCADING STYLE SHEET IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL
 * WARRANTIES WITH REGARD TO THIS CASCADING STYLE SHEET INCLUDING ALL IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE
 * LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY
 * DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN
 * AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS CASCADING STYLE SHEET.
 */

/*
 * Design tokens (shared structure)
 * Each site defines its palette in :root below; the rest of the
 * stylesheet intentionally re-uses these tokens so both sites share
 * identical layout and component rules while keeping colors local.
 */
:root {
  /* Light site palette (local to daviduhden-website) */
  color-scheme: light;

  --bg: #f7f9fb;
  --panel: #ffffff;
  --panel-2: #fbfdff;

  --text: #1f2937;
  --muted: #4b5563;
  --heading: #0f172a;
  --link: #0ea5e9;
  --link-hover: #0891b2;

  --border: #e5e7eb;
  --border-hover: #d1d5db;

  --nav-bg: transparent;
  --nav-bg-hover: #f3f4f6;

  --radius: 0.75em;
  --radius-soft: 0.66em;
  --radius-pill: 999em;

  --shadow: 0 0.5em 1.5em #0f172a0d;
  --shadow-img: 0 0.125em 0.75em #00000012;

  --max-width: 76ch;
  --gutter: 1.25em;

  /* page padding (matches cypherpunk site) */
  --pad-y: 2em;
  --pad-x: 1.25em;

  --focus-ring: 0 0 0 0.2em #0ea5e959;
}

/*
 * Global box sizing
 * Reduces layout surprises when padding/borders are applied.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Root document adjustments
 * Helps keep text sizing consistent across platforms.
 */
html {
  text-size-adjust: 100%;
  font-size: clamp(16px, 0.3vw + 15px, 18px);
}

/*
 * General styles for the body of the document
 * Sets background, font, and text color for the whole site.
 */
body {
  margin: 0;
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute;
  left: 0.75em;
  top: -9999px;
  z-index: 1000;
  padding: 0.5em 0.7em;
  border: thin solid var(--border);
  border-radius: var(--radius-soft);
  background: var(--panel);
  color: var(--heading);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0.75em;
  box-shadow: var(--focus-ring);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Allow very long words to break and wrap to the next line to avoid overflow */
html, body, p, li, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Protect code and pre from forced breaks */
code, pre, kbd, samp {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

pre {
  white-space: pre;
  overflow-x: auto;
}

code {
  white-space: pre-wrap;
}

/*
 * Layout containers for header, main, and footer
 * Centers content and sets a max width.
 */
header,
main,
footer {
  width: min(var(--max-width), 100% - var(--gutter) * 2);
  margin: 0 auto;
}

/*
 * Header styling
 * Adds padding and centers the header text.
 */
header {
  padding: 2em 0 1.25em;
  text-align: center;
}

header h1,
header .site-title {
  margin: 0 0 0.75em;
  font-size: clamp(1.6em, 2.5vw + 1em, 2.25em);
  line-height: 1.2;
  color: var(--heading);
}

#site-header > .page-type,
#site-header > .site-title + h1 {
  margin: 0 0 1em;
  font-size: clamp(1.05em, 1.1vw + 0.85em, 1.35em);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/*
 * Navigation link styles
 * Styles the main navigation links.
 */
nav * {
  vertical-align: middle;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  padding: 0;
  margin: 0 0 1.5em;
  justify-content: center;
}

nav a {
  display: inline-block;
  padding: 0.45em 0.75em;
  margin: 0 0.35em;
  border: thin solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--nav-bg, transparent);
  color: var(--heading);
  text-decoration: none;
  font-weight: 600;
}

nav a:hover {
  background: var(--nav-bg-hover, #f3f4f6);
  border-color: var(--border-hover);
}

/*
 * Focus styles (accessibility)
 * Makes keyboard navigation clearly visible without changing layout.
 */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 0.4em;
}

/* Utility: underlined text (shared with cypherpunk-handbook) */
.underline,
.u-underline {
  text-decoration: underline;
  text-decoration-thickness: max(0.06em, 0.04lh);
  text-decoration-skip-ink: auto;
}

/*
 * Language switch button styles
 * Adds border, padding, and icon alignment for language switcher.
 */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.25em 0.5em;
  margin-left: 0.35em;
  border: thin solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--nav-bg, transparent);
  color: var(--heading);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  font-size: inherit;
  height: auto;
}

.lang-switch:hover {
  background: var(--nav-bg-hover, #f3f4f6);
  border-color: var(--border-hover);
}

/* Decorative icons enhance labels that are complete without CSS. */
.icon-label::before,
.lang-switch::before,
footer p.motto::before,
footer p.motto::after {
  content: "";
  display: inline-block;
  inline-size: 1.25em;
  block-size: 1.25em;
  margin-right: 0.4em;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-archive::before {
  background-image: url("./images/archive.png");
}
.icon-bitcoin::before {
  background-image: url("./images/bitcoin.png");
}
.icon-email::before {
  background-image: url("./images/email.png");
}
.icon-feed::before {
  background-image: url("./images/feed.png");
}
.icon-github::before {
  background-image: url("./images/github.png");
}
.icon-gnupg::before {
  background-image: url("./images/gnupg.png");
}
.icon-i2p::before {
  background-image: url("./images/i2p.png");
}
.icon-kicksecure::before {
  background-image: url("./images/kicksecure.png");
}
.icon-monero::before {
  background-image: url("./images/monero.png");
}
.icon-signal::before {
  background-image: url("./images/signal.png");
}
.icon-simplex::before {
  background-image: url("./images/simplex.png");
}
.icon-tor::before {
  background-image: url("./images/tor.png");
}
.icon-www::before {
  background-image: url("./images/www.png");
}

.lang-switch[hreflang="en"]::before {
  background-image: url("./images/en.png");
}

.lang-switch[hreflang="es"]::before {
  background-image: url("./images/es.png");
}

footer p.motto::before,
footer p.motto::after {
  margin: 0 0.4em;
  background-image: url("./images/anarchy.png");
}

/*
 * Main content styling
 * Creates a readable panel with subtle border and shadow.
 */
main {
  background: var(--panel);
  border: thin solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.1em, 2vw, 1.75em);
  box-shadow: var(--shadow);
}

/*
 * Article header spacing
 */
article header {
  margin-bottom: 1.25em;
}

.kicker {
  margin: 0 0 0.35em;
  color: var(--heading);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85em;
}

.meta {
  margin: 0 0 0.6em;
  color: var(--muted);
  font-size: 0.95em;
}

.lede {
  margin: 0.2em 0 1em;
  color: var(--heading);
  font-size: 1.05em;
  line-height: 1.7;
}

section {
  margin-bottom: 1.5em;
}

section h2 {
  margin: 0 0 0.5em;
  font-size: clamp(1.25em, 1.2vw + 1em, 1.6em);
  color: var(--heading);
  line-height: 1.25;
}

section h3 {
  margin: 1em 0 0.45em;
  font-size: clamp(1.08em, 0.9vw + 0.95em, 1.25em);
  line-height: 1.3;
}

main p {
  text-align: justify;
  margin: 0.45em 0 0.95em;
}

/* Keep utility/meta paragraphs un-justified */
.kicker,
.meta {
  text-align: start;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 1.4em;
  font-size: 0.98em;
  background: var(--panel);
  border: thin solid var(--border);
  border-radius: var(--radius-soft);
  overflow: hidden;
}

caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.5em;
}

thead th {
  background: var(--panel-2);
  color: var(--heading);
  text-align: left;
  font-weight: 600;
  padding: 0.7em 0.8em;
  border-bottom: thin solid var(--border);
}

tbody td {
  padding: 0.6em 0.8em;
  border-bottom: thin solid var(--border);
}

tbody tr:nth-child(even) {
  background: var(--panel-2);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--panel-2) 85%, var(--link) 15%);
}

th, td {
  vertical-align: top;
}

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

pre {
  background: var(--panel-2);
  border: thin solid var(--border);
  border-radius: calc(var(--radius-soft, 0.66em) * 0.9);
  padding: 1em;
  overflow-x: auto;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  margin: 1em 0;
  line-height: 1.5;
  tab-size: 2;
  font-size: 0.95em;
}

code {
  white-space: pre-wrap;
  padding: 0.2em 0.35em;
  border-radius: 0.35em;
  background: var(--nav-bg, transparent);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}

/* Inline-code styling must not add vertical space inside code blocks. */
pre code {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

pre p {
  margin: 0;
}

/* List indentation: make lists visually indented from normal paragraph text */
ul, ol {
  padding-left: 1.8em;
  margin: 0.35em 0 0.85em;
}

li + li {
  margin-top: 0.28em;
}

/* Nested lists should be slightly more indented */
ul ul, ol ol, ul ol, ol ul {
  padding-left: 1.4em;
}

.toc {
  margin: 0.8em 0 1.2em;
  padding: 0.8em 1em;
  border: thin solid var(--border);
  border-radius: var(--radius-soft);
  background: var(--panel-2);
}

.toc h2 {
  margin-bottom: 0.45em;
}

.toc ol {
  margin: 0.2em 0 0;
  column-count: 2;
  column-gap: 1.5em;
}

.toc li {
  break-inside: avoid;
  margin: 0.2em 0;
}

@media (max-width: 60em) {
  .toc ol {
    column-count: 1;
  }

  table {
    white-space: normal;
  }
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  text-decoration-thickness: 0.1em;
}

nav a,
.lang-switch {
  text-decoration: none;
}

/*
 * Responsive image styles for articles
 * Ensures images scale well and look good at different sizes.
 */
.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto;
  border-radius: calc(var(--radius) * 0.66);
  box-shadow: var(--shadow-img);
}

/* Small images (e.g., icons, inline)
   Add .img-small class to images in articles for small presentation
   Uses character measures + viewport rather than fixed pixel equivalents. */
.article-content img.img-small {
  max-width: clamp(16ch, 30vw, 28ch);
  margin: 1em auto;
  box-shadow: none;
}

/* Medium images (e.g., half-width)
   Add .img-medium class to images in articles for medium presentation
   Uses character measures + viewport rather than fixed pixel equivalents. */
.article-content img.img-medium {
  max-width: clamp(32ch, 70vw, 56ch);
}

/* Large images (e.g., full-width banners)
   Add .img-large class to images in articles for large presentation */
.article-content img.img-large {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/*
 * Homepage portrait
 * Responsive sizing (no fixed pixels), preserving the source colors.
 */
.home-portrait {
  inline-size: min(100%, clamp(18ch, 35vw, 34ch));
  block-size: auto;
  object-fit: contain;
  image-rendering: auto;
}

/*
 * Generic image styling (outside article content)
 * Match cypherpunk-handbook visual treatment for images.
 */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
  border-radius: calc(var(--radius) * 1.1);
  border: thin solid var(--border);
  box-shadow: var(--shadow-img);
}

/*
 * Optional: avoid overflow in code blocks if you have them
 */
pre,
code {
  max-width: 100%;
}

/* Quotation styles */
blockquote {
  margin: 0 0 1em;
  padding: 0.8em 1em;
  background: var(--panel-2);
  border-left: clamp(0.18em, 0.35vw, 0.32em) solid var(--border);
  border-radius: calc(var(--radius) * 0.35);
  color: var(--muted);
  font-style: italic;
}

blockquote p {
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.95em;
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

/* Supplementary article material outside the main panel. */
#footnotes,
#links-footer,
#rss {
  width: min(var(--max-width), 100% - var(--gutter) * 2);
  margin: 1.5em auto 0;
  padding: 1.25em 0;
  color: var(--muted);
  font-size: 0.95em;
}

#rss {
  text-align: center;
}

#footnotes h2,
#links-footer h2 {
  color: var(--heading);
}

#footnotes li {
  text-align: start;
}

/* Footer styling */
footer {
  padding: 1.25em 0 2em;
  text-align: center;
  color: var(--muted);
  font-size: 0.95em;
}

footer ul,
footer ol {
  text-align: start;
}

footer p {
  margin: 0.35em 0;
  text-align: center;
}

dl {
  margin: 0.35em 0 0.85em;
}

dt {
  margin-top: 0.7em;
  font-weight: 700;
}

dd {
  margin-left: 1.2em;
}

address {
  font-style: normal;
}

/* Footer motto */
footer .motto {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.35em 0;
}

footer p.motto,
footer h4.motto {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * Motion preferences
 * Disables transitions/animations for users who prefer reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media print, (forced-colors: active) {
  body {
    background: #fff;
    color: #000;
    line-height: 1.8;
  }

  main,
  header,
  footer,
  #footnotes,
  #links-footer,
  #rss,
  .toc {
    background: transparent;
    border-color: currentcolor;
    box-shadow: none;
  }

  nav ul {
    display: block;
  }

  nav li {
    margin: 0.25em 0;
  }

  nav a {
    display: inline;
    border: none;
    padding: 0;
    margin: 0;
  }

  img {
    border: none;
    box-shadow: none;
  }

  a,
  a:visited {
    color: LinkText;
    text-decoration: underline;
  }
}