/**
 * @file        design/header/header.css
 * @location    /design/header/header.css
 * @description Sticky navbar + mobile offcanvas (right side). Prefix: hdr__
 *
 *              COLORS (COLOR-GUIDE.md — all ≥ 7:1):
 *                Navbar BG:      C1 #07003D
 *                Brand/Links:    C2/C1   12.61:1 ✓
 *                Brand em:       C10/C1  10.31:1 ✓
 *                User email:     #c0d8ec/C1 8.57:1 ✓
 *                Active link:    C2/C3    8.49:1 ✓
 *                Offcanvas BG:   C2 #ffffff
 *                  Links:        C1/C2   12.61:1 ✓
 *                  Active link:  C2/C3    8.49:1 ✓
 *                  Email:        C6/C2    8.89:1 ✓
 *                  Ghost btn:    C1/C2   12.61:1 ✓
 *
 * @version     3.0.0
 * @changelog
 *   1.0.0  2026-03-18  Initial version.
 *   2.0.0  2026-03-18  COLOR-GUIDE fixes.
 *   3.0.0  2026-03-18  Mobile offcanvas (right side). Focus trap. Backdrop.
 */

/* ── Navbar shell ─────────────────────────────────────────────────────── */
.hdr__nav {
    background:  var(--color-navy);
    height:      var(--nav-height);
    display:     flex;
    align-items: center;
    position:    sticky;
    top:         0;
    z-index:     var(--z-sticky);
    box-shadow:  0 1px 0 rgba(0,0,0,.18), 0 2px 10px rgba(0,0,0,.14);
}
.hdr__inner {
    max-width:       var(--max-content);
    margin:          0 auto;
    padding:         0 var(--page-padding-x);
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
}

/* ── Brand ────────────────────────────────────────────────────────────── */
/* C2/C1 12.61:1 ✓ */
.hdr__brand {
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    text-decoration: none;
    flex-shrink:     0;
}
.hdr__brand-logo {
    width:         70px;
    border: none;
    object-fit:    contain;
    flex-shrink:   0;
}
.hdr__brand-name {
    font-size:      var(--text-md);
    font-weight:    var(--weight-black);
    color:          var(--color-white);
    letter-spacing: var(--tracking-tight);
    white-space:    nowrap;
}
/* C10/C1 10.31:1 ✓ */
.hdr__brand-name em {
    font-style: normal;
    color:      var(--color-ice);
}

/* ── Desktop nav links ────────────────────────────────────────────────── */
.hdr__links {
    display:     flex;
    gap:         var(--space-1);
    align-items: center;
    list-style:  none;
    margin:      0;
    padding:     0;
    flex:        1;
    justify-content: center;
}
/* C2/C1 12.61:1 ✓ */
.hdr__link {
    color:           var(--color-white);
    font-size:       var(--text-base);
    font-weight:     var(--weight-bold);
    text-decoration: none;
    padding:         .35rem var(--space-3);
    border-radius:   var(--radius-sm);
    transition:      background var(--transition-fast);
    white-space:     nowrap;
}
/* Hover BG: decorative only, no text on it */
.hdr__link:hover      { background: rgba(255,255,255,.1); }
/* C2/C3 8.49:1 ✓ */
.hdr__link--active    { background: var(--color-blue); color: var(--color-white); }
.hdr__link:focus-visible {
    outline:        2px solid var(--color-white);
    outline-offset: 2px;
}

