/* Site navigation styles, ported verbatim from the inline <style> block in the
   WordPress theme's header.php. */
:root {
    --ee-blue: #293C8F;

    /* The desktop header's content column (see the 961px block below), as a
       side inset for full-width elements. Other full-width blocks that line
       up with the header logo, like the home page banner, reuse it. The 50%
       resolves against whichever element uses it, so use it only on blocks
       that span the window.
       It is the text edge of the site's 1240px content column (max-width
       1240px, centered, 20px padding: .archive-page in ee-blog-index.css),
       so the logo and the search icon line up with the headings and cards on
       /blog/, the category pages, /services/, /our-work/ and /about/ at every
       width (2026-10-19). It used to track the post table of contents
       sidebar instead, which sat 56px left of those headings at 1440px; the
       sidebar keeps its own `left` in components/ee-toc.css. */
    --ee-header-inset: max(20px, 50% - 600px);
}

nav#ee-site-navigation #main-menu * {
  outline: none;
}

nav#ee-site-navigation {
    position: relative;
    z-index: 999;
    width: -webkit-fill-available;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: white;
    font-family: 'Lato', sans-serif;
}

nav#ee-site-navigation svg {
  fill: var(--ee-blue);
}

nav#ee-site-navigation a {
    height: 100%;
    display: flex;
    font-size: 1rem;
    text-decoration: none;
    align-items: center;
    padding: 0 20px;
}

nav#ee-site-navigation > div:not(.menu-toggle) {
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

nav#ee-site-navigation > div:last-child { justify-content: end; }
nav#ee-site-navigation > div:first-child { justify-content: start; }

nav#ee-site-navigation #ee-logo {
  height: 79px;
}

nav#ee-site-navigation #ee-logo a {
    background-repeat: no-repeat;
    background-position-y: center;
    height: 79px;
    display: inline-block;
}

nav#ee-site-navigation li > a:hover,
nav#ee-site-navigation li > a:focus,
nav#ee-site-navigation .menu-toggle:has(>:focus),
nav#ee-site-navigation .menu-toggle:has(>:hover) {
    /* --ee-blue, not --highlight-blue: one focus color site-wide (2026-10-13). */
    box-shadow: inset 0 0 0 4px var(--ee-blue), inset 0 0 0 6px white;
}

nav#ee-site-navigation .menu-toggle a {
  color: var(--ee-blue);
  font-weight: 700;
}

nav#ee-site-navigation li.current-item > a {
    background-color: var(--ee-blue);
}

nav#ee-site-navigation li.current-item > a svg,
nav#ee-site-navigation li.current-item > a {
    color: white !important;
    fill: white !important;
}

/* On /search/ the Search link is the current page. It sits outside the menu
   list, so ee-nav.js's li.current-item never reaches it; base.njk sets
   aria-current instead, and this matches the menu's look for it. The focus
   outline turns white, because the usual brand blue one would vanish into
   the fill, and moves 4px further in: at the usual -4px offset it covers the
   link's outermost 4px, so a white ring sat on the white page and focus only
   made the blue box look smaller. */
nav#ee-site-navigation .search-toggle[aria-current="page"] {
    background-color: var(--ee-blue);
}

nav#ee-site-navigation .search-toggle[aria-current="page"] svg {
    fill: white;
}

nav#ee-site-navigation .search-toggle[aria-current="page"]:hover,
nav#ee-site-navigation .search-toggle[aria-current="page"]:focus {
    outline: 3px solid white;
    outline-offset: -7px;
}

nav#ee-site-navigation:has(.menu-toggle *[aria-expanded="true"]) > ul {
    display: block !important;
}

nav#ee-site-navigation #main-menu {
    justify-content: space-between;
    width: 100vw;
    width: -webkit-fill-available;
    position: absolute;
    top: 79px;
    left: 0;
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: white;
    box-shadow: 0 12px 12px 0 rgba(0,0,0,.2);
}

nav#ee-site-navigation #main-menu li a {
    min-height: 79px;
    margin: 0;
    padding: 0 12px 0 20px;
    display: flex;
    font-size: 1.2rem;
    font-weight: 700;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

nav#ee-site-navigation #main-menu #contact-menu {
  justify-content: flex-start;
}

nav#ee-site-navigation #main-menu li:not(.current-item) a {
  color: var(--ee-blue);
}

/* The magnifying glass shows at every width. */
nav#ee-site-navigation .search-toggle svg {
    display: block;
}

@media screen and (min-width: 961px) {
    /* The bar stays full width, but its contents sit in a centered column
       (--ee-header-inset, defined at the top of this file), so the logo and
       the links stop short of the window edges. */
    /* The padding is the inset less the logo's and the search link's own inner
       space, so the visible logo and magnifying glass, not their hit areas,
       line up with the column edges. The logo's background is 70% of its
       150px box, centered (22.5px each side); the glass is centered in its
       79px box (29.5px each side), so the blue current-page fill on /search/
       frames it evenly. The floor of 0 keeps both boxes inside the window
       where the inset is narrower than that inner space (below about 1260px),
       so the page never scrolls sideways and their focus rings are never cut
       off; there the glass sits up to 9.5px inside the column edge. */
    nav#ee-site-navigation {
        display: grid;
        grid-template-columns: 1fr auto auto;
        padding-inline:
            max(0px, var(--ee-header-inset) - 22.5px)
            max(0px, var(--ee-header-inset) - 29.5px);
    }

    nav#ee-site-navigation .search-toggle {
        justify-content: center;
    }

    .menu-toggle {
        display: none !important;
    }

    nav#ee-site-navigation #main-menu {
        justify-content: unset;
        width: fit-content !important;
        position: relative;
        top: 0;
        display: flex !important;
        padding-right: 0;
        box-shadow: none;
    }

    nav#ee-site-navigation #main-menu li a {
        justify-content: left;
      }

    nav#ee-site-navigation #main-menu li a {
      gap: 12px;
      padding: 0 20px;
    }
}