/* Cedar Hollow core-site nav panel.

   The panel behind the burger menu: three groups on desktop, a full-screen
   green overlay on phones. This lived inline on index.html while the rest of
   the core site had a flat list of anchors and, on desktop, no panel behind
   them at all. Shared from here so the eleven pages cannot drift apart again.

   Loaded alongside siteswitch.css. The base .ch-nav__* rules are still inline
   per page; only the grouped-panel layer is here. */

@media screen and (min-width:768px){
  /* Without this the links sat straight on the page. Same green as the phone
     overlay, same card shape as the sub-site dropdowns. */
  #ch-nav-menu{background-color:var(--accent,#3b4126);border:1px solid rgba(241,236,219,.18);
    border-radius:1rem;box-shadow:0 18px 50px rgba(16,11,1,.35);
    padding:1.5rem 1.75rem 1.75rem}

  /* :not([hidden]) is load-bearing. #ch-nav-menu on its own is an id -- it
     outranks the browser's own [hidden]{display:none}, so setting a display
     here unhid the panel permanently and the close button had nothing to do.
     Qualifying it leaves [hidden] in charge of hiding. */
  #ch-nav-menu:not([hidden]){display:grid;
    grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
    column-gap:1.75rem;row-gap:1.5rem;align-items:start;
    width:max-content;max-width:min(44rem,calc(100vw - 4rem))}
  #ch-nav-menu:not([hidden]) .ch-nav__book-cta{grid-column:1/-1;justify-self:end}
}

#ch-nav-menu .ch-navgroup{display:flex;flex-direction:column;min-width:0}
#ch-nav-menu .ch-navgroup__title{margin:0 0 .45rem;padding:0;border:0;
  font-family:var(--font-family--body,inherit);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(241,236,219,.52)}
#ch-nav-menu .ch-navgroup a{display:block;padding:.28rem 0;font-size:.9375rem;
  line-height:1.35}

@media screen and (max-width:767px){
  /* The overlay lays its children out in a row. With bare anchors that wrapped
     harmlessly; with three groups it put them in three columns on a 320px
     screen, so the direction has to be stated. */
  #ch-nav-menu{flex-direction:column;align-items:flex-start}
  #ch-nav-menu .ch-navgroup{width:100%}
  #ch-nav-menu .ch-navgroup + .ch-navgroup{margin-top:1.4rem}
  #ch-nav-menu .ch-navgroup__title{margin-bottom:.35rem;padding-bottom:.35rem;
    border-bottom:1px solid rgba(241,236,219,.15)}
  #ch-nav-menu .ch-navgroup a{font-size:1.0625rem;padding:.4rem 0}
}