/*
 * Bodaq type kit: the typography shared by the Bodaq family sites.
 * Fluid sizes between 390px and 1440px, normal letter-spacing, Semibold 600 headings,
 * Light 300 running copy.
 */

/* -------------------------------------------------------------------------- */
/* 1. Fonts                                                                    */
/* -------------------------------------------------------------------------- */

/*
 * Proxima Nova Light, Regular and Semibold.
 */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/Proxima-Nova-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/Proxima-Nova-Regular-1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/Proxima-Nova-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/*
 * Arial resized to Proxima Nova's metrics, shown while the webfont loads (font-display: swap), so
 * text does not jump when Proxima arrives. Same values next/font generates for the main site.
 */
@font-face {
  font-family: "Proxima Nova Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 92.82%;
  descent-override: 30.07%;
  line-gap-override: 0%;
  size-adjust: 99.12%;
}

/* -------------------------------------------------------------------------- */
/* 2. Tokens                                                                   */
/* -------------------------------------------------------------------------- */

:root {
  /* Same stack as the main site: Proxima Nova, its metric-matched fallback, then Figtree / system. */
  --t-font: "Proxima Nova", "Proxima Nova Fallback", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-light: 300;
  --t-regular: 400;
  --t-semibold: 600;
  --t-tracking: normal;

  /*                    390px                          1440px   line height */
  /* Home hero H1       32                             52       1.1 */
  --t-hero-size: clamp(2rem, 1.5357rem + 1.9048vw, 3.25rem);
  --t-hero-lh: 1.1;
  /* Page header H1     46                             56       1.2 */
  --t-h1-size: clamp(2.875rem, 2.6428rem + 0.9525vw, 3.5rem);
  --t-h1-lh: 1.2;
  /* Section H2         26                             40       1.2 */
  --t-h2-size: clamp(1.625rem, 1.2999rem + 1.3335vw, 2.5rem);
  --t-h2-lh: 1.2;
  /* Card title H3      18                             24       1.2 */
  --t-h3-size: clamp(1.125rem, 0.9856rem + 0.5716vw, 1.5rem);
  --t-h3-lh: 1.2;
  /* Small card title   19                             20       1.375 */
  --t-h4-size: clamp(1.1875rem, 1.1642rem + 0.0954vw, 1.25rem);
  --t-h4-lh: 1.375;

  /* Eyebrow            12                             13       1.4, uppercase */
  --t-eyebrow-size: clamp(0.75rem, 0.7267rem + 0.0954vw, 0.8125rem);
  --t-eyebrow-lh: 1.4;

  /* Hero lead          16                             18       1.375 */
  --t-hero-lead-size: clamp(1rem, 0.9535rem + 0.1906vw, 1.125rem);
  --t-hero-lead-lh: 1.375;
  /* Page header lead   18                             20       1.625 */
  --t-lead-size: clamp(1.125rem, 1.0785rem + 0.1906vw, 1.25rem);
  --t-lead-lh: 1.625;
  /* Section intro      17                             18       1.625 */
  --t-intro-size: clamp(1.0625rem, 1.0392rem + 0.0954vw, 1.125rem);
  --t-intro-lh: 1.625;
  /* Body copy          16                             17       1.625 */
  --t-body-size: clamp(1rem, 0.9767rem + 0.0954vw, 1.0625rem);
  --t-body-lh: 1.625;
  /* Card copy          15                             15       1.625 */
  --t-body-sm-size: 0.9375rem;
  --t-body-sm-lh: 1.625;
  /* Small, caption     13                             13       1.5 */
  --t-small-size: 0.8125rem;
  --t-small-lh: 1.5;

  /* Nav bar link       14 / 25px, uppercase (desktop bar) */
  --t-nav-size: 0.875rem;
  --t-nav-lh: calc(25 / 14);
  /* Phone menu link    18 / 27px, Semibold, Title Case */
  --t-nav-menu-size: 1.125rem;
  --t-nav-menu-lh: 1.5;
  /* Button, text link  14 / 17px, uppercase */
  --t-btn-size: 0.875rem;
  --t-btn-lh: calc(17 / 14);

  /* Footer heading     14 / 25px, uppercase (same as the nav bar) */
  /* Footer link        15 / 22.5px */
  --t-footer-link-size: 0.9375rem;
  --t-footer-link-lh: 1.5;
  /* Footer text        15 / 24.4px */
  --t-footer-text-size: 0.9375rem;
  --t-footer-text-lh: 1.625;

  /* Form label         14 / 21px, Semibold */
  --t-label-size: 0.875rem;
  --t-label-lh: 1.5;
  /* Form input         16 / 24px (16px also stops iOS zooming into fields) */
  --t-input-size: 1rem;
  --t-input-lh: 1.5;

  /* Stat number        28                             32       1 */
  --t-stat-size: clamp(1.75rem, 1.6571rem + 0.381vw, 2rem);
  --t-stat-lh: 1;
  /* Stat label         16 / 24px, Light, sentence case */
  --t-stat-label-size: 1rem;
  --t-stat-label-lh: 1.5;
  /* Spec figure        22                             26       1 */
  --t-spec-size: clamp(1.375rem, 1.2821rem + 0.381vw, 1.625rem);
  --t-spec-lh: 1;
  /* Spec label         12                             13       1.375, uppercase */
  --t-spec-label-size: clamp(0.75rem, 0.7267rem + 0.0954vw, 0.8125rem);
  --t-spec-label-lh: 1.375;
}

