/*
 * Brandefense type scale. THIS IS THE ONE PLACE TO CHANGE TEXT SIZES.
 *
 * Every page type (classic Tailwind pages, the newer .hp-* pages, the mega menu) reads
 * the role variables below. To make all headlines a little bigger, change --bd-h2-size once.
 * This file is loaded last (handle "bd-type", inc/enqueue.php), so it wins over main.css,
 * custom.css and the hp/*.css files when they are equally specific.
 *
 * Roles (desktop / phone):
 *   hero h1 60/40 . section headline 48/32 . sub-headline 32/24 . card title 24/20
 *   dense card title 20/18 . lead 20/18 . body 16/16 . small 14 . eyebrow 12 (mono, uppercase)
 *   nav 15 . button 16 (small 15) . stat 48/40 . article body 18/16
 * Headlines run on clamp() from the phone value at 390px to the desktop value at 1280px,
 * everything else switches once, at 720px.
 *
 * Sections: 1 variables . 2 role classes . 3 classic Tailwind utilities mapped onto roles
 *           4 buttons and form text . 5 article (blog) column
 */

/* ---------------------------------------------------------------- 1. Variables */
:root {
    --bd-heading-weight: 600;
    --bd-text-weight: 400;
    --bd-medium-weight: 500;

    /* Hero h1 */
    --bd-h1-size: clamp(40px, 31.2px + 2.25vw, 60px);
    --bd-h1-lh: 1.05;
    --bd-h1-track: -0.02em;

    /* Section headline */
    --bd-h2-size: clamp(32px, 25px + 1.8vw, 48px);
    --bd-h2-lh: 1.1;
    --bd-h2-track: -0.02em;

    /* Sub-headline, article h2 */
    --bd-h3-size: clamp(24px, 20.5px + 0.9vw, 32px);
    --bd-h3-lh: 1.2;
    --bd-h3-track: -0.015em;

    /* Card title */
    --bd-card-size: 24px;
    --bd-card-lh: 1.3;
    --bd-card-track: -0.01em;
    /* Card title in dense grids (three or four columns) */
    --bd-card-dense-size: 20px;

    /* Lead paragraph */
    --bd-lead-size: 20px;
    --bd-lead-lh: 1.5;
    --bd-lead-track: 0;
    --bd-lead-measure: 60ch;

    /* Body */
    --bd-body-size: 16px;
    --bd-body-lh: 1.55;
    --bd-body-track: 0;

    /* Small: footer links, captions, meta, menu descriptions */
    --bd-small-size: 14px;
    --bd-small-lh: 1.5;
    --bd-small-track: 0;

    /* Eyebrow / label: the one uppercase label style */
    --bd-eyebrow-size: 12px;
    --bd-eyebrow-weight: 500;
    --bd-eyebrow-lh: 1.4;
    --bd-eyebrow-track: 0.1em;

    /* Navigation and buttons */
    --bd-nav-size: 15px;
    --bd-nav-weight: 500;
    --bd-btn-size: 16px;
    --bd-btn-size-sm: 15px;
    --bd-btn-weight: 600;
    --bd-btn-lh: 1;
    --bd-btn-h: 48px;
    --bd-btn-h-sm: 44px;
    --bd-btn-pad: 24px;
    --bd-btn-pad-sm: 20px;

    /* Stat number */
    --bd-stat-size: 48px;
    --bd-stat-lh: 1;
    --bd-stat-weight: 500;
    --bd-stat-track: -0.02em;

    /* Article (blog posts, guides, docs) */
    --bd-article-size: 18px;
    --bd-article-lh: 1.65;
    --bd-article-measure: 680px;

    /* Muted text colours */
    --bd-muted-on-dark: rgb(255 255 255 / 0.78);
    --bd-muted-on-light: #4b5563;
}

