/* ============================================================================
   FindAnEstimator brand layer — "Trust + Authority + Modern"
   Layered OVER the Metronic/Bootstrap baseline. We restyle by overriding the
   framework's CSS custom properties + a focused set of component classes, so
   EVERY page inherits the navy / accent-blue identity, not just the homepage.
   Palette (locked):
     navy   #0B2545  authority base / hero
     navy2  #13315C  depth
     accent #2563EB  CTAs, links, highlights, hover
     white  #FFFFFF
     slate  #F1F5F9  section backgrounds
     ink    #0F172A  body text
     muted  #64748B  secondary text
     steel  #8DA9C4  subtle detail
   ============================================================================ */

:root {
    --fae-navy: #0B2545;
    --fae-navy-2: #13315C;
    --fae-accent: #2563EB;
    --fae-accent-d: #1D4ED8;
    --fae-accent-l: #60A5FA;
    --fae-accent-soft: #EFF4FF;
    --fae-white: #FFFFFF;
    --fae-slate: #F1F5F9;
    --fae-ink: #0F172A;
    --fae-muted: #64748B;
    --fae-steel: #8DA9C4;
    --fae-line: #E2E8F0;
    --fae-radius: 12px;
    --fae-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --fae-shadow-h: 0 4px 8px rgba(15, 23, 42, .06), 0 18px 40px rgba(11, 37, 69, .12);
}

/* ----------------------------------------------------------------------------
   Override the Bootstrap/Metronic theme variables so primary, links, body text
   and the gray-scale utility classes resolve to our palette site-wide.
   ------------------------------------------------------------------------- */
:root {
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-active: #1D4ED8;
    --bs-primary-light: #EFF4FF;
    --bs-primary-light-rgb: 239, 244, 255;
    --bs-primary-inverse: #FFFFFF;

    --bs-link-color: #2563EB;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1D4ED8;

    --bs-body-color: #0F172A;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-body-bg: #FFFFFF;

    --bs-light: #F1F5F9;
    --bs-light-rgb: 241, 245, 249;
    --bs-border-color: #E2E8F0;
    --bs-border-radius: 0.75rem;

    /* Metronic's own theme variables (style.bundle.css drives many components,
       e.g. .btn.btn-light-primary background = var(--kt-primary-light)). Recolour
       them to the accent palette so Metronic-native components follow suit. */
    --kt-primary: #2563EB;
    --kt-primary-rgb: 37, 99, 235;
    --kt-primary-active: #1D4ED8;
    --kt-primary-light: #EFF4FF;
    --kt-primary-inverse: #FFFFFF;
    --kt-text-primary: #2563EB;
    --kt-link-color: #2563EB;
    --kt-link-color-hover: #1D4ED8;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--fae-ink);
    -webkit-font-smoothing: antialiased;
}

/* Metronic maps text-gray-* utilities off the gray scale; re-tone the ones the
   public pages lean on so headings read as deep navy-ink and secondary text as
   the muted slate, matching the mockup. */
.text-gray-900 { color: var(--fae-ink) !important; }
.text-gray-800 { color: #1E293B !important; }
.text-gray-700 { color: #334155 !important; }
.text-gray-600 { color: var(--fae-muted) !important; }
.text-primary  { color: var(--fae-accent) !important; }

h1, h2, h3, .h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    letter-spacing: -0.8px;
    color: var(--fae-navy);
}

/* ----------------------------------------------------------------------------
   Buttons — accent primary, navy hover; soft + light variants per the mockup.
   ------------------------------------------------------------------------- */
/* Metronic's compiled .btn-primary sets background-color / border-color to a
   literal value (not var(--bs-btn-bg)), so overriding the Bootstrap button vars
   alone doesn't recolour it. Set the colours explicitly with matching
   specificity so the accent palette wins. */
.btn.btn-primary,
.btn-primary {
    --bs-btn-bg: var(--fae-accent);
    --bs-btn-border-color: var(--fae-accent);
    --bs-btn-hover-bg: var(--fae-accent-d);
    --bs-btn-hover-border-color: var(--fae-accent-d);
    --bs-btn-active-bg: var(--fae-accent-d);
    --bs-btn-active-border-color: var(--fae-accent-d);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    background-color: var(--fae-accent) !important;
    border-color: var(--fae-accent) !important;
    color: #fff !important;
    font-weight: 600;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--fae-accent-d) !important;
    border-color: var(--fae-accent-d) !important;
    color: #fff !important;
}