/* ── Desktop actions ──────────────────────────────────────────────────── */
.hdr__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex-shrink: 0;
}
.hdr__user {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}
/* #c0d8ec/C1 8.57:1 ✓ */
.hdr__user-email {
    font-size:     var(--text-sm);
    color:         var(--color-on-dark);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     180px;
}
.hdr__user-email:hover {
    font-size:     var(--text-md);
    color:         var(--color-white);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     180px;
}
/* Ghost — decorative BG */
.hdr__btn-ghost {
    background:    rgba(255,255,255,.1);
    border:        1px solid rgba(255,255,255,.22);
    border-radius: var(--radius-sm);
    color:         var(--color-white);      /* C2/C1 12.61:1 ✓ */
    font-family:   var(--font-base);
    font-size:     var(--text-base);
    font-weight:   var(--weight-bold);
    padding:       var(--pad-btn-sm);
    cursor:        pointer;
    transition:    background var(--transition-fast);
    white-space:   nowrap;
    line-height:   1;
}
.hdr__btn-ghost:hover         { background: rgba(255,255,255,.18); }
.hdr__btn-ghost:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* C1/C2 12.61:1 ✓ */
.hdr__btn-primary {
    display:         inline-flex;
    align-items:     center;
    background:      var(--color-white);
    color:           var(--color-navy);
    border:          none;
    border-radius:   var(--radius-sm);
    font-family:     var(--font-base);
    font-size:       var(--text-base);
    font-weight:     var(--weight-black);
    padding:         var(--pad-btn-sm);
    cursor:          pointer;
    text-decoration: none;
    transition:      filter var(--transition-fast);
    white-space:     nowrap;
    line-height:     1;
}
.hdr__btn-primary:hover        { filter: brightness(.93); }
.hdr__btn-primary:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* ── Hamburger toggle button ──────────────────────────────────────────── */
/* C2/C1 12.61:1 ✓ */
.hdr__toggle {
    display:         none;
    align-items:     center;
    justify-content: center;
    background:      none;
    border:          none;
    padding:         var(--space-2);
    cursor:          pointer;
    border-radius:   var(--radius-sm);
    transition:      background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.hdr__toggle:hover         { background: rgba(255,255,255,.1); }
.hdr__toggle:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* Hamburger icon — 3 lines morphing to × */
.hdr__hbg {
    display:        flex;
    flex-direction: column;
    justify-content: space-between;
    width:          22px;
    height:         16px;
    position:       relative;
}
.hdr__hbg-line {
    display:         block;
    width:           100%;
    height:          2px;
    background:      var(--color-white);   /* C2/C1 12.61:1 ✓ */
    border-radius:   2px;
    transform-origin: center;
    transition:      transform .3s cubic-bezier(.4,0,.2,1),
                     opacity   .2s ease,
                     width     .3s cubic-bezier(.4,0,.2,1);
}

/* Open state — morph to × */
.hdr__toggle--open .hdr__hbg-line--top {
    transform: translateY(7px) rotate(45deg);
}
.hdr__toggle--open .hdr__hbg-line--mid {
    opacity: 0;
    transform: scaleX(0);
}
.hdr__toggle--open .hdr__hbg-line--bot {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Offcanvas backdrop ───────────────────────────────────────────────── */
.hdr__oc-backdrop {
    position:   fixed;
    inset:      0;
    background: rgba(0,51,102,.5);  /* C1 tinted — decorative */
    z-index:    calc(var(--z-sticky) + 10);
    animation:  hdr-fade .2s ease;
}
.hdr__oc-backdrop[hidden] { display: none; }
@keyframes hdr-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Offcanvas panel ──────────────────────────────────────────────────── */
.hdr__offcanvas {
    position:   fixed;
    top:        0;
    right:      0;
    bottom:     0;
    width:      min(320px, 85vw);
    background: var(--color-white);
    z-index:    calc(var(--z-sticky) + 11);
    display:    flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,51,102,.18);
    animation:  hdr-slide-in .25s cubic-bezier(.22,.68,0,1.1);
    overflow-y: auto;
}
.hdr__offcanvas[hidden] { display: none; }
@keyframes hdr-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Offcanvas header row ─────────────────────────────────────────────── */
.hdr__oc-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--space-4) var(--space-5);
    border-bottom:   1px solid var(--color-border);
    flex-shrink:     0;
}
/* C1/C2 12.61:1 ✓ */
.hdr__oc-title {
    font-size:   var(--text-base);
    font-weight: var(--weight-black);
    color:       var(--color-navy);
}
/* C1/C2 12.61:1 ✓ */
.hdr__oc-close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--color-surface);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-sm);
    width:           32px;
    height:          32px;
    cursor:          pointer;
    padding:         0;
    flex-shrink:     0;
    transition:      background var(--transition-fast);
}
.hdr__oc-close:hover         { background: var(--color-page); }
.hdr__oc-close:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* Close × icon — two diagonal lines */
.hdr__oc-x {
    position: relative;
    width:    14px;
    height:   14px;
    display:  block;
}
.hdr__oc-x span {
    position:         absolute;
    top:              50%;
    left:             0;
    width:            100%;
    height:           1.5px;
    background:       var(--color-navy);    /* C1/C2 12.61:1 ✓ */
    border-radius:    2px;
    transform-origin: center;
}
.hdr__oc-x span:first-child  { transform: translateY(-50%) rotate(45deg); }
.hdr__oc-x span:last-child   { transform: translateY(-50%) rotate(-45deg); }

