/*
 * Public site chrome: the header, the footer and the back-to-top button.
 *
 * Split out of landing.css because two different applications render this
 * chrome -- the Blade marketing pages and the Vue sign-in screens -- and they
 * must not drift apart. This file is the single source for both.
 *
 * Every selector is namespaced under .site-*, and the tokens are --chrome-*,
 * because the SPA loads this alongside Bootstrap: bare .nav, .btn or .brand
 * rules, or a :root --brand, would reach straight into the admin panel.
 */

:root {
    /* The logo is Bangladesh-flag green and red on near-black. */
    --chrome-brand: #1a8f4c;
    --chrome-brand-dark: #11693a;
    --chrome-accent: #e23b32;
    --chrome-accent-dark: #c22c24;
    --chrome-night: #0b0f0e;
    --chrome-on-night: #d6e2dd;
    --chrome-on-night-dim: #8fb3a3;
    --chrome-radius: 10px;
    --chrome-container: 1160px;
    /* Roboto for Latin, SolaimanLipi for Bengali -- the panel's pair. The
       sign-in screens render this chrome and load both faces, so the header
       matches the form beside it. The marketing pages download no font at
       all and fall through to the system stack, as they always have. */
    --chrome-font: Roboto, SolaimanLipi, "Segoe UI", system-ui, -apple-system,
        "Noto Sans Bengali", "Helvetica Neue", Arial, sans-serif;
}

.site-container {
    width: 100%;
    max-width: var(--chrome-container);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ---------------------------------------------------------------- buttons */
.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--chrome-radius);
    font-family: var(--chrome-font);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}

.site-btn:hover {
    transform: translateY(-1px);
}

.site-btn:focus-visible {
    outline: 3px solid var(--chrome-brand);
    outline-offset: 2px;
}

.site-btn--accent {
    background: var(--chrome-accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(226, 59, 50, .3);
}

.site-btn--accent:hover {
    background: var(--chrome-accent-dark);
    color: #fff;
}

.site-btn--ghost {
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.site-btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* ----------------------------------------------------------------- header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    font-family: var(--chrome-font);
    background: rgba(11, 15, 14, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: background-color .2s ease;
}

.site-header.is-scrolled {
    background: rgba(11, 15, 14, .97);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.site-header .site-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 72px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    text-decoration: none;
}

.site-brand img {
    display: block;
    width: 42px;
    height: 42px;
    border-radius: var(--chrome-radius);
    object-fit: cover;
}

.site-brand__text b {
    display: block;
    font-size: 1.02rem;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
}

.site-brand__text span {
    display: block;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--chrome-on-night-dim);
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.site-nav a {
    padding: .5rem .8rem;
    border-radius: 8px;
    font-size: .94rem;
    font-weight: 500;
    color: var(--chrome-on-night);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}

.site-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.site-nav__phone {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #7fe0a9 !important;
    font-weight: 600;
}

.site-nav__phone svg {
    width: 15px;
    height: 15px;
    display: block;
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: .5rem;
}

.site-nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: 0;
    border-radius: var(--chrome-radius);
    color: #fff;
    cursor: pointer;
}

.site-nav-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

@media (max-width: 991px) {
    .site-nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        position: fixed;
        inset: 72px 0 auto;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        padding: 1rem 20px 1.4rem;
        background: var(--chrome-night);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        transform: translateY(-120%);
        transition: transform .25s ease;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    .site-nav.is-open {
        transform: translateY(0);
    }

    .site-nav a {
        padding: .7rem .8rem;
    }

    .site-nav__actions {
        margin: .6rem 0 0;
    }

    .site-nav__actions .site-btn {
        flex: 1;
    }
}

/* ----------------------------------------------------------------- footer */
.site-footer {
    background: var(--chrome-night);
    color: #b9c8c2;
    font-family: var(--chrome-font);
    font-size: 1rem;
    line-height: 1.65;
    padding: clamp(44px, 5vw, 64px) 0 0;
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover {
    color: #6ddc9c;
}

.site-footer p {
    margin: 0 0 1rem;
    font-size: .92rem;
}

.site-footer h4 {
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.site-footer img {
    display: block;
    max-width: 100%;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.3fr 1fr;
    gap: 2rem;
}

@media (max-width: 900px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
    font-size: .93rem;
}

.site-footer__contact {
    display: grid;
    gap: .7rem;
}

.site-footer__contact div {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .92rem;
}

.site-footer__contact svg {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: .25rem;
    color: var(--chrome-brand);
}

.site-footer__social {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.site-footer__social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--chrome-radius);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    transition: background-color .15s ease;
}

.site-footer__social a:hover {
    background: var(--chrome-brand);
    color: #fff;
}

.site-footer__social svg {
    width: 18px;
    height: 18px;
}

.site-footer__bottom {
    margin-top: 2.5rem;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    font-size: .85rem;
    color: #7d928b;
}

/* ----------------------------------------------------------- back to top */
.site-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--chrome-brand);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 26, 23, .06), 0 12px 32px rgba(15, 26, 23, .09);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.site-to-top svg {
    width: 18px;
    height: 18px;
}

.site-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.site-to-top:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-nav,
    .site-btn,
    .site-to-top {
        transition: none;
    }

    .site-btn:hover,
    .site-to-top:hover {
        transform: none;
    }
}