.btn.btn-light-primary,
.btn-light-primary {
    --bs-btn-bg: var(--fae-accent-soft);
    --bs-btn-border-color: var(--fae-accent-soft);
    --bs-btn-color: var(--fae-accent-d);
    background-color: var(--fae-accent-soft) !important;
    border-color: var(--fae-accent-soft) !important;
    color: var(--fae-accent-d) !important;
    font-weight: 600;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active,
.btn.btn-light-primary.active,
.btn-light-primary:hover,
.btn-light-primary:active {
    background-color: var(--fae-accent) !important;
    border-color: var(--fae-accent) !important;
    color: #fff !important;
}

.btn.btn-light,
.btn-light {
    --bs-btn-bg: var(--fae-slate);
    --bs-btn-border-color: var(--fae-slate);
    --bs-btn-color: var(--fae-navy);
    background-color: var(--fae-slate) !important;
    border-color: var(--fae-slate) !important;
    color: var(--fae-navy) !important;
    font-weight: 600;
}

.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active,
.btn-light:hover,
.btn-light:active {
    background-color: #E6ECF3 !important;
    border-color: #E6ECF3 !important;
    color: var(--fae-navy) !important;
}

.btn {
    border-radius: 10px;
}

/* ----------------------------------------------------------------------------
   Links + badges
   ------------------------------------------------------------------------- */
a { color: inherit; }
.text-hover-primary:hover { color: var(--fae-accent) !important; }

.badge-light-primary {
    background: var(--fae-accent-soft) !important;
    color: var(--fae-accent-d) !important;
}

.bg-light-primary {
    background-color: var(--fae-accent-soft) !important;
}

/* ----------------------------------------------------------------------------
   Cards — soft shadow, rounded corners, gentle lift on hover.
   ------------------------------------------------------------------------- */
.card {
    border-radius: 14px;
    border-color: var(--fae-line);
}

.card.shadow-sm {
    box-shadow: var(--fae-shadow) !important;
}

.border-gray-200 { border-color: var(--fae-line) !important; }

/* ----------------------------------------------------------------------------
   Section background utility (Metronic .bg-light) → light slate.
   ------------------------------------------------------------------------- */
.bg-light { background-color: var(--fae-slate) !important; }

/* ----------------------------------------------------------------------------
   Form controls — clean, rounded, accent focus ring.
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--fae-line);
    border-radius: 10px;
    color: var(--fae-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fae-accent-l);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.form-label {
    color: var(--fae-muted);
}

/* ----------------------------------------------------------------------------
   Header / navbar
   ------------------------------------------------------------------------- */
.fae-header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fae-line) !important;
}

.fae-brand-logo {
    height: 40px;
    width: auto;
    display: block;
}

.fae-header .nav-link {
    color: #334155 !important;
    border-radius: 8px;
    padding: 9px 13px;
    transition: background 0.15s ease, color 0.15s ease;
}

.fae-header .nav-link:hover {
    color: var(--fae-navy) !important;
    background: var(--fae-slate);
}

/* ----------------------------------------------------------------------------
   Homepage hero — navy gradient with radial accent glow, white type.
   ------------------------------------------------------------------------- */
.fae-hero {
    position: relative;
    background: linear-gradient(150deg, var(--fae-navy) 0%, #0d294f 45%, var(--fae-navy-2) 100%);
    color: #fff;
    overflow: hidden;
}

.fae-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .35), transparent 65%);
    pointer-events: none;
}

.fae-hero::before {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(141, 169, 196, .18), transparent 60%);
    pointer-events: none;
}

.fae-hero .container {
    position: relative;
    z-index: 2;
}

/* Inside the navy hero, headings + body text are light, not navy/ink. */
.fae-hero h1,
.fae-hero .display-4,
.fae-hero .display-6 {
    color: #fff;
}

.fae-hero p,
.fae-hero .text-gray-700,
.fae-hero .text-gray-600 {
    color: #c8d6ea !important;
}

.fae-hero .fae-hl {
    color: var(--fae-accent-l);
}

.fae-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #dbe7fb;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 7px 14px;
    border-radius: 999px;
}

.fae-eyebrow .fae-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fae-accent-l);
    display: inline-block;
}

/* The search card floats on the navy hero with a deep shadow. */
.fae-hero .card {
    box-shadow: 0 24px 60px rgba(5, 17, 38, .4) !important;
    border: none;
    border-radius: 18px;
}

