/* ==========================================================================
   Site shell (v3) - the header and the footer on every public page

   One white bar on top (logo, five links, the phone, Login and Sign Up) and a
   deep-navy footer underneath, matching the new home page. Loaded after
   redesign.css, header.css, footer.css and palette.css, whose rules for the
   same selectors it replaces; the markup hooks (.site-header, .primary-nav,
   .nav-toggle, .nav-close, .overlay) are unchanged, so the mobile drawer
   script in layouts/web/partials/script.blade.php keeps working.
   ========================================================================== */

:root {
    --shell-navy:  #0b2559;
    --shell-blue:  #1a62f0;
    --shell-blue2: #0b4bd0;
    --shell-line:  #e0e9f7;
    --shell-mute:  #5b6f94;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--shell-line);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.site-header.is-scrolled { box-shadow: 0 8px 26px rgba(14, 54, 140, .10); }

.site-header .header-main__inner { gap: 28px; padding: 12px 0; min-height: 72px; }
.site-header .brand img { max-height: 42px; }

.site-header .primary-nav { justify-content: center; }
.site-header .nav-links { gap: 4px; }

.site-header .nav-links a {
    padding: 9px 15px;
    border-radius: 8px;
    font-size: .92rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--shell-navy);
}
.site-header .nav-links a::after {
    bottom: 0;
    height: 2.5px;
    background: var(--shell-blue);
}
.site-header .nav-links a:hover,
.site-header .nav-links a.active { color: var(--shell-blue); }

/* ---- right side ---- */
.site-header .header-cta { gap: 12px; }

