/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — BASE STYLES
   Global typography, body, links, selection, focus
   ═══════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) var(--ease-out),
              color var(--duration-slow) var(--ease-out);
}

/* ── Selection ── */
::selection {
  background: rgba(var(--color-brand-rgb), 0.2);
  color: var(--color-text);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 {
  font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-7xl));
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
  font-weight: var(--font-weight-medium);
}

h3 {
  font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
}

h4 {
  font-size: clamp(var(--font-size-xl), 2.5vw, var(--font-size-3xl));
}

h5 {
  font-size: var(--font-size-xl);
}

h6 {
  font-size: var(--font-size-lg);
}

/* ── Body text ── */
p {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.lead {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

small, .text-sm {
  font-size: var(--font-size-sm);
}

/* ── Links ── */
a {
  transition: color var(--duration-fast) ease;
}

a:hover {
  color: var(--color-brand);
}

.link {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--color-brand-rgb), 0.3);
  transition: text-decoration-color var(--duration-fast) ease;
}

.link:hover {
  text-decoration-color: var(--color-brand);
}

/* Inline content links (body copy, section intros): brand colour at rest, with an
   underline that draws in left-to-right on hover — the "chasing underline". Scoped to
   content so it never touches buttons, nav, cards or footer (they have their own hovers). */
.prose a:not(.btn),
.section-header__desc a:not(.btn),
.section-header__sub a:not(.btn) {
  color: var(--color-brand);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  padding-bottom: 1px;
  transition: background-size 0.35s var(--ease-out), color var(--duration-fast) ease;
}
.prose a:not(.btn):hover,
.section-header__desc a:not(.btn):hover,
.section-header__sub a:not(.btn):hover {
  background-size: 100% 1.5px;
}
@media (prefers-reduced-motion: reduce) {
  .prose a:not(.btn),
  .section-header__desc a:not(.btn),
  .section-header__sub a:not(.btn) { transition: none; }
}

/* ── Monospace ── */
code, kbd, pre, samp, .mono {
  font-family: var(--font-mono);
}

code {
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}

pre {
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
  border: none;
}

/* ── Labels / overlines ── */
.label {
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  line-height: 1.4;
}

.overline {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ── Horizontal rule ── */
hr {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-8) 0;
}

/* ── Images ── */
.wp-post-image,
.attachment-post-thumbnail {
  border-radius: var(--radius-md);
}