/* Site chrome: sticky header, mobile menu, language switcher, footer.
   Loaded on every front-end page, scoped tightly to the elements involved. */

:root{ --eo-head-z:9000; --eo-menu-z:999999; --eo-panel-w:min(88vw, 340px); }
body .elementor-location-header{
  /* Pinning is Elementor's per-row sticky, which offsets itself for the admin bar
     correctly. This wrapper only needs to be positioned so its z-index applies;
     giving it a sticky offset too counted the admin bar twice and left a blank
     band above the header for signed-in visitors. */
  position:relative;
  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);
}
html, body{ overflow-x:clip; }
html.eo-scrolled body .elementor-location-header{ box-shadow:0 8px 30px rgba(57,66,64,.15); }
@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; }
}
html{ scroll-padding-top:130px; }
@media (max-width:900px){ html{ scroll-padding-top:96px; } }


body .elementor-location-header .e-con:has(.babel-switcher),
body .eo-lang-dock{ z-index:calc(var(--eo-head-z) + 5) !important; right:0 !important; }
@media (max-width:900px){
  body .elementor-location-header .e-con:has(.babel-switcher),
  body .eo-lang-dock{
    top:auto !important; bottom:16px !important; right:auto !important; left:12px !important;
    width:max-content !important; min-width:0 !important; max-width:none !important;
    padding:0 !important; pointer-events:none;
  }
  body .elementor-location-header .e-con:has(.babel-switcher) > *,
  body .eo-lang-dock > *{ pointer-events:auto; width:max-content !important; }
  .babel-switcher.babel-style-dropdown{
    background:rgba(201,37,44,.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; }
  .babel-switcher .babel-menu{ top:auto !important; bottom:calc(100% + 8px) !important; left:0 !important; right:auto !important; max-height:60vh; overflow-y:auto; }
}
html.eo-menu-open .elementor-location-header .e-con:has(.babel-switcher),
html.eo-menu-open .eo-lang-dock{ opacity:0 !important; pointer-events:none !important; transition:opacity .25s ease; }
.babel-switcher a{ background-image:none !important; }
body.uc-menu-push{ padding-left:0 !important; padding-right:0 !important; }
/* A closed panel carries both the open and the close class, so the open rules are
   written to exclude anything currently closing. */
/* The panel's width, offset and slide animation are left entirely to the plugin.
   Overriding them restarted its one-second transition on every pass and left the
   panel stranded off screen. Only stacking order and height are adjusted here.
   A closed panel carries both the open and the close class, hence the :not(). */
.uc-side-menu-wrapper.menu-left-open:not(.menu-left-close),
.uc-side-menu-wrapper.menu-right-open:not(.menu-right-close){
  z-index:var(--eo-menu-z) !important;
  height:100dvh !important;
  max-height:100dvh !important;
}

/* The backdrop is a child of the panel, so a high z-index put the black scrim on
   top of the menu rather than behind it. */
.ue_side_menu_overlay{ z-index:0 !important; }
.uc-side-menu-wrapper > .side-menu-holder{ position:relative; z-index:2; }

.uc-side-menu-wrapper .side-menu-holder,
.uc-side-menu-items{
  height:100dvh !important; max-height:100dvh !important;
  overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.uc-side-menu-items{ background:#C9252C; padding-bottom:110px !important; }

.uc-side-menu-wrapper .uc-close-side-menu{
  position:absolute !important; top:14px !important; right:14px !important;
  left:auto !important; bottom:auto !important; z-index:5 !important;
  width:44px !important; height:44px !important;
  display:flex !important; align-items:center; justify-content:center;
  margin:0 !important; border-radius:999px !important;
  background:#F8ECA8 !important; border:1px solid rgba(201,37,44,.35) !important;
  color:#C9252C !important; font-size:20px !important; line-height:1 !important;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:background-color .3s ease, transform .3s ease;
}
.uc-side-menu-wrapper .uc-close-side-menu:hover{ background:#FFFCF6 !important; transform:scale(1.06); }
/* The glyph came from an icon font, so if Font Awesome fails to load the button is
   an empty disc. The cross is drawn in CSS instead and depends on nothing. */
.uc-side-menu-wrapper .uc-close-side-menu i,
.uc-side-menu-wrapper .uc-close-side-menu svg{
  display:none !important;
}
.uc-side-menu-wrapper .uc-close-side-menu::before,
.uc-side-menu-wrapper .uc-close-side-menu::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:19px; height:2.5px;
  margin:-1.25px 0 0 -9.5px;
  border-radius:2px;
  background:#C9252C;
}
.uc-side-menu-wrapper .uc-close-side-menu::before{ transform:rotate(45deg); }
.uc-side-menu-wrapper .uc-close-side-menu::after{ transform:rotate(-45deg); }
.uc-side-menu-items .ue_logo{ padding-right:64px; }
html.eo-menu-open, html.eo-menu-open body{ overflow:hidden !important; }

/* The login plugin paints this button from its own custom properties, with
   !important on both colours. Setting those properties inside the menu is more
   reliable than out-specifying it, and it fixes hover and focus at the same time. */
.uc-side-menu-items{
  --afrik-lp-btn-bg:#FFFCF6;
  --afrik-lp-btn-text:#C9252C;
  --afrik-lp-btn-hbg:#F8ECA8;
  --afrik-lp-btn-htext:#C9252C;
}

.uc-side-menu-items a#afrik-login-trigger,
.uc-side-menu-items .afrik-login-menu-item > a,
.uc-side-menu-items .eohsj-login-trigger > a,
.uc-side-menu-items a.afrik-lp-menu-btn{
  display:block !important;
  /* text-fill-color is what actually paints the glyphs in WebKit, and it is not
     covered by `color` if anything upstream sets it. */
  -webkit-text-fill-color:#C9252C !important; margin:18px 22px 8px !important; padding:13px 18px !important;
  border-radius:999px !important; background:#FFFCF6 !important; color:#C9252C !important;
  border:1px solid rgba(228,184,74,.7) !important; text-align:center; font-weight:600;
  letter-spacing:.4px; opacity:1 !important; visibility:visible !important;
  text-indent:0 !important; font-size:16px !important; line-height:1.3 !important;
}
.uc-side-menu-items .afrik-login-menu-item > a:hover,
.uc-side-menu-items .afrik-login-menu-item > a:focus,
.uc-side-menu-items a.afrik-lp-menu-btn:hover,
.uc-side-menu-items a.afrik-lp-menu-btn:focus,
.uc-side-menu-items a#afrik-login-trigger:hover,
.uc-side-menu-items a#afrik-login-trigger:focus{
  background:#F8ECA8 !important;
  color:#C9252C !important;
  -webkit-text-fill-color:#C9252C !important;
}
.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:#C9252C !important; -webkit-text-fill-color:#C9252C !important;
  background:#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;
}
.uc-side-menu-items .afrik-login-menu-item > a::before{ display:none !important; }
.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; }
.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; }
.elementor-location-header .afrik-login-menu-item > a{ box-shadow:none !important; }

