/*
 * Biz Nuggets — the theme. Plain CSS, tokens first (Design Standards): the raw palette
 * is the WordPress site's (Astra's global colours), expressed in OKLCH; components use
 * only the semantic tokens below it. No hardcoded colours past this block.
 */

:root {
  /* Raw palette — the brand as it was on WordPress. */
  --bn-orange:       oklch(0.63 0.22 35);   /* #f04512 */
  --bn-orange-deep:  oklch(0.58 0.23 38);   /* #ff5100, darkened for text contrast */
  --bn-ink:          oklch(0.20 0.02 70);   /* #1e1810 */
  --bn-ink-soft:     oklch(0.44 0.01 60);   /* #575250 */
  --bn-sand:         oklch(0.97 0.005 60);  /* #f8f5f4 */
  --bn-white:        oklch(1 0 0);
  --bn-slate:        oklch(0.31 0.03 255);  /* #283344 */
  --bn-slate-soft:   oklch(0.42 0.02 255);  /* #4b4f58 */

  /* Semantic tokens — the only names components use. */
  --surface:         var(--bn-white);
  --surface-alt:     var(--bn-sand);
  --surface-footer:  var(--bn-slate);
  --text:            var(--bn-ink);
  --text-muted:      var(--bn-ink-soft);
  --text-on-footer:  oklch(0.92 0.01 255);
  --text-on-accent:  var(--bn-white);
  --accent:          var(--bn-orange);
  --accent-strong:   var(--bn-orange-deep);
  --border:          oklch(0.90 0.01 60);
  --focus:           oklch(0.63 0.22 35 / 0.45);

  --radius:          0.5rem;
  --radius-lg:       0.75rem;
  --shadow:          0 1px 2px oklch(0 0 0 / 0.06), 0 8px 24px oklch(0 0 0 / 0.06);
  --measure:         44rem;
  --wide:            72rem;
  --gutter:          clamp(1rem, 4vw, 2rem);

  --font-body:       Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display:    "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
}

/* The WordPress site's faces, self-hosted: Roboto and Roboto Condensed (SIL Open Font
   License — OFL.txt beside the files), instanced from Google's variable fonts at the
   weights the theme uses and subset to Latin, about 25 KB each. Nothing is fetched
   from a font service. */
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/sites/biznuggets/roboto-400-863ae69c.woff2") format("woff2");
}
@font-face {
  font-family: Roboto; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/sites/biznuggets/roboto-400-italic-7811dd21.woff2") format("woff2");
}
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/sites/biznuggets/roboto-700-0eebba3e.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/sites/biznuggets/roboto-condensed-600-a289d8ef.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/sites/biznuggets/roboto-condensed-700-b13896a3.woff2") format("woff2");
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface:        oklch(0.17 0.01 60);
    --surface-alt:    oklch(0.22 0.01 60);
    --surface-footer: oklch(0.13 0.02 255);
    --text:           oklch(0.94 0.01 60);
    --text-muted:     oklch(0.72 0.01 60);
    --accent:         oklch(0.72 0.19 40);
    --accent-strong:  oklch(0.78 0.17 45);
    --border:         oklch(0.30 0.01 60);
    --shadow:         0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35);
  }
}

/* --- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

img { max-width: 100%; height: auto; display: block; }

.bn-container { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.bn-prose { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }

/* --- header -------------------------------------------------------------- */

