/* ──────────────────────────────────────────────────────────────────
   Dogtraining Campus — Foundations
   Drop this file into any project and link Google Fonts above it.
   ────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────
   Fonts — Roboto family (self-hosted brand font), JetBrains Mono via Google.
   For the mono, also include in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap">
   ────────────────────────────────────────────────────────────────── */

/* Roboto — body / UI face */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Roboto-Regular.ttf")      format("truetype"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Roboto-Italic.ttf")       format("truetype"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Roboto-Medium.ttf")       format("truetype"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Roboto-SemiBold.ttf")     format("truetype"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Roboto-Bold.ttf")         format("truetype"); }

/* Roboto Condensed — display face */
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Roboto_Condensed-Regular.ttf")      format("truetype"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Roboto_Condensed-SemiBold.ttf")     format("truetype"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Roboto_Condensed-Bold.ttf")         format("truetype"); }
@font-face { font-family: "Roboto Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/Roboto_Condensed-BoldItalic.ttf")   format("truetype"); }

/* Roboto SemiCondensed — optional mid-width (loaded sparingly) */

:root {
  /* ── Paper (warm cream canvas) ─────────────────────────────────── */
  --paper:   oklch(0.965 0.012 78);   /* page background */
  --paper-2: oklch(0.94  0.014 72);   /* card on paper */
  --paper-3: oklch(0.91  0.018 70);   /* inset / placeholder */

  /* ── Ink (corporate black + logo grey family) ──────────────────── */
  --ink:   #141414;
  --ink-2: #3a3a3a;
  --ink-3: #575756;

  /* ── Rules (warm hairlines) ────────────────────────────────────── */
  --rule:   #e3ddd1;
  --rule-2: #d4cdbe;

  /* ── Accent (corporate red) ────────────────────────────────────── */
  --accent:      #C51617;                       /* primary on cream */
  --accent-ink:  #AC2228;                       /* hover / on-dark */
  --accent-soft: oklch(0.94 0.045 25);          /* tinted backgrounds */
  --accent-coral:#ff8b8c;                       /* accent on dark grounds */

  /* ── Secondary ─────────────────────────────────────────────────── */
  --secondary: #575756;                         /* logo grey */

  /* ── Typography stacks (Roboto family, self-hosted) ────────────── */
  --font-display: "Roboto Condensed", "Roboto", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Roboto", "Arial", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ── Layout ────────────────────────────────────────────────────── */
  --max-w:  1240px;
  --gutter: clamp(20px, 4vw, 64px);

  /* ── Radii ─────────────────────────────────────────────────────── */
  --r-sm:   12px;   /* inputs, small tags, inset bands */
  --r-md:   18px;   /* segmented grids (topics, path) */
  --r-lg:   22px;   /* main cards (webinar card, form shell) */
  --r-xl:   28px;   /* feature blocks (speaker section) */
  --r-pill: 999px;  /* pills, badges, buttons */

  /* ── Shadows ───────────────────────────────────────────────────── */
  --shadow-card:   0 1px 0 var(--paper-2), 0 30px 60px -40px oklch(0.20 0.014 55 / 0.25);
  --shadow-accent: 0 1px 0 var(--accent-ink), 0 12px 30px -12px color-mix(in oklch, var(--accent) 60%, transparent);
  --ring-focus:    0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent);

  /* ── Motion ────────────────────────────────────────────────────── */
  --t-quick: 150ms ease;
  --t-glide: 250ms ease;

  /* ── Spacing scale (loose; section-padding uses fluid clamp) ───── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --section: clamp(64px, 9vw, 128px);
}

/* ──────────────────────────────────────────────────────────────────
   Base elements
   ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ──────────────────────────────────────────────────────────────────
   Display & headings
   ────────────────────────────────────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 12px;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

/* Italic em is the canonical emphasis inside headings */
h1 em, h2 em, h3 em, .h1 em, .h2 em, .h3 em {
  font-style: italic;
  font-weight: inherit;
  color: var(--accent);
}

/* Lead / display-sub */
.lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-wrap: pretty;
  margin: 0;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* ──────────────────────────────────────────────────────────────────
   Kicker / eyebrow label
   12px UPPERCASE with leading dash, optionally accent-tinted
   ────────────────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}
.kicker--accent { color: var(--accent); }

/* ──────────────────────────────────────────────────────────────────
   Inline serif accent helper
   ────────────────────────────────────────────────────────────────── */
.serif {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.serif em { font-style: italic; font-weight: 400; color: var(--accent); }

/* ──────────────────────────────────────────────────────────────────
   Mono micro-label
   ────────────────────────────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
}

/* ──────────────────────────────────────────────────────────────────
   Container
   ────────────────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}