/* ============================================================
   williambox.com — custom.css
   Loads after simple.css. Overrides colors and font only.
   Let simple.css handle everything structural.
   ============================================================ */


/* ------------------------------------------------------------
   Self-Hosted Font — Nunito Sans
   Files live in css/fonts/
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-700.woff2') format('woff2');
}


/* ------------------------------------------------------------
   Variables — overrides simple.css defaults
   ------------------------------------------------------------ */
:root {
  /* Font — slots into simple.css's own --sans-font variable */
  --sans-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
    Arial, Helvetica, sans-serif;

  /* Colors */
  --bg:           #f7f8f6;   /* warm white page background */
  --accent-bg:    #eaede8;   /* pale sage — header, aside, table stripes */
  --text:         #1c2b1a;   /* dark forest — body text */
  --text-light:   #3d5c3a;   /* muted green-gray — secondary text */
  --border:       #b3c0b0;   /* sage gray — borders */
  --accent:       #2d5a27;   /* deep forest green — links, buttons */
  --accent-hover: #4a8040;   /* lighter forest green — hover state */
  --accent-text:  #ffffff;   /* text ON accent backgrounds (buttons) */
  --marked:       #d4edcc;   /* highlight element */
  --disabled:     #e2e5e1;   /* disabled inputs */
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #212121;
    --accent-bg: #2b2b2b;
    --text: #dcdcdc;
    --text-light: #ababab;
    --accent: #ffb300;
    --accent-hover: #ffe099;
    --accent-text: var(--bg);
    --code: #f06292;
    --preformatted: #ccc;
    --disabled: #111;
  }
  /* Add a bit of transparency so light media isn't so glaring in dark mode */
  img,
  video {
    opacity: 0.8;
  }
}

body > header {
  padding: 1.5rem 0.5rem 1rem 0.5rem;
}

body > header h1 {
  margin: 0.5rem auto;
}

header nav {
  padding: 0.5rem 0 0 0;
}

.footer-nav {
  display: inline-block;
  margin: 0 0.5em;
}

main li {
  margin-bottom: 0.5em;
}

hr {
  margin-top: 4em;
}

.example-list {
  list-style-type: none;
  padding: 0;
  margin-left: 0;
}

.examples {
  text-decoration: none;
}

.about-img {
  float: left;
  margin-right: 1em;
}

.required {
  color: var(--code);
}

@media only screen and (max-width: 720px) {
  /* Main h2 */
  main h2 {
    font-size: 1.85rem;
  }
}