/* ==========================================================================
   typography.css
   Fonts, type tokens and type classes from the Figma file, plus base
   heading and body text styles.
   
   01. Font Imports
   02. Font Variables
   03. Universal Elements
   04. Text Block (legacy)
   ========================================================================== */

/* ==== 01. Font Imports ==== */

/* Alliance No.2 is self-hosted. It is the only font file the site hosts. */
@font-face {
    font-family: "AllianceNo.2";
    src: url("/wp-content/uploads/fonts/AllianceNo2-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Instrument Sans */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

/* Azeret Mono */
@import url("https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap");

/* ==== 02. Font Variables ==== */
:root {
    /* Font Families */
    --typography-font-brand: "AllianceNo.2", sans-serif;
    --typography-font-primary: "Instrument Sans", sans-serif;
    --typography-font-secondary: "Azeret Mono", monospace;

    /* Base Font Size */
    --font-size-base: 16px;

    /* Font Size Scale used in Figma */
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-32: 32px;
    --font-size-40: 40px;
    --font-size-48: 48px;
    --font-size-60: 60px;
    --font-size-72: 72px;
    --font-size-100: 100px;

    /* Font Weight Scale */
    --weight-regular: 400;
    --weight-bold: 500;

    /* Line Heights */
    --lh-none: 1;
    --lh-tight: 1.2;
    --lh-medium: 1.4;
    --lh-relaxed: 1.48;

    /* Letter Spacing */
    --ls-neg-192: -1.92px;
    --ls-neg-160: -1.6px;
    --ls-neg-120: -1.2px;
    --ls-neg-96: -0.96px;
    --ls-neg-80: -0.8px;
    --ls-neg-64: -0.64px;
    --ls-neg-60: -0.6px;
    --ls-neg-48: -0.48px;
    --ls-neg-40: -0.4px;
    --ls-neg-32: -0.32px;
    --ls-neg-28: -0.28px;
    --ls-neg-20: -0.2px;
    --ls-neg-16: -0.16px;
    --ls-neg-14: -0.14px;
    --ls-neg-08: -0.08px;
    --ls-neg-04: -0.04px;
    --ls-neg-02: -0.02px;
    --ls-neg-016: -0.016px;
    --ls-neg-012: -0.012px;
    --ls-neg-008: -0.008px;
    --ls-neg-004: -0.004px;
    --ls-x-tight: -0.96px;
    --ls-tight: -0.2px;
    --ls-normal: -0.1px;
    --ls-pos-01: 0.01px;
    --ls-pos-08: 0.08px;
    --ls-pos-14: 0.14px;

    /* Gaps */
    --gap-0: 0px;
    --gap-4: 4px;
    --gap-8: 8px;
    --gap-12: 12px;
    --gap-16: 16px;
    --gap-20: 20px;
    --gap-24: 24px;
    --gap-32: 32px;
    --gap-40: 40px;
    --gap-48: 48px;
    --gap-60: 60px;

    /* Button Density */
    --btn-density-large: 60px;
    --btn-density-medium: 40px;
    --btn-density-small: 32px;

    /* Button Padding */
    --btn-padding-y: 8px;
    --btn-padding-x: 16px;
    --btn-padding-small-y: 4px;
    --btn-padding-small-x: 12px;
    --btn-padding-large-y: 0px;
    --btn-padding-large-x: 20px;

    /* Button Border Radius */
    --btn-border-radius: 100px;

    /* Icon Density */
    --icon-density-large: 60px;
    --icon-density-medium: 40px;
    --icon-density-small: 32px;

    /* Icon Padding */
    --icon-padding: 8px;
    --icon-padding-xsmall: 2px;
    --icon-padding-small: 4px;
    --icon-padding-large: 12px;
    --icon-padding-xlarge: 14px;

    /* Icon Border Radius */
    --icon-border-radius: 100px;

    /* Image Border Radius */
    --image-border-radius: 8px;

    /* Containers Card Radius */
    --containers-card-radius: 8px;

    /* SVG Stroke Width */
    --svg-stroke-width: 1.5px;
    --svg-icon-width: 24px;
    --svg-icon-height: 24px;

    /* Text Decoration */
    --text-decoration-none: none;
    --text-decoration-underline: underline;

    /* Text Transform */
    --text-transform-none: none;
    --text-transform-uppercase: uppercase;
    --text-transform-lowercase: lowercase;
    --text-transform-capitalize: capitalize;
}

/* ==== 03. Universal Elements ==== */

/* Display Styles */
.d100 {
    font-family: var(--typography-font-brand);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-100);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-neg-02);
}