.fae-trust-row {
    display: flex;
    gap: 30px;
    justify-content: center;
    color: #aebfd6;
    font-size: 14px;
    font-weight: 500;
    flex-wrap: wrap;
}

.fae-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fae-trust-row .fae-ic {
    color: var(--fae-accent-l);
}

/* Disciplines.cshtml + any page reusing .fae-hero on a light section keeps a
   light treatment — only the homepage hero (.fae-hero.fae-hero-navy) goes navy.
   To avoid restyling the disciplines hero into navy, we scope navy to a modifier
   and leave the bare .fae-hero light for inner-page headers. */
.fae-hero:not(.fae-hero-navy) {
    background: linear-gradient(180deg, #ffffff 0%, var(--fae-slate) 100%);
    color: var(--fae-ink);
}

.fae-hero:not(.fae-hero-navy) h1,
.fae-hero:not(.fae-hero-navy) .display-6 {
    color: var(--fae-navy);
}

.fae-hero:not(.fae-hero-navy) p,
.fae-hero:not(.fae-hero-navy) .text-gray-700 {
    color: #334155 !important;
}

.fae-hero:not(.fae-hero-navy)::after,
.fae-hero:not(.fae-hero-navy)::before {
    display: none;
}

/* ----------------------------------------------------------------------------
   Tiles / listing cards lift
   ------------------------------------------------------------------------- */
.fae-tile {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
    overflow: hidden;
}

.fae-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--fae-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.18s ease;
}

.fae-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--fae-shadow-h) !important;
    border-color: #dbe5f0 !important;
}

.fae-tile:hover::before {
    transform: scaleY(1);
}

/* Accent-soft icon chip used in feature/value-prop sections + tiles. */
.fae-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fae-accent-soft);
    color: var(--fae-accent);
    border-radius: 14px;
}

.fae-icon-chip.fae-chip-lg {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

.fae-icon-chip.fae-chip-sm {
    width: 34px;
    height: 34px;
    font-size: 15px;
}

/* WorkmAIte / featured-platform CTA on the homepage — navy gradient panel. */
.fae-wm {
    background: linear-gradient(135deg, var(--fae-navy-2), var(--fae-navy));
    border-radius: 18px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.fae-wm::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .4), transparent 65%);
    pointer-events: none;
}

.fae-wm h3 { color: #fff; }
.fae-wm p { color: #c8d6ea; }
.fae-wm .fae-wm-ic {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(37, 99, 235, .22);
    color: var(--fae-accent-l);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

/* ----------------------------------------------------------------------------
   Footer — navy, white headings, steel body, accent-light hover.
   ------------------------------------------------------------------------- */
.fae-footer {
    background: var(--fae-navy) !important;
    color: #cdd9ea !important;
}

.fae-footer h5 {
    color: #fff !important;
}

.fae-footer a {
    color: #aebfd6 !important;
}

.fae-footer a:hover,
.fae-footer .text-hover-primary:hover {
    color: #fff !important;
}

.fae-footer .text-gray-400,
.fae-footer .text-gray-500,
.fae-footer .text-gray-600 {
    color: #95a8c4 !important;
}

.fae-footer .separator {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.fae-footer-logo {
    height: 40px;
    width: auto;
}

/* ----------------------------------------------------------------------------
   Rendered guide body (Markdig HTML) — comfortable reading rhythm.
   ------------------------------------------------------------------------- */
.fae-guide-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fae-navy);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.fae-guide-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fae-navy);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.fae-guide-body p {
    margin-bottom: 1.1rem;
    line-height: 1.7;
}

.fae-guide-body ul,
.fae-guide-body ol {
    margin-bottom: 1.1rem;
    padding-left: 1.5rem;
}

.fae-guide-body li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.fae-guide-body a {
    color: var(--fae-accent);
    text-decoration: underline;
}

.fae-guide-body blockquote {
    border-left: 3px solid var(--fae-accent);
    padding-left: 1rem;
    color: #334155;
    font-style: italic;
    margin: 1.25rem 0;
}

.fae-guide-body table {
    width: 100%;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
}

.fae-guide-body table th,
.fae-guide-body table td {
    border: 1px solid var(--fae-line);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.fae-guide-body table th {
    background: var(--fae-slate);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .fae-trust-row {
        gap: 16px;
        font-size: 13px;
    }
}