/* ── Aleafiaa brand accent system ────────────────────────────────────────────
   One vocabulary for the medicine green, loaded on every public page.

   Why this file exists. The green keyword treatment was real but local: the
   accessible value (#596400) was scoped to `.v2-hero h1`, so the same
   `.v2-green` class rendered at #a4b900 — 2.1:1 on white — in the homepage
   quality and closing headings, and rendered as nothing at all on pages that
   never loaded v2-home.css (careers, contact). Defining the class once, here,
   makes the highlight accessible and reusable site-wide.

   Load position matters: the header includes this last, so these declarations
   win the source-order tie against the page stylesheets without !important.

   Contrast, measured against the surface each token is used on:
     --af-key-green   #596400 on #fff ....... 6.47:1  (AA at any size)
     --af-green-700   #5c7f10 on #fff ....... 4.67:1  (AA at any size)
     --af-green-600   #7f9c00 ............... non-text only (borders, marks)
     --af-green-brand #c1d834 on #142a5e .... 8.6:1   (AA at any size, on navy)
   ------------------------------------------------------------------------- */

:root {
    /* The logo mark's green. Bright enough only for dark surfaces. */
    --af-green-brand: #c1d834;
    /* Decorative marks, rules and dots on light surfaces. Never text. */
    --af-green-500: #a4b900;
    --af-green-600: #7f9c00;
    /* Text-safe steps on light surfaces. */
    --af-green-700: #5c7f10;
    --af-green-800: #46620b;
    /* The canonical keyword ink. Matches the published homepage hero. */
    --af-key-green: #596400;
    /* Washes for chips, icon plates and hairlines. */
    --af-green-tint: #f4f8e4;
    --af-green-tint-line: #dde8b2;
}

/* ── Keyword emphasis ─────────────────────────────────────────────────────────
   `.v2-green` is the single highlight class. It reads its colour from
   --af-key-green so a dark band can retune it once, for everything inside,
   instead of every component restating a colour. */
.v2-green {
    color: var(--af-key-green);
}

/* Dark bands flip the same class to the bright logo green. Add
   `.af-on-dark` to any new dark section and its highlights follow. */
.af-on-dark,
.v2-partnership-inner,
.v2-metrics,
.v2-health-band,
.v2-vision-card,
.af-culture-hero,
.af-culture-split-section,
.af-culture-cta-copy,
.af-culture-feature-dark,
.af-leader-statement,
.af-footer {
    --af-key-green: var(--af-green-brand);
}

/* An underline treatment for headings where a colour change would fight
   surrounding copy. Thickness is set in em so it tracks the type scale. */
.v2-green-underline {
    text-decoration: underline;
    text-decoration-color: var(--af-green-500);
    text-decoration-thickness: .16em;
    text-underline-offset: .14em;
}

.af-on-dark .v2-green-underline {
    text-decoration-color: var(--af-green-brand);
}

/* ── Eyebrows and pills ─────────────────────────────────────────────────────
   `.v2-pill` was defined only in v2-home.css, so it rendered unstyled on the
   careers and contact pages. Both are defined here for every page, and both
   pick up the brand green as their accent. */
.af-eyebrow {
    color: var(--af-green-700);
}

.af-on-dark .af-eyebrow {
    color: var(--af-green-brand);
}

.v2-pill {
    border: 1px solid var(--af-green-tint-line);
    background: var(--af-green-tint);
    border-radius: 999px;
    color: var(--af-green-800) !important;
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 1rem;
    padding: .3rem .78rem;
    text-transform: uppercase;
}

.af-on-dark .v2-pill {
    background: rgba(193, 216, 52, .16);
    border-color: rgba(193, 216, 52, .45);
    color: var(--af-green-brand) !important;
}

/* ── Button primitives ──────────────────────────────────────────────────────
   `.v2-actions` and `.v2-button` were defined only in v2-home.css, which the
   culture, careers and contact pages never load. Every button written with those
   classes on those pages therefore rendered as bare inline text — no padding, no
   radius, no 44px target. The values below are the published homepage ones, so
   the homepage is unchanged and the rest of the site gains the same button.

   Declared before the enrichment block that follows, which layers depth on top.
   ------------------------------------------------------------------------- */
.v2-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.15rem;
    margin-top: 2rem;
}

.v2-button {
    align-items: center;
    border: 1.5px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: .93rem;
    font-weight: 750;
    gap: .55rem;
    justify-content: center;
    min-height: 44px;
    padding: .65rem 1.25rem;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.v2-button:hover {
    transform: translateY(-2px);
}

.v2-button-primary {
    background: #2a3484;
    color: #fff;
}

.v2-button-primary:hover {
    background: #1d266b;
    color: #fff;
}

.v2-button-secondary {
    border-color: #2a3484;
    color: #2a3484;
}

.v2-button-secondary:hover {
    background: #2a3484;
    color: #fff;
}

.v2-button-light {
    background: #fff;
    color: #16264f;
}

.v2-button-light:hover {
    background: #eef2fb;
    color: #16264f;
}

/* On a dark band the outline variant needs a light edge, not a navy one. */
.af-on-dark .v2-button-secondary {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.af-on-dark .v2-button-secondary:hover {
    background: #fff;
    color: #16264f;
}

/* ── Component navigation ───────────────────────────────────────────────────
   `style.css` carries a legacy global `nav li a { color: black !important }`
   from the original theme. Any component that marks its own tab strip up as a
   nav inherits it, which rendered the *selected* leadership tab as black text on
   the navy fill — 1.9:1, and the one item on the page a visitor most needs to
   read. Overridden here rather than by editing the legacy rule, which other
   pages still rely on.

   `!important` is unavoidable: it is the only way to beat an `!important`
   declaration of equal specificity. */
.af-leader-tabs a {
    color: #16233d !important;
}

.af-leader-tabs a[aria-current="page"],
.af-leader-tabs a[aria-current="page"]:hover,
.af-leader-tabs a[aria-current="page"]:active {
    color: #fff !important;
}

.af-leader-tabs a:hover {
    color: #2a3484 !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────────
   Richer, not different: the primary stays navy, and gains a subtle vertical
   gradient plus a green underline that grows on hover. */
.af-button,
.v2-button-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .06));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px rgba(20, 42, 94, .16);
}

