/* ══════════════════════════════════════════════════════════════════
   Concept 1 — Standalone Navigation + Announcement Bar
   For standalone pages (gift-cards, templates, etc.)
   SPA pages use includes/header.html + shared.css instead.
   ══════════════════════════════════════════════════════════════════ */

/* ── Announcement Bar: 36px, Satoshi 16/500 ────────────────────── */
.c1-announcement {
    background: var(--c1-light-gray); color: var(--c1-dark-blue); text-align: center;
    height: 36px; display: flex; align-items: center; justify-content: center;
    font-family: var(--c1-font-body); font-size: 16px; font-weight: 500;
}

/* ── Navigation: 70px dark blue bar ────────────────────────────── */
.c1-nav {
    background: var(--c1-dark-blue); position: sticky; top: 0; z-index: 50;
    height: 70px;
}
.c1-nav-inner {
    max-width: 1512px; margin: 0 auto; display: flex; align-items: center;
    justify-content: space-between; padding: 0 2rem; height: 100%;
}
.c1-nav-logo { display: flex; align-items: center; }
.c1-nav-logo img { height: 46px; width: auto; max-width: 222px; }

.c1-nav-links {
    display: none; align-items: center; gap: 2rem;
}
.c1-nav-links a {
    font-family: var(--c1-font-heading); font-size: 18px; font-weight: 400;
    color: var(--c1-white); text-decoration: none; transition: opacity var(--c1-transition);
}
.c1-nav-links a:hover { opacity: 0.8; }

.c1-nav-cta {
    font-family: var(--c1-font-body) !important; background: var(--c1-white);
    color: var(--c1-dark-blue) !important; padding: 0 1.25rem;
    border-radius: var(--c1-radius-sm); font-size: 18px !important; font-weight: 500 !important;
    height: 41px; display: inline-flex !important; align-items: center;
}
.c1-nav-cta:hover { background: rgba(255, 255, 255, 0.9); opacity: 1 !important; }

@media (min-width: 768px) { .c1-nav-links { display: flex; } }

/* ── Mobile menu button ────────────────────────────────────────── */
.c1-nav-toggle {
    display: flex; background: none; border: none; cursor: pointer;
    color: var(--c1-white); padding: 0.25rem;
}
@media (min-width: 768px) { .c1-nav-toggle { display: none; } }