/* -------------------------------------------------------------------------- */
/* 3. Element defaults                                                         */
/* -------------------------------------------------------------------------- */

/*
 * Wrapped in :where() so they carry no specificity: any class in site.css still wins, and plain
 * markup picks up the main site's type without new classes.
 */

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body) {
  font-family: var(--t-font);
  font-size: 1rem;
  font-weight: var(--t-regular);
  line-height: 1.5;
  letter-spacing: var(--t-tracking);
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--t-font);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-tracking);
  text-transform: none;
  text-wrap: balance;
}

:where(h1) {
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
}

:where(h2) {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
}

:where(h3) {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
}

:where(h4) {
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
}

:where(p) {
  font-size: var(--t-body-size);
  font-weight: var(--t-light);
  line-height: var(--t-body-lh);
  text-wrap: pretty;
}

:where(b, strong) {
  font-weight: var(--t-semibold);
}

/* Regular, not Light, even inside a paragraph: small text in Light gets too thin to read. */
:where(small) {
  font-size: var(--t-small-size);
  font-weight: var(--t-regular);
  line-height: var(--t-small-lh);
}

:where(button, input, select, textarea, optgroup) {
  font: inherit;
  letter-spacing: inherit;
}

:where(input, select, textarea) {
  font-size: var(--t-input-size);
  font-weight: var(--t-regular);
  line-height: var(--t-input-lh);
}

/* Field labels. Labels that wrap a checkbox or radio keep the surrounding text style. */
:where(label:not(:has(input[type="checkbox"], input[type="radio"]))) {
  font-size: var(--t-label-size);
  font-weight: var(--t-semibold);
  line-height: var(--t-label-lh);
}

/* -------------------------------------------------------------------------- */
/* 4. Classes                                                                  */
/* -------------------------------------------------------------------------- */

/*
 * Each class sets the whole type style (family, size, weight, line height, tracking, case), so it
 * looks the same wherever it lands. The extra selectors after each t-* class are the family sites'
 * own class names, so they pick up the kit with no markup change.
 */

.t-hero,
.t-h1,
.t-h2,
.t-h3,
.t-h4 {
  font-family: var(--t-font);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-tracking);
  text-transform: none;
  text-wrap: balance;
}

/* Home hero H1, usually on a photo. */
.t-hero {
  font-size: var(--t-hero-size);
  line-height: var(--t-hero-lh);
}

/* Inner page H1 (page header). */
.t-h1 {
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
}

/* Section title. */
.t-h2 {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
}

/* Card title: feature cards, one to three across. */
.t-h3 {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
}

/* Small card title: steps, dense grids, list items with a heading. */
.t-h4 {
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
}

/* Small uppercase label above a title (bodaq.com's "kicker"). Accent colour on light grounds. */
.t-eyebrow,
.kicker,
.hero-kick,
.eyebrow {
  font-family: var(--t-font);
  font-size: var(--t-eyebrow-size);
  font-weight: var(--t-regular);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-tracking);
  text-transform: uppercase;
}

