/*
 * SEO Radar theme (NXI brand).
 * Re-skins Bootstrap 5 via CSS custom properties plus a small set of branded
 * component classes. No structural markup is replaced; tests rely on the
 * Bootstrap class names and ids that stay in place.
 */

/* ============================================================ */
/* Font: Outfit (self-hosted variable font, GDPR-friendly)      */
/* ============================================================ */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/outfit-latin-wght-normal-3BR0lLl.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/outfit-latin-ext-wght-normal-6bPR0nO.woff2") format('woff2-variations');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================ */
/* Design tokens, mapped onto Bootstrap variables               */
/* ============================================================ */
:root {
    --bs-primary: #3D79FF;
    --bs-primary-rgb: 61, 121, 255;
    --bs-primary-text-emphasis: #2c5fd6;
    --bs-link-color: #3D79FF;
    --bs-link-color-rgb: 61, 121, 255;
    --bs-link-hover-color: #2c5fd6;
    --bs-link-hover-color-rgb: 44, 95, 214;
    --bs-body-color: #5B6270;
    --bs-body-color-rgb: 91, 98, 112;
    --bs-body-bg: #FFFFFF;
    --bs-body-font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-heading-color: #252C40;
    --bs-border-radius: 5px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: 20px;
    --bs-border-color: #E6E8EC;
    --bs-secondary-color: #8a8f98;

    /* Brand-specific tokens (not part of Bootstrap) */
    --nxi-navy: #252C40;
    --nxi-surface: #F1F2F4;
    --nxi-app-bg: #F7F8FA;
    --nxi-muted: #5B6270;
    --sc-green: #18935F;
    --sc-amber: #D99400;
    --sc-red: #D8392B;
    /* X mark: subtle diagonal sheen over a red/blue/teal architectural gradient */
    --x-fill: repeating-linear-gradient(118deg, rgba(255, 255, 255, .14) 0 7px, rgba(255, 255, 255, 0) 7px 20px),
        linear-gradient(152deg, #E0322B 4%, #3a63e6 44%, #3D79FF 60%, #13a89a 100%);
}

* { -webkit-font-smoothing: antialiased; }

body { font-family: var(--bs-body-font-family); }

/* App pages (authenticated) sit on a light surface; public pages stay white. */
body.app-shell { background: var(--nxi-app-bg); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--nxi-navy);
    font-weight: 500;
    letter-spacing: -.018em;
}
.fw-headline { font-weight: 500; letter-spacing: -.025em; }
.fw-500 { font-weight: 500; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
.navbar a:hover, .btn:hover, .nav-link:hover, .card a:hover, table a:hover { text-decoration: none; }

.text-navy { color: var(--nxi-navy) !important; }
.text-muted2 { color: var(--nxi-muted) !important; }
.bg-surface { background: var(--nxi-surface) !important; }

/* ============================================================ */
/* Buttons                                                      */
/* ============================================================ */
.btn { font-weight: 500; --bs-btn-border-radius: 5px; letter-spacing: .005em; }
.btn-primary {
    --bs-btn-bg: #3D79FF;
    --bs-btn-border-color: #3D79FF;
    --bs-btn-hover-bg: #2f66e6;
    --bs-btn-hover-border-color: #2f66e6;
    --bs-btn-active-bg: #2c5fd6;
    --bs-btn-active-border-color: #2c5fd6;
}
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1.05rem; }