.d72 {
    font-family: var(--typography-font-brand);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-72);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-neg-02);
}

.d60 {
    font-family: var(--typography-font-brand);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-60);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-neg-02);
}

/* Headlines */
.h48,
.elementor .text-widget.tw-large .headline h2,
.elementor .stat-widget.sw-large .headline {
    font-family: var(--typography-font-brand);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-48);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-96);
}

.h40,
.elementor .stat-widget .headline {
    font-family: var(--typography-font-brand);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-40);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-02);
}

.h32,
.elementor .text-widget .headline h2 {
    font-family: var(--typography-font-brand);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-32);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-64);
}

.h24 {
    font-family: var(--typography-font-brand);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-24);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-02);
}

.h20,
.elementor .text-widget.tw-small .headline h2,
.elementor .stat-widget.sw-small .headline,
.elementor .blog-section .elementor-post__title {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-20);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-02);
}

.h16 {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-16);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-02);
}

.h14 {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-14);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-02);
}

/* Body Text */
.b24 {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-24);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-normal);
}

.b20,
.elementor .text-widget.tw-large .body .elementor-heading-title {
    color: var(--content-secondary);
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-20);
    line-height: var(--lh-relaxed) !important;
    letter-spacing: var(--ls-neg-02);
}

.b20-bold {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-20);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-02);
}

.b20-link {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-20);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-02);
}

.b16,
.elementor .text-widget .body .elementor-heading-title,
.elementor .text-widget .body.elementor-widget-shortcode .pointone-change-log-content,
.elementor .text-widget.tw-small .body .elementor-heading-title,
.elementor .stat-widget .body {
    color: var(--content-secondary);
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-16);
    line-height: var(--lh-relaxed) !important;
    letter-spacing: var(--ls-neg-16);
}

.b16-bold {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-16);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-16);
}

.b16-link,
.elementor .text-widget .btn-link .elementor-heading-title a,
.elementor .blog-section .elementor-post__read-more,
.elementor .text-widget.tw-large .btn-link .elementor-heading-title a {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-16);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-16);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.b14,
.elementor .stat-widget.sw-small .body {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-14);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-16);
}

.b14-bold {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-14);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-16);
}

.b14-link {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-14);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-16);
}

.b12 {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-12);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-normal);
}

.b12-bold {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-bold);
    font-size: var(--font-size-12);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-normal);
}

.b12-link {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-12);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-normal);
}

.b12-strikethrough {
    font-family: var(--typography-font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-12);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-normal);
}

/* Overlines */
.o12 {
    font-family: var(--typography-font-secondary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-12);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-pos-01);
}

.o14,
.elementor .text-widget .overline .elementor-heading-title,
.elementor .text-widget .overline.elementor-widget-shortcode .elementor-shortcode,
.elementor .blog-section .elementor-post-date {
    color: var(--content-primary);
    font-family: var(--typography-font-secondary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-14);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
}

/* Numbers */
.n40 {
    font-family: var(--typography-font-secondary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-40);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-neg-02);
}

.n14 {
    font-family: var(--typography-font-secondary);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-14);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-neg-02);
}

/* Body Copy and General Text Elements */
body {
    font-family: "Instrument Sans", sans-serif;
}