@media (max-width: 720px) {
    :root {
        --bd-h1-lh: 1.1;
        --bd-h2-lh: 1.15;
        --bd-card-size: 20px;
        --bd-card-dense-size: 18px;
        --bd-lead-size: 18px;
        --bd-stat-size: 40px;
        --bd-article-size: 16px;
    }
}

/* ---------------------------------------------------------------- 2. Role classes */
.bd-t-h1,
.bd-t-h2,
.bd-t-h3,
.bd-t-card,
.bd-t-card-dense {
    font-family: var(--bd-font-display);
    font-weight: var(--bd-heading-weight);
    text-wrap: balance;
}

.bd-t-h1 {
    font-size: var(--bd-h1-size);
    line-height: var(--bd-h1-lh);
    letter-spacing: var(--bd-h1-track);
}

.bd-t-h2 {
    font-size: var(--bd-h2-size);
    line-height: var(--bd-h2-lh);
    letter-spacing: var(--bd-h2-track);
}

.bd-t-h3 {
    font-size: var(--bd-h3-size);
    line-height: var(--bd-h3-lh);
    letter-spacing: var(--bd-h3-track);
}

.bd-t-card {
    font-size: var(--bd-card-size);
    line-height: var(--bd-card-lh);
    letter-spacing: var(--bd-card-track);
}

.bd-t-card-dense {
    font-size: var(--bd-card-dense-size);
    line-height: var(--bd-card-lh);
    letter-spacing: var(--bd-card-track);
}

.bd-t-lead {
    font-family: var(--bd-font-body);
    font-size: var(--bd-lead-size);
    font-weight: var(--bd-text-weight);
    line-height: var(--bd-lead-lh);
    letter-spacing: var(--bd-lead-track);
    max-width: var(--bd-lead-measure);
    text-wrap: pretty;
}

.bd-t-body {
    font-family: var(--bd-font-body);
    font-size: var(--bd-body-size);
    font-weight: var(--bd-text-weight);
    line-height: var(--bd-body-lh);
    letter-spacing: var(--bd-body-track);
}

.bd-t-small {
    font-family: var(--bd-font-body);
    font-size: var(--bd-small-size);
    font-weight: var(--bd-text-weight);
    line-height: var(--bd-small-lh);
    letter-spacing: var(--bd-small-track);
}

.bd-t-eyebrow {
    font-family: var(--bd-font-mono);
    font-size: var(--bd-eyebrow-size);
    font-weight: var(--bd-eyebrow-weight);
    line-height: var(--bd-eyebrow-lh);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
}

.bd-t-stat {
    font-family: var(--bd-font-mono);
    font-size: var(--bd-stat-size);
    font-weight: var(--bd-stat-weight);
    line-height: var(--bd-stat-lh);
    letter-spacing: var(--bd-stat-track);
    font-variant-numeric: tabular-nums;
}

/* Muted colour that belongs to the role, for lead and body copy that has no colour of its own */
.hp--dark .bd-t-lead,
.hp--dark .bd-t-body,
.bg-navy-black .bd-t-lead {
    color: var(--bd-muted-on-dark);
}

.hp--light .bd-t-lead,
.hp--light .bd-t-body {
    color: var(--bd-muted-on-light);
}

/* ---------------------------------------------------------------- 3. Classic utilities onto roles */
/* Headings: weight 600 even when the element carries font-medium. */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--bd-heading-weight);
}

h2.font-medium, h3.font-medium, h4.font-medium, h5.font-medium, h6.font-medium,
h2.font-bold, h3.font-bold, h4.font-bold, h5.font-bold, h6.font-bold {
    font-weight: var(--bd-heading-weight);
}

/* Any large text that was set in medium weight is a title: 600 */
.text-20.font-medium, .text-24.font-medium,
.text-28.font-medium, .text-32.font-medium,
.text-2xl.font-medium, .text-xl.font-medium {
    font-weight: var(--bd-heading-weight);
}

