/* ==========================================================================
   weladee-brand.css — Centralized Weladee Design Tokens
   ==========================================================================
   Single source of truth for brand colors, typography, gradients, and shared
   design tokens. Loaded on ALL public pages via public_header.html so every
   page gets a consistent look.
   ========================================================================== */

:root {
  /* ── Brand Colors ────────────────────────────────────────────────────── */
  --wld-teal-darkest: #053b37;
  --wld-teal-mid: #0a7069;
  --wld-teal-primary: #13a89e;
  --wld-teal-dark: #0e8a82;
  --wld-accent-color: #fd961a;
  --wld-accent-hover: #c82b46;
  --wld-check-color: #28a745;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --wld-font-heading: 'Catamaran', Helvetica, Arial, sans-serif;
  --wld-font-body: 'Muli', Helvetica, Arial, sans-serif;
  --wld-font-nav: 'Lato', Helvetica, Arial, sans-serif;

  /* ── Hero Gradient ───────────────────────────────────────────────────── */
  --wld-hero-gradient: linear-gradient(135deg, #053b37 0%, #0a7069 45%, #13a89e 100%);

  /* ── Shared spacing / radius / shadows ───────────────────────────────── */
  --wld-radius-sm: 8px;
  --wld-radius-md: 16px;
  --wld-radius-pill: 50px;
  --wld-shadow-card: 0 10px 30px rgba(0, 70, 60, 0.08);
}

/* ── Global Typography ─────────────────────────────────────────────────── */
body, html {
  font-family: var(--wld-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wld-font-heading);
}

/* ── Hero Section Gradient (all pages using .masthead) ─────────────────── */
header.masthead,
.masthead {
  background: var(--wld-hero-gradient) !important;
  position: relative;
  height: auto !important;
  min-height: 0 !important;
}

/* Homepage masthead gets full viewport height on desktop */
@media (min-width: 992px) {
  body.wld-home header.masthead {
    height: 100vh !important;
    min-height: 775px !important;
  }
}

header.masthead::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  pointer-events: none;
}

/* Hide helper class (Bootstrap 4 compatibility for legacy templates) */
.hide {
  display: none !important;
}