/* Conexus Thrive — brand layer over the app's Bootstrap chrome.
 *
 * Loaded last in template.html so it wins over Bootstrap. Requires tokens.css
 * and fonts.css first.
 *
 * WHY THIS FILE EXISTS, AND WHAT IT IS NOT
 * ----------------------------------------
 * base.css is the marketing-site-derived stylesheet used by the auth and
 * coaching pages, and everything in it is scoped to `body.cx-brand`. The main
 * app chrome (template.html -> base.html / base_wide.html) is Bootstrap and has
 * no such body class, so base.css cannot reach it.
 *
 * Rather than bolt `.cx-brand` onto every page — which would drop Bootstrap's
 * grid and components out from under ~50 templates at once — this file maps the
 * brand tokens onto the Bootstrap chrome that's already there. Most of the
 * colour work is done upstream in scss/main.scss (Bootstrap's own variables);
 * this covers what SCSS variables can't reach: type, the footer, and the
 * surfaces Bootstrap hardcodes.
 *
 * Colour rule, restated because it's the one that gets broken: brand blue
 * (--blue, #1E90FF) is 3.24:1 on white and is for shapes only. Use --cta behind
 * white text, --accent-text / --interactive for blue ink.
 */

/* ============ TYPE ============
   Bootstrap's $font-family-sans-serif / $headings-font-family already set these
   at compile time. Repeated here so the brand type still applies if
   bootstrap-compiled.css is stale or missing — it is a build artifact and not
   committed, so a deploy that skips `npm run build:css:sass` would otherwise
   silently fall back to Bootstrap's system stack. */
body {
    font-family: var(--sans);
    color: var(--body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--serif);
    color: var(--ink);
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* The brand's signature move: one italic phrase inside a roman heading, in
   blue. Display type at these sizes clears AA on brand blue, which small text
   would not. One per heading, on the emotional half of the sentence. */
h1 em, h2 em, .h1 em, .h2 em {
    font-style: italic;
    font-weight: 600;
    color: var(--blue);
}

/* Eyebrow / kicker — uppercase is a typographic device here, and the only
   place sentence case is not used (brand voice §6.2). Negative tracking scales
   with size, so small type gets looser, never tighter. */
.cx-eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--accent-text);
}

/* Page title, set by base.html / base_wide.html on every logged-in page.
   `.page-header` is a Bootstrap 3 leftover with no styles left behind it, so
   these titles were rendering as a plain h2. */
.page-header {
    font-family: var(--serif);
    font-weight: 800;
    color: var(--ink);
    font-size: clamp(26px, 3.4vw, 34px);
    letter-spacing: -.02em;
    margin: 0;
}

/* ============ SURFACES ============ */
#main {
    background: var(--bg);
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

/* Bootstrap's default is a translucent black wash, which reads as grey against
   the brand's cool-white surfaces. */
.card-header {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    font-family: var(--sans);
    font-weight: 700;
    color: var(--ink);
}

.card-header:first-child {
    border-radius: 17px 17px 0 0;
}

hr {
    border-color: var(--line);
    opacity: 1;
}

/* Bootstrap's .bg-light maps to --bg-soft via $theme-colors, but .text-muted
   is hardcoded to a grey that measures 3.7:1 on white. Point it at the brand's
   --muted (5.02:1) so footer and caption text actually passes AA. */
.text-muted {
    color: var(--muted) !important;
}

/* ============ NAV ============
   The navbar is .bg-primary, which is now --cta (#0962C0) rather than brand
   blue — white nav links measure 5.97:1 instead of the 3.24:1 they did before.
   See the note at the top of scss/main.scss. */
.navbar.bg-primary {
    background-color: var(--cta) !important;
    border-bottom: none;
}

.navbar .nav-link {
    font-family: var(--sans);
    font-weight: 700;
}

/* Type-set wordmark (brand guidelines §4). The nav sits on --cta, a dark
   ground, so the mark is all-white with the italic at 85% opacity rather than
   the --ink + --accent-text pairing used on light surfaces. Display size, so
   the italic is legible; never render this below 18px. */
.navbar .cx-nav-wordmark {
    font-family: var(--serif);
    font-weight: 900;
    font-size: 21px;
    letter-spacing: -.02em;
    color: #fff;
    white-space: nowrap;
}

.navbar .cx-nav-wordmark em {
    font-style: italic;
    font-weight: 600;
    opacity: .85;
}

.navbar .cx-nav-wordmark:hover {
    color: #fff;
}

.navbar .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 6px;
}

.navbar .dropdown-item {
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--body);
}

.navbar .dropdown-item:hover {
    background: var(--bg-soft);
    color: var(--interactive);
}

/* ============ BUTTONS ============
   Radii from brand guidelines §5: 10px buttons, 12px large. */
.btn {
    font-family: var(--sans);
    font-weight: 800;
    border-radius: 10px;
}

.btn-lg {
    border-radius: 12px;
}

.btn-primary {
    background-color: var(--cta);
    border-color: var(--cta);
    box-shadow: 0 10px 26px -10px rgba(30, 144, 255, .6);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--navy);
    border-color: var(--navy);
}

.btn-outline-primary {
    color: var(--interactive);
    border-color: var(--line);
    border-width: 1.5px;
}

.btn-outline-primary:hover {
    background: var(--cta);
    border-color: var(--cta);
    color: #fff;
}

/* ============ FORMS ============ */
.form-control,
.form-select {
    border-radius: 10px;
    border-color: var(--line);
    color: var(--ink);
    background: var(--card);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(30, 144, 255, .18);
}

/* Brand accessibility requirement: focus is always visible, 2.5px brand blue
   with 3px offset. Never remove it. */
:focus-visible {
    outline: 2.5px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ============ LINKS ============ */
a {
    color: var(--interactive);
}

a:hover {
    color: var(--navy);
}

/* ============ FOOTER ============ */
#main-footer {
    background: var(--bg-soft) !important;
    border-top: 1px solid var(--line) !important;
    padding: 26px 0 18px;
}

#main-footer .cx-foot-brand {
    font-family: var(--serif);
    font-weight: 900;
    font-size: 19px;
    color: var(--ink);
    letter-spacing: -.02em;
    display: block;
}

#main-footer .cx-foot-brand em {
    font-style: italic;
    font-weight: 600;
    color: var(--interactive);
}

#main-footer .cx-foot-note {
    font-size: 12.5px;
    color: var(--muted);
    margin: 6px 0 0;
    max-width: 46ch;
}

/* ============ BREADCRUMBS + ALERTS ============ */
.breadcrumb {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.breadcrumb-item.active {
    color: var(--muted);
}

.alert {
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 14.5px;
}

/* ============ TABLES ============ */
.table {
    color: var(--body);
    border-color: var(--line);
}

.table > thead {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ============ MOTION ============
   Durations and curves from MOTION_AND_INTERACTION.md: --t-fast 150ms for
   hover, --ease-out as the default curve. Response scales inversely with size,
   so small things move fast. */
.btn,
.card,
a,
.dropdown-item {
    transition: background-color 150ms cubic-bezier(.16, .84, .32, 1),
                color 150ms cubic-bezier(.16, .84, .32, 1),
                border-color 150ms cubic-bezier(.16, .84, .32, 1),
                box-shadow 240ms cubic-bezier(.16, .84, .32, 1);
}

.btn:active {
    transform: scale(.975);
}

/* Brand requirement: every animation honours prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .btn:active {
        transform: none;
    }
}