@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* ==========================================================================
   Site footer refresh
   CSS-only - footer markup in _Layout.cshtml is untouched.
   Deepens toward the bottom so the page resolves instead of stopping dead,
   and paints html/body so there is never a white strip below the footer.
   ========================================================================== */

:root {
    --vf-top: #241C4E;
    --vf-bottom: #140F2E;
    --vf-line: rgba(255, 255, 255, .10);
    --vf-text: #B9B3D0;
    --vf-heading: #FFFFFF;
    --vf-coral: #E6594C;
    --vf-gold: #FAB554;
    --vf-grape: #665998;
    --vf-blackberry: #2E2155;
}

/* No white strip below the footer.
   html paints the canvas (everything past the end of <body>), body stays white
   so light pages are unaffected. An explicit background on html stops body's
   background from propagating to the canvas, which is what we want here. */
html { background-color: var(--vf-bottom); }
body { background-color: #FFFFFF; }

/* ---------- Shell ---------- */

.footer {
    position: relative;
    background: linear-gradient(180deg, var(--vf-top) 0%, var(--vf-bottom) 100%);
    color: var(--vf-text);
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    margin: 0;
}

/* brand hairline along the top edge - mirrors the header */
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vf-blackberry), var(--vf-grape) 42%, var(--vf-coral) 72%, var(--vf-gold));
    opacity: .85;
}

.footer_nav {
    padding: 48px 0 8px;
}

.footer_nav > .container {
    /* overrides Bootstrap 3's fixed .container width - see site-header.css */
    width: 100%;
    max-width: var(--vd-shell-max, 2240px);
    margin: 0 auto;
    padding: 0 var(--vd-gutter, 24px);
}

/* Logo + link row (FooterDark in public-landing-v2.jsx). */
.footer_nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

/* VeradigmDeveloperPortalLogo.png is baked with an opaque white background
   (not transparent) - dropped straight onto the dark footer gradient it reads
   as a stray white rectangle. Giving it its own rounded white chip instead
   makes the same background look deliberate. */
.footer_logo {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.footer_logo img {
    display: block;
    height: 26px;
    width: auto;
}

.footer_nav-row ul {
    margin: 0;
    text-align: right;
}

/* ---------- Link row ---------- */

.footer ul {
    margin: 0 0 20px;
    padding: 0;
    text-align: center;
    list-style: none;
}

.footer ul li {
    display: inline-block;
    padding: 0;
    margin: 0 4px;
}

.footer ul li a {
    display: inline-block;
    color: var(--vf-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    padding: 9px 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: color .16s ease, background-color .16s ease;
}

.footer ul li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
}

/* ---------- Social row ---------- */

.footer ul li a:has(img) {
    padding: 0;
    border-radius: 50%;
}

.footer ul li img {
    display: block;
    width: 30px;
    height: 30px;
    padding: 8px;
    box-sizing: content-box;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--vf-line);
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.footer ul li a:hover img {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-2px);
}

/* ---------- Copyright bar ---------- */

.footer_copyright {
    background: transparent;
    border-top: 1px solid var(--vf-line);
    max-width: var(--vd-shell-max, 2240px);
    margin: 16px auto 0;
    padding: 20px var(--vd-gutter, 24px) 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: #9A94B4;
    text-align: left;
}

/* the markup wraps the copyright line in a bare <div> */
.footer_copyright > div {
    float: none;
    padding: 0;
    margin: 0;
}

.footer_copyright > div p {
    margin: 0;
    font-size: 12.5px;
    color: #9A94B4 !important;
    text-align: left !important;
    line-height: 1.5;
}

.footer_copyright ul {
    margin: 0;
    text-align: right;
}

.footer_copyright ul li {
    padding: 0;
    margin: 0 0 0 6px;
}

.footer_copyright ul li a {
    color: #9A94B4;
    font-size: 12.5px;
    font-weight: 400;
    padding: 6px 10px;
}

.footer_copyright ul li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .footer_nav { padding: 36px 0 4px; }

    .footer_copyright {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: 26px;
    }

    .footer_copyright > div p { text-align: center !important; }
    .footer_copyright ul { text-align: center; }
    .footer ul li { margin: 0 2px; }
    .footer ul li a { padding: 8px 11px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .footer * { transition: none !important; }
}