/* Paragraph under the home hero H1. */
.t-hero-lead,
.hero-sub {
  font-family: var(--t-font);
  font-size: var(--t-hero-lead-size);
  font-weight: var(--t-light);
  line-height: var(--t-hero-lead-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

/* Paragraph under an inner page H1. */
.t-lead {
  font-family: var(--t-font);
  font-size: var(--t-lead-size);
  font-weight: var(--t-light);
  line-height: var(--t-lead-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

/* Paragraph under a section H2. */
.t-intro,
.lede {
  font-family: var(--t-font);
  font-size: var(--t-intro-size);
  font-weight: var(--t-light);
  line-height: var(--t-intro-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

/* Running copy. */
.t-body {
  font-family: var(--t-font);
  font-size: var(--t-body-size);
  font-weight: var(--t-light);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

/* Copy inside cards and list rows. */
.t-body-sm {
  font-family: var(--t-font);
  font-size: var(--t-body-sm-size);
  font-weight: var(--t-light);
  line-height: var(--t-body-sm-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

/* Breadcrumbs, notes, captions, legal lines, SKUs. */
.t-small {
  font-family: var(--t-font);
  font-size: var(--t-small-size);
  font-weight: var(--t-regular);
  line-height: var(--t-small-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

/* Desktop nav bar link. */
.t-nav,
.nav-link {
  font-family: var(--t-font);
  font-size: var(--t-nav-size);
  font-weight: var(--t-regular);
  line-height: var(--t-nav-lh);
  letter-spacing: var(--t-tracking);
  text-transform: uppercase;
}

/* Top-level link or toggle in the phone / tablet menu panel. */
.t-nav-menu {
  font-family: var(--t-font);
  font-size: var(--t-nav-menu-size);
  font-weight: var(--t-semibold);
  line-height: var(--t-nav-menu-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

/* Button label (primary, outline, ghost, small: the same type, only the box changes). */
.t-btn,
.btn {
  font-family: var(--t-font);
  font-size: var(--t-btn-size);
  font-weight: var(--t-regular);
  line-height: var(--t-btn-lh);
  letter-spacing: var(--t-tracking);
  text-transform: uppercase;
}

/* Quiet secondary action: button type without the box, accent colour, arrow after. */
.t-link {
  font-family: var(--t-font);
  font-size: var(--t-btn-size);
  font-weight: var(--t-regular);
  line-height: var(--t-btn-lh);
  letter-spacing: var(--t-tracking);
  text-transform: uppercase;
}

/* Footer column heading: same type as the nav bar. */
.t-footer-h,
.foot-h {
  font-family: var(--t-font);
  font-size: var(--t-nav-size);
  font-weight: var(--t-regular);
  line-height: var(--t-nav-lh);
  letter-spacing: var(--t-tracking);
  text-transform: uppercase;
}

.t-footer-link,
.footer-link {
  font-family: var(--t-font);
  font-size: var(--t-footer-link-size);
  font-weight: var(--t-regular);
  line-height: var(--t-footer-link-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

/* Footer blurb and contact lines. */
.t-footer-text,
.foot-blurb {
  font-family: var(--t-font);
  font-size: var(--t-footer-text-size);
  font-weight: var(--t-regular);
  line-height: var(--t-footer-text-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

.t-label {
  font-family: var(--t-font);
  font-size: var(--t-label-size);
  font-weight: var(--t-semibold);
  line-height: var(--t-label-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

.t-input {
  font-family: var(--t-font);
  font-size: var(--t-input-size);
  font-weight: var(--t-regular);
  line-height: var(--t-input-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

.t-stat {
  font-family: var(--t-font);
  font-size: var(--t-stat-size);
  font-weight: var(--t-semibold);
  line-height: var(--t-stat-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.t-stat-label {
  font-family: var(--t-font);
  font-size: var(--t-stat-label-size);
  font-weight: var(--t-light);
  line-height: var(--t-stat-label-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
}

.t-spec {
  font-family: var(--t-font);
  font-size: var(--t-spec-size);
  font-weight: var(--t-semibold);
  line-height: var(--t-spec-lh);
  letter-spacing: var(--t-tracking);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.t-spec-label {
  font-family: var(--t-font);
  font-size: var(--t-spec-label-size);
  font-weight: var(--t-regular);
  line-height: var(--t-spec-label-lh);
  letter-spacing: var(--t-tracking);
  text-transform: uppercase;
}