/* Site header ("new" menu layout in header.php) spacing, plus the page layout that keeps the footer down. Loaded on every page. */

#masthead {
  --hd-gutter: clamp(16px, 3vw, 40px);
}

/* Logo and menu button keep the page gutter instead of touching the screen edges */
#masthead #site-logo-bar { padding: 0 var(--hd-gutter); }

/* Desktop: logo left, links grouped together on the right, followed by the social icons */
@media screen and (min-width: 640px) {
  /* Without min-content the logo's wrapper sizes to the image file's width and leaves ~190px of dead space after the logo */
  #masthead #site-logo-bar > .grid-x:first-child { width: min-content; }
  #masthead #site-header-menu { flex: 1; }
  #masthead #title-nav { width: 100%; }
  #masthead #title-nav > li:first-child { margin-left: auto; }
  #masthead #title-nav > li:not(.social-icon) + .social-icon { margin-left: 12px; }
}
#masthead #title-nav > li > a { height: 80px; padding: 0 clamp(10px, 1.5vw, 22px); }
#masthead #title-nav > .social-icon > a { padding: 0 8px; }
#masthead #title-nav > .social-icon:last-child > a { padding-right: 0; }
#masthead #title-nav .social-icon img { width: 22px; height: 22px; }

/* Active page; anchor links like Contact (/about/#contact) share their page's URL */
#masthead #title-nav > .current-menu-item > a:not([href*="#"]) { color: #fff; box-shadow: inset 0 -3px 0 #fff; } /* the header bar is the brand green, so the active item uses white */

/* Mobile menu button */
#masthead .menu-container { margin: 0; }

/* Footer stays at the bottom of the screen while a page's content is short or still loading */
#page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
#page > #site-footer { margin-top: auto; }