/* =========================================================
   KUDOS SITE CSS
   Lives in Appearance > Customize > Additional CSS and is
   mirrored to uploads/kudos/site.css by the kudos-site-css
   mu-plugin, then enqueued at wp_enqueue_scripts priority 999
   so it loads on the front end AND inside the Divi builder.
   Never move these rules into a module's Free Form CSS.
   ========================================================= */

:root{ --kudos-bar-h: 104px; }

/* ---- sticky header ------------------------------------- */
#page-container .et-l--header{
  position: sticky;
  top: 0;
  z-index: 2147483001;
  isolation: isolate;
}

@media (max-width: 980px){

  /* ---- mobile bar: menu left, wordmark centre, cta right -- */
  #page-container .et-l--header .et_pb_row_3_tb_header{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
  }
  #page-container .et-l--header .et_pb_row_3_tb_header > .et_pb_column{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
  }
  #page-container .et-l--header .et_pb_row_3_tb_header > .et_pb_column:nth-child(1){ grid-column: 2; grid-row: 1; justify-self: center; }
  #page-container .et-l--header .et_pb_row_3_tb_header > .et_pb_column:nth-child(2){ grid-column: 1; grid-row: 1; justify-self: start; }
  #page-container .et-l--header .et_pb_row_3_tb_header > .et_pb_column:nth-child(3){ grid-column: 3; grid-row: 1; justify-self: end; }

  /* Divi's row clearfix pseudo-elements become anonymous grid items and
     add a phantom second row, so the bar renders ~32px too tall. */
  #page-container .et-l--header .et_pb_row_3_tb_header::before,
  #page-container .et-l--header .et_pb_row_3_tb_header::after{ display: none !important; }
  #page-container .et-l--header .et_pb_row_3_tb_header{
    grid-auto-rows: min-content;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Divi puts a bottom margin on every module in a column; the mobile
     bar is a single grid row so it has to be flat. */
  #page-container .et-l--header .et_pb_row_3_tb_header .et_pb_module,
  #page-container .et-l--header .et_pb_row_3_tb_header .et_pb_button_module_wrapper{
    margin: 0 !important;
  }
  #page-container .et-l--header .et_pb_row_3_tb_header .et_pb_button_module_wrapper{
    display: flex !important;
    align-items: center;
  }
  #page-container .et-l--header .et_pb_row_3_tb_header .et_pb_button{ white-space: nowrap; }
  #page-container .et-l--header .et_pb_row_3_tb_header .et_pb_menu__wrap,
  #page-container .et-l--header .et_pb_row_3_tb_header .et_pb_menu__menu{ margin: 0 !important; }

  /* ---- canvas takeover ---------------------------------- */
  #page-container .et-l--header .et_pb_menu .et_mobile_menu{
    position: fixed !important;
    inset: var(--kudos-bar-h) 0 0 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 26px 64px !important;
    background-color: var(--gcid-secondary-color) !important;
    border-top: 0 !important;
    box-shadow: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2147482999;
    animation: kudos-drawer-in 220ms cubic-bezier(.2,.7,.3,1) both;
  }
  #page-container .et-l--header .et_mobile_menu li{ border: 0 !important; padding: 0 !important; }
  #page-container .et-l--header .et_mobile_menu li a{
    display: block;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 500 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;
    text-transform: lowercase !important;
    color: var(--gcid-870898bf-f6b9-45e2-9d14-abfc3be7b60d) !important;
    padding: 20px 0 !important;
    border-bottom: .7px solid var(--gcid-24d03674-c5cf-4f83-8f9c-2978e4f5c9cc) !important;
    opacity: 1 !important;
  }
  #page-container .et-l--header .et_mobile_menu li a:hover,
  #page-container .et-l--header .et_mobile_menu li a:focus-visible,
  #page-container .et-l--header .et_mobile_menu li.current-menu-item > a{
    color: var(--gcid-primary-color) !important;
  }

  /* ---- hamburger / close glyph -------------------------- */
  #page-container .et-l--header .mobile_menu_bar:before{
    color: var(--gcid-870898bf-f6b9-45e2-9d14-abfc3be7b60d) !important;
    font-size: 32px !important;
  }
  #page-container .et-l--header .mobile_nav.opened .mobile_menu_bar:before{
    content: '\4d' !important; /* ETmodules close glyph */
    color: var(--gcid-primary-color) !important;
  }

  /* ---- lock the page behind the drawer ------------------ */
  html:has(#page-container .et-l--header .mobile_nav.opened),
  body:has(#page-container .et-l--header .mobile_nav.opened){
    overflow: hidden !important;
    overscroll-behavior: none;
  }
}

@keyframes kudos-drawer-in{
  from{ opacity: 0; transform: translateY(-10px); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  #page-container .et-l--header .et_pb_menu .et_mobile_menu{ animation: none !important; }
}

/* ---- builder safety -------------------------------------
   body.et-fb means a builder is open. While editing a PAGE the
   header is not rendered as chrome, so un-pin anything fixed so
   it cannot cover the canvas. When editing the header template
   itself the pinning is left alone.
   -------------------------------------------------------- */
body.et-fb:not(.single-et_header_layout) #page-container .et-l--header{ position: static !important; }
body.et-fb:not(.single-et_header_layout) #page-container .et-l--header .et_pb_menu .et_mobile_menu{
  position: static !important;
  inset: auto !important;
  animation: none !important;
}