/* MSID global site chrome: coloured header, navigation, search and responsive logo. */

/* Aubergine global header. Ivory is used for navigation/search contrast; Lime is reserved for active and primary emphasis. */
#site-header.msid-global-header.msid-learning-header{
  background:linear-gradient(112deg,var(--msid-aubergine-dark) 0%,var(--msid-aubergine) 58%,#47204d 100%);
  border-bottom:1px solid rgba(200,241,53,.34);
  color:var(--msid-ivory);
  box-shadow:0 8px 26px rgba(42,14,47,.16);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Keep the brand aligned with the directory/content grid instead of the viewport edge.
   identity.css used a 1760px header container, which made the RTL logo look pinned
   to the far right on wide screens. */
#site-header > .container{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:24px;
}


/* Navigation: Ivory text + a compact Lime active marker. */
#site-header .msid-learning-nav ul li a{
  color:var(--msid-ivory);
  -webkit-text-fill-color:var(--msid-ivory);
  opacity:.88;
}
#site-header .msid-learning-nav ul li a:hover,
#site-header .msid-learning-nav ul li.current-menu-item>a{
  background:transparent;
  color:#fff;
  -webkit-text-fill-color:#fff;
  opacity:1;
}
#site-header .msid-learning-nav ul li a::after{
  right:50%;
  bottom:1px;
  width:0;
  height:3px;
  border-radius:999px;
  background:var(--msid-lime);
  transform:translateX(50%);
}
#site-header .msid-learning-nav ul li a:hover::after,
#site-header .msid-learning-nav ul li.current-menu-item>a::after{width:24px;}

/* Search is an Ivory island inside the coloured header. */
#site-header .msid-header-search{
  background:rgba(255,253,248,.98);
  border-color:rgba(255,253,248,.72);
  box-shadow:0 5px 18px rgba(23,21,24,.12);
}
#site-header .msid-header-search:focus-within{
  border-color:var(--msid-lime);
  box-shadow:0 0 0 3px rgba(200,241,53,.20),0 5px 18px rgba(23,21,24,.13);
}
#site-header .msid-header-search input{
  background:transparent;
  color:var(--msid-ink);
  -webkit-text-fill-color:var(--msid-ink);
}
#site-header .msid-header-search input::placeholder{
  color:#746b75;
  -webkit-text-fill-color:#746b75;
  opacity:1;
}
#site-header .msid-header-search button{
  background:var(--msid-ivory);
  border-right-color:var(--msid-aubergine-line);
  color:var(--msid-aubergine);
  -webkit-text-fill-color:var(--msid-aubergine);
}
#site-header .msid-header-search button:hover{
  background:var(--msid-lime);
  color:var(--msid-ink);
  -webkit-text-fill-color:var(--msid-ink);
}

/* Account actions: neutral sign-in, Lime primary CTA. */
#site-header .msid-header-link{
  color:var(--msid-ivory);
  -webkit-text-fill-color:var(--msid-ivory);
}
#site-header .msid-header-link:hover{
  color:var(--msid-lime);
  -webkit-text-fill-color:var(--msid-lime);
  text-decoration:none;
}
#site-header .msid-header-outline{
  background:var(--msid-ivory);
  border-color:rgba(255,253,248,.90);
  color:var(--msid-aubergine);
  -webkit-text-fill-color:var(--msid-aubergine);
}
#site-header .msid-header-outline:hover{
  background:#fff;
  border-color:var(--msid-lime);
  color:var(--msid-aubergine-dark);
  -webkit-text-fill-color:var(--msid-aubergine-dark);
}
#site-header .msid-header-primary{
  background:var(--msid-lime);
  border-color:var(--msid-lime);
  color:var(--msid-ink);
  -webkit-text-fill-color:var(--msid-ink);
  box-shadow:0 5px 16px rgba(23,21,24,.14);
}
#site-header .msid-header-primary:hover{
  background:var(--msid-lime-hover);
  border-color:var(--msid-lime-hover);
  color:var(--msid-ink);
  -webkit-text-fill-color:var(--msid-ink);
  transform:translateY(-1px);
}

/* Search suggestions must stay light and readable even though the parent is dark. */
#site-header .msid-universal-search-panel-header{
  background:var(--msid-surface);
  border-color:var(--msid-line-soft);
  color:var(--msid-ink);
  box-shadow:0 22px 50px rgba(42,14,47,.24);
}