.bn-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.bn-header-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem;
  padding-block: 1rem;
}
.bn-logo { display: inline-block; line-height: 0; border-radius: var(--radius); }
.bn-logo img { height: 2.75rem; width: auto; }
/* The logo is ink and orange on white; on a dark surface it sits on a white plate. */
@media (prefers-color-scheme: dark) { .bn-logo { background: var(--bn-white); padding: 0.35rem 0.6rem; } }
.bn-header .rc-menu ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.bn-header .rc-menu a {
  display: inline-block; padding: 0.35rem 0; color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-stretch: condensed; font-weight: 600; font-size: 1.05rem;
  border-bottom: 2px solid transparent;
}
.bn-header .rc-menu a:hover, .bn-header .rc-menu a[aria-current="page"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
@media (min-width: 60rem) { .bn-header .rc-menu { margin-left: auto; } }

/* --- post cards (home, index, tag pages) --------------------------------- */

.bn-section-title { display: flex; align-items: baseline; gap: 1rem; margin: 2.5rem 0 1.25rem; }
.bn-section-title h1, .bn-section-title h2 { margin: 0; }
.bn-section-title p { margin: 0; color: var(--text-muted); }

.bn-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.bn-card {
  display: flex; flex-direction: column;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.bn-card:hover { transform: translateY(-2px); }
.bn-card .rc-cover { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.bn-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.25rem 1.35rem; }
.bn-card h2, .bn-card h3 { font-size: 1.3rem; margin: 0; }
.bn-card h2 a, .bn-card h3 a { color: var(--text); text-decoration: none; }
.bn-card h2 a:hover, .bn-card h3 a:hover { color: var(--accent-strong); }
.bn-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.bn-card .bn-meta { margin-top: auto; padding-top: 0.5rem; }

.bn-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; font-size: 0.85rem; color: var(--text-muted); }
.bn-meta time { white-space: nowrap; }
.rc-tags { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.rc-tag-link a {
  display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--accent-strong);
  text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
}
.rc-tag-link a:hover { border-color: var(--accent); }

.rc-pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 2.5rem 0; color: var(--text-muted); }
.rc-pagination a { font-weight: 600; text-decoration: none; }
.rc-pagination-status { margin-inline: auto; font-size: 0.9rem; }

/* --- a post or a page ---------------------------------------------------- */

.bn-article { padding-block: 2.5rem 4rem; }
.bn-article-header { margin-bottom: 2rem; }
.bn-article-header .bn-crumb { margin: 0 0 1rem; font-size: 0.9rem; }
.bn-article-header .bn-crumb a { text-decoration: none; font-weight: 600; }
.bn-article-header .bn-meta { margin-top: 0.75rem; }
.bn-standfirst { font-size: 1.2rem; color: var(--text-muted); margin: 0.25rem 0 0; text-wrap: pretty; }
.bn-article .rc-cover { border-radius: var(--radius-lg); margin: 2rem 0; box-shadow: var(--shadow); }
.bn-article .markdown-body { font-size: 1.0625rem; }

/* The gem's .markdown-body stylesheet takes its colours from these. */
.markdown-body {
  --rc-text: var(--text);
  --rc-text-muted: var(--text-muted);
  --rc-link: var(--accent-strong);
  --rc-border: var(--border);
  --rc-surface-alt: var(--surface-alt);
}

.bn-home-intro { padding-block: 3rem 0; }
.bn-home-intro .markdown-body { font-size: 1.15rem; }

/* --- footer -------------------------------------------------------------- */

.bn-footer { margin-top: 4rem; background: var(--surface-footer); color: var(--text-on-footer); }
.bn-footer-inner { display: grid; gap: 2rem; padding-block: 3rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.bn-footer h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.bn-footer p { margin: 0; opacity: 0.9; }
.bn-footer .rc-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.bn-footer a { color: inherit; text-decoration: none; }
.bn-footer a:hover { color: var(--accent); }
.bn-footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; padding-block: 1.25rem 2rem; border-top: 1px solid oklch(1 0 0 / 0.12); font-size: 0.85rem; opacity: 0.85; }

/* --- styleguide ---------------------------------------------------------- */

.bn-swatches { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.bn-swatch { width: 7.5rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 0.75rem; }
.bn-swatch span { display: block; height: 3rem; }
.bn-swatch code { display: block; padding: 0.35rem 0.5rem; background: var(--surface-alt); }