/* Sub-headline: text-32, text-28 and their breakpoint twins */
.text-32,
.text-28 {
    font-size: var(--bd-h3-size);
    line-height: var(--bd-h3-lh);
    letter-spacing: var(--bd-h3-track);
}

/* Card title: text-24 and friends */
.text-24, .text-2xl {
    font-size: var(--bd-card-size);
    line-height: var(--bd-card-lh);
    letter-spacing: var(--bd-card-track);
}

/* text-20 / lg:text-20: card title in dense grids (headline font) ... */
.text-20, .text-xl {
    font-size: var(--bd-card-dense-size);
    line-height: var(--bd-card-lh);
    letter-spacing: var(--bd-card-track);
}

/* ... or a lead paragraph when it is plain body-font text */
.text-20.font-normal,
.text-20.font-manrope {
    font-size: var(--bd-lead-size);
    line-height: var(--bd-lead-lh);
    letter-spacing: var(--bd-lead-track);
    max-width: var(--bd-lead-measure);
}


/* Hero h1: the page title, whatever size utilities it carries (beats them by tag + class) */
h1,
h1.text-28, h1.text-32, h1.md\:text-32, h1.lg\:text-40, h1.xl\:text-40, h1.lg\:text-32,
h1.page-title, h1.entry-title {
    font-size: var(--bd-h1-size);
    line-height: var(--bd-h1-lh);
    letter-spacing: var(--bd-h1-track);
    font-weight: var(--bd-heading-weight);
    text-wrap: balance;
}

/* Sub-headline and section headlines in the headline font balance their lines */
h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* Body: text-16 */
.text-16 {
    font-size: var(--bd-body-size);
    line-height: var(--bd-body-lh);
}

/* text-14: running copy is body, everything else (captions, meta, footer, tags, table cells) is small */
.text-14, .text-14-no-letter, .text-sm, .text-13 {
    font-size: var(--bd-small-size);
    line-height: var(--bd-small-lh);
    letter-spacing: var(--bd-small-track);
}

p.text-14.font-manrope,
li.text-14.font-manrope,
.text-14.font-manrope > li,
.text-14.font-manrope > p {
    font-size: var(--bd-body-size);
    line-height: var(--bd-body-lh);
}

/* Small stays small where the 14 px is a caption, a legal line or footer text */
footer .text-14, footer p.text-14.font-manrope, footer li.text-14.font-manrope,
.top-bar .text-14, .text-center > p.text-14.font-manrope.bd-caption,
.bd-t-small.text-14 {
    font-size: var(--bd-small-size);
    line-height: var(--bd-small-lh);
}

/* text-12, text-xs, text-[10px]: 12 px is the floor */
.text-12, .text-xs, .text-\[10px\] {
    font-size: 12px;
    line-height: 1.4;
}

/* Labels written as uppercase small text become the eyebrow */
.text-12.uppercase, .text-xs.uppercase, .text-\[10px\].uppercase,
.text-xs.tracking-wider, .text-\[10px\].tracking-wider, .text-12.tracking-wider {
    font-family: var(--bd-font-mono);
    font-weight: var(--bd-eyebrow-weight);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
}

.tracking-wider { letter-spacing: var(--bd-eyebrow-track); }
.tracking-normal { letter-spacing: 0; }

/* Large decorative figure */
.text-82 { font-size: var(--bd-h1-size); line-height: var(--bd-h1-lh); letter-spacing: var(--bd-h1-track); }

/* Section pills (dot + label) */
.pill-white, .pill-dove, .pill-alabaster, .pill-navy-blue, .pill-date, .pill-location, .pill-case-navy-black,
.pill-location-navy-black, .pill-date-white-5, .pill-location-white-5 {
    font-size: var(--bd-small-size);
    font-weight: var(--bd-medium-weight);
    letter-spacing: 0;
}

/* ---------------------------------------------------------------- 4. Navigation, buttons, forms */
.bd-t-nav {
    font-size: var(--bd-nav-size);
    font-weight: var(--bd-nav-weight);
    line-height: 1;
    letter-spacing: 0;
}