/* Tablet/phone: dark chrome, Ivory icons; the opened navigation remains Ivory. */
@media(max-width:1024px){
  #site-header > .container{padding-inline:20px;}
  #site-header.msid-global-header.msid-learning-header{
    background:linear-gradient(112deg,var(--msid-aubergine-dark),var(--msid-aubergine));
  }
  #site-header .menu-toggle,
  #site-header .msid-mobile-header-search{
    background:rgba(255,253,248,.10);
    border:1px solid rgba(255,253,248,.24);
    color:var(--msid-ivory);
    -webkit-text-fill-color:var(--msid-ivory);
    box-shadow:none;
  }
  #site-header .menu-toggle:hover,
  #site-header .msid-mobile-header-search:hover{
    background:rgba(200,241,53,.14);
    border-color:rgba(200,241,53,.52);
    color:var(--msid-lime);
    -webkit-text-fill-color:var(--msid-lime);
  }
  #site-header .menu-toggle span{background:var(--msid-ivory);}
  #site-header .mobile-nav{
    background:var(--msid-ivory);
    border-top:1px solid var(--msid-line-soft);
    border-color:var(--msid-line-soft);
    color:var(--msid-ink);
    box-shadow:0 18px 44px rgba(42,14,47,.20);
  }
  #site-header .mobile-nav a{
    color:var(--msid-ink);
    -webkit-text-fill-color:var(--msid-ink);
  }
  #site-header .mobile-nav a:hover,
  #site-header .mobile-nav a:focus-visible{
    background:var(--msid-aubergine-soft);
    color:var(--msid-aubergine);
    -webkit-text-fill-color:var(--msid-aubergine);
  }
  #site-header .mobile-nav .mobile-primary-link{
    background:var(--msid-lime);
    color:var(--msid-ink);
    -webkit-text-fill-color:var(--msid-ink);
  }
  #site-header .mobile-nav .mobile-primary-link:hover{
    background:var(--msid-lime-hover);
    color:var(--msid-ink);
    -webkit-text-fill-color:var(--msid-ink);
  }
}

/* White Mseed wordmark sits directly on the dark brand surface. */
#site-header .msid-learning-logo{
  min-height:48px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#site-header .msid-learning-logo:hover{
  background:transparent;
  border-color:transparent;
}
#site-header .msid-brand-logo--header{
  width:auto;
  height:46px;
  max-width:190px;
  object-fit:contain;
  filter:none;
}

/* Canonical footer brand treatment. */
.msid-footer-minimal .footer-logo{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.msid-footer-minimal .msid-brand-logo--footer{
  width:auto;
  height:40px;
  max-width:180px;
  filter:none;
}
.msid-footer-minimal-links a:hover{color:var(--msid-lime);}

@media(max-width:1024px){
  #site-header .msid-learning-logo{
    min-height:40px;
    padding:0;
    border-radius:0;
  }
  #site-header .msid-brand-logo--header{
    height:38px;
    max-width:min(44vw,165px);
  }
}
@media(max-width:767px){
  #site-header > .container{padding-inline:16px;}
  #site-header .msid-brand-logo--header{
    height:34px;
    max-width:min(46vw,155px);
  }
  .msid-footer-minimal .msid-brand-logo--footer{height:34px;max-width:155px;}
}

/* 6.8.3 — canonical responsive header navigation.
 * The hamburger becomes the sole navigation owner below desktop; phone-specific
 * app-sheet geometry continues to be finalized by mobile-app.css.
 */
@media (max-width:1024px){
  #site-header .msid-learning-nav{display:none;}
  #site-header .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    position:relative;
    z-index:10004;
    cursor:pointer;
    pointer-events:auto;
  }
}

@media (min-width:768px) and (max-width:1024px){
  body.msid-mobile-menu-open{overflow:hidden;}
  body.msid-mobile-menu-open::before{
    content:"";
    position:fixed;
    z-index:10000;
    inset:0;
    background:rgba(42,14,47,.28);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  #site-header .mobile-nav{
    display:block;
    position:fixed;
    z-index:10003;
    top:82px;
    right:18px;
    left:18px;
    max-height:calc(100dvh - 104px);
    overflow:auto;
    padding:12px;
    border:1px solid var(--msid-line-soft);
    border-radius:22px;
    background:var(--msid-ivory);
    box-shadow:0 24px 70px rgba(42,14,47,.24);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.99);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  body.admin-bar #site-header .mobile-nav{top:114px;}
  #site-header .mobile-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  #site-header .mobile-nav ul{display:grid;gap:4px;margin:0;padding:0;list-style:none;}
  #site-header .mobile-nav li a{display:flex;align-items:center;min-height:48px;padding:9px 12px;border-radius:14px;}
}

@media (min-width:1025px) and (max-width:1080px){
  #site-header .menu-toggle{display:none;}
}