/* ===========================================================
   BNP CORPS — brand layer
   -----------------------------------------------------------
   Loaded after default.css. The s007 template shipped a teal
   palette (#45bbbd / #2582bf) with a yellow highlight; this
   sheet replaces those surfaces with the identity palette taken
   from the logo mark and app icon.

   Colours are sampled from the brand artwork:
     dark band on the identity board  #041830
     icon tile                        #0170D4
     ribbon highlight                 #01C3FC

   Nothing here changes layout — only colour, the logo lockup
   and focus states. To restyle, edit the variables below.
   =========================================================== */

:root {
    --bnp-navy-900: #041830;   /* deepest sections, footer */
    --bnp-navy-800: #072348;   /* panels on dark */
    --bnp-navy-700: #0C3568;   /* borders on dark */
    --bnp-blue: #0170D4;       /* primary */
    --bnp-blue-600: #0A62B8;   /* primary, pressed */
    --bnp-cyan: #16B5F5;       /* accent */
    --bnp-cyan-400: #01C3FC;   /* accent, bright */
    --bnp-ink: #07224A;        /* headings on light */
    --bnp-mist: #F5F8FB;       /* light panel */

    --bnp-gradient: linear-gradient(120deg, var(--bnp-blue-600) 0%, var(--bnp-cyan-400) 100%);
    --bnp-gradient-soft: linear-gradient(120deg, rgba(1, 112, 212, .12) 0%, rgba(1, 195, 252, .12) 100%);
    --bnp-glow: 0 18px 38px -14px rgba(1, 112, 212, .55);
}

/* ---------- dark sections -------------------------------- */
html.sticky-header-active #header.header-transparent .header-body:before,
html.sub-header #header .header-body:before,
html #header:hover .header-body:before {
    background: var(--bnp-navy-900) !important;
}

#ms2,
#contactBottom {
    background-color: var(--bnp-navy-900);
}

/* A faint brand wash so the two dark bands are not flat black. */
#ms2:before,
#contactBottom:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 15% 0%, rgba(1, 112, 212, .30), transparent 70%),
        radial-gradient(50% 70% at 90% 100%, rgba(1, 195, 252, .18), transparent 70%);
}
#ms2 > *,
#contactBottom > * {
    position: relative;
    z-index: 1;
}

footer#footer {
    background-color: var(--bnp-navy-900);
}

/* ---------- navigation ----------------------------------- */
#header .header-nav-main nav > ul > li.open > a,
#header .header-nav-main nav > ul > li:hover > a,
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover,
.mobile-side-menu li a.act .front {
    color: var(--bnp-cyan) !important;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
    border-color: var(--bnp-cyan);
}

/* The template's yellow "important" flag is off-brand. */
#header .header-nav-main nav > ul > li.imp > a span {
    background-color: var(--bnp-cyan-400);
    color: var(--bnp-navy-900);
}
#header .header-nav-main nav > ul > li.imp > a span:after {
    border-color: transparent transparent var(--bnp-cyan-400) transparent;
}

/* ---------- buttons -------------------------------------- */
.btnWrp .btnItem {
    background: var(--bnp-gradient);
    border-radius: 6px;
    transition: box-shadow .3s ease, transform .3s ease;
}
.btnWrp .btnItem:hover {
    box-shadow: var(--bnp-glow);
    transform: translateY(-1px);
}

.btnWrp .btnItem.w {
    background: #fff;
    color: var(--bnp-ink);
}
.btnWrp .btnItem.w:hover {
    border-color: var(--bnp-blue);
}
.btnWrp .btnItem.w span,
.btnWrp .btnItem.dk span,
.btnWrp .btnItem span {
    background-color: var(--bnp-blue);
}

.btnWrp .btnItem.dk {
    background-color: var(--bnp-navy-800);
    border-color: var(--bnp-navy-800);
}
.btnWrp .btnItem.dk:hover {
    border-color: var(--bnp-cyan);
}

/* ---------- accents on cards and lists -------------------- */
.lists .item:hover {
    border-color: var(--bnp-cyan);
}

#ms2 .iconSet .iconItem .icon .chk_icon,
#processIcons .icon .icon_con .num,
#contactBottom .mtit .tt span .que {
    background: rgba(1, 112, 212, .88);
    border: 2px solid var(--bnp-cyan-400);
}

#qnaWrp .qnaItem.act .qna_q {
    background-color: var(--bnp-blue);
}

/* ---------- logo lockup ----------------------------------- */
/* The mark carries its own gradient, so it sits on both the
   transparent header and the navy footer without a variant. */
.logo_div span.before,
.logo_div span.after,
.footer_logo_div span {
    font-weight: 800;
    letter-spacing: .02em;
}

/* ---------- focus ----------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--bnp-cyan-400);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---------- text selection -------------------------------- */
::selection {
    background: rgba(1, 195, 252, .28);
    color: var(--bnp-ink);
}