.bd-t-btn {
    font-size: var(--bd-btn-size);
    font-weight: var(--bd-btn-weight);
    line-height: var(--bd-btn-lh);
    letter-spacing: 0;
    white-space: nowrap;
}

.bd-t-btn-sm {
    font-size: var(--bd-btn-size-sm);
    font-weight: var(--bd-btn-weight);
    line-height: var(--bd-btn-lh);
    letter-spacing: 0;
    white-space: nowrap;
}

/* Small button: the header "Request A Demo" and any .btn-red.btn-sm */
.top-bar .btn-red,
.btn-red.btn-sm {
    font-size: var(--bd-btn-size-sm);
    min-height: var(--bd-btn-h-sm);
    padding: calc((var(--bd-btn-h-sm) - var(--bd-btn-size-sm)) / 2) calc(var(--bd-btn-pad-sm) + 20px) calc((var(--bd-btn-h-sm) - var(--bd-btn-size-sm)) / 2) var(--bd-btn-pad-sm);
}

input, select, textarea {
    font-size: var(--bd-body-size);
    letter-spacing: 0;
}

::placeholder {
    letter-spacing: 0;
}

/* ---------------------------------------------------------------- 5. Article column (blog) */

/* 6. Classic homepage hero, phone fixes ------------------------------ */
.min-h-20 { min-height: 80px; }
#incident-banner .bg-info > .container { padding-right: 0; }
.bg-home-hero p.bd-t-lead { color: var(--bd-muted-on-dark); }
@media (max-width: 1023px) {
  #incident-banner .bg-info { height: auto; }
  #incident-banner-close { top: 0; right: 0; }
}

/* 7. Breakpoint twins of the utilities above (same breakpoints as main.css: md 768, lg 992, xl 1200) */
@media (min-width: 768px) {
  .md\:text-32 { font-size: var(--bd-h3-size); line-height: var(--bd-h3-lh); letter-spacing: var(--bd-h3-track); }
}
@media (min-width: 992px) {
  .lg\:text-32, .lg\:text-28 { font-size: var(--bd-h3-size); line-height: var(--bd-h3-lh); letter-spacing: var(--bd-h3-track); }
  .lg\:text-24, .lg\:text-2xl { font-size: var(--bd-card-size); line-height: var(--bd-card-lh); letter-spacing: var(--bd-card-track); }
  .lg\:text-20 { font-size: var(--bd-card-dense-size); line-height: var(--bd-card-lh); letter-spacing: var(--bd-card-track); }
  .lg\:text-20.font-normal, .lg\:text-20.font-manrope { font-size: var(--bd-lead-size); line-height: var(--bd-lead-lh); letter-spacing: var(--bd-lead-track); max-width: var(--bd-lead-measure); }
  .lg\:text-16 { font-size: var(--bd-body-size); line-height: var(--bd-body-lh); }
  .lg\:text-20.font-medium, .lg\:text-24.font-medium, .lg\:text-28.font-medium, .lg\:text-32.font-medium, .lg\:text-2xl.font-medium { font-weight: var(--bd-heading-weight); }
  /* Section headline */
  .lg\:text-40 { font-size: var(--bd-h2-size); line-height: var(--bd-h2-lh); letter-spacing: var(--bd-h2-track); font-weight: var(--bd-heading-weight); text-wrap: balance; }
}
@media (min-width: 1200px) {
  .xl\:text-40 { font-size: var(--bd-h2-size); line-height: var(--bd-h2-lh); letter-spacing: var(--bd-h2-track); font-weight: var(--bd-heading-weight); text-wrap: balance; }
  .xl\:text-14 { font-size: var(--bd-small-size); line-height: var(--bd-small-lh); letter-spacing: var(--bd-small-track); }
  .xl\:text-16 { font-size: var(--bd-body-size); line-height: var(--bd-body-lh); }
}