/* Shared site header. Paired with site-chrome.js, which renders into
   <div id="gchs-header" data-breadcrumb="...">.

   Self-contained: the hand-written pages (landing, admin, login) define
   their palette inline, and the generated CCM pages get theirs from
   ccm-course.css. Both define the same token names, so this file just
   consumes them and falls back where a page defines none. */

#gchs-header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 18px;
  background:var(--card, #FFFFFF);
  border-bottom:1px solid var(--border, #CBD5E0);
  font-size:.9rem;
}
.gh-brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink, #102036); flex:none;
}
.gh-logo{height:34px; width:auto; display:block;}
/* The knockout variant is the light-on-dark artwork; swap it in for dark. */
:root[data-theme="dark"] .gh-logo{content:url("/logo-knockout-56.png");}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gh-logo{content:url("/logo-knockout-56.png");}
}
.gh-word{font-weight:700; color:var(--ink, #102036); white-space:nowrap;}
.gh-brand:hover .gh-word{color:var(--accent, #004E85);}

.gh-crumb{color:var(--muted, #5A6472); display:flex; gap:7px; flex-wrap:wrap; align-items:center;}
.gh-crumb a{color:var(--accent, #004E85); text-decoration:none;}
.gh-crumb a:hover{text-decoration:underline;}
.gh-crumb [aria-current="page"]{color:var(--ink, #102036); font-weight:600;}
.gh-sep{color:var(--border, #CBD5E0);}

.gh-spacer{flex:1 1 auto;}
.gh-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.gh-user{color:var(--muted, #5A6472);}
.gh-link{
  font:inherit; color:var(--accent, #004E85); background:none;
  border:none; padding:8px 4px; min-height:44px;
  text-decoration:none; cursor:pointer;
}
.gh-link:hover{text-decoration:underline;}

/* Visible focus ring everywhere, not just here. */
#gchs-header a:focus-visible,
#gchs-header button:focus-visible{
  outline:3px solid var(--accent-warm, #A85200);
  outline-offset:2px; border-radius:4px;
}

@media (max-width:560px){
  #gchs-header{gap:10px; padding:9px 12px;}
  .gh-word{display:none;}          /* logo alone carries the brand on narrow screens */
  .gh-crumb{order:3; flex-basis:100%;}
}