/*
    VoiceAgents.ca — brand layer (typography, logo, signature highlight)
    ---------------------------------------------------------------------
    Loaded AFTER app.min.css (see customer/inc/header.inc.php), so plain
    selectors here win without !important.

    What belongs in this file: brand furniture that must apply to EVERY
    VoiceAgents colour theme (Ink and Paper alike).
    Colour decisions belong in customer/css/themes/ink.css and paper.css instead.

    Source of truth: VoiceAgents.ca Brand Guidelines v1.0 (August 2026).
    Section references below point at that document.
*/

/* ── 02 — COLOUR · the brand palette, verbatim from the guide ──
   These raw tokens are the single source of truth. Colour themes
   (customer/css/themes/ink.css and paper.css) map them onto Hesk's variables;
   nothing else should hardcode a brand hex value.
   Ratio to aim for across a surface: Ink 60% · Cream 30% · Lime 10%. */
:root {
    --va-ink:       #0E0F0C;   /* primary backgrounds, headline text on light */
    --va-ink-soft:  #2A2C26;   /* cards and elevated surfaces on Ink          */
    --va-cream:     #F3EBD8;   /* text on dark, light surfaces, "Voice"       */
    --va-lime:      #CBFE48;   /* CTAs, highlights, "Agents.ca" — never body text */
    --va-lime-deep: #8FBF33;   /* accessible lime for text/icons on light     */
    --va-paper:     #FDFBF6;   /* light-mode page background                  */

    /* Working tints derived from the palette — not new brand colours. */
    --va-cream-muted: color-mix(in srgb, var(--va-cream) 72%, var(--va-ink));
    --va-cream-dim:   color-mix(in srgb, var(--va-cream) 62%, var(--va-ink));
    --va-hairline:    color-mix(in srgb, var(--va-cream) 14%, transparent);
    --va-lime-press:  color-mix(in srgb, var(--va-lime) 84%, var(--va-ink));
}

/* ── 03 — TYPOGRAPHY · Web: Archivo (self-hosted, no third-party requests) ── */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;          /* variable font: one file covers the range */
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/Archivo-Variable-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/Archivo-Variable-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
    Font-stack shim. Hesk hardcodes `font-family: Lato, Arial, sans-serif` in ~35
    places across 10 core stylesheets. Rather than override 35 selectors (and
    re-find them after every upgrade), we redefine the "Lato" family itself to
    resolve to the Archivo files. Last @font-face for a family wins, and this file
    loads after the bundle, so every hardcoded Lato reference renders Archivo.
    Arial remains the fallback, per the brand guide's office-document rule.
*/
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/Archivo-Variable-latin.woff2) format('woff2');
}

:root,
body,
button, input, select, textarea, optgroup {
    font-family: 'Archivo', Arial, Helvetica, sans-serif;
}

/* Headlines are heavy and tight, to echo the wordmark (guide §03). */
.cust-help h1, .cust-help h2, .cust-help h3,
.cust-help .h-1, .cust-help .h-2, .cust-help .h-3,
.cust-help .title, .cust-help .block__head .h-3 {
    font-weight: 800;
    letter-spacing: -0.02em;       /* -2% tracking */
}
.cust-help .btn,
.cust-help .header__nav {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ── 01 — LOGO · the wordmark replaces Hesk's plain text title ──
   Clearspace: at least the height of the "V" on all sides (guide §01).
   The asset is the official two-tone PNG; each colour theme picks the
   correct variant via --header_logo__img (never recoloured in CSS). */
.cust-help .header__logo {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 10px 0;               /* clearspace */
    font-size: 15px;               /* only ever seen as <img> alt fallback */
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--header_logo__clr);
}
.cust-help .header__logo .va-wordmark {
    display: block;
    width: auto;
    height: 26px;                  /* ≈159px wide — above the 120px minimum (§01) */
    max-width: 100%;
}
@media screen and (max-width: 480px) {
    .cust-help .header__logo .va-wordmark {
        height: 21px;              /* ≈129px wide — still above the minimum */
    }
}

/* ── 03 — SIGNATURE MOVE · the lime highlight bar ──
   Reserved for the single most important phrase on a surface, never more
   than once. Also used for search-term hits, which are inherently singular. */
.cust-help .va-highlight,
.cust-help .highlighted {
    background-color: var(--va-lime);
    color: var(--va-ink);
    padding: 0 .18em;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Visible, on-brand focus ring — replaces the browser default outline. */
.cust-help a:focus-visible,
.cust-help button:focus-visible,
.cust-help input:focus-visible,
.cust-help select:focus-visible,
.cust-help textarea:focus-visible,
.cust-help [tabindex]:focus-visible {
    outline: 2px solid var(--va-lime);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Selection matches the marketing site. */
.cust-help ::selection {
    background: color-mix(in srgb, var(--va-lime) 40%, transparent);
}