@charset "utf-8";

/* ============================================================
   Divi Theme Builder header → the mockup's .site-header
   ============================================================

   The site header is a Theme Builder global header (one section,
   one row, a logo Image module and a Menu module), so its markup is
   Divi's, not the mockup's. This file gives that markup the
   mockup's header: header.css section 5, value for value.

   Selectors were read from the live page and Divi 5.13.1's own CSS
   and scripts, not assumed:

     header.et-l--header                   the Theme Builder header
       .et_pb_section > .et_pb_row         the bar
         .et_pb_column > .et_pb_image      the logo
         .et_pb_column > .et_pb_menu       the menu module
           ul.et-menu > li > a             top-level links
             li.menu-item-has-children > ul.sub-menu   dropdowns
             li.current-menu-item / .current-menu-ancestor
           .mobile_nav.closed|.opened      the hamburger's wrapper
             span.mobile_menu_bar          the hamburger (role=button
                                           and aria-label added in
                                           inc/divi-menu.php)
             ul.et_mobile_menu             built by Divi's script at
                                           load: a copy of ul.et-menu,
                                           sub-menus nested and open

   Only stable class names are used — never the numbered
   et_pb_*_0_tb_header ones, which change when modules move.

   Specificity. Divi prints each module's builder settings inline,
   after every stylesheet, as `.et-db #et-boc .et-l .et_pb_menu_0_tb_header
   …` (one id, four or five classes). Every rule here starts with
   `.et-db #et-boc .et-l.et-l--header` and adds at least one class, so
   it outranks those without !important. Builder design settings for
   the header should stay at their defaults; the one that can't be
   cleared is answered below with the file's only !important.

   Breakpoint: 980px, Divi's. Its CSS hides the desktop menu and its
   script builds the mobile one at that width; the mockup's 62em
   (992px) would mean fighting both over 12px.

   Every value is a token from tokens.css.
   ============================================================ */

/* -- The bar ------------------------------------------------ */

/* The hairline of burgundy across the very top of the page. */
.et-db #et-boc .et-l.et-l--header::before {
  content: '';
  display: block;
  height: var(--rule-thick);
  background-color: var(--burgundy-600);
}

.et-db #et-boc .et-l.et-l--header .et_pb_section {
  position: relative;
  z-index: var(--z-header);
  padding: 0;
  background-color: var(--colour-bg);
  border-bottom: var(--border-hairline);
}

.et-db #et-boc .et-l.et-l--header .et_pb_row {
  position: relative; /* the mobile panel hangs from the row */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-md);
  width: 100%;
  max-width: var(--container-lg);
  min-height: var(--header-height);
  margin-inline: auto;
  padding: var(--space-2xs) var(--space-gutter);
}

/* The columns size to their content: logo left, menu right, on one
   line at every width (the builder's phone columns are full width). */
.et-db #et-boc .et-l.et-l--header .et_pb_column {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.et-db #et-boc .et-l.et-l--header .et_pb_column.et-last-child {
  flex: 1 1 auto;
  align-items: flex-end;
}

.et-db #et-boc .et-l.et-l--header .et_pb_module {
  margin: 0;
}

/* -- The logo ----------------------------------------------- */

.et-db #et-boc .et-l.et-l--header .et_pb_image {
  line-height: 0;
}

.et-db #et-boc .et-l.et-l--header .et_pb_image img {
  width: auto;
  max-width: none;
  height: var(--space-xl);
}

@media (min-width: 48em) {
  .et-db #et-boc .et-l.et-l--header .et_pb_image img {
    height: calc(var(--space-xl) + var(--space-2xs));
  }
}

/* -- Links, both menus ---------------------------------------- */

.et-db #et-boc .et-l.et-l--header .et_pb_menu a {
  opacity: 1; /* Divi dims links to 0.7 on hover */
  transition: var(--transition-colour);
}

.et-db #et-boc .et-l.et-l--header .et_pb_menu a:focus-visible,
.et-db #et-boc .et-l.et-l--header .mobile_menu_bar:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* -- Desktop menu --------------------------------------------- */

