/* header.css
   Moved out of includes/header.php (was an inline block).
   Code is unchanged from the inline version; see docs/ASSETS.md. */
/* ===== Header profile menu ===== */
.profile-menu { position: relative; display: inline-flex; align-items: center; }
.profile-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 0; border-radius: 999px;
    background: transparent; color: inherit;
    font: inherit; cursor: pointer;
    transition: background .2s;
}
.profile-btn:hover,
.profile-btn[aria-expanded="true"] { background: rgba(127, 127, 127, .15); }
.profile-avatar {
    display: block; flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%; object-fit: cover;
}
.profile-initials {
    display: grid; place-items: center;
    background: #d0141c; color: #fff;
    font-size: .85rem; font-weight: 600; letter-spacing: .02em;
}
.profile-chevron { width: 14px; height: 14px; transition: transform .2s; }
.profile-btn[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }

.profile-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 1000;
    width: min(280px, 90vw); padding: 8px;
    background: #fff; color: #1f2937;
    border-radius: 16px; text-align: left;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
    animation: profilePop .15s ease;
}
.profile-panel[hidden] { display: none; }
.profile-summary {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; margin-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}
.profile-summary .profile-avatar { width: 52px; height: 52px; font-size: 1.1rem; }
.profile-summary strong { display: block; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.profile-summary small  { display: block; color: #6b7280; font-size: .78rem; overflow-wrap: anywhere; }

.main-nav .profile-panel a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: transparent; color: #1f2937;
    font-size: .92rem; text-decoration: none;
}
.main-nav .profile-panel a svg { width: 18px; height: 18px; flex: 0 0 auto; }
.main-nav .profile-panel a:hover { background: #fff1f1; color: #d0141c; }
.main-nav .profile-panel a.profile-logout { color: #b91c1c; }

@keyframes profilePop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
@media (max-width: 640px) { .profile-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .profile-panel { animation: none; } }

/* ===== Navigation ===== */
.site-header .site-header-inner { position: relative; }
.site-header .main-nav { display: flex; align-items: center; gap: 6px; }
.site-header .nav-links {
    display: flex; align-items: center; gap: 4px;
    margin-right: 6px; padding-right: 10px;
    border-right: 1px solid rgba(0, 0, 0, .08);
}
.site-header .main-nav a.nav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 12px;
    background: transparent; color: #374151;
    font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}
.site-header .main-nav a.nav-link svg {
    width: 18px; height: 18px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.site-header .main-nav a.nav-link:hover { background: #fff1f1; color: #d0141c; transform: translateY(-1px); }
.site-header .main-nav a.nav-link:focus-visible { outline: 2px solid #e0343b; outline-offset: 2px; }
.site-header .main-nav a.nav-link.is-active,
.site-header .main-nav a.nav-link.is-active:hover {
    background: linear-gradient(135deg, #f0555a, #d0141c);
    color: #fff; transform: none;
    box-shadow: 0 4px 12px rgba(208, 20, 28, .3);
}
.site-header .main-nav a.nav-link.nav-cta { background: #d0141c; color: #fff; box-shadow: 0 4px 12px rgba(208, 20, 28, .25); }
.site-header .main-nav a.nav-link.nav-cta:hover { background: #a80f16; color: #fff; }

/* Notification bell */
.site-header .notif { position: relative; }
.site-header .main-nav .notif-btn {
    position: relative; display: inline-grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 12px; background: transparent; color: #374151; cursor: pointer;
    transition: background .2s, color .2s;
}
.site-header .main-nav .notif-btn:hover,
.site-header .main-nav .notif-btn[aria-expanded="true"] { background: #fff1f1; color: #d0141c; }
.site-header .main-nav .notif-count {
    position: absolute; top: 3px; right: 3px;
    display: grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border: 2px solid #fff; border-radius: 999px; box-sizing: content-box;
    background: #d0141c; color: #fff; font-size: .66rem; font-weight: 600; line-height: 1;
}

/* Mobile menu */
.site-header .nav-toggle { display: none; }
@media (max-width: 900px) {
    .site-header .nav-toggle {
        display: inline-grid; place-items: center;
        width: 42px; height: 42px; padding: 0;
        border: 0; border-radius: 12px; background: transparent; color: #374151; cursor: pointer;
        transition: background .2s, color .2s;
    }
    .site-header .nav-toggle:hover,
    .site-header .nav-toggle[aria-expanded="true"] { background: #fff1f1; color: #d0141c; }
    .site-header .nav-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

    .site-header .nav-links {
        display: none;
        position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 900;
        flex-direction: column; align-items: stretch; gap: 4px;
        margin: 0; padding: 10px; border: 0; border-radius: 16px;
        background: #fff; box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
    }
    .site-header .nav-links.is-open { display: flex; animation: profilePop .15s ease; }
    .site-header .main-nav a.nav-link { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header .main-nav a.nav-link, .site-header .nav-links.is-open { transition: none; animation: none; }
}

/* ---- Phone: dropdown panels stay inside the screen ---- */
@media (max-width: 640px) {
    .site-header .team-panel,
    .site-header .notif-panel,
    .site-header .profile-panel {
        position: fixed; left: 10px; right: 10px; top: 76px;
        width: auto; max-width: none; max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px);
    }
    .site-header .main-nav { gap: 2px; }
}

/* ===== Header alignment (v1.10.0) =====
   With the Shifts link the menu no longer fits next to the logo on a 1480px header, so it drops to its own row.
   1) tighter menu links so it stays on ONE row when there is room;
   2) the menu always fills its row: links on the left, bell/profile cluster on the right edge (also when it wraps). */
@media (min-width: 701px) {
    .site-header .main-nav { flex: 1 1 auto; gap: 4px; }
    .site-header .nav-links { margin-right: auto; padding-right: 0; border-right: 0; gap: 2px; }
    .site-header .main-nav a.nav-link { padding: 9px 11px; gap: 6px; }
}
@media (min-width: 1480px) { .site-header .main-nav { margin-left: 24px; } } /* breathing room next to the tagline when everything fits on one row */