/* ===========================================================================
   header.css - the top frame of the portal shell

   Replaces a stylesheet that positioned five nav buttons at fixed pixel
   offsets (left:0, 52, 100, 150, 200) and, because they could not fit on a
   narrow screen, carried a SECOND complete nav in a slide-out panel with its
   own five buttons, its own badge and its own breakpoint. One flex row
   replaces both: five 44px targets need ~220px, which fits a 320px phone, so
   the hamburger and the whole duplicate nav are gone.

   Icons are inline SVG using currentColor, so there are no image requests and
   no separate white variants for a dark panel.
   =========================================================================== */

:root{
  --surface:#FFFFFF;
  --ink:#14203A;
  --ink-2:#4A5A73;
  --ink-3:#7B8AA1;
  --line:#DCE3ED;
  --navy:#09316F;
  --navy-soft:#E7EDF8;
  --emergency:#B3121B;
  --badge:#B3121B;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* No fixed height: the bar reports its own height to index.php, so it can
     grow when the nav wraps without anything being clipped. */
}

#headBar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(20,32,58,.10);
  flex-wrap:wrap;
}

#headerLogo{ height:40px; width:auto; flex:0 0 auto; display:block; }

#headerText{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  line-height:1.2;
}
.brand{ font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }

#phoneNumbers{ display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:1px; }
#phoneNumbers a{ font-size:12.5px; text-decoration:none; white-space:nowrap; }
a.phoneLink,   a.phoneLink:visited  { color:var(--ink-2); }
a.phoneLinkEm, a.phoneLinkEm:visited{ color:var(--emergency); font-weight:700; }
a.phoneLink:hover, a.phoneLinkEm:hover{ text-decoration:underline; }
#phoneNumbers .lbl{ color:var(--ink-3); }

/* ------------------------------------------------------------------- nav */
#nav{ display:flex; align-items:center; gap:2px; flex:0 0 auto; margin-left:auto; }

.navBtn{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  min-width:52px; min-height:44px;          /* comfortable touch target */
  padding:5px 8px;
  background:none; border:0; border-radius:9px;
  color:var(--ink-2); cursor:pointer;
  font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  text-decoration:none;
  transition:background .13s, color .13s;
}
.navBtn svg{ width:21px; height:21px; display:block; }
.navBtn:hover{ background:var(--navy-soft); color:var(--navy); }
.navBtn:focus-visible{ outline:2px solid var(--navy); outline-offset:1px; }
.navBtn.is-active{ background:var(--navy-soft); color:var(--navy); }
.navBtn .navLabel{ white-space:nowrap; }

#msgBadge{
  position:absolute; top:1px; right:6px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--badge); color:#fff;
  font-size:10.5px; font-weight:800; line-height:17px; text-align:center;
  pointer-events:none;
}
#msgBadge[hidden]{ display:none; }

/* Narrow: drop the labels and the "office"/"emergency" words, keep all five
   buttons. There is no second nav to switch to. */
@media (max-width:640px){
  #headBar{ gap:10px; padding:7px 10px; }
  #headerLogo{ height:34px; }
  .brand{ font-size:15px; }
  .navBtn{ min-width:44px; padding:6px; }
  .navBtn .navLabel{ display:none; }
  #phoneNumbers .lbl{ display:none; }
}
@media (max-width:380px){
  #headerText{ flex-basis:100%; order:3; }   /* title drops to its own line */
  #headerLogo{ height:30px; }
  #nav{ margin-left:auto; }
}

@media print{ #headBar{ display:none; } }

@media (prefers-color-scheme:dark){
  :root{
    --surface:#151D2E; --ink:#E6EBF4; --ink-2:#9FAEC6; --ink-3:#74839B;
    --line:#25314A; --navy:#7FA9E8; --navy-soft:#16233C;
    --emergency:#F08A80; --badge:#C0392B;
  }
  #headBar{ box-shadow:0 1px 3px rgba(0,0,0,.5); }
}