/* =============================================================================
   Fenix Alliance — Portals owned design-system theme (Layer 2).

   Loaded AFTER Hostlar's main.css to progressively OVERRIDE it toward the style
   guide (Docs.Developer/Style-Guide) and the modern-SaaS look — on the incremental
   path to REMOVING Hostlar entirely and owning portal styling end to end.

   It intentionally speaks the SAME token language as the @abs React design system
   (the header), so the React surfaces and the Blazor/Hostlar pages read as one
   system. As each area below is covered here, the matching Hostlar rules can be
   deleted; when the whole surface is covered, main.css (and its JS) goes away.

   Approach: tokens on :root + overrides of the Bootstrap-4 / Hostlar CLASSES the
   44 portal components already use — so every page modernizes without re-authoring
   markup yet. Rules here load last, so equal-specificity selectors win on order
   (no !important needed for the common cases).
   ============================================================================= */

:root {
    /* Brand accent — per-portal. Inherits the portal's brand color if the layout sets
       --brand-accent (as the composed header does); falls back to Fenix Alliance blue.
       This is what makes the theme follow ComputeWorks green, etc. */
    --fa-brand: var(--brand-accent, #0073ec);
    --fa-brand-contrast: #ffffff;

    /* Deep brand navy (style-guide Blue40) for dark sections / strong headings. */
    --fa-navy: #002050;
    --fa-navy-2: #003773; /* Blue60 */

    /* Neutral ink + surfaces (style-guide grays, tuned for SaaS contrast >= 4.5:1). */
    --fa-ink: #141a24;
    --fa-ink-soft: #47505f;
    --fa-muted: #6b7482;
    --fa-border: #e6e9ef;
    --fa-bg: #ffffff;
    --fa-surface: #f6f8fb;

    /* Shape (style guide: 8px radii, 4px spacing ramp). */
    --fa-radius: 12px;
    --fa-radius-md: 10px;
    --fa-radius-sm: 8px;

    /* Elevation — soft, modern. */
    --fa-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
    --fa-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.09);
    --fa-shadow-md: 0 8px 24px -10px rgba(16, 24, 40, 0.18);
    --fa-shadow-lg: 0 20px 48px -18px rgba(16, 24, 40, 0.26);

    /* Type — Roboto first (style-guide UI typeface; already loaded by the head partial). */
    --fa-font: 'Roboto', 'Source Sans 3', 'Inter', system-ui, -apple-system, 'Segoe UI',
        'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------------- typography ---
   Hostlar ships Montserrat/Open Sans; the style guide is Roboto. Retarget the body
   + headings + common text classes without touching layout. */
body {
    font-family: var(--fa-font);
    color: var(--fa-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

p,
li,
.lead,
.btn,
input,
select,
textarea,
.form-control,
.nav-link,
.card-body {
    font-family: var(--fa-font);
}

/* NB: do NOT set an explicit `color` on headings / .lead / p. Many sections put this
   text on dark/branded backgrounds and rely on INHERITING white (from a .text-white
   wrapper). A direct color rule beats inherited color, so recoloring here paints that
   text dark-on-dark (faded/unreadable). Font + weight + tracking only; color inherits. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4 {
    font-family: var(--fa-font);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------------- links --- */
a {
    color: var(--fa-brand);
}
a:hover {
    color: var(--fa-brand);
    filter: brightness(0.92);
}

/* -------------------------------------------------------------------- buttons ---
   Brand-accent primary, 8px radius, quiet weight. Loaded after Hostlar so these
   win on source order for the common (single-class) selectors. */
/* Base: friendlier radius, semibold, comfortable size (bigger, not huge — Bootstrap's
   default is a cramped 6px/12px), smooth transitions, and an accessible focus ring.
   Nav / icon buttons keep their own more-specific Hostlar padding, so this only relaxes
   the generic CTAs. */
.btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 0.58rem 1.35rem;
    letter-spacing: 0;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease,
        background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-lg {
    border-radius: 12px;
    padding: 0.86rem 1.9rem;
    font-size: 1.02rem;
}
.btn-sm {
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-brand) 32%, transparent);
}

/* Primary — brand fill + a soft brand-tinted glow; lifts a hair on hover, presses on click. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--fa-brand);
    border-color: var(--fa-brand);
    color: var(--fa-brand-contrast);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08),
        0 8px 18px -8px color-mix(in srgb, var(--fa-brand) 55%, transparent);
}
.btn-primary:hover,
.btn-primary:focus {
    /* DARKEN on hover (modern), not lighten — lightening looked washed-out/cheap. */
    background-color: color-mix(in srgb, var(--fa-brand), #000 10%);
    border-color: color-mix(in srgb, var(--fa-brand), #000 10%);
    color: var(--fa-brand-contrast);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.1),
        0 14px 26px -8px color-mix(in srgb, var(--fa-brand) 60%, transparent);
}
.btn-primary:active {
    transform: translateY(0);
    background-color: color-mix(in srgb, var(--fa-brand), #000 16%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

/* Hostlar's "solid CTA" helper is often paired with a semantic color class (btn-success/
   btn-info) that leaks green/cyan on hover. Pin it to a clean brand-primary — rest AND
   hover — so every CTA using it stays on-brand. */
.primary-solid-btn,
.primary-solid-btn:hover,
.primary-solid-btn:focus {
    background-color: var(--fa-brand);
    border-color: var(--fa-brand);
    color: var(--fa-brand-contrast);
}
.primary-solid-btn:hover {
    background-color: color-mix(in srgb, var(--fa-brand), #000 10%);
    border-color: color-mix(in srgb, var(--fa-brand), #000 10%);
    transform: translateY(-1px);
}

/* Outline / ghost (brand) — fills with the brand on hover, matching lift. */
.btn-outline-primary {
    color: var(--fa-brand);
    border-color: var(--fa-brand);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--fa-brand);
    border-color: var(--fa-brand);
    color: var(--fa-brand-contrast);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--fa-brand) 50%, transparent);
}

/* White ghost secondary (for CTAs on dark/branded sections) — clean lift on hover. */
.btn-outline-light:hover,
.btn-outline-light:focus {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------- cards ---
   Softer surface: hairline border, gentle elevation, larger radius. */
.card {
    border-radius: var(--fa-radius);
    border: 1px solid var(--fa-border);
    box-shadow: var(--fa-shadow-sm);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* ------------------------------------------------------------------ form fields --- */
.form-control {
    border-radius: var(--fa-radius-sm);
    border-color: var(--fa-border);
    color: var(--fa-ink);
}
.form-control:focus {
    border-color: var(--fa-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-brand) 18%, transparent);
}

/* ---------------------------------------------------------------- brand accents ---
   Recolor the common Hostlar/Bootstrap accent utilities to the portal's brand so
   the whole page follows the brand instead of the template's default blue. */
.text-primary {
    color: var(--fa-brand) !important;
}
.bg-primary {
    background-color: var(--fa-brand) !important;
}
.badge-primary {
    background-color: var(--fa-brand);
    color: var(--fa-brand-contrast);
}