@media (max-width:900px){
  .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; }
}

.pswp:not(.pswp--open){ display:none !important; visibility:hidden !important; }

@media (prefers-reduced-motion:reduce){
  body .elementor-location-header{ transition:none !important; }
  .uc-side-menu-wrapper, .uc-side-menu-items{ transition:none !important; }
}

/* For signed-in visitors the admin bar overlaps the top of the viewport, and the
   panel starting underneath it hid the close button. How much of the bar is on
   screen depends on the scroll position, because below 600px WordPress lets the
   bar scroll away with the page, so the script measures it on open and publishes
   the result as --eo-bar-inset. The bar's own height is the no-script fallback. */
:root{ --eo-bar-fallback:var(--wp-admin--admin-bar--height, 32px); }
body.admin-bar .uc-side-menu-wrapper.menu-left-open,
body.admin-bar .uc-side-menu-wrapper.menu-right-open{
  top:var(--eo-bar-inset, var(--eo-bar-fallback)) !important;
  height:calc(100dvh - var(--eo-bar-inset, var(--eo-bar-fallback))) !important;
}
body.admin-bar .uc-side-menu-wrapper .side-menu-holder,
body.admin-bar .uc-side-menu-wrapper .uc-side-menu-items{
  height:calc(100dvh - var(--eo-bar-inset, var(--eo-bar-fallback))) !important;
  max-height:calc(100dvh - var(--eo-bar-inset, var(--eo-bar-fallback))) !important;
}

/* Desktop header nav: keep each top-level nav item on a single line (some items
   were wrapping to two lines when space was tight or the browser was zoomed).
   Trimmed horizontal padding a touch so the full row still fits on one line. */
@media (min-width:901px){
  .elementor-location-header .elementor-widget-ucaddon_nav_menu a{ white-space:nowrap; }
  .elementor-location-header .elementor-widget-ucaddon_nav_menu > .elementor-widget-container ul > li > a{ padding-left:15px !important; padding-right:15px !important; }
}