/* ASPIR - Site Header (Elementor) support styles (v1.1.1) */

/* Keep the header sticky relative to the whole page: the Elementor wrappers must not create their own box. */
.aspir-header-wrap,
.aspir-header-wrap>.elementor{display:contents}
body.admin-bar .e-con.aspir-c.aspir-header{top:32px}
@media (max-width:782px){body.admin-bar .e-con.aspir-c.aspir-header{top:46px}}

/* Mobile menu: hidden until the hamburger is pressed, never shown on large screens. */
.elementor .elementor-element.e-con.aspir-c.aspir-mobile-menu{
  --display:none;
  --padding-top:8px;--padding-right:16px;--padding-bottom:16px;--padding-left:16px;
  --padding-block-start:8px;--padding-block-end:16px;--padding-inline-start:16px;--padding-inline-end:16px;
  border-top:1px solid rgba(0,0,0,.08);background:#fff;
}
.elementor .elementor-element.e-con.aspir-c.aspir-mobile-menu.aspir-open{--display:block}
@media (min-width:64rem){
  .elementor .elementor-element.e-con.aspir-c.aspir-mobile-menu,
  .elementor .elementor-element.e-con.aspir-c.aspir-mobile-menu.aspir-open{--display:none}
}
/* While editing at tablet/mobile width in Elementor, keep the menu visible so it can be edited. */
@media (max-width:1023px){
  .elementor-editor-active .elementor .elementor-element.e-con.aspir-c.aspir-mobile-menu{--display:block}
}

/* Hamburger button inside the Elementor HTML widget */
.aspir-menu-toggle{cursor:pointer}
.aspir-menu-toggle:focus-visible,.aspir-nav-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* Mobile menu links keep the normal text colour (as in the original), only the pill background marks the current page */
.aspir-mobile-menu a.aspir-nav-link{color:inherit}