@media (min-width: 981px) {
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu {
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li {
    align-items: center;
    padding: 0;
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li > a {
    position: relative;
    padding: var(--space-2xs) 0;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--colour-text);
  }

  /* Thin warm rule slides in beneath the active or hovered item.
     ::before, because Divi's caret already owns ::after. */
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li > a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rule-thin);
    background-color: var(--colour-rule-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li > a:hover::before,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li.current-menu-item > a::before,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li.current-menu-ancestor > a::before {
    transform: scaleX(1);
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li.current-menu-item > a,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li.current-menu-ancestor > a {
    color: var(--colour-heading);
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li.current-menu-item > a::before,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > li.current-menu-ancestor > a::before {
    background-color: var(--burgundy-600);
  }

  /* The caret: the ornament lozenge with two sides inked, in place of
     Divi's icon-font arrow. */
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > .menu-item-has-children > a:first-child {
    padding-right: 0;
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu > .menu-item-has-children > a:first-child::after {
    content: '';
    position: static;
    display: inline-block;
    width: var(--space-3xs);
    height: var(--space-3xs);
    margin-left: var(--space-3xs);
    border-right: var(--rule-hairline) solid currentColor;
    border-bottom: var(--rule-hairline) solid currentColor;
    font-family: inherit;
    transform: translateY(-0.15em) rotate(45deg);
  }

  /* The panel hangs flush off the bottom of its item — no gap for
     the pointer to fall through on the way down. */
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu .sub-menu {
    display: grid;
    gap: var(--space-3xs);
    top: 100%;
    left: calc(var(--space-xs) * -1);
    width: auto;
    min-width: var(--nav-menu-width);
    padding: var(--space-2xs);
    /* Clearing the builder's dropdown background leaves Divi printing
       `background-color: transparent !important` inline; only an
       !important of higher specificity answers it. */
    background-color: var(--colour-bg) !important;
    border: var(--border-hairline);
    border-top: var(--rule-thin) solid var(--burgundy-600);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-card);
    transform: translateY(calc(var(--space-3xs) * -1));
    transition: opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out),
      visibility var(--duration-fast) var(--ease-out);
  }

  /* Open on hover (Divi's own rule) and on keyboard focus, as in the
     mockup: tabbing onto the parent link opens its panel. */
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu li:hover > .sub-menu,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu li.et-hover > .sub-menu,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu .sub-menu li {
    display: block;
    padding: 0;
    line-height: inherit;
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu .sub-menu a {
    width: auto;
    padding: var(--space-3xs) var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: none;
    white-space: nowrap;
    color: var(--colour-text-muted);
    border-radius: var(--radius-sm);
  }

  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et-menu .sub-menu a:hover {
    color: var(--colour-link-hover);
    background-color: var(--colour-bg-band);
  }
}

/* -- Mobile menu ---------------------------------------------- */

@media (max-width: 980px) {
  /* Let the panel position against the row, so it spans the header
     rather than the menu column. */
  .et-db #et-boc .et-l.et-l--header .et_pb_column,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu,
  .et-db #et-boc .et-l.et-l--header .et_pb_menu_inner_container,
  .et-db #et-boc .et-l.et-l--header .et_mobile_nav_menu,
  .et-db #et-boc .et-l.et-l--header .mobile_nav {
    position: static;
  }

  .et-db #et-boc .et-l.et-l--header .et_mobile_nav_menu {
    margin: 0;
  }

  /* The toggle: a hairline box with three bars, as the mockup's
     .nav-toggle__label. Divi's icon-font glyph (::before) is
     replaced by bars drawn on ::after — one bar and its two
     shadows, so all three keep the pill ends. */
  .et-db #et-boc .et-l.et-l--header .mobile_menu_bar {
    display: flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-xs);
    line-height: 0;
    color: var(--colour-heading);
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transform: none;
    transition: var(--transition-colour);
  }

  .et-db #et-boc .et-l.et-l--header .mobile_menu_bar:hover {
    border-color: var(--colour-rule-accent);
    background-color: var(--colour-bg-wash);
  }

  .et-db #et-boc .et-l.et-l--header .mobile_nav .mobile_menu_bar::before {
    display: none;
  }

  .et-db #et-boc .et-l.et-l--header .mobile_menu_bar::after {
    content: '';
    display: block;
    width: var(--space-sm);
    height: var(--rule-thin);
    margin-block: calc(var(--rule-thin) + var(--space-3xs));
    background-color: currentColor;
    border-radius: var(--radius-pill);
    box-shadow:
      0 calc((var(--rule-thin) + var(--space-3xs)) * -1) 0 currentColor,
      0 calc(var(--rule-thin) + var(--space-3xs)) 0 currentColor;
  }

  /* The panel. Divi slides it open and shut (inline display), so
     spacing between items is margin, not a grid gap. */
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et_mobile_menu {
    top: 100%;
    left: 0;
    width: 100%;
    padding: var(--space-sm) var(--space-gutter);
    background-color: var(--colour-bg);
    border-top: var(--border-hairline);
    box-shadow: var(--shadow-card);
  }

  .et-db #et-boc .et-l.et-l--header .et_mobile_menu li {
    padding: 0;
  }

  .et-db #et-boc .et-l.et-l--header .et_mobile_menu li + li {
    margin-top: var(--space-3xs);
  }

  .et-db #et-boc .et-l.et-l--header .et_mobile_menu li a {
    padding: var(--space-2xs) var(--space-3xs);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--colour-text);
    background-color: transparent;
    border-bottom: 0;
    border-radius: var(--radius-sm);
  }

  .et-db #et-boc .et-l.et-l--header .et_mobile_menu li a:hover {
    color: var(--colour-link-hover);
    background-color: var(--colour-bg-band);
  }

  .et-db #et-boc .et-l.et-l--header .et_mobile_menu .current-menu-item > a {
    color: var(--colour-heading);
    font-weight: var(--weight-semibold);
  }

  /* Sub-menus stay open (Divi's mobile menu has no toggles), indented
     under a thin warm rule, as the mockup's opened state. */
  .et-db #et-boc .et-l.et-l--header .et_pb_menu .et_mobile_menu .sub-menu {
    margin: var(--space-3xs) 0 0 var(--space-2xs);
    padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
    border-left: var(--rule-thin) solid var(--colour-rule);
  }

  .et-db #et-boc .et-l.et-l--header .et_mobile_menu .sub-menu a {
    padding: var(--space-3xs);
    font-size: var(--text-base);
    color: var(--colour-text-muted);
  }
}