.af-button:hover,
.v2-button-primary:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 12px 26px rgba(20, 42, 94, .26);
}

/* The one place the brand green carries a button: an accent CTA for use on
   navy bands, where #c1d834 has 8.6:1 against the surface behind it. */
.af-button-accent,
.v2-button-accent {
    background: var(--af-green-brand);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .04));
    border-color: var(--af-green-brand);
    color: #16264f !important;
}

.af-button-accent:hover,
.v2-button-accent:hover {
    background: #cde248;
    border-color: #cde248;
    color: #16264f !important;
}

.af-button-outline:hover,
.v2-button-secondary:hover {
    box-shadow: 0 8px 20px rgba(20, 42, 94, .14);
}

/* ── Focus visibility ───────────────────────────────────────────────────────
   One ring for the whole public site, with a white outer band so it stays
   visible on navy as well as on white. */
.af-site-nav a:focus-visible,
.af-footer a:focus-visible,
main a:focus-visible,
main button:focus-visible,
main [tabindex]:not([tabindex="-1"]):focus-visible,
.af-form-control:focus-visible,
.af-button:focus-visible,
.v2-button:focus-visible {
    border-radius: .35rem;
    outline: 3px solid var(--af-green-700);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .85);
}

.af-on-dark a:focus-visible,
.af-on-dark button:focus-visible,
.af-footer a:focus-visible {
    outline-color: var(--af-green-brand);
    box-shadow: 0 0 0 6px rgba(10, 24, 56, .75);
}

/* ── Icon marks ─────────────────────────────────────────────────────────────
   Small green plates behind card icons. Decorative, so the bright value is
   fine; the glyph on top stays navy for contrast. */
.af-icon-mark {
    align-items: center;
    background: var(--af-green-tint);
    border: 1px solid var(--af-green-tint-line);
    border-radius: .8rem;
    color: #223a76;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.1rem;
    height: 2.9rem;
    justify-content: center;
    width: 2.9rem;
}

.af-on-dark .af-icon-mark {
    background: rgba(193, 216, 52, .18);
    border-color: rgba(193, 216, 52, .4);
    color: var(--af-green-brand);
}

/* A hairline rule used to separate an eyebrow from its heading. */
.af-rule {
    background: linear-gradient(90deg, var(--af-green-500), rgba(164, 185, 0, 0));
    border: 0;
    height: 3px;
    margin: 0 0 1.35rem;
    opacity: 1;
    width: 3.5rem;
}

.af-rule-center {
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(90deg, rgba(164, 185, 0, 0), var(--af-green-500), rgba(164, 185, 0, 0));
}

.af-on-dark .af-rule {
    background: linear-gradient(90deg, var(--af-green-brand), rgba(193, 216, 52, 0));
}

/* ── Card lift ──────────────────────────────────────────────────────────────
   A shared hover for the site's card surfaces, with the green edge appearing
   on hover rather than sitting there permanently. */
.af-lift {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.af-lift:hover {
    border-color: var(--af-green-tint-line);
    box-shadow: 0 16px 34px rgba(20, 42, 94, .14);
    transform: translateY(-3px);
}

/* ── Target size ────────────────────────────────────────────────────────────
   WCAG 2.2 asks for a 24×24 minimum (2.5.8). These three sat at 19–21px high
   because they are text links with no padding of their own. Padding is added
   rather than a min-height so the text position on the card does not move. */
.af-leader-card-cta {
    padding: .25rem 0 !important;
    min-height: 24px;
}

.af-leader-card-name-btn {
    padding: .1rem 0 !important;
}

.v2-text-link {
    padding: .2rem 0;
}

/* Product card titles and the homepage contact-bridge links are bare inline
   anchors, which measured 23px high — one pixel under the minimum. Made
   inline-block so vertical padding actually applies to the hit area. */
.v2-shop-card-body h3 a,
.v2-contact-actions a {
    display: inline-block;
    padding-block: .15rem;
}

/* ── Muted text ─────────────────────────────────────────────────────────────
   The struck-through compare-at price rendered at #727b89 on white — 4.28:1,
   just under the 4.5:1 needed at 14px. Nudged onto the right side of the line
   without changing its role as the quieter of the two prices. */
.v2-shop-card-price span,
.v2-shop-card-compare {
    color: #5f6a7d;
}

/* The live caption sitting on the callout plate in the careers hero artwork.
   It inherited --af-green (#2f8065), which is 3.85:1 against the pale blue plate
   at the 8–9px this caption renders at. The darkest step of the brand green
   clears 4.5:1 on that surface. The size is fixed by the artwork it has to align
   with, so contrast is the only lever here. */
.af-hero-art-note-label {
    color: var(--af-green-800);
}

@media (prefers-reduced-motion: reduce) {
    .af-lift,
    .af-button,
    .v2-button {
        transition: none !important;
    }

    .af-lift:hover,
    .v2-button:hover {
        transform: none;
    }
}