/* Header & Navigation */
header { position: sticky; top: 0; z-index: 1030; background: transparent; }
.navbar {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 2px 4px var(--shadow);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.25rem; /* slightly smaller */
    font-weight: bold;
    color: white;
    text-decoration: none;
}

/* Logo image removed — navbar uses text branding */

.nav-links {
    display: flex;
    gap: 1rem; /* reduced gap to match compact header */
    align-items: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.9;
}

.btn-logout {
    background: rgba(255,255,255,0.12);
    padding: 0.4rem 0.8rem; /* slightly smaller */
    border-radius: 5px;
    color: white;
} 

@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        gap: 0.5rem; /* reduced gap for compact layout */
    }
}

/* Footer override for reduced vertical spacing */
.site-footer {
    background: var(--dark);
    color: white;
    text-align: center;
    padding: 0.6rem 0; /* reduced from 1rem */
    margin-top: 1rem; /* reduced from 2rem */
}

.site-footer a { color: white; text-decoration: none; opacity: 0.85; }

.site-footer #footer-links a { padding: 0 .5rem; margin: 0 .25rem; display: inline-block; }
.site-footer #footer-links .social-link { padding: 0 .25rem; margin: 0 .25rem; display: inline-block; }
.site-footer #footer-links .social-link .fab { font-size: 1.05rem; }
.site-footer #footer-links .social-link.facebook { color: #1877F2; opacity: 0.95; }
.site-footer #footer-links .social-link.facebook:hover { opacity: 1; transform: translateY(-1px); }
@media (max-width: 576px) {
    .site-footer #footer-links { gap: 0.6rem !important; }
    .site-footer #footer-links a { padding: 0 .35rem; margin: 0 .15rem; }
    .site-footer #footer-links .social-link { padding: 0 .2rem; }
}

/* Nav separator used between header/footer items */
.nav-sep {
    color: rgba(255,255,255,0.95); /* stronger contrast so it's clearly visible */
    margin: 0 0.35rem;
    display: inline-block;
    font-weight: 600;
    line-height: 1;
}

/* Small view: hide separators to avoid crowding */
@media (max-width: 991px) {
    .nav-sep { display: none !important; }
}

/* Province pills in footer */
.footer-provinces .btn {
    padding: 0.28rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 0.375rem;
    opacity: 0.95;
    transition: opacity 120ms ease, transform 120ms ease;
}
.footer-provinces .btn:hover { opacity: 1; transform: translateY(-1px); }

/* Ensure primary-outline buttons respect the current theme color */
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--brand-primary);
    color: white !important;
    border-color: var(--brand-primary);
}