/* =============================================================================
   Base — Dr. Wenzel static site
   Loads after theme.css (tokens). Fonts, reset, base typography, layout helpers.
   ============================================================================= */

/* --- Velour (display) self-hosted --- */
@font-face { font-family: "Velour"; src: url("../fonts/Velour-Thin.woff2") format("woff2");     font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Velour"; src: url("../fonts/Velour-Light.woff2") format("woff2");    font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Velour"; src: url("../fonts/Velour-Regular.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Velour"; src: url("../fonts/Velour-medium.woff2") format("woff2");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Velour"; src: url("../fonts/Velour-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Velour"; src: url("../fonts/Velour-Bold.woff2") format("woff2");     font-weight: 700; font-style: normal; font-display: swap; }

/* Inter (self-hosted — no third-party font CDN, DSGVO-friendly) */
@font-face { font-family: "Inter"; src: url("../fonts/inter/inter-regular-latin.woff2") format("woff2");      font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/inter-regular-latin-ext.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/inter-medium-latin.woff2") format("woff2");       font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/inter-medium-latin-ext.woff2") format("woff2");   font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/inter-semibold-latin.woff2") format("woff2");     font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/inter-semibold-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* --- Base typography --- */
body {
  font-family: var(--font-body);
  font-size: var(--at-text--s);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;            /* heavier Velour cut — confident reference-style headings */
  line-height: var(--leading-heading);
  color: var(--color-heading);
  letter-spacing: -0.01em;
  margin-bottom: 0.4em;        /* gap before following paragraph (overridable per component) */
}
/* Toned down one step — the previous scale read too large against the small body text. */
h1 { font-size: var(--at-heading--l); }
h2 { font-size: var(--at-heading--m); }
h3 { font-size: var(--at-heading--s); }
h4 { font-size: var(--at-heading--xs); }
h5 { font-size: var(--at-heading--xs); }
h6 { font-size: var(--at-heading--2xs); }
p { color: var(--color-ink); }
strong { font-weight: 600; }

/* --- Layout helpers --- */
.container {
  width: 100%;
  max-width: var(--at-site-box-max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
}
.container--narrow { max-width: 52rem; }
.section { padding-block: var(--at-section-padding-block); }
.section--tint { background: var(--color-band); }
.section--paper { background: var(--color-surface); }
.section--dark { background: var(--color-dark-section); color: var(--at-neutral-l-5); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--at-neutral-l-5); }
.section--dark p { color: var(--at-neutral-l-3); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--at-text--s);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--at-space--xs);
}
.section-head { max-width: 46rem; margin-bottom: var(--at-space--xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.lead { font-size: var(--at-text--m); color: var(--color-ink-muted); }
.muted { color: var(--color-ink-muted); }

/* --- Buttons: pill with circular arrow badge (NextBricks arrow-button style) --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--at-text--s);
  padding: 0.4rem 1.5rem 0.4rem 0.4rem;
  border-radius: var(--at-radius-full);
  background: var(--at-primary-l-4);
  color: var(--at-primary-d-4);
  border: 1px solid var(--at-primary-l-3);
  transition: var(--at-btn-transition);
}
.btn__icon {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--at-primary);
  color: var(--at-primary-l-6);
  transition: transform var(--at-duration--fast) ease, background var(--at-duration--fast) ease;
}
.btn:hover { background: var(--at-primary-l-3); box-shadow: var(--at-shadow--m); }
.btn:hover .btn__icon { transform: translateX(3px); background: var(--at-primary-d-1); }
.btn--solid { background: var(--at-primary); color: var(--at-primary-l-6); border-color: var(--at-primary); }
.btn--solid .btn__icon { background: var(--at-primary-l-6); color: var(--at-primary-d-3); }
.btn--solid:hover { background: var(--at-primary-d-1); border-color: var(--at-primary-d-1); }
.btn--text { padding: 0; background: none; border: none; color: var(--color-accent); }
.btn--text .btn__icon { width: 1.75rem; height: 1.75rem; }

/* --- Accessibility --- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--color-heading); color: #fff; padding: 0.6em 1em; border-radius: 0 0 var(--at-radius--s) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--at-secondary); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}