/* ── Offcanvas nav links ──────────────────────────────────────────────── */
.hdr__oc-links {
    list-style: none;
    padding:    var(--space-3) 0;
    margin:     0;
    flex:       1;
}
/* C1/C2 12.61:1 ✓ */
.hdr__oc-link {
    display:         flex;
    align-items:     center;
    padding:         var(--space-3) var(--space-5);
    color:           var(--color-navy);
    font-size:       var(--text-md);
    font-weight:     var(--weight-bold);
    text-decoration: none;
    border-left:     3px solid transparent;
    transition:      background var(--transition-fast),
                     border-color var(--transition-fast);
}
.hdr__oc-link:hover {
    background:   var(--color-surface);
    border-color: var(--color-border);
}
/* C2/C3 8.49:1 ✓ */
.hdr__oc-link--active {
    background:   var(--color-blue-lt);
    border-color: var(--color-blue);
    color:        var(--color-blue);    /* C3/c3-lt 7.4:1 ✓ */
}
.hdr__oc-link:focus-visible {
    outline:        2px solid var(--color-blue);
    outline-offset: -2px;
}

/* ── Offcanvas actions ────────────────────────────────────────────────── */
.hdr__oc-actions {
    padding:      var(--space-4) var(--space-5);
    border-top:   1px solid var(--color-border);
    display:      flex;
    flex-direction: column;
    gap:          var(--space-2);
    flex-shrink:  0;
}
/* C6/C2 8.89:1 ✓ */
.hdr__oc-email {
    font-size:   var(--text-sm);
    color:       var(--color-ink-soft);
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin:      0 0 var(--space-1);
    word-break:  break-all;
}
.hdr__oc-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    width:           100%;
    padding:         var(--space-3);
    border-radius:   var(--radius-sm);
    font-family:     var(--font-base);
    font-size:       var(--text-base);
    font-weight:     var(--weight-bold);
    cursor:          pointer;
    text-decoration: none;
    transition:      filter var(--transition-fast),
                     background var(--transition-fast);
    line-height:     1;
}
/* C1/C2 12.61:1 ✓ */
.hdr__oc-btn--ghost {
    background: var(--color-surface);
    border:     1px solid var(--color-border);
    color:      var(--color-navy);
}
.hdr__oc-btn--ghost:hover { background: var(--color-page); }
/* C2/C3 8.49:1 ✓ */
.hdr__oc-btn--primary {
    background: var(--color-blue);
    border:     none;
    color:      var(--color-white);
}
.hdr__oc-btn--primary:hover        { filter: brightness(.92); }
.hdr__oc-btn:focus-visible {
    outline:        2px solid var(--color-blue);
    outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hdr__links         { display: none; }
    .hdr__btn-ghost,
    .hdr__btn-primary   { display: none; }
    .hdr__toggle        { display: flex; }
    .hdr__inner         { padding: 0 var(--page-padding-x-sm); }
    .hdr__user-email    { max-width: 120px; }
    /* Show user email on mobile (no action buttons) */
    .hdr__user          { display: flex; }
    .hdr__user form     { display: none; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hdr__offcanvas,
    .hdr__oc-backdrop { animation: none; }
    .hdr__link,
    .hdr__oc-link,
    .hdr__toggle,
    .hdr__hbg-line,
    .hdr__oc-close,
    .hdr__oc-btn  { transition: none; }
}