.site-header .header-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1.5px solid #b9cffa;
    border-radius: 10px;
    background: #fff;
    font-size: .88rem;
    font-weight: 700;
    color: var(--shell-navy);
    white-space: nowrap;
    transition: border-color .16s ease, background .16s ease;
}
.site-header .header-phone i { color: var(--shell-blue); font-size: .85rem; }
.site-header .header-phone:hover { border-color: var(--shell-blue); background: #f3f8ff; }

.site-header .btn-ghost {
    padding: 9px 22px;
    border: 1.5px solid var(--shell-blue);
    border-radius: 10px;
    background: #fff;
    font-size: .9rem;
    font-weight: 700;
    color: var(--shell-blue);
}
.site-header .btn-ghost:hover { background: var(--shell-blue); color: #fff; }

.site-header .btn-grad {
    padding: 10px 24px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: linear-gradient(135deg, #2a78ff 0%, var(--shell-blue2) 100%);
    font-size: .9rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(26, 98, 240, .30);
}
.site-header .btn-grad:hover { box-shadow: 0 12px 24px rgba(26, 98, 240, .42); }

.site-header .nav-toggle { border-color: var(--shell-line); }

@media (max-width: 1199.98px) {
    .site-header .header-phone { display: none; }
}

@media (max-width: 991.98px) {
    .site-header .nav-links a { font-size: .95rem; }
    .site-header .nav-links a:hover,
    .site-header .nav-links a.active { background: #eef5ff; }
    .site-header .primary-nav__cta .btn-ghost { background: #fff; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    --f-ground: #04123a;
    --f-raise:  #071a4c;
    --f-line:   rgba(255, 255, 255, .12);
    --f-text:   #e8f0ff;
    --f-mute:   rgba(220, 232, 255, .74);
    --f-accent: #4aa3ff;

    background: linear-gradient(180deg, var(--f-raise) 0%, var(--f-ground) 100%) !important;
    padding-block: 60px 0;
}
.site-footer::before { background: linear-gradient(90deg, #0b4bd0, #2fb4ff, #0b4bd0); }

.site-footer__grid { grid-template-columns: 1.5fr .8fr .9fr 1.3fr; gap: 44px; }

.site-footer .footer-logo img {
    height: 42px;
    /* The logo is dark ink for a white bar; the footer is dark, so it is
       drawn as a white mark here. */
    filter: brightness(0) invert(1);
}

.site-footer .footer-title { font-size: 1.05rem; }
.site-footer .footer-title::before,
.site-footer .footer-title::after { display: none; }

.site-footer__contact i {
    border-radius: 50%;
    background: rgba(74, 163, 255, .16);
    color: var(--f-accent);
}

.site-footer .site-footer__social { margin-top: 0; margin-bottom: 18px; }
.site-footer .site-footer__social li a { border-radius: 50%; }

.site-footer__news { margin-top: 4px; }
.site-footer .newsletter-form { border-radius: 12px; }
.site-footer .newsletter-form .submit-button {
    background: linear-gradient(135deg, #2a78ff, #0b4bd0);
    color: #fff;
}

.site-footer__bottom { justify-content: space-between; }
.site-footer__dev .fa-heart { color: #ff4d6a; margin-inline: 3px; }

@media (max-width: 1199.98px) {
    .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .site-footer__grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   The footer's own picture (public/web/img/footer/footer-bg.webp)

   Laid under a navy wash so the links and the small print keep their contrast
   whatever part of the picture ends up behind them. It is a background, not an
   image tag, so a footer without the file is exactly the plain gradient above.
   -------------------------------------------------------------------------- */

.site-footer {
    background:
        linear-gradient(180deg, rgba(5, 22, 70, .50) 0%, rgba(4, 18, 58, .72) 55%, rgba(4, 16, 50, .88) 100%),
        url("../img/footer/footer-bg.webp") center top / cover no-repeat,
        linear-gradient(180deg, var(--f-raise) 0%, var(--f-ground) 100%) !important;
}

/* --------------------------------------------------------------------------
   Header, premium pass

   Same markup hooks, same drawer. What changes is how it reads: a taller bar that
   settles to a slimmer one once the page is moving, a hairline of brand colour
   along its foot, nav links that light up as soft pills, a phone button with the
   call-us label a visitor looks for, and a Sign Up button with something to chase.
   -------------------------------------------------------------------------- */

.site-header {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(214, 226, 247, .9);
    transition: box-shadow .25s ease, background .25s ease;
}
.site-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent 0, #0b4bd0 18%, #2fb4ff 50%, #0b4bd0 82%, transparent 100%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .97); box-shadow: 0 10px 30px rgba(14, 54, 140, .12); }
.site-header.is-scrolled::after { opacity: .9; }

.site-header .header-main__inner { min-height: 82px; padding: 14px 0; gap: 32px; transition: min-height .25s ease, padding .25s ease; }
.site-header.is-scrolled .header-main__inner { min-height: 66px; padding: 8px 0; }
.site-header .brand img { max-height: 46px; width: auto; transition: max-height .25s ease; }
.site-header.is-scrolled .brand img { max-height: 38px; }

/* ---- the links ---- */
.site-header .nav-links { gap: 2px; padding: 5px; border-radius: 14px; background: #f4f8ff; border: 1px solid #e6eefb; }
.site-header .nav-links a {
    position: relative;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    color: #17306a;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.site-header .nav-links a::after { display: none; }
.site-header .nav-links a:hover { background: #fff; color: var(--shell-blue); box-shadow: 0 4px 12px rgba(20, 70, 170, .10); }
.site-header .nav-links a.active {
    background: #fff;
    color: var(--shell-blue);
    box-shadow: 0 4px 14px rgba(20, 70, 170, .14), inset 0 -2px 0 var(--shell-blue);
}

/* ---- phone ---- */
.site-header .header-phone {
    gap: 10px;
    padding: 6px 16px 6px 7px;
    border: 1px solid #d3e1fa;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(20, 70, 170, .06);
}
.site-header .header-phone__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2a8bff, #0b4bd0);
    box-shadow: 0 6px 12px rgba(26, 98, 240, .32);
}
.site-header .header-phone__ico i { color: #fff; font-size: .78rem; }
.site-header .header-phone__txt { display: flex; flex-direction: column; line-height: 1.15; }
.site-header .header-phone__txt small { font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--shell-mute); }
.site-header .header-phone__txt strong { font-size: .86rem; font-weight: 800; color: var(--shell-navy); }
.site-header .header-phone:hover { border-color: var(--shell-blue); box-shadow: 0 8px 18px rgba(26, 98, 240, .16); }

/* ---- the two buttons ---- */
.site-header .btn-ghost { padding: 10px 22px; border-radius: 999px; }
.site-header .btn-grad {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f93ff 0%, #0b4bd0 100%);
    box-shadow: 0 10px 22px rgba(26, 98, 240, .34);
    transition: transform .16s ease, box-shadow .16s ease;
}
.site-header .btn-grad i { font-size: .76rem; transition: transform .16s ease; }
.site-header .btn-grad::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease;
}
.site-header .btn-grad:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(26, 98, 240, .46); }
.site-header .btn-grad:hover::before { left: 120%; }
.site-header .btn-grad:hover i { transform: translateX(3px); }

/* the links never break onto two lines ("API Docs" did, at 1024px) */
@media (max-width: 1279.98px) {
    .site-header .header-main__inner { gap: 20px; }
    .site-header .nav-links a { padding: 9px 12px; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
    .site-header .nav-links { padding: 4px; }
    .site-header .nav-links a { padding: 8px 10px; font-size: .86rem; }
    .site-header .btn-ghost { padding-inline: 16px; }
    .site-header .btn-grad { padding-inline: 18px; }
}

/* ---- mobile ---- */
@media (max-width: 991.98px) {
    .site-header .header-main__inner { min-height: 68px; padding: 10px 0; }
    .site-header.is-scrolled .header-main__inner { min-height: 60px; }
    .site-header .brand img { max-height: 40px; }

    .site-header .nav-toggle { width: 44px; height: 44px; border-radius: 12px; border-color: #d8e5fb; background: #f4f8ff; }
    .site-header .nav-toggle span { background: var(--shell-navy); }

    /* the panel is plain links, not a pill row */
    .site-header .nav-links { padding: 16px 12px; border: 0; border-radius: 0; background: transparent; gap: 4px; }
    .site-header .nav-links a { padding: 13px 16px; box-shadow: none !important; }
    .site-header .nav-links a.active { background: #eaf2ff; box-shadow: none !important; }
    .site-header .btn-ghost, .site-header .btn-grad { justify-content: center; }
}