/* =======================================================
   GUEST LAYOUT — top bar, header/nav, footer
   ======================================================= */

/* ===== Utility strip ===== */
.topbar-strip {
    background: var(--navy-deep);
    color: #aeb6c1;
}
.topbar-strip a {
    color: #aeb6c1;
}
.topbar-strip a:hover {
    color: var(--gold);
}

/* ===== Main nav =====
   Height/vertical padding is the shared --topbar-py token (base.scss) - same
   value the dashboard topbar uses, so the two layouts read as one consistent
   header height/style instead of two independently-tuned ones. */
.site-navbar {
    background: #fff;
    border: 2px solid var(--gold);
    border-top: none;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 10px 24px rgba(6, 42, 26, 0.12);
    min-height: 0;
    padding: var(--topbar-py) 0;
    position: relative;
    z-index: 5;
}
.site-navbar .crest-sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
}
.site-navbar .brand-name {
    color: var(--navy);
    font-size: 1.00rem;
    letter-spacing: 0.01em;
}
.site-navbar .nav-link {
    position: relative;
    color: var(--navy);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    padding: 6px 10px;
    margin: 0 1px;
}
.site-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 2px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color: var(--gold);
}
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after {
    transform: scaleX(1);
}
/* Desktop only - Bootstrap's .navbar-nav is flex-direction:row here with no
   align-items override, so it defaults to "stretch": every .nav-link
   (a block element) gets stretched to match its tallest sibling, and since
   block content doesn't center vertically within its own box, all of that
   extra height lands below the text - reading as "more bottom padding than
   top". The mobile drawer (.nav-offcanvas below) stacks these as a
   full-height list by design and never had this problem, so the fix is
   scoped to not touch it. */
@media (min-width: 992px) {
    .site-navbar .navbar-nav {
        align-items: center;
    }
    .site-navbar .nav-link {
        display: inline-flex;
        align-items: center;
    }
}
.site-navbar .nav-signin {
    color: var(--navy);
    font-size: 13.5px;
}
.site-navbar .nav-signin:hover {
    color: var(--gold);
}

/* ===== Mobile nav drawer (offcanvas below lg, plain inline nav at lg+) ===== */
.nav-offcanvas {
    width: min(84%, 300px);
}
@media (max-width: 991.98px) {
    .nav-offcanvas {
        background: var(--navy) !important;
    }
    .nav-offcanvas .offcanvas-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .nav-offcanvas .offcanvas-title {
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 12.5px;
    }
    .nav-offcanvas .nav-link {
        color: #dfe4ee;
        padding: 13px 2px;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .nav-offcanvas .nav-link::after {
        display: none;
    }
    .nav-offcanvas .nav-link:hover,
    .nav-offcanvas .nav-link.active {
        color: var(--gold);
    }
    .nav-offcanvas .nav-auth-actions {
        margin-top: 18px;
    }
    .nav-offcanvas .nav-signin {
        color: #fff;
        padding: 10px 0;
    }
    .nav-offcanvas .nav-signin:hover {
        color: var(--gold);
    }
    .nav-offcanvas .nav-auth-actions .btn-secondary {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--navy);
    }
    .nav-offcanvas .nav-auth-actions .btn-secondary:hover {
        background: #fff;
        border-color: #fff;
        color: var(--navy);
    }
}

.site-footer {
    background: var(--navy-deep);
    color: #aeb6c1;
    padding: 56px 0 0;
}
.site-footer h5 {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
}
.site-footer p.desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: #8b96a8;
    max-width: 280px;
}
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer ul li {
    margin-bottom: 11px;
    font-size: 14.5px;
}
.site-footer ul a {
    color: #aeb6c1;
    font-size: 14.5px;
}
.site-footer ul a:hover {
    color: var(--gold);
}

/* ===== Hero ===== */
.hero {
    position: relative;
    background:
        linear-gradient(
            115deg,
            rgba(2, 27, 56, 0.94) 0%,
            rgba(2, 27, 56, 0.86) 45%,
            rgba(2, 27, 56, 0.72) 100%
        ),
        url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=1600&auto=format&fit=crop")
            center/cover;
    color: #fff;
    overflow: hidden;
}
.hero .container {
    padding: 78px 24px 64px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}
/* One-time entrance on page load - each column trails slightly so it reads as
   a sequence, not a flash. base.scss's prefers-reduced-motion override
   collapses both to instant for anyone who's set that preference. */
@keyframes hero-rise-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hero .container > * {
    animation: hero-rise-in 0.6s ease both;
}
.hero .container > *:nth-child(2) {
    animation-delay: 0.12s;
}
.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(223, 160, 57, 0.16);
    border: 1px solid rgba(223, 160, 57, 0.4);
    color: var(--gold-soft);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 30px;
    margin-bottom: 20px;
}
.hero h1 {
    color: #fff;
    font-size: 38px;
    line-height: 1.18;
    margin-bottom: 16px;
}
.hero h1 em {
    color: var(--gold);
    font-style: normal;
}
.hero p.lead {
    color: #cdd7e6;
    font-size: 17px;
    max-width: 520px;
    margin-bottom: 30px;
}
.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.hero-panel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    padding: 24px;
}
.hero-panel h4 {
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-left: 3px solid var(--gold);
    padding-left: 10px;
    margin-bottom: 18px;
}
.hp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}
.hp-row:last-child {
    border-bottom: none;
}
.hp-row .label {
    color: #cdd7e6;
    font-size: 14.5px;
}
.hp-row .value {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}
.hp-row .value.up {
    color: var(--mint);
}

/* ===== Sections ===== */
.section {
    padding: 64px 0;
}
.section.alt {
    background: var(--bg-section);
}
.sec-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 34px;
    flex-wrap: wrap;
    gap: 16px;
}
.sec-head .tag {
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-left: 3px solid var(--gold);
    padding-left: 10px;
    display: inline-block;
    margin-bottom: 8px;
}
.sec-head h2 {
    font-size: 28px;
    margin: 0;
}
.sec-head .more {
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Feature / action cards ===== */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.action-card {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(2, 27, 56, 0.04);
    border-radius: 6px;
    padding: 26px 22px;
    position: relative;
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}
.action-card:hover {
    box-shadow: 0 10px 24px rgba(2, 27, 56, 0.1);
    transform: translateY(-3px);
}
.action-card .sq {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e6f2ea;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 18px;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}
.action-card:hover .sq {
    background: var(--navy);
    color: #fff;
}
.action-card h3 {
    font-size: 16.5px;
    margin-bottom: 8px;
}
.action-card p {
    font-size: 14.5px;
    color: var(--text-muted);
    margin: 0 0 16px;
}
.action-card .go {
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ===== Coverage strip ===== */
.coverage {
    background: var(--navy);
    color: #fff;
    padding: 50px 0;
}
.coverage .container {
    display: grid;
    grid-template-columns: 1.1fr repeat(3, 1fr);
    gap: 30px;
    align-items: center;
}
.coverage h3 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 8px;
}
.coverage p {
    color: #aebbd0;
    font-size: 14.5px;
    margin: 0;
}
.cov-item {
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 30px;
}
.cov-item .n {
    font-family: "Lora", serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--gold);
}
.cov-item .l {
    font-size: 13.5px;
    color: #c4cee0;
    margin-top: 4px;
}

/* ===== CTA banner ===== */
.cta-banner {
    background: var(--bg-section);
    padding: 60px 0;
    text-align: center;
}
.cta-banner h2 {
    font-size: 27px;
}
.cta-banner p {
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto 28px;
}