/* ============================================================
   Beside · Base styles
   ------------------------------------------------------------
   Global resets, typography, links, layout containers.
   Loaded after tokens.css.
   ============================================================ */

/* Ensure the WP admin toolbar is never visible on the front end,
   regardless of user role or plugin overrides. */
#wpadminbar { display: none !important; }
html.wp-toolbar { padding-top: 0 !important; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 8px);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Headings ---------- */

h1, h2, h3, h4, h5, h6,
.is-style-display {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: var(--lh-headings);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-2);
}

h1 { font-size: var(--fs-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; }

.is-style-display { font-size: var(--fs-display); font-weight: 500; }

em { font-style: normal; }

/* ---------- Body text ---------- */

p {
  margin: 0 0 var(--space-2);
  max-width: var(--content-text);
}

p:last-child { margin-bottom: 0; }

/* ---------- Links ---------- */

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Lists ---------- */

ul, ol {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
}

ul.unstyled, ol.unstyled {
  list-style: none;
  padding-left: 0;
}

/* ---------- Eyebrow ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal-text);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  display: block;
}

/* ---------- Small ---------- */

small,
.text-small {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.text-muted { color: var(--text-secondary); }

/* ---------- Code ---------- */

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-input);
}

/* ---------- Hairlines ---------- */

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-5) 0;
}

hr.rule {
  width: 48px;
  background: var(--accent);
  margin: 0 0 var(--space-4);
}

/* ---------- Containers ---------- */

.container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--text {
  max-width: var(--content-text);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--section-y-desktop);
}

.section--bg2  { background: var(--bg-secondary); }
.section--dark { background: var(--text-primary); color: var(--bg-primary); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--bg-primary); }
.section--dark a  { color: var(--accent-on-dark); }
.section--dark .eyebrow { color: var(--accent-on-dark); }

/* ---------- Selection ---------- */

::selection {
  background: var(--accent-light);
  color: var(--accent-dark);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  :root {
    --fs-display: 34px;
    --fs-h1:      28px;
    --fs-h2:      24px;
  }
  .section { padding-block: var(--section-y-mobile); }
  .container, .container--text { padding-inline: var(--space-3); }
}