/* Site chrome: sticky header, mobile menu, language switcher, footer.
   Loaded on every front-end page. Scoped tightly to the elements involved so it
   cannot leak into page content. */

:root{
  --eo-head-z:9000;
  --eo-menu-z:99990;
}

/* ---------------------------------------------------------------- header
   Sticky rather than fixed, so the page keeps its original flow and nothing
   jumps when the header pins. The admin bar height is read from the variable
   WordPress sets, so the header tucks under it instead of behind it. */
body .elementor-location-header{
  position:-webkit-sticky;
  position:sticky;
  top:var(--wp-admin--admin-bar--height, 0px);
  z-index:var(--eo-head-z);
  background:#FDF4E4;
  transition:box-shadow .45s cubic-bezier(.22,1,.36,1),
             padding .45s cubic-bezier(.22,1,.36,1);
}

/* A sticky element cannot escape a clipped ancestor. Nothing between the header
   and the document root may clip. */
html, body{ overflow-x:clip; }

html.eo-scrolled body .elementor-location-header{
  box-shadow:0 8px 30px rgba(57,66,64,.15);
}

/* Condense once the visitor has committed to scrolling. */
@media (min-width:901px){
  html.eo-scrolled body .elementor-location-header .e-con-inner,
  html.eo-scrolled body .elementor-location-header > .e-con{
    padding-block:6px;
  }
}

/* Anchor jumps must clear the pinned header. */
html{ scroll-padding-top:130px; }
@media (max-width:900px){ html{ scroll-padding-top:96px; } }

/* ------------------------------------------------------- language switcher
   The switcher sits in a fixed container. On desktop it rides the right edge,
   clear of the pinned header. On a phone that position lands it between the
   header and the hero, so it moves to the opposite corner from the back-to-top
   button and shrinks to a pill. */
body .elementor-location-header .e-con:has(> .elementor-widget .babel-switcher),
body .elementor-location-header .e-con:has(.babel-switcher){
  right:0 !important;
}

@media (max-width:900px){
  body .elementor-location-header .e-con:has(.babel-switcher){
    top:auto !important;
    bottom:16px !important;
    right:auto !important;
    left:12px !important;
    width:auto !important;
    max-width:none !important;
  }

  .babel-switcher.babel-style-dropdown{
    background:rgba(90,10,30,.94);
    border:1px solid rgba(228,184,74,.55);
    border-radius:999px;
    box-shadow:0 10px 26px rgba(0,0,0,.28);
  }
  .babel-switcher .babel-toggle{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:7px;
    padding:8px 14px !important;
    min-height:0 !important;
  }
  .babel-switcher .babel-name{
    color:#F8ECA8 !important;
    font-family:"Barlow Condensed",sans-serif;
    font-size:13px;
    letter-spacing:.6px;
    text-transform:uppercase;
  }
  .babel-switcher .babel-toggle svg,
  .babel-switcher .babel-toggle img{ width:18px !important; height:13px !important; }

  /* Near the bottom of the screen the list has to open upward. */
  .babel-switcher .babel-menu{
    top:auto !important;
    bottom:calc(100% + 8px) !important;
    left:0 !important;
    right:auto !important;
    max-height:60vh;
    overflow-y:auto;
  }
}

/* The switcher is a control, not prose, so the content-link underline that the
   motion layer applies to text links has no business here. */
.babel-switcher a{ background-image:none !important; }

/* ------------------------------------------------------------- mobile menu
   The panel shipped at z-index 1, which let page content paint straight through
   it while scrolling. It now sits above everything except the scroll indicator,
   fills the viewport, and scrolls within itself. */
.uc-side-menu-wrapper{
  z-index:var(--eo-menu-z) !important;
  height:100dvh !important;
  max-height:100dvh !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.uc-side-menu-items{
  min-height:100dvh;
  background:#BA0C2F;
}
.uc-side-menu-wrapper .uc-side-menu-items{ padding-bottom:48px; }

/* Anything the plugin renders as a backdrop goes just beneath the panel. */
.uc-side-menu-overlay,
.uc-side-menu-wrapper + .uc-side-menu-overlay{
  z-index:calc(var(--eo-menu-z) - 1) !important;
}

/* While the menu is open the page behind it must not move. */
html.eo-menu-open,
html.eo-menu-open body{
  overflow:hidden !important;
  touch-action:none;
}

/* The close control has to stay reachable at the top of a long menu. */
.uc-side-menu-wrapper .uc-side-menu-collapse-icon{
  position:sticky;
  top:0;
  z-index:2;
}

/* ------------------------------------------------- current page in the menu */
.uc-side-menu-items .eo-current > a,
.uc-side-menu-items a.eo-current,
.uc-side-menu-items .current-menu-item > a,
.uc-side-menu-items .current_page_item > a{
  color:#FFFCF6 !important;
  font-weight:600;
  position:relative;
}
.uc-side-menu-items .eo-current > a::before,
.uc-side-menu-items a.eo-current::before,
.uc-side-menu-items .current-menu-item > a::before,
.uc-side-menu-items .current_page_item > a::before{
  content:"";
  position:absolute;
  left:-14px; top:50%;
  width:4px; height:20px;
  margin-top:-10px;
  border-radius:2px;
  background:#F7B718;
}

/* An ancestor branch is marked more quietly than the page itself. */
.uc-side-menu-items .eo-current-ancestor > a,
.uc-side-menu-items .current-menu-ancestor > a,
.uc-side-menu-items .current-menu-parent > a,
.uc-side-menu-items .current_page_ancestor > a{
  color:#F8ECA8 !important;
}

/* Desktop navigation gets the same courtesy, as an underline. */
.elementor-location-header .eo-current > a,
.elementor-location-header a.eo-current,
.elementor-location-header .current-menu-item > a,
.elementor-location-header .current_page_item > a{
  box-shadow:inset 0 -2px 0 0 #F7B718;
}

/* ------------------------------------------------------------------ footer */
@media (max-width:900px){
  /* The crest was left-aligned in a narrow box while the text beneath it was
     centred. Both now share the same axis. */
  .elementor-location-footer .elementor-widget-image,
  .elementor-location-footer .elementor-widget-theme-site-logo{
    width:100% !important;
    text-align:center !important;
  }
  .elementor-location-footer .elementor-widget-image img,
  .elementor-location-footer .elementor-widget-theme-site-logo img{
    margin-inline:auto !important;
  }
  .elementor-location-footer .elementor-widget-image .elementor-widget-container,
  .elementor-location-footer .elementor-widget-theme-site-logo .elementor-widget-container{
    text-align:center !important;
  }
}

/* -------------------------------------------------------------- photoswipe
   WooCommerce prints its gallery dialog into the footer of every page. With the
   plugin's stylesheet dropped on non-shop pages the dialog had no rules to hide
   it, so its six chrome buttons rendered as empty outlines. Belt and braces:
   the markup is also unhooked in PHP. */
.pswp:not(.pswp--open){
  display:none !important;
  visibility:hidden !important;
}

@media (prefers-reduced-motion:reduce){
  body .elementor-location-header{ transition:none !important; }
}