/* ============================================
   Sewgo Marketing Site — header.css
   ============================================ */

.site-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand img.logo { height: 70px; width: auto; }
.brand-sub { font-size: .6rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: 15px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
    font-size: .93rem; font-weight: 600; 
    /* color: var(--ink);  */
    padding: 6px 0;
    border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
    padding: 6px;
}
.nav-links a:hover, .nav-links a.active { color: var(--teal-dark); border-color: var(--teal); }
.nav-cta a:hover {
    color: #fff;
}

.nav-toggle { display: none; background: none; border: none; font-size: 1.4rem; color: var(--navy); cursor: pointer; }

@media (max-width: 900px) {
    .nav-links {
        position: fixed; top: 0; right: -280px; height: 100vh; width: 280px;
        background: #fff; flex-direction: column; align-items: flex-start; padding: 90px 28px 28px;
        box-shadow: -8px 0 24px rgba(0,0,0,.08); transition: right .25s ease; z-index: 60;
    }
    .nav-links.open { right: 0; }
    .nav-links a { width: 100%; }
    .nav-toggle { display: block; }
    .nav-cta { display: none; }
    .nav-cta .btn{
        background: linear-gradient(180deg, #16c6a0 0%, #0fa88a 100%);
        color: #fff;
        border: 1px solid rgba(8,120,102,.35);
        border-radius: 8px;
        padding: 12px 22px;
        font-size: .90rem;
        font-weight: 700;
        box-shadow:
            0 2px 0 rgba(8,120,102,.35),
            0 4px 12px rgba(15,185,138,.22);
        transition: all .25s ease;
    }

    .nav-cta .btn i{
        margin-right: 8px;
    }

    .nav-cta .btn:hover{
        background: linear-gradient(180deg, #20d3ac 0%, #10b090 100%);
        transform: translateY(-1px);
        box-shadow:
            0 4px 0 rgba(8,120,102,.30),
            0 8px 18px rgba(15,185,138,.30);
        color: #fff;
    }
    a.btn.btn-teal {
        color: #fff;
    }
}