.elementor body,
.elementor p,
.elementor .elementor-widget-text-editor {
    font-family: "Instrument Sans", sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--lh-medium);
    font-weight: var(--font-weight-400);
    color: var(--content-secondary);
    letter-spacing: var(--ls-neg-16);
    text-decoration: var(--text-decoration-none);
    text-transform: var(--text-transform-none);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Target Spans as headings */
span.elementor-heading-title {
    font-family: "Instrument Sans", sans-serif;
}

/* Target Read More Tags */
.elementor-post__read-more {
    font-family: "Instrument Sans", sans-serif;
}

/* Target Post Info and Author Box */
.elementor-post-info *,
.elementor-author-box * {
    font-family: "Instrument Sans", sans-serif;
}

/* Headings */
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
    color: var(--content-primary);
    text-decoration: var(--text-decoration-none);
    text-transform: var(--text-transform-none);
    font-weight: var(--weight-regular);
    margin: 0;
    padding: 0;
}

.elementor h1 {
    font-family: var(--typography-font-brand);
    font-size: var(--font-size-48);
    letter-spacing: var(--ls-neg-192);
    line-height: var(--lh-tight);
}

.elementor h3 {
    font-family: var(--typography-font-primary);
    font-size: var(--font-size-20);
    letter-spacing: var(--ls-neg-60);
    line-height: var(--lh-tight);
    padding-bottom: 0 !important;
}

.elementor h4 {
    font-family: var(--typography-font-primary);
    font-size: var(--font-size-18);
    letter-spacing: var(--ls-neg-120);
    line-height: var(--lh-tight);
}

.elementor h5 {
    font-family: var(--typography-font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--weight-regular0);
    letter-spacing: var(--ls-neg-120);
    line-height: var(--lh-tight);
}

.elementor h6 {
    font-family: var(--typography-font-primary);
    font-size: var(--font-size-14);
    letter-spacing: var(--ls-neg-120);
    line-height: var(--lh-tight);
}

/* ==== 04. Text Block (legacy) ==== */
/* Older text component, replaced by the Text Widget. Still used on Partners. */
.text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-16);
    margin: 0;
    padding: 0;
}

/* Inverse overrides (scoped by class above) */
.inverse .text-block .eyebrow .elementor-heading-title,
.inverse .text-block .headline .elementor-heading-title {
    color: var(--content-primary-inverse);
}

.inverse .text-block .description.elementor-widget-text-editor {
    color: var(--content-secondary-inverse);
}

.text-block .eyebrow .elementor-heading-title {
    font-family: var(--typography-font-secondary);
    font-size: var(--font-size-14);
    font-weight: var(--weight-regular);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
    color: var(--content-primary);
}

.text-block .headline .elementor-heading-title {
    font-family: var(--typography-font-brand);
    font-size: var(--font-size-32);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-64);
    color: var(--content-primary);
}

.text-block .description.elementor-widget-text-editor {
    font-family: var(--typography-font-primary);
    font-size: var(--font-size-16);
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-16);
    margin-bottom: var(--gap-description-buttons);
    color: var(--content-secondary);
}

/* Size modifiers */
.text-block.large {
    gap: var(--gap-20);
}

.text-block.large .eyebrow .elementor-heading-title {
    font-size: var(--font-size-14);
}

.text-block.large .headline .elementor-heading-title {
    font-size: var(--font-size-48);
    letter-spacing: var(--ls-neg-96);
}

.text-block.large .description.elementor-widget-text-editor {
    font-size: var(--font-size-20);
    letter-spacing: var(--ls-neg-20);
}

.text-block.small {
    gap: var(--gap-8);
}

.text-block.small .eyebrow .elementor-heading-title {
    font-size: var(--font-size-14);
}

.text-block.small .headline .elementor-heading-title {
    font-size: var(--font-size-16);
    letter-spacing: var(--ls-neg-32);
}

.text-block.small .description.elementor-widget-text-editor {
    font-size: var(--font-description-small);
    letter-spacing: var(--ls-neg-16);
}