/* ==========================================================================
   CHL — public mobile navigation (BP:CHL_MOBILE_NAV v1).
   Loaded once by topbar.php, which every public header includes
   (partials/header.php · header-profile.php · directory_header.php), so the
   burger + drawer behave identically across all three variants.

   Scope: `.chl-burger` (new, owns no legacy selectors) plus a few narrowly
   targeted drawer corrections at <=767px. The desktop header is untouched —
   every rule here is either inside a max-width:767px query or applies to
   .chl-burger, which the theme hides above 767px via `.only_mobile`.
   ========================================================================== */

/* ── the overlay ────────────────────────────────────────────────────────────
   header.php and header-profile.php each defined this inline; directory_header.php
   rendered the element but styled it nowhere, so directory pages had no overlay at
   all. Same values as the originals — one definition for all three headers. */
.menu-backdrop{
  display:none;position:fixed;top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,.5);
  z-index:998;opacity:0;
  transition:opacity .3s ease;
}
.menu-backdrop.active{display:block;opacity:1}
.menu-backdrop:not(.active){pointer-events:none}   /* never intercept once closed */
@media (prefers-reduced-motion:reduce){ .menu-backdrop{transition:none} }

/* ── the trigger: 44px control, ~20px of artwork ────────────────────────── */
.chl-burger{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;               /* tap target */
  padding:0;margin:0;border:0;
  background:transparent;               /* no block, no filled square */
  border-radius:12px;
  color:var(--org,#F26122);
  cursor:pointer;line-height:0;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease;
}
/* The icon is the whole control: the 44px box stays invisible in every state.
   A bare `:hover` fill here left a peach tile stuck under the icon after every tap, because
   touch browsers keep :hover on the last-tapped element until you tap elsewhere. Gate the
   wash on a real hovering pointer, and give touch a brief press response instead of a fill. */
@media (hover:hover) and (pointer:fine){
  .chl-burger:hover{background:rgba(242,97,34,.07)}
}
.chl-burger:active .chl-burger__box{opacity:.6}
/* :focus alone would persist after a tap; only the keyboard ring should linger. */
.chl-burger:focus{outline:none;background:transparent}
.chl-burger:focus-visible{outline:2px solid var(--org,#F26122);outline-offset:2px}
/* Open state is carried by the icon + aria-expanded, never by a background fill. */
.chl-burger[aria-expanded="true"]{background:transparent}

/* 20 x 14 artwork: three 2px bars, rounded caps, even 6px rhythm */
.chl-burger__box{position:relative;display:block;width:20px;height:14px;pointer-events:none;transition:opacity .1s ease}
.chl-burger__bar{
  position:absolute;left:0;width:100%;height:2px;
  background:currentColor;border-radius:2px;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),opacity .12s linear .06s,top .24s cubic-bezier(.2,.7,.3,1);
}
.chl-burger__bar:nth-child(1){top:0}
.chl-burger__bar:nth-child(2){top:6px}
.chl-burger__bar:nth-child(3){top:12px}

/* open → close: outer bars converge on the middle line and cross; middle fades.
   Driven by aria-expanded, so the visual state can never disagree with the a11y state. */
.chl-burger[aria-expanded="true"] .chl-burger__bar:nth-child(1){top:6px;transform:rotate(45deg)}
.chl-burger[aria-expanded="true"] .chl-burger__bar:nth-child(2){opacity:0;transition-delay:0s}
.chl-burger[aria-expanded="true"] .chl-burger__bar:nth-child(3){top:6px;transform:rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .chl-burger,.chl-burger__bar,.chl-burger__box{transition:none}
}

/* The trigger belongs to the drawer, so it must never appear beside the desktop row.
   `.only_mobile` already hides it in two headers; directory_header's own stylesheets
   override that, so state it here once for all three. */
@media (min-width:768px){
  .chl-burger{display:none !important}
}

/* ── header composition (mobile only) ───────────────────────────────────── */
@media (max-width:767px){
  /* The theme gives every #mainHeader nav item `margin:0 8px !important;padding:6px 0`.
     On the trigger that means the icon's ink sits 8px further in than the logo's, and the
     44px box adds height. Zero it, centre it, then pull the box out by its own optical
     inset (44-20)/2 = 12px so the ICON ink — not the invisible tap area — lines up with
     the container's 15px gutter, matching the logo on the left. */
  #mainHeader .top_right_menu li.menu_bar{
    margin:0 -12px 0 0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center;
    border-bottom:0 !important;
    /* the backdrop is z-index 998 and would otherwise paint over the trigger,
       making the open-state close control untappable */
    position:relative;
    z-index:999;
  }
  /* One layout grid for logo + trigger. `.flex-container` carries a 20px right margin that
     made the right gutter 40px against the logo's 20px on the left; `.top_right_menu` is only
     `display:flex` in two of the three headers, and directory_header additionally inherits the
     UA/Bootstrap `ul{padding-left:2rem}`. Normalise all three so the trigger sits on the same
     gutter as the logo, without touching the desktop row. */
  #mainHeader .top_head .flex-container{align-items:center;margin-right:0 !important}
  /* margin-left:auto anchors the trigger to the end regardless of the variant's
     justify-content (directory_header never set one). */
  #mainHeader .top_right_menu{display:flex !important;align-items:center;justify-content:flex-end;margin-left:auto}
  #mainHeader .top_right_menu ul.only_mobile{
    display:flex;align-items:center;
    /* margin-left:auto pins the trigger to the end even where a variant's own
       justify-content wins the cascade (directory_header). */
    margin:0 0 0 auto !important;padding:0 !important;list-style:none;
  }

  /* directory_header.php renders `.logo` (not `.logo-enh`), so it misses the header's
     `#mainHeader .logo-enh img{width:140px}` and ships 234px of artwork into a 320px
     viewport, forcing a ~72px header. Match its siblings on mobile only. */
  #mainHeader .logo img{width:140px !important;height:auto !important;max-width:100%}

  /* Drawer geometry. header.php and header-profile.php each declare this inline; directory_header
     declares none, so its `.side_menu` stayed an in-flow flex item — the whole nav rendered
     expanded across the header and shoved the trigger inboard. Same values as the other two, so
     nothing changes for them. `display` is deliberately NOT set: header.php toggles none/flex and
     we must not fight it. The theme hard-codes these with !important, so we match that weight. */
  #mainHeader .side_menu{
    position:fixed !important;
    top:0 !important;
    left:calc(-1 * min(270px, 80vw)) !important;
    width:min(270px, 80vw) !important;
    height:100vh !important;
    flex-direction:column !important;
    align-items:stretch !important;
    background:#fff !important;
    z-index:999;
    box-shadow:0 10px 20px 10px rgba(0,0,0,.1);
    transition:left .3s cubic-bezier(.4,0,.2,1);
    padding:25px max(25px,env(safe-area-inset-right)) calc(25px + env(safe-area-inset-bottom,0px)) max(25px,env(safe-area-inset-left)) !important;
  }
  #mainHeader .side_menu.activepanel{left:0 !important}
  @media (prefers-reduced-motion:reduce){ #mainHeader .side_menu{transition:none} }
  /* 100dvh tracks the collapsing address bar; 100vh stays as the fallback above it. */
  @supports (height:100dvh){
    #mainHeader .side_menu{height:100dvh !important}
  }

  /* An inert drawer must not be reachable by touch or the tab ring even while it is
     merely parked off-screen (header-profile.php keeps it `visibility:visible`). */
  #sideMenu[inert]{pointer-events:none}

  .menu-backdrop{-webkit-tap-highlight-color:transparent}
}