/* ============================================================================
   SHILI Accounting and Consultants — Immersive CHROME (v2 — Pearl Trust light)
   ----------------------------------------------------------------------------
   Light-theme navbar + footer overrides. Navbar lives outside .skb-immersive,
   so these rules use hard-coded Pearl Trust values:
     pearl #f7f9fc · surface #ffffff · ink #0e1a35 · muted #5a6878 ·
     blue #4f87e0 · baby-deep #7ab3ef · mint-deep #5cc191 ·
     hairline rgba(45,108,223,0.12)
   Load LAST in index.html so it wins over app.css base rules.
   ========================================================================== */


/* ============================================================================
   NAVBAR — translucent white glass at rest, solid + shadow when scrolled
   ========================================================================== */
nav.skb-navbar {
    background: rgba(255, 255, 255, 0.78) !important;
    background-color: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(45, 108, 223, 0.08);
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
}

    nav.skb-navbar.scrolled {
        background: rgba(255, 255, 255, 0.95) !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        border-bottom: 1px solid rgba(45, 108, 223, 0.14);
        box-shadow: 0 8px 28px rgba(14, 26, 53, 0.06);
    }

    /* Logo */
    nav.skb-navbar .nav-logo-main {
        color: #0e1a35 !important;
        text-shadow: none;
    }

    nav.skb-navbar .nav-logo-sub {
        color: #5cc191 !important;
    }

    /* Desktop links */
    nav.skb-navbar .nav-item-link {
        color: #1d2b4a !important;
        text-shadow: none;
        transition: background 0.25s, color 0.25s;
    }

        nav.skb-navbar .nav-item-link i {
            color: #5cc191 !important;
            opacity: 1;
        }

        nav.skb-navbar .nav-item-link:hover {
            color: #2d6cdf !important;
            background: rgba(45, 108, 223, 0.08) !important;
        }

        nav.skb-navbar .nav-item-link.active {
            color: #2d6cdf !important;
            background: rgba(45, 108, 223, 0.12) !important;
        }

            nav.skb-navbar .nav-item-link.active i {
                color: #2d6cdf !important;
            }

    /* CTA button — soft royal blue + white text */
    nav.skb-navbar .nav-cta-btn {
        color: #ffffff !important;
        background: #4f87e0 !important;
        box-shadow: 0 6px 20px rgba(79, 135, 224, 0.32);
    }

        nav.skb-navbar .nav-cta-btn:hover {
            transform: translateY(-2px);
            background: #6c9beb !important;
            box-shadow: 0 12px 32px rgba(79, 135, 224, 0.45);
        }

    /* Hamburger */
    nav.skb-navbar .nav-hamburger span {
        background: #0e1a35 !important;
    }

    /* Mobile menu */
    nav.skb-navbar .nav-mobile-menu {
        background: rgba(255, 255, 255, 0.97) !important;
        background-color: rgba(255, 255, 255, 0.97) !important;
        border-top: 1px solid rgba(45, 108, 223, 0.14);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
    }

    nav.skb-navbar .nav-mobile-link {
        color: #1d2b4a !important;
    }

        nav.skb-navbar .nav-mobile-link i {
            color: #5cc191 !important;
        }

        nav.skb-navbar .nav-mobile-link:hover,
        nav.skb-navbar .nav-mobile-link.active {
            color: #2d6cdf !important;
            background: rgba(45, 108, 223, 0.08) !important;
        }


/* ============================================================================
   FOOTER — light pearl with baby-blue → mint hairline at top
   ========================================================================== */
.skb-footer-new {
    background: #eef3f9;
    color: #5a6878;
    position: relative;
    border-top: 1px solid rgba(45, 108, 223, 0.12);
}

    /* Footer column layout — brand block wider, then 4 link/content columns.
   Explicit override so the added "Latest Insights" column lays out cleanly
   regardless of the app.css base grid. */
    .skb-footer-new .sfn-container {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1.3fr 1.3fr;
        gap: 40px;
        align-items: start;
    }

