/* HEADER — DESKTOP */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.header-brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.header-logo{width:40px;height:40px;color:var(--primary)}
.header-name{display:block;font-weight:800;font-size:var(--fs-body);line-height:1.2;color:var(--primary-dark)}
.header-role{display:block;font-size:var(--fs-caption);color:var(--text-2)}
.header-list{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.header-link{font-weight:600;font-size:var(--fs-sm);color:var(--text);padding:6px 0;border-bottom:2px solid transparent}
.header-link:hover,.header-link.is-active{color:var(--primary);border-color:var(--primary)}
.header-toggle{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--primary-dark);padding:10px}
.header-toggle span{display:block;height:2px;background:currentColor;margin:7px 0;transition:.2s}
/* HEADER — TABLET */
@media (max-width:1024px){.header-list{gap:18px}}
/* HEADER — MOBILE */
@media (max-width:767px){
  .header-name{font-size:var(--fs-sm)}
  .header-toggle{display:block}
  .header-nav{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);display:none}
  .header-nav.is-open{display:block}
  .header-list{flex-direction:column;gap:0;padding:8px 24px 16px}
  .header-link{display:block;padding:14px 0;border-bottom:1px solid var(--border)}
  .header-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .header-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .header-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
}

/* =========================================
   MOBILE NAVIGATION — DARK BLUE
========================================= */

@media (max-width: 767px) {

  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 14px 16px 18px;
    background: rgba(18, 63, 99, .90);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid #315C7B;
    box-shadow: 0 14px 28px rgba(10, 35, 57, .22);
    display: none;
    z-index: 60;
  }

  .header-nav.is-open {
    display: block;
    animation: mobileNavDrop .22s ease-out;
  }

  .header-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 0;
    margin: 0;
  }

  .header-link {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 12px 16px;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 9px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease;
  }

  .header-link:hover,
  .header-link:active {
    background: #28678F;
    color: #FFFFFF;
    border-bottom-color: transparent;
  }

  .header-link.is-active {
    background: #1D5A82;
    color: #FFFFFF;
    border-left-color: #B4C540;
    font-weight: 700;
  }

  .header-link.is-active:hover {
    border-bottom-color: transparent;
  }

  .header-toggle {
    color: var(--primary-dark);
  }
}

@keyframes mobileNavDrop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-nav.is-open {
    animation: none;
  }
}