/* ============================================================ */
/* Navbars: public (white) and app (navy)                       */
/* ============================================================ */
.navbar { --bs-navbar-padding-y: .9rem; }
.nav-public { background: #fff; border-bottom: 1px solid #EDEEF1; }
.nav-app { background: var(--nxi-navy); }
.nav-public .nav-link { --bs-navbar-color: #5B6270; --bs-navbar-hover-color: var(--nxi-navy); --bs-navbar-active-color: var(--nxi-navy); font-weight: 500; }
.nav-app .nav-link { --bs-navbar-color: #aeb6c7; --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; font-weight: 500; }
.nav-public .navbar-toggler { color: var(--nxi-navy); border-color: #DDE0E6; }
.nav-app .navbar-toggler { color: #fff; border-color: rgba(255, 255, 255, .22); }

/* Brand lockup with the X mark */
.navbar-brand.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand .bx { width: 30px; height: 30px; }
.brand .bt { display: flex; flex-direction: column; line-height: 1; }
.brand .bt b { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.brand .bt span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; font-weight: 500; }
.nav-public .brand b { color: var(--nxi-navy); }
.nav-public .brand span { color: #9aa0ab; }
.nav-app .brand b { color: #fff; }
.nav-app .brand span { color: #8b93a6; }

/* Locale switcher chrome on the dark navbar */
.nav-app .btn-outline-secondary { --bs-btn-color: #cdd3df; --bs-btn-border-color: rgba(255, 255, 255, .22); --bs-btn-hover-bg: rgba(255, 255, 255, .1); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255, 255, 255, .35); }

/* ============================================================ */
/* X mark                                                       */
/* ============================================================ */
.xmark { position: relative; display: inline-block; }
.xmark i { position: absolute; top: 50%; left: 50%; width: 27%; height: 120%; border-radius: 4px; background: var(--x-fill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.xmark i:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.xmark i:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.xwatermark { position: absolute; pointer-events: none; opacity: .05; }

/* ============================================================ */
/* Cards                                                        */
/* ============================================================ */
.card { --bs-card-border-color: #EAECEF; --bs-card-border-radius: 14px; --bs-card-cap-bg: transparent; --bs-card-bg: #fff; }
.card .card-header { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--nxi-navy); border-bottom: 1px solid #F1F2F4; }
.nxi-card { background: #fff; border: 1px solid #EAECEF; border-radius: 14px; }
.nxi-card-soft { background: var(--nxi-surface); border: 0; border-radius: 18px; }
.card-head { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--nxi-navy); }


/* ============================================================ */
/* KPI tiles                                                    */
/* ============================================================ */
.kpi { background: #fff; border: 1px solid #EAECEF; border-radius: 14px; padding: 20px 22px; height: 100%; }
.kpi .lab { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #6c7280; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.kpi .num { font-size: 42px; font-weight: 600; line-height: 1.05; margin-top: 8px; letter-spacing: -.02em; color: var(--nxi-navy); }
.kpi .ic { margin-left: auto; font-size: 17px; color: #c3c7cf; }

/* ============================================================ */
/* Badges: severity, status, score pill                         */
/* ============================================================ */
.sev { display: inline-flex; align-items: center; font-weight: 600; font-size: 11.5px; line-height: 1; padding: 5px 9px; border-radius: 5px; letter-spacing: .02em; white-space: nowrap; }
.sev-critical { background: #FBE3E1; color: #B3231B; }
.sev-high { background: #FCE8D6; color: #B25410; }
.sev-medium { background: #FBF1D0; color: #8A6800; }
.sev-low { background: #E9EDF3; color: #525a68; }
.sev-info { background: #E4EEFF; color: #2E62D6; }

.stat { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; padding: 5px 10px; border-radius: 20px; letter-spacing: .01em; }
.st-completed { background: #E1F3EA; color: #127A4E; }
.st-running { background: #FFF3D6; color: #9A6B00; }
.st-pending { background: #E9EDF3; color: #525a68; }
.st-failed { background: #FBE3E1; color: #B3231B; }

.scorepill { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 27px; padding: 0 9px; border-radius: 7px; font-weight: 600; font-size: 14px; }
.sp-green { background: #E1F3EA; color: #127A4E; }
.sp-amber { background: #FBF1D0; color: #8A6800; }
.sp-red { background: #FBE3E1; color: #B3231B; }

/* ============================================================ */
/* Score bars                                                   */
/* ============================================================ */
/* Branded slim bar (custom element, used where Bootstrap progress is not asserted) */
.bar { height: 7px; border-radius: 6px; background: #EBEDF1; overflow: hidden; margin-top: 13px; }
.bar > i { display: block; height: 100%; border-radius: 6px; }
.bar-green > i { background: var(--sc-green); }
.bar-amber > i { background: var(--sc-amber); }
.bar-red > i { background: var(--sc-red); }
.bar-blue > i { background: #3D79FF; }

/* Themed Bootstrap progress (kept where templates use .progress / .progress-bar) */
.progress { --bs-progress-height: 7px; --bs-progress-bg: #EBEDF1; --bs-progress-border-radius: 6px; --bs-progress-bar-bg: var(--bs-primary); }
.progress-bar.is-red { background-color: var(--sc-red); }
.progress-bar.is-amber { background-color: var(--sc-amber); }
.progress-bar.is-green { background-color: var(--sc-green); }

.score-red { color: var(--sc-red) !important; }
.score-amber { color: var(--sc-amber) !important; }
.score-green { color: var(--sc-green) !important; }

/* ============================================================ */
/* Category cards (report)                                      */
/* ============================================================ */
.cat-card { background: #fff; border: 1px solid #EAECEF; border-radius: 13px; padding: 18px 20px; height: 100%; }
.cat-card .cat-name { font-size: 13.5px; font-weight: 500; color: var(--nxi-muted); }
.cat-card .cat-score { font-size: 30px; font-weight: 600; color: var(--nxi-navy); letter-spacing: -.02em; }
.cat-card .cat-of { font-size: 13px; color: #767c87; font-weight: 500; }
a.cat-card:hover, a.cat-card:focus-visible { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15); }
/* Report anchor targets stop short of the top edge so the heading stays readable after a jump;
   the sections receive focus programmatically and must not show a focus ring. */
.tab-content [id]:target, .tab-content [tabindex="-1"] { scroll-margin-top: 1.5rem; }
.tab-content [tabindex="-1"]:focus { outline: none; }
abbr.abbr-help { text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }

/* ============================================================ */
/* Findings accordion (Bootstrap accordion, re-skinned)         */
/* ============================================================ */
.accordion { --bs-accordion-border-color: #EFF0F3; --bs-accordion-btn-color: var(--nxi-navy); --bs-accordion-active-color: var(--nxi-navy); --bs-accordion-active-bg: transparent; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-btn-bg: transparent; --bs-accordion-bg: transparent; }
.accordion-button { font-size: 14.5px; font-weight: 500; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-flush > .accordion-item { border-left: 0; border-right: 0; }

/* "What works" callout */
.goodbox { background: #F1F8F3; border: 1px solid #DCEDE2; border-radius: 13px; padding: 18px 20px; }
.goodbox h6 { color: #127A4E; font-size: 13px; font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.goodbox ul { margin: 0; padding-left: 18px; }
.goodbox li { font-size: 13.5px; color: #4a5560; margin-bottom: 9px; line-height: 1.55; }

/* Highlight boxes (key findings / quick wins) */
.hl-box { border-radius: 14px; padding: 24px 26px; height: 100%; }
.hl-key { background: #FBF8EF; border: 1px solid #F0E6CC; }
.hl-quick { background: #F0F5FF; border: 1px solid #D9E5FF; }
.hl-box h5 { font-size: 16px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.hl-box ul { margin: 0; padding-left: 19px; }
.hl-box li { font-size: 14px; color: #4f5663; line-height: 1.6; margin-bottom: 11px; }
.hl-key h5 { color: #9A6B00; }
.hl-quick h5 { color: #2c5fd6; }

/* Action-plan phases */
.phase { border: 1px solid #EAECEF; border-radius: 13px; overflow: hidden; }
.phase-head { background: var(--nxi-surface); padding: 14px 22px; display: flex; align-items: center; }
.phase-head .pn { font-size: 14.5px; font-weight: 600; color: var(--nxi-navy); }
.phase-head .pt { margin-left: auto; font-size: 12.5px; color: #8a8f98; font-weight: 500; }
.phase-body { padding: 6px 22px 8px; }
.phase-body .pm { padding: 13px 0; border-bottom: 1px solid #F1F2F4; font-size: 14.5px; color: #4f5663; line-height: 1.55; display: flex; gap: 12px; }
.phase-body .pm:last-child { border-bottom: 0; }
.phase-body .pm .dot { color: #3D79FF; margin-top: 2px; }

/* ============================================================ */
/* Tables (Bootstrap .table + .table-nxi modifier)              */
/* ============================================================ */
.table-nxi { --bs-table-bg: transparent; margin: 0; }
.table-nxi > thead > tr > th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #6c7280; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid #EBEDF1; }
.table-nxi > tbody > tr > td { padding: 13px 12px; border-bottom: 1px solid #F1F2F4; font-size: 14px; color: #4f5663; vertical-align: middle; }
.table-nxi > tbody > tr:last-child > td { border-bottom: 0; }

/* ============================================================ */
/* Landing-page bits                                            */
/* ============================================================ */
/* Modelled on nxiglobal.com: left-aligned headings, sentence-case blue eyebrows,
   flat grey cards and full-bleed grey bands. */
.lp { font-weight: 300; }
.lp-hero { padding: clamp(3rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 6rem); }
.lp-hero-x { position: absolute; width: 620px; height: 620px; right: -150px; top: 50%; transform: translateY(-50%); opacity: .9; }
.lp-title { font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; }
.lp-lead { font-size: 1.25rem; max-width: 640px; }
.lp-eyebrow { color: var(--bs-primary); font-size: 1.125rem; font-weight: 400; margin-bottom: .75rem; }
.lp-section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.lp-h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 500; margin-bottom: 1rem; }
.lp-intro { font-size: 1.125rem; max-width: 640px; }
.lp-band { background: var(--nxi-surface); padding: clamp(3rem, 6vw, 5.5rem) 0; }
.lp-step { font-size: 3rem; font-weight: 500; line-height: 1; color: var(--bs-primary); letter-spacing: -.02em; }
.lp-contact-card { background: #fff; border-radius: 6px; padding: 32px; }
.lp .btn { --bs-btn-border-radius: 3px; }
.lp .accordion-button { font-size: 1.05rem; }

.feature-card { background: var(--nxi-surface); border: 0; border-radius: 6px; padding: 30px; height: 100%; }
.feat-ic { display: block; color: var(--bs-primary); font-size: 26px; margin-bottom: 18px; }

/* Audit-start checkboxes */
.aud-chk { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--nxi-navy); font-weight: 500; cursor: pointer; padding: 7px 0; margin: 0; }
.aud-chk input { position: absolute; opacity: 0; pointer-events: none; }
.aud-chk .box { width: 20px; height: 20px; flex: 0 0 20px; border: 1.5px solid #CBD0D8; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; transition: all .12s ease; }
.aud-chk input:checked + .box { background: #3D79FF; border-color: #3D79FF; }
.aud-chk .box i { opacity: 0; transform: scale(.6); transition: all .12s ease; }
.aud-chk input:checked + .box i { opacity: 1; transform: scale(1); }
.aud-chk input:focus-visible + .box { outline: 2px solid rgba(61, 121, 255, .5); outline-offset: 2px; }

/* ============================================================ */
/* Skeleton loading (live components)                           */
/* ============================================================ */
.skel { background: linear-gradient(100deg, #EEF0F3 30%, #F6F7F9 50%, #EEF0F3 70%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 6px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================================ */
/* Markdown editor (EasyMDE), aligned with Bootstrap form fields */
/* ============================================================ */
.EasyMDEContainer .CodeMirror,
.editor-toolbar { border-color: var(--bs-border-color); }
.editor-toolbar { border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0; background: var(--bs-tertiary-bg, #F7F8FA); opacity: 1; }
.EasyMDEContainer .CodeMirror { border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); color: var(--bs-body-color); font-size: 14px; }
.EasyMDEContainer .CodeMirror-focused { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.editor-toolbar button { color: var(--bs-body-color); border-radius: var(--bs-border-radius-sm); }
.editor-toolbar button:hover, .editor-toolbar button.active { background: #fff; border-color: var(--bs-border-color); color: var(--bs-primary); }
.editor-statusbar { color: var(--bs-secondary-color); font-size: 12px; padding-right: 0; }
/* Fullscreen and side-by-side lift out of the form, so clear the navbar. */
.EasyMDEContainer .CodeMirror-fullscreen, .EasyMDEContainer .editor-preview-side { z-index: 1030; }

/* ============================================================ */
/* Reduced motion                                               */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .skel { animation: none; }
}