@media (max-width: 1100px) {
    .skb-footer-new .sfn-container {
        grid-template-columns: 1fr 1fr;
        gap: 36px 32px;
    }
}

@media (max-width: 600px) {
    .skb-footer-new .sfn-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.skb-footer-new::before {
    /* Glowing top edge — brand gradient */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(122, 179, 239, 0.85), rgba(94, 193, 145, 0.70), transparent);
}

.skb-footer-new::after {
    /* Subtle ambient glow */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 80% at 18% 0%, rgba(168, 212, 255, 0.20), transparent 60%), radial-gradient(40% 60% at 82% 100%, rgba(158, 229, 192, 0.14), transparent 60%);
}

.skb-footer-new .sfn-main,
.skb-footer-new .sfn-bottom-inner,
.skb-footer-new .sfn-compliance {
    position: relative;
    z-index: 1;
}

/* Brand block */
.skb-footer-new .sfn-logo-main {
    color: #0e1a35;
}

.skb-footer-new .sfn-logo-sub {
    color: #5cc191;
}

.skb-footer-new .sfn-desc {
    color: #5a6878;
}

.skb-footer-new .sfn-reg i,
.skb-footer-new .sfn-partner-note i {
    color: #5cc191;
}

.skb-footer-new .sfn-partner-note {
    color: #5a6878;
}

    .skb-footer-new .sfn-partner-note strong {
        color: #0e1a35;
    }

/* Social links */
.skb-footer-new .sfn-socials {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.skb-footer-new .sfn-social {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid rgba(45, 108, 223, 0.14);
    color: #2d6cdf;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.22s cubic-bezier(.22,1,.36,1), border-color 0.22s, color 0.22s, box-shadow 0.22s;
}

    .skb-footer-new .sfn-social:hover {
        transform: translateY(-2px);
        border-color: rgba(94, 193, 145, 0.45);
        color: #5cc191;
        box-shadow: 0 8px 20px rgba(14, 26, 53, 0.08);
    }


/* Column headings + links */
.skb-footer-new .sfn-col h4 {
    color: #0e1a35;
}

    .skb-footer-new .sfn-col h4 i {
        color: #5cc191;
    }

.skb-footer-new .sfn-col a {
    color: #5a6878;
    transition: color 0.2s;
}

    .skb-footer-new .sfn-col a i {
        color: rgba(122, 179, 239, 0.85);
    }

    .skb-footer-new .sfn-col a:hover {
        color: #2d6cdf;
    }

        .skb-footer-new .sfn-col a:hover i {
            color: #5cc191;
        }

/* Contact rows */
.skb-footer-new .sfn-ci {
    color: #5cc191;
}

.skb-footer-new .sfn-contact-row {
    color: #5a6878;
}

    .skb-footer-new .sfn-contact-row a {
        color: #1d2b4a;
        transition: color 0.2s;
    }

        .skb-footer-new .sfn-contact-row a:hover {
            color: #2d6cdf;
        }


/* ============================================================================
   COMPLIANCE STRIP  — six regulator badges + foot-note
   ----------------------------------------------------------------------------
   New section: dedicated band between the main footer columns and the bottom
   copyright row, carrying the firm's Namibian regulatory registrations.
   ========================================================================== */
.skb-footer-new .sfn-compliance {
    padding: 36px 0 30px;
    margin-top: 12px;
    border-top: 1px solid rgba(45, 108, 223, 0.12);
    border-bottom: 1px solid rgba(45, 108, 223, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0));
}

.skb-footer-new .sfn-comp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-bottom: 22px;
}

.skb-footer-new .sfn-comp-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #5cc191;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .skb-footer-new .sfn-comp-eyebrow i {
        color: #5cc191;
        font-size: 1rem;
    }

.skb-footer-new .sfn-comp-sub {
    font-size: 0.82rem;
    color: #5a6878;
}

