/* The top menu (pm B216, Sam's look on DEV, 25 Oct). Linked on every page by
   scripts/request_items.py (rewrite_menu), which also puts About, Julian Stodd
   and Contact in the bar; the theme's "More" fold is fixed in theme-script.js
   (patch_theme_script). */

/* Stacking. The theme gives its dropdowns z-index 999, but once the window has
   been under 768px the theme script leaves an inline transform on the menu,
   which makes the menu its own stacking context: the dropdowns then stack
   only inside it, and the page-title band and the footer widgets (positioned,
   later in the page) paint over them (Sam's /contact-us/ screenshot). One
   stacking level for the whole header keeps every dropdown, "More" and the
   flyouts above any page content; only the image lightbox (1042) is higher. */
.site-header {
  position: relative;
  z-index: 1000;
}
/* And the leftover transform goes, so the dropdowns' own z-index holds
   inside the header too (the theme does the same under 768px; the sticky
   and vertical menus that move the bar are not in use here). */
@media (min-width: 768px) {
  .main-navigation:not(.vertical-menu) #main-menu {
    transform: none !important;
  }
}

/* The header lines up with the page (Sam, 25 Oct): the logo starts where the
   page's text starts and the menu ends where it ends, at every width. Below
   1200px the theme's columns are fixed (720px, then 940px from 992px); the
   header had been fluid there (the logo up to 135px left of the text) so the
   menu had more room. It keeps the theme's columns now, and the bar keeps one
   row down to 768px (below); items still fold one at a time as the room runs
   out, with a little less space between them there so more stay in the bar. */
@media (min-width: 768px) and (max-width: 1199px) {
  .main-navigation .menu > li {
    margin-left: 12px;
    margin-right: 12px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .site-header.default .header-container__flex {
    flex-wrap: nowrap;
  }
  .site-header.default .main-navigation {
    order: 3;
  }
  .site-header.default .main-navigation .menu {
    justify-content: flex-end;
  }
}

@media (min-width: 768px) {
  /* The fold measures each item at its natural width: no shrinking, no
     wrapping inside the bar, and no size animating (the theme transitions
     every property, so leaving the phone layout animated the items' font
     size, padding and margins for 0.3s while the fit measured them). */
  #main-menu > li {
    flex-shrink: 0;
    transition: none;
  }
  #main-menu > li > a {
    white-space: nowrap;
    transition-property: color, background-color, border-color;
  }

  /* Keyboard: a dropdown opens while keyboard focus is inside it, as on
     hover, so Tab walks into it and on to its flyouts. Keyboard focus only
     (:focus-visible): a clicked "#" item would otherwise stay open after the
     pointer has left. */
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) li:has(:focus-visible) > ul {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    /* Visible at once (not after the theme's 0.2s fade), or a quick Tab
       finds the items still hidden and skips the whole list. */
    transition-property: transform, opacity;
  }
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) > li:has(:focus-visible) > ul {
    left: -40px;
  }
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) li li:has(:focus-visible) > ul {
    left: calc(100% + 1px);
  }
  /* "More" is the last item: its list opens leftwards, and so do its flyouts
     (the theme decides this on hover only). */
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) > li.super-guacamole__menu:hover > ul,
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) > li.super-guacamole__menu.menu-hover > ul,
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) > li.super-guacamole__menu:has(:focus-visible) > ul {
    left: auto;
    right: -10px;
  }
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) li.super-guacamole__menu li:hover > ul,
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) li.super-guacamole__menu li.menu-hover > ul,
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) li.super-guacamole__menu li:has(:focus-visible) > ul {
    left: auto;
    right: calc(100% + 1px);
  }
  .main-navigation a:focus-visible {
    outline: 3px solid #2e4277;
    outline-offset: 2px;
  }
}

/* A short window: a dropdown taller than the room below the bar (Events &
   Courses is about 500px) scrolls inside itself instead of running off the
   screen. Flyouts cannot open sideways out of a scrolling list, so there they
   show in place, under their item. */
@media (min-width: 768px) and (max-height: 680px) {
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) > li > .sub-menu {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) > li > .sub-menu .sub-menu {
    position: static;
    left: auto;
    right: auto;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: inherit;
  }
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) > li > .sub-menu .sub-menu a {
    padding-left: calc(35px + 1rem); /* the theme's 35px, one step in */
  }
  .main-navigation:not(.vertical-menu) .menu:not(.tm-mega-menu) > li > .sub-menu li.menu-item-has-children > a::after {
    display: none;
  }
}

/* Phone menu. The groups (How we help, Events & Courses) keep their expand
   toggle, which the theme script patch makes a keyboard control (Tab to it,
   Enter or Space). */
@media (max-width: 767px) {
  .main-navigation a:focus-visible,
  .main-navigation .sub-menu-toggle:focus-visible {
    outline: 3px solid #2e4277;
    outline-offset: -3px;
  }
}

/* The top of the page is the logo and the menu (Sam, 25 Oct): the social
   links and their thin bar are gone from the shared header. On phones the
   theme's fixed bar held only the menu button, with the logo on a row of its
   own below; the logo now sits in the bar, left, and the button right. The
   logo comes first in the page, so the button is what leads into the menu. */
.mobile-panel__logo {
  display: flex;
  align-items: center;
}
.mobile-panel__logo img {
  display: block;
  width: auto;
  height: 38px;
}
@media (max-width: 767px) {
  .mobile-panel {
    padding-left: 1.5625rem; /* the page's own gutter: the logo lines up with the text */
    padding-right: 13px; /* the button's lines end on the same gutter */
  }
  .site-header.default .header-container .site-branding {
    display: none;
  }
  /* A closed phone menu is off the screen but its links could still be
     tabbed to, invisibly, straight after the menu button. Hidden once it has
     slid out (the theme's 0.2s), so Tab goes from the button into the menu
     only when it is open. */
  .main-navigation.mobile-menu:not(.show) {
    visibility: hidden;
    transition: transform 0.2s linear, visibility 0s linear 0.2s;
  }
  .main-navigation.mobile-menu.show {
    visibility: visible;
  }
  /* Only the off-canvas menu is left in the row below the bar: no band. */
  .site-header.default .header-container {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Footer (Sam, 25 Oct): links, not structure. The shared footer
   (site/_partials/footer.html) is two short lists of links and the copyright
   line, in the page's text column; no widgets, no social icons. */
.site-footer--links {
  background-color: #f8f8f8;
  padding: 48px 0 36px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.footer-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.footer-links__list li {
  margin: 0;
  padding: 0;
}
.footer-links__list a {
  display: inline-block;
  padding: 6px 0; /* a 33px-high target */
  color: #2e4277;
  text-decoration: none;
}
.footer-links__list a:hover,
.footer-copyright a:hover {
  text-decoration: underline;
}
.footer-links__list a[aria-current="page"] {
  color: #000000;
}
.footer-links__list--elsewhere {
  margin-bottom: 0;
}
.site-footer--links a:focus-visible {
  outline: 3px solid #2e4277;
  outline-offset: 2px;
}
.footer-copyright {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid #ececee;
  color: #5e5e5e;
  font-size: 0.8125rem;
}
.footer-copyright a {
  color: inherit;
}