/* ==========================================================
   BRAND COLOURS: the only place colours are defined.
   Change a value here and the whole website follows.
   ========================================================== */

:root {
    --pine: #12403c;       /* main colour: buttons, links, side panels */
    --pine-deep: #0c2e2b;  /* darker shade for hover and toasts */
    --pine-line: #2f6660;  /* soft lines and drawings on green */
    --sun: #f4b942;        /* yellow accent, focus rings */

    --paper: #f6f8f7;      /* page background */
    --white: #ffffff;
    --ink: #172624;        /* main text */
    --muted: #5d6f6b;      /* secondary text */
    --line: #d3ddd9;       /* borders */
    --error: #b4360c;
    --radius: 10px;
}

/* ==========================================================
   Language switcher (appears in the top nav on every layout)
   ========================================================== */

.lng-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: color-mix(in srgb, var(--pine) 8%, white);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.lng-switch-btn {
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-decoration: none;
    border-radius: 999px;
}

.lng-switch-btn:hover {
    color: var(--pine);
}

.lng-switch-btn.is-on {
    color: #fff;
    background: var(--pine);
}

/* On the dark hero nav and dark member top bar, invert so it reads correctly */
.ld-nav .lng-switch,
.sh-tools .lng-switch,
.f-nav .lng-switch {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}

.ld-nav .lng-switch-btn,
.sh-tools .lng-switch-btn,
.f-nav .lng-switch-btn {
    color: rgba(255, 255, 255, 0.65);
}

.ld-nav .lng-switch-btn:hover,
.sh-tools .lng-switch-btn:hover,
.f-nav .lng-switch-btn:hover {
    color: #fff;
}

.ld-nav .lng-switch-btn.is-on,
.sh-tools .lng-switch-btn.is-on,
.f-nav .lng-switch-btn.is-on {
    color: var(--pine-deep);
    background: var(--sun);
}

/* On the light auth layout, float it top-right of the form column */
.auth-main .lng-switch {
    position: absolute;
    top: 24px;
    right: 24px;
}

.auth-main {
    position: relative;
}