.skb-footer-new .sfn-comp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.skb-footer-new .sfn-comp-item {
    padding: 16px 18px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s, border-color 0.25s;
}

    .skb-footer-new .sfn-comp-item:hover {
        transform: translateY(-2px);
        border-color: rgba(94, 193, 145, 0.40);
        box-shadow: 0 10px 28px rgba(14, 26, 53, 0.08);
    }

.skb-footer-new .sfn-comp-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2d6cdf;
}

.skb-footer-new .sfn-comp-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0e1a35;
    line-height: 1.35;
}

.skb-footer-new .sfn-comp-meta {
    font-size: 0.72rem;
    color: #8a98ac;
    line-height: 1.4;
}

.skb-footer-new .sfn-comp-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed rgba(45, 108, 223, 0.16);
    color: #5a6878;
    font-size: 0.78rem;
    line-height: 1.65;
    max-width: 920px;
}

    .skb-footer-new .sfn-comp-foot i {
        color: #4f87e0;
        margin-right: 6px;
    }


/* Bottom row tagline */
.skb-footer-new .sfn-tagline {
    color: #5a6878;
}

    .skb-footer-new .sfn-tagline i {
        color: #5cc191;
    }

.skb-footer-new .sfn-bottom {
    color: #5a6878;
}


/* ============================================================================
   LATEST INSIGHTS COLUMN  (.sfn-insight*)
   ========================================================================== */
.skb-footer-new .sfn-insight {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(45, 108, 223, 0.08);
    text-decoration: none;
    transition: padding-left 0.25s cubic-bezier(.22,1,.36,1);
}

    .skb-footer-new .sfn-insight:hover {
        padding-left: 6px;
    }

.skb-footer-new .sfn-insight-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5cc191;
    margin-bottom: 5px;
}

.skb-footer-new .sfn-insight-title {
    display: block;
    font-size: 0.84rem;
    line-height: 1.4;
    color: #1d2b4a;
    font-weight: 600;
    transition: color 0.2s;
}

.skb-footer-new .sfn-insight:hover .sfn-insight-title {
    color: #2d6cdf;
}

.skb-footer-new .sfn-insight-date {
    display: block;
    font-size: 0.72rem;
    color: #8a98ac;
    margin-top: 4px;
}

.skb-footer-new .sfn-insight-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: #4f87e0;
    text-decoration: none;
    transition: gap 0.25s;
}

    .skb-footer-new .sfn-insight-all:hover {
        gap: 11px;
    }


/* ============================================================================
   NEWSLETTER MINI-FORM  (.sfn-news*)
   ========================================================================== */
.skb-footer-new .sfn-news {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(45, 108, 223, 0.10);
}

.skb-footer-new .sfn-news-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d2b4a;
    margin-bottom: 10px;
}

.skb-footer-new .sfn-news-row {
    display: flex;
    gap: 8px;
}

.skb-footer-new .sfn-news-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(45, 108, 223, 0.18);
    color: #0e1a35;
    font-family: inherit;
    font-size: 0.86rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .skb-footer-new .sfn-news-input::placeholder {
        color: #8a98ac;
    }

    .skb-footer-new .sfn-news-input:focus {
        outline: none;
        border-color: #5cc191;
        box-shadow: 0 0 0 3px rgba(94, 193, 145, 0.18);
    }

.skb-footer-new .sfn-news-btn {
    flex-shrink: 0;
    width: 42px;
    border: none;
    border-radius: 10px;
    background: #4f87e0;
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s, transform 0.2s;
}

    .skb-footer-new .sfn-news-btn:hover {
        background: #6c9beb;
        transform: translateY(-1px);
    }

.skb-footer-new .sfn-news-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #1d2b4a;
}

    .skb-footer-new .sfn-news-ok i {
        color: #5cc191;
        font-size: 1.1rem;
    }


/* ============================================================================
   COMPLIANCE STRIP — responsive collapse
   ========================================================================== */
@media (max-width: 1200px) {
    .skb-footer-new .sfn-comp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .skb-footer-new .sfn-comp-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skb-footer-new .sfn-comp-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 460px) {
    .skb-footer-new .sfn-comp-grid {
        grid-template-columns: 1fr;
    }
}