/* ============================================================================
   Software4.net — Header & Footer premium layer (site-wide)
   ----------------------------------------------------------------------------
   Loaded from _Layout, so this applies to every public page. Deliberately
   CSS-only: the nav contains role-aware links (Portal / Admin / Sign In) and
   active-state logic bound to route data, and the footer carries every
   published internal link — all of which is SEO and auth-sensitive markup
   that shouldn't be restructured for a visual change.

   site.js already toggles `.scrolled` on #mainNav past 60px, so the
   transparent-over-hero -> solid-glass transition the brief asks for needs
   styling only, not new script.
   ========================================================================== */

/* ── Header ──────────────────────────────────────────────────────────── */
.navbar-s4 {
    padding: .85rem 0 !important;
    transition: background .32s ease, backdrop-filter .32s ease,
                box-shadow .32s ease, padding .32s ease, border-color .32s ease;
    border-bottom: 1px solid transparent;
}
.navbar-s4.scrolled {
    background: rgba(7, 26, 51, .78) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: rgba(255,255,255,.09);
    box-shadow: 0 10px 34px -18px rgba(0,0,0,.75);
    padding: .55rem 0 !important;
}

.navbar-s4 .navbar-brand img,
.navbar-s4 .navbar-brand svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.navbar-s4 .navbar-brand:hover img,
.navbar-s4 .navbar-brand:hover svg { transform: scale(1.03); }

/* Nav links — quiet at rest, with an underline that grows from the centre. */
.navbar-s4 .nav-link {
    position: relative;
    font-size: .89rem !important;
    font-weight: 550 !important;
    letter-spacing: -.005em;
    padding: .5rem .85rem !important;
    color: rgba(255,255,255,.78) !important;
    transition: color .24s ease;
}
.navbar-s4 .nav-link:hover { color: #fff !important; }
/* site.css already animates this underline with transform: scaleX(0 -> 1)
   and positions it with left/right. Deliberately NOT re-implementing it with
   width/translateX here — its own :hover::after{transform:scaleX(1)} rule
   would override the centring transform and the underline would jump. So
   this only restyles the existing mechanism: gradient fill, softer easing,
   and no underline under the pill CTA. */
.navbar-s4 .nav-link::after {
    background: linear-gradient(90deg, #18BFE8, #1677FF) !important;
    height: 2px; border-radius: 2px;
    transform-origin: center;
    transition: transform .3s cubic-bezier(.22,1,.36,1) !important;
}
.navbar-s4 .btn-nav-cta::after { display: none !important; }
.navbar-s4 .nav-link.active { color: #fff !important; font-weight: 650 !important; }

/* Primary CTA in the nav */
.navbar-s4 .btn-nav-cta {
    background: linear-gradient(135deg, #1677FF, #0E5FD8) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: .55rem 1.15rem !important;
    font-weight: 650 !important; font-size: .855rem !important;
    box-shadow: 0 8px 22px -10px rgba(22,119,255,.85);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.navbar-s4 .btn-nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(22,119,255,.95);
    color: #fff !important;
}

/* Services dropdown */
.navbar-s4 .dropdown-menu {
    background: rgba(9, 22, 40, .95);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: .5rem;
    box-shadow: 0 22px 48px -20px rgba(0,0,0,.8);
    margin-top: .6rem !important;
}
.navbar-s4 .dropdown-item {
    color: rgba(255,255,255,.78);
    border-radius: 8px;
    padding: .55rem .8rem;
    font-size: .855rem;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.navbar-s4 .dropdown-item:hover {
    background: rgba(22,119,255,.16);
    color: #fff;
    transform: translateX(2px);
}

.navbar-s4 .navbar-toggler {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px; padding: .35rem .6rem;
}
.navbar-s4 .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(24,191,232,.28); }

/* Mobile: the collapsed menu needs its own surface — over a hero image the
   links would otherwise sit on whatever happens to be behind them. */
@media (max-width: 991.98px) {
    .navbar-s4 .navbar-collapse {
        background: rgba(7, 26, 51, .96);
        backdrop-filter: blur(18px);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 14px;
        margin-top: .7rem;
        padding: .8rem;
        box-shadow: 0 24px 50px -22px rgba(0,0,0,.8);
    }
    .navbar-s4 .nav-link { padding: .68rem .8rem !important; }
    .navbar-s4 .nav-link:not(.btn-nav-cta)::after { display: none; }
    .navbar-s4 .nav-link.active { background: rgba(22,119,255,.14); border-radius: 8px; }
    .navbar-s4 .btn-nav-cta { display: block; text-align: center; margin-top: .5rem; }
    .navbar-s4 .dropdown-menu { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
}

.navbar-s4 .nav-link:focus-visible,
.navbar-s4 .navbar-brand:focus-visible {
    outline: 2px solid #18BFE8; outline-offset: 3px; border-radius: 6px;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
    position: relative;
    background: linear-gradient(180deg, #050F1F 0%, #071A33 100%) !important;
    padding-top: clamp(3rem, 5vw, 4.5rem) !important;
}
footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(24,191,232,.45), transparent);
}

footer h5, footer h6, footer .footer-heading {
    font-size: .705rem !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase;
    color: rgba(255,255,255,.5) !important;
    margin-bottom: 1.1rem !important;
}
footer p, footer li, footer address { color: rgba(255,255,255,.6); line-height: 1.75; }

footer a {
    color: rgba(255,255,255,.66);
    text-decoration: none;
    font-size: .875rem;
    display: inline-block;
    transition: color .22s ease, transform .22s ease;
}
footer a:hover { color: #fff; transform: translateX(3px); }
footer ul li + li { margin-top: .55rem; }

/* Social icons */
footer .social-icon,
footer .footer-social a {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    transition: background .25s ease, border-color .25s ease,
                color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
footer .social-icon:hover,
footer .footer-social a:hover {
    background: rgba(22,119,255,.18);
    border-color: rgba(22,119,255,.45);
    color: #fff;
    transform: translateY(-2px);
}

/* Contact rows keep their icons aligned with the text baseline. */
footer .fa-map-marker-alt, footer .fa-phone,
footer .fa-envelope, footer .fa-globe { color: #18BFE8; width: 16px; }

/* Bottom bar */
footer hr { border-color: rgba(255,255,255,.09) !important; opacity: 1 !important; }
footer .footer-bottom,
footer > div:last-child { border-top: 1px solid rgba(255,255,255,.09); }
footer .footer-bottom a, footer > div:last-child a {
    font-size: .8rem; color: rgba(255,255,255,.55);
}
footer .footer-bottom a:hover, footer > div:last-child a:hover { color: #18BFE8; }

footer a:focus-visible { outline: 2px solid #18BFE8; outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    .navbar-s4, .navbar-s4 .nav-link::after,
    footer a, footer .social-icon { transition: none !important; }
    .navbar-s4 .btn-nav-cta:hover, footer a:hover,
    footer .social-icon:hover, footer .footer-social a:hover { transform: none; }
}