/* ========================================
   GLOBAL STYLES — Variables & Reset
   ======================================== */

/* === ROOT VARIABLES === */
:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-orange: #EA580C;
  --color-orange-light: #FF9156;
  --color-red: #DC2626;
  --color-red-light: #EF4444;
  --color-warm-offwhite: #F7F4F2;
  --color-navy: #13223F;
  --color-dark-navy: #13223F;
  --color-gray-body: #6E6E6E;
  --color-gray-text: #6E6E6E;
  --color-gray-light: #DEDEDE;
  --color-gray-mid: #C2C2C2;
  --color-gray-muted: #C2C2C2;
  --color-gray-bg: #F7F4F2;
  --color-bg-warm: #F7F4F2;
  --color-light-gray-blue: #EFF1F6;
  --color-stats-label: #C2C2C2;
  --color-divider: #C2C2C2;
  --color-orange-border: rgba(255, 145, 86, 0.5);
  --color-icon: #242323;
  --color-footer-text: #DEDEDE;
  --color-footer-accent: #FF9156;

  /* Extended palette */
  --color-success: #22C55E;
  --color-orange-hover: #D14F09;
  --color-orange-light-hover: #E87A3A;
  --color-surface-light: #F3F4F6;
  --color-card-bg-alt: #F9FAFB;
  --color-bg-light-orange: #FFF5F0;
  --color-text-secondary: #545454;
  --color-text-muted: #8592A6;
  --color-placeholder: #757575;
  --color-divider-light: #E0E0E0;

  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-nav: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Layout */
  --section-inset: 40px;
}

/* === CSS RESET === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input, select, textarea {
  font-family: inherit;
}

/* === PILL COMPONENT ===
   Canonical section-heading pill. Apply `.pill` to the wrapper and
   `.pill__label` to the inner text element. Section-scoped classes
   (e.g. `.concept__pill`) should carry only positioning (margin) and
   color overrides — never geometry or typography.

   Modifier: `.pill--on-dark` flips the outline + text for use on
   dark backgrounds. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 37.6px;
  padding: 12px 14px;
  background: transparent;
}

.pill__label {
  font-family: var(--font-heading);
  font-size: 15.8px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-black);
}

.pill--on-dark {
  border-color: rgba(255, 255, 255, 0.2);
}

.pill--on-dark .pill__label,
.pill--on-dark.pill__label {
  color: var(--color-white);
}

/* ========================================
   BACKGROUND VIDEO — AUTOPLAY-BLOCKED FALLBACK
   When autoplay is blocked (iOS Low Power Mode, strict policy, etc.),
   assets/js/video-autoplay.js hides the <video> and promotes its poster
   to a section background until the first user interaction kicks playback off.
   ======================================== */
.hhs-video-blocked {
  background-color: #000;
}