/**
 * Brand tokens
 *
 * Built on the rebrand color Pantone 286 C (#0032A0) and the complementary
 * palette the client supplied: #0032A0, #A18300, #A15C00, #1A2233, #332E1A.
 * The palette values live in theme.json; the fallbacks keep these working if
 * a saved Global Styles palette drops a slug.
 *
 * #0032A0 is dark, so on dark grounds it is used as a button fill (white text,
 * 10.7:1) with a lighter edge, and the lit tint carries links and accents
 * (6.8:1 on #1A2233). Gold text uses the lit gold tint for the same reason.
 */

:root {
    --h2w-blue: var(--wp--preset--color--brand-blue, #0032a0);
    --h2w-blue-hover: #0a3fb8;
    --h2w-blue-edge: #5b83e0;
    --h2w-blue-lit: var(--wp--preset--color--brand-blue-lit, #8aa8f0);
    --h2w-gold: var(--wp--preset--color--brand-gold, #a18300);
    --h2w-gold-lit: #d4b13a;
    --h2w-amber: var(--wp--preset--color--brand-amber, #a15c00);
    --h2w-olive: var(--wp--preset--color--brand-olive, #332e1a);

    --h2w-ground-deep: #0e131e;
    --h2w-ground: var(--wp--preset--color--ground, #121826);
    --h2w-panel: var(--wp--preset--color--ink-navy, #1a2233);
    --h2w-raised: #232d42;
    --h2w-line-dark: rgba(184, 194, 211, 0.16);

    --h2w-text: #e8ecf2;
    --h2w-text-muted: #a3aec0;

    --h2w-paper: #f3f5f8;
    --h2w-ink: #1a2233;
    --h2w-ink-muted: #5a6475;
    --h2w-line-light: #d5dbe5;

    --h2w-font-display: var(--wp--preset--font-family--display, Saira, sans-serif);
    --h2w-font-body: var(--wp--preset--font-family--primary, "IBM Plex Sans", sans-serif);
    --h2w-font-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);

    --h2w-gutter: clamp(16px, 4vw, 48px);
    --h2w-max: 1240px;
}

.h2w-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--h2w-max) + 2 * var(--h2w-gutter));
    margin-inline: auto;
    padding-inline: var(--h2w-gutter);
}

.h2w-num {
    font-family: var(--h2w-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Buttons shared by the header, hero and CTAs */
.h2w-btn,
.wp-block-button.is-style-h2w-primary > .wp-block-button__link,
.wp-block-button.is-style-h2w-ghost > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1.375rem;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: var(--h2w-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.h2w-btn--primary,
.wp-block-button.is-style-h2w-primary > .wp-block-button__link {
    background: var(--h2w-blue);
    border-color: var(--h2w-blue-edge);
    color: #fff;
}

.h2w-btn--primary:hover,
.h2w-btn--primary:focus-visible,
.wp-block-button.is-style-h2w-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-h2w-primary > .wp-block-button__link:focus-visible {
    background: var(--h2w-blue-hover);
    border-color: var(--h2w-blue-lit);
    color: #fff;
}

.wp-block-button.is-style-h2w-ghost > .wp-block-button__link {
    background: transparent;
    border-color: rgba(232, 236, 242, 0.45);
    color: var(--h2w-text);
}

.wp-block-button.is-style-h2w-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-h2w-ghost > .wp-block-button__link:focus-visible {
    background: rgba(232, 236, 242, 0.08);
    border-color: var(--h2w-text);
    color: #fff;
}

.h2w-header :focus-visible,
.h2w-footer :focus-visible,
.h2w-home :focus-visible {
    outline: 2px solid var(--h2w-blue-lit);
    outline-offset: 2px;
}

.h2w-home .h2w-light :focus-visible {
    outline-color: var(--h2w-blue);
}