/*
Theme Name: Stylos
Theme URI: https://underlab.gr
Author: underLab
Author URI: https://underlab.gr
Description: Stylos – rebuilt from scratch with plugin-safety first (scoped CSS/JS, no inline CSS, Polylang-friendly).
Version: 2.0.32
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: stylos-v3
*/

/* =========================================================
   GLOBAL RULES (NON-NEGOTIABLE)
   Allowed outside #stylos-root: ONLY body background color.
   ========================================================= */
body{background-color:var(--stylos-body-bg,#176694);}

/* Scroll lock for mobile overlay menu */
html.stylos-no-scroll, body.stylos-no-scroll{overflow:hidden;}

/* =========================================================
   THEME SCOPE
   Everything below is scoped to #stylos-root.
   ========================================================= */
#stylos-root{position:relative;min-height:100vh;font-family:var(--stylos-font-family, Ubuntu, sans-serif);overflow-x:hidden;}
#stylos-root, #stylos-root *, #stylos-root *::before, #stylos-root *::after{box-sizing:border-box;}
#stylos-root .stylos-screen{position:relative;z-index:1;}

#stylos-root .stylos-mobile-menu-close{display:none;}

/* Global link styling (scoped to the theme).
   Requirement: links use main color, no underline; on hover underline + hover color.
   Menu components override this with more specific selectors. */
#stylos-root a{color:var(--stylos-main-color, #0a6e99);text-decoration:none;}
#stylos-root a:hover{color:var(--stylos-hover-color, #0b4a66);text-decoration:underline;}

/* Safe background slideshow layer: never capture clicks */
#stylos-root .stylos-bg-slideshow{position:fixed;inset:0;z-index:-9999;pointer-events:none;overflow:hidden;}
#stylos-root .stylos-bg-slideshow .stylos-bg-slide{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 750ms linear;}
#stylos-root .stylos-bg-slideshow .stylos-bg-slide.is-active{opacity:1;}

/* Background wave overlays (above slideshow, below everything else) */
#stylos-root .stylos-bg-waves{position:fixed;inset:0;z-index:-9998;pointer-events:none;}
#stylos-root .stylos-bg-waves-top,
#stylos-root .stylos-bg-waves-bottom{position:absolute;left:0;width:100%;overflow:hidden;pointer-events:none;}
#stylos-root .stylos-bg-waves-top{top:0;height:var(--stylos-wave-top-h,150px);}
#stylos-root .stylos-bg-waves-bottom{bottom:0;height:var(--stylos-wave-bottom-h,300px);}
#stylos-root .stylos-bg-waves-inner{position:absolute;left:50%;top:0;transform:translateX(-50%);width:3840px;height:100%;}
#stylos-root .stylos-bg-waves svg{width:3840px;height:100%;display:block;}
@media (max-width:1024px){
  #stylos-root .stylos-bg-waves-top{height:var(--stylos-wave-top-h-small,225px);} 
  #stylos-root .stylos-bg-waves-bottom{height:var(--stylos-wave-bottom-h-small,450px);} 
}

/* SVG geometry itself is padded in PHP based on Drift Distance.
   We keep the SVG box stable in CSS to avoid any double-centering bugs. */
@media (min-width:1280px){
  #stylos-root .stylos-bg-waves-top,
  #stylos-root .stylos-bg-waves-bottom{width:100%;}
}

/* Waves sway animation (CSS-only, per-curve speeds).
   Requirements:
   - Curves never reveal their vertical ends (SVG is extended via width+margin).
   - Each curve moves by Drift Distance then pauses.
   - Middle curve moves in the opposite direction.
*/
#stylos-root .stylos-bg-waves g[class*="stylos-wave--"]{transform-box:fill-box;transform-origin:center;}

#stylos-root .stylos-bg-waves.is-animated .stylos-wave--t1{animation:stylosWaveSwayLeft  var(--stylos-wave-top-1-speed,90s)  ease-in-out infinite;will-change:transform;}
#stylos-root .stylos-bg-waves.is-animated .stylos-wave--t2{animation:stylosWaveSwayRight var(--stylos-wave-top-2-speed,120s) ease-in-out infinite;will-change:transform;}
#stylos-root .stylos-bg-waves.is-animated .stylos-wave--t3{animation:stylosWaveSwayLeft  var(--stylos-wave-top-3-speed,160s) ease-in-out infinite;will-change:transform;}

#stylos-root .stylos-bg-waves.is-animated .stylos-wave--b1{animation:stylosWaveSwayLeft  var(--stylos-wave-bottom-1-speed,70s)  ease-in-out infinite;will-change:transform;}
#stylos-root .stylos-bg-waves.is-animated .stylos-wave--b2{animation:stylosWaveSwayRight var(--stylos-wave-bottom-2-speed,100s) ease-in-out infinite;will-change:transform;}
#stylos-root .stylos-bg-waves.is-animated .stylos-wave--b3{animation:stylosWaveSwayLeft  var(--stylos-wave-bottom-3-speed,140s) ease-in-out infinite;will-change:transform;}

@keyframes stylosWaveSwayLeft{
  0%, 12% {transform:translateX(0);} 
  40%, 52% {transform:translateX(calc(-1 * var(--stylos-wave-drift-distance,180px)));}
  88%, 100% {transform:translateX(0);} 
}

@keyframes stylosWaveSwayRight{
  0%, 12% {transform:translateX(0);} 
  40%, 52% {transform:translateX(var(--stylos-wave-drift-distance,180px));}
  88%, 100% {transform:translateX(0);} 
}

@media (prefers-reduced-motion: reduce){
  #stylos-root .stylos-bg-waves.is-animated .stylos-wave--t1,
  #stylos-root .stylos-bg-waves.is-animated .stylos-wave--t2,
  #stylos-root .stylos-bg-waves.is-animated .stylos-wave--t3,
  #stylos-root .stylos-bg-waves.is-animated .stylos-wave--b1,
  #stylos-root .stylos-bg-waves.is-animated .stylos-wave--b2,
  #stylos-root .stylos-bg-waves.is-animated .stylos-wave--b3{animation:none !important;}
}

/* Layout base (generated CSS refines via variables) */
/* Global site container
   IMPORTANT: This is the single source of truth for the full site width (menubar, sticky menubar, content).
   It must respect the Customizer setting "Global container max width (px)".
*/
#stylos-root .stylos-container{
  width: 100%;
  max-width: var(--stylos-global-max-width, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--stylos-screen-pad, 12px);
  padding-right: var(--stylos-screen-pad, 12px);
}
#stylos-root .stylos-page-pad{padding:24px;}
#stylos-root{--stylos-page-pad-top:var(--stylos-screen-pad-m, 24px);--stylos-mobile-menubar-h:80px;--stylos-menubar-fixed-h:80px;}


#stylos-root .stylos-panel{background:var(--stylos-cbox-bg, rgba(255,255,255,0.80));border:1px solid rgba(255,255,255,0.35);border-radius:var(--stylos-cbox-r-tl,10px) var(--stylos-cbox-r-tr,10px) var(--stylos-cbox-r-br,10px) var(--stylos-cbox-r-bl,10px);box-shadow:0 10px 22px var(--stylos-qc-panel-shadow,rgba(0,0,0,0.18));overflow:hidden;}
#stylos-root .stylos-panel-inner{padding:18px;}


#stylos-root .stylos-post-panel .stylos-h1,
#stylos-root .stylos-page-panel .stylos-h1{color:var(--stylos-title-color, inherit);}
/* Header/Menu */
#stylos-root .stylos-header{position:relative;z-index:9997;}
#stylos-root .stylos-header-inner{position:relative;}


body{--stylos-adminbar-offset:0px;}
body.admin-bar{--stylos-adminbar-offset:32px;}
@media (max-width:782px){body.admin-bar{--stylos-adminbar-offset:46px;}}

.stylos-skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.stylos-skip-link:focus,.stylos-skip-link:focus-visible{position:fixed;left:8px;top:calc(8px + var(--stylos-adminbar-offset, 0px));width:auto;height:auto;padding:10px 14px;background:#111;color:#fff;z-index:99999;border-radius:8px;overflow:visible;}
#stylos-root *:focus-visible{outline:2px solid var(--stylos-main-color,#076e99);outline-offset:2px;}
/* Desktop: big logo sits ABOVE the menubar (no overlap) */
#stylos-root .stylos-logo{display:flex;align-items:center;gap:10px;}
#stylos-root .stylos-logo-top{position:relative;z-index:10010;
  padding:var(--stylos-logo-top-pad-top, 0px) var(--stylos-logo-top-padding, 0px) var(--stylos-logo-top-pad-bottom, 0px) var(--stylos-logo-top-padding, 0px);
  min-height:calc(var(--stylos-logo-top-height, 90px) + var(--stylos-logo-top-pad-top, 0px) + var(--stylos-logo-top-pad-bottom, 0px));
}
#stylos-root .stylos-logo-top img{height:var(--stylos-logo-top-height, 90px);width:auto;}
#stylos-root .stylos-logo-inbar{padding:var(--stylos-logo-inbar-padding, 0px);}
#stylos-root .stylos-logo-inbar img{height:var(--stylos-logo-inbar-height, 44px);width:auto;}
#stylos-root .stylos-logo-top.is-shadow img{filter:drop-shadow(0 6px 10px rgba(0,0,0,0.35));}
#stylos-root .stylos-logo-inbar.is-shadow img{filter:drop-shadow(0 4px 8px rgba(0,0,0,0.30));}

/* Menubar
   IMPORTANT: The non-sticky menubar must also respect the Global container max width.
   Some browsers calculate widths differently when scrollbars appear/disappear.
   Using 100% + auto margins + max-width avoids right-side "bleed".
*/
/* Menubar: outer is full-width, inner is constrained by global container */
#stylos-root .stylos-menubar{
  position:relative;
  z-index:9996;
  width:100%;
  box-sizing:border-box;
  margin-top:0;
  padding:0;
  background:transparent;
}

#stylos-root .stylos-menubar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:10px;
  padding-bottom:10px;
  background:var(--stylos-menubar-bg,rgba(7,110,153,0.95));
  color:var(--stylos-menubar-text,#fff);
  border-radius:6px;
  box-shadow:0 8px 18px var(--stylos-menubar-shadow,rgba(0,0,0,0.28));
  box-sizing:border-box;
}

/* Prevent horizontal overflow by allowing long menus to wrap inside the constrained inner container. */
#stylos-root .stylos-menubar-inner{flex-wrap:wrap;}
#stylos-root .stylos-menubar-inner .stylos-nav-primary{flex:1 1 auto;min-width:0;}
#stylos-root .stylos-menubar-inner .stylos-nav-primary ul{flex-wrap:wrap;}
#stylos-root .stylos-menubar-inner .stylos-menubar-right{min-width:0;}

/* Safety: avoid horizontal overflow without masking layout bugs */
html,body{max-width:100%;overflow-x:hidden;}
#stylos-root{max-width:100%;}
#stylos-root .stylos-logo-inbar{display:none;}

/* Desktop sticky: swap to in-bar logo when the menubar becomes fixed */
#stylos-root .stylos-menubar.is-sticky .stylos-logo-top{display:none;}
#stylos-root .stylos-menubar.is-sticky .stylos-logo-inbar{display:flex;}
/* Logo visibility per breakpoint */
@media (max-width:980px){
  #stylos-root .stylos-logo-top{display:none;}
  #stylos-root .stylos-logo-inbar{display:flex;}
  #stylos-root .stylos-menubar{margin-top:0;}
}

/* Sticky menubar must respect the global container width.
   NOTE: left+right on a fixed element forces full width and ignores max-width.
   We center it with left:50% + translateX(-50%). */
#stylos-root .stylos-menubar.is-sticky{
  position: fixed;
  top: var(--stylos-adminbar-offset, 0px);
  left: 0;
  right: 0;
  transform: none;
  width: auto;
  max-width: none;
  margin-top: 0;
  z-index: 10050;
  border-radius: 0;
  /* Full-width sticky bar: no gaps left/right */
  background: var(--stylos-menubar-bg,rgba(7,110,153,0.95));
  box-shadow: 0 10px 22px var(--stylos-menubar-shadow,rgba(0,0,0,0.22));
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#stylos-root .stylos-menubar.is-sticky .stylos-menubar-inner{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Prevent layout jump when the menubar becomes sticky.
   Normal-flow content is already offset by WordPress when the admin bar is present.
   Small-viewport fixed menubar spacing is handled by generated page/box padding,
   so the body-level fixed-pad helper must stay inert. */
body.stylos-menubar-sticky-pad{padding-top:var(--stylos-menubar-sticky-h, 0px);}
body.stylos-menubar-fixed-pad{padding-top:0 !important;}

#stylos-root.stylos-scrolled .stylos-logo-top{display:none;}
#stylos-root.stylos-scrolled .stylos-logo-inbar{display:flex;}
#stylos-root .stylos-logo img{display:block;height:auto;width:auto;max-height:100%;}

/* Language switcher:
   - Desktop: current Polylang dropdown/menu (unchanged)
   - Mobile/Tablet: a small toggle button opens a slide-in language panel (native Polylang list)
*/
#stylos-root .stylos-lang-desktop{display:block;}
#stylos-root .stylos-lang-mobilewrap{display:none;}
@media (max-width:980px){
  #stylos-root .stylos-lang-desktop{display:none;}
  #stylos-root .stylos-lang-mobilewrap{display:block;}
}

/* Mobile/Tablet language panel toggle (small flag button) */
#stylos-root .stylos-langpanel-toggle{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border:0;background:transparent;border-radius:8px;cursor:pointer;line-height:1;}
#stylos-root .stylos-langpanel-toggle:hover{background:rgba(255,255,255,0.14);}
#stylos-root .stylos-langpanel-toggle img{display:block;width:22px;height:auto;border-radius:2px;}

/* Slide-in language panel (mobile/tablet) */
#stylos-root .stylos-langpanel{display:none;}
@media (max-width:980px){
  #stylos-root .stylos-langpanel{display:block;position:fixed;top:var(--stylos-adminbar-offset, 0px);left:0;right:0;bottom:0;z-index:10120;pointer-events:none;}
  #stylos-root .stylos-langpanel.is-open{pointer-events:auto;}

  #stylos-root .stylos-langpanel-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45);opacity:0;transition:opacity .18s ease;}
  #stylos-root .stylos-langpanel.is-open .stylos-langpanel-backdrop{opacity:1;}

  #stylos-root .stylos-langpanel-drawer{position:absolute;top:0;right:0;height:100%;width:min(340px, 88vw);background:var(--stylos-langpanel-bg,#fff);transform:translateX(102%);transition:transform .22s ease;box-shadow:-10px 0 24px rgba(0,0,0,0.28);}
  #stylos-root .stylos-langpanel.is-open .stylos-langpanel-drawer{transform:translateX(0);}

  /* more space on top */
  #stylos-root .stylos-langpanel-inner{padding:56px 16px 18px 16px;overflow:auto;height:100%;}

  #stylos-root .stylos-langpanel-close{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:10px;background:var(--stylos-langpanel-close-bg,#f3f3f3);font-size:28px;line-height:1;cursor:pointer;color:var(--stylos-langpanel-close-color,#111);}
  #stylos-root .stylos-langpanel-close:hover{background:rgba(0,0,0,0.10);}

  /* Polylang native list inside the drawer */
  #stylos-root .stylos-langpanel-inner ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
  #stylos-root .stylos-langpanel-inner li a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--stylos-langpanel-link,#111);background:rgba(0,0,0,0.04);}
  #stylos-root .stylos-langpanel-inner li a:hover{background:rgba(0,0,0,0.08);}
  #stylos-root .stylos-langpanel-inner img{width:24px;height:auto;display:block;border-radius:3px;}
}

#stylos-root .stylos-nav{flex:1;}
/* Top-level menu layout only (do NOT style nested plugin menus) */
#stylos-root .stylos-nav > ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap;align-items:center;justify-content:var(--stylos-menu-justify, flex-start);} 
@media (min-width:981px){
  /* Desktop: keep base menu options in a single row (one after the other) */
  #stylos-root .stylos-nav > ul{flex-wrap:nowrap;}
}
#stylos-root .stylos-nav > ul > li{position:relative;}
#stylos-root .stylos-nav a{text-decoration:none;color:var(--stylos-menu-primary-color,var(--stylos-menubar-text,#fff));font-size:14px;line-height:1.2;padding:9px 12px;border-radius:0;display:inline-flex;align-items:center;gap:6px;}
#stylos-root .stylos-nav a:hover{color:var(--stylos-menu-primary-hover,#fff);}
#stylos-root .stylos-nav a:hover{background:rgba(255,255,255,0.14);}
#stylos-root .stylos-nav .current-menu-item > a{background:rgba(255,255,255,0.18);}
#stylos-root .stylos-nav-secondary > ul > li > a{color:var(--stylos-menu-secondary-color,var(--stylos-menu-primary-color,#fff));}
#stylos-root .stylos-nav-secondary > ul > li > a:hover{color:var(--stylos-menu-secondary-hover,var(--stylos-menu-primary-hover,#fff));}
#stylos-root .stylos-nav-language > ul > li > a{color:var(--stylos-menu-primary-color,var(--stylos-menubar-text,#fff));}

@media (min-width:981px){
  /* Desktop: reduce spacing between base menu options */
  #stylos-root .stylos-nav a{padding-left:6px;padding-right:6px;gap:4px;}
}

/* SmartMenus theme class support (scoped)
   Keep the menubar flat (no gradient / border). */
#stylos-root .stylos-nav > ul.sm-blue{
  background:transparent;
  border:0;
  border-radius:0;
}

#stylos-root .stylos-nav > ul.sm-blue > li > a{
  border-radius:0;
}


/* Dropdowns (sub-menus)
   IMPORTANT: SmartMenus controls showing/hiding via JS, so we must NOT rely on CSS hover rules.
   We keep the visual styling and positioning here.
*/
#stylos-root .stylos-nav ul.sm,
#stylos-root .stylos-nav ul.sm ul{list-style:none;margin:0;padding:0;}
#stylos-root .stylos-nav ul.sm li{position:relative;}
#stylos-root .stylos-nav ul.sm ul{display:none;position:absolute;left:0;top:100%;min-width:450px;max-width:700px;margin-top:0;padding:6px 0;border-radius:10px;background:#fff;box-shadow:0 14px 28px rgba(0,0,0,0.18);border:1px solid rgba(0,0,0,0.10);box-sizing:border-box;overflow:hidden;} 
#stylos-root .stylos-nav ul.sm ul li{width:100%;}
#stylos-root .stylos-nav ul.sm ul a{display:block;width:100%;padding:10px 34px 10px 14px;white-space:normal;line-height:1.25;overflow-wrap:anywhere;color:var(--stylos-menubar-bg,#076e99) !important;}
#stylos-root .stylos-nav ul.sm ul a:visited,
#stylos-root .stylos-nav ul.sm ul a:hover,
#stylos-root .stylos-nav ul.sm ul a:focus{color:var(--stylos-menubar-bg,#076e99) !important;}
#stylos-root .stylos-nav ul.sm ul a:hover{background:var(--stylos-submenu-hover-bg,rgba(7,110,153,0.10));}
#stylos-root .stylos-nav ul.sm ul a::after{color:inherit !important;}
#stylos-root .stylos-nav ul.sm ul a .sub-arrow{color:inherit !important;}

/* Allow long top-level menu labels to wrap instead of bleeding out of the menubar */
#stylos-root .stylos-menubar .stylos-nav > ul.sm > li > a{
  white-space:normal;
  max-width:var(--stylos-menu-item-max-width, 13.5em);
  text-align:center;
  overflow-wrap:anywhere;
}

/* 3rd level flyout: open to the right aligned with the 2nd level item */
#stylos-root .stylos-nav ul.sm ul ul{left:100%;top:0;}

/* Visual hover buffer for SmartMenus (prevents accidental close on slow mouse moves) */
#stylos-root .stylos-nav ul.sm > li.menu-item-has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;}

/* Submenu indicators (no library markup needed) */
#stylos-root .stylos-nav ul.sm > li.menu-item-has-children > a::after{content:"▾";font-size:12px;opacity:0.85;margin-left:6px;}
#stylos-root .stylos-nav ul.sm ul > li.menu-item-has-children > a::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:16px;opacity:0.75;}

#stylos-root .stylos-menubar-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
#stylos-root .stylos-menubar-meta{display:flex;align-items:center;gap:14px;}
#stylos-root .stylos-menubar-icons{display:none;align-items:center;gap:var(--stylos-icon-gap,10px);}
#stylos-root .stylos-icon-btn{
  width:var(--stylos-icon-size,36px);
  height:var(--stylos-icon-size,36px);
  min-width:var(--stylos-icon-size,36px);
  min-height:var(--stylos-icon-size,36px);
  flex:0 0 var(--stylos-icon-size,36px);
  box-sizing:border-box;
  border-radius:var(--stylos-icon-radius,999px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  margin:0;
  font-size:0; /* prevents UA font metrics affecting circle rendering */
  line-height:0;
  overflow:hidden; /* ensures perfect circle regardless of SVG */
  background-clip:border-box;
  color:#fff;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,0.18);
  border:var(--stylos-icon-border-w,0px) solid var(--stylos-icon-border-c,transparent);
}

/* Optional per-service size correction: keeps all circles consistent visually. */
#stylos-root .stylos-icon-btn.is-viber{
  width:calc(var(--stylos-icon-size,36px) * var(--stylos-icon-viber-mult,1));
  height:calc(var(--stylos-icon-size,36px) * var(--stylos-icon-viber-mult,1));
  min-width:calc(var(--stylos-icon-size,36px) * var(--stylos-icon-viber-mult,1));
  min-height:calc(var(--stylos-icon-size,36px) * var(--stylos-icon-viber-mult,1));
  flex:0 0 calc(var(--stylos-icon-size,36px) * var(--stylos-icon-viber-mult,1));
}
#stylos-root .stylos-icon-btn svg{
  width:var(--stylos-icon-svg,18px);
  height:var(--stylos-icon-svg,18px);
  display:block;
  flex:0 0 auto;
}
#stylos-root .stylos-icon-btn.is-tel{background:var(--stylos-social-tel,#FFA500);}
#stylos-root .stylos-icon-btn.is-wa{background:var(--stylos-social-wa,#25d366);}
#stylos-root .stylos-icon-btn.is-msgr{background:var(--stylos-social-msgr,#0084ff);}
#stylos-root .stylos-icon-btn.is-ig{background:var(--stylos-social-ig,#e1306c);}
#stylos-root .stylos-icon-btn.is-tg{background:var(--stylos-social-tg,#2aabee);}
/* Telegram icon: always a bit smaller than the rest */
#stylos-root .stylos-icon-btn.is-tg svg{transform:scale(0.58);transform-origin:center;}
#stylos-root .stylos-icon-btn.is-signal{background:var(--stylos-social-signal,#3a76f0);}
#stylos-root .stylos-icon-btn.is-viber{background:var(--stylos-social-viber,#59267c);}
#stylos-root .stylos-phone{color:var(--stylos-header-icon-color,#eaf6ff);text-decoration:none;font-weight:700;}
#stylos-root .stylos-phone:hover{text-decoration:underline;}
#stylos-root .stylos-lang{display:flex;align-items:center;gap:10px;}
#stylos-root .stylos-lang.stylos-lang-inbar{margin-left:10px;}
#stylos-root .stylos-lang select{max-width:160px;}
#stylos-root .stylos-lang ul{list-style:none;margin:0;padding:0;display:flex;gap:10px;align-items:center;}
#stylos-root .stylos-lang ul li{position:relative;}
#stylos-root .stylos-lang ul a{text-decoration:none;color:var(--stylos-header-icon-color,#eaf6ff);font-size:14px;line-height:1.2;padding:6px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
#stylos-root .stylos-lang .stylos-lang-current{white-space:nowrap;overflow-wrap:normal;word-break:keep-all;}
#stylos-root .stylos-nav-language a{overflow-wrap:normal;word-break:keep-all;}
#stylos-root .stylos-lang ul a:hover{background:rgba(255,255,255,0.12);}
#stylos-root .stylos-lang img{height:14px;width:auto;display:inline-block;}


#stylos-root .stylos-mobile-toggle{display:none;background:transparent;border:0;color:var(--stylos-header-icon-color,#eaf6ff);padding:8px;border-radius:6px;}
#stylos-root .stylos-mobile-toggle:focus-visible{outline:2px solid rgba(255,255,255,0.35);outline-offset:2px;}
#stylos-root .stylos-menubar.is-sticky .stylos-nav ul ul{z-index:10060;}

/* Content */
#stylos-root .stylos-main{margin-top:16px;}
#stylos-root .stylos-layout{display:grid;align-items:start;gap:0;}
/* Inner pages: place Quick Contact on one side and Content on the other, with ALL remaining space between them.
   This prevents the "huge empty left gap" feeling and matches the legacy Stylos layout intent.
   We use a 3-column grid: [side] [flex space] [content max]. */
#stylos-root:not(.stylos-is-front) .stylos-layout{grid-template-columns:var(--stylos-qc-width, 320px) 1fr minmax(0, var(--stylos-content-max-width, 980px));grid-template-areas:"sidebar . content";}
#stylos-root:not(.stylos-is-front) .stylos-layout.stylos-no-quick{grid-template-columns:minmax(0, var(--stylos-content-max-width, 980px));grid-template-areas:"content";}
#stylos-root .stylos-content{grid-area:content;}
#stylos-root .stylos-sidebar{grid-area:sidebar;width:var(--stylos-qc-width, 320px);}

/* Swap sides based on Customizer alignment (default: content on the RIGHT). */
#stylos-root.stylos-content-left:not(.stylos-is-front) .stylos-layout{grid-template-columns:minmax(0, var(--stylos-content-max-width, 980px)) 1fr var(--stylos-qc-width, 320px);grid-template-areas:"content . sidebar";}
/* When Quick Contact is disabled, it must always collapse to full width even if content-right layout is enabled */
#stylos-root .stylos-layout.stylos-no-quick{grid-template-columns:minmax(0, var(--stylos-content-max-width, 980px));grid-template-areas:"content";}
#stylos-root.stylos-is-front .stylos-layout.stylos-no-quick{grid-template-columns:1fr;}
/* Front page: Quick Contact + content columns use named grid areas too. */
#stylos-root.stylos-is-front .stylos-layout:not(.stylos-no-quick){grid-template-columns:var(--stylos-qc-width, 320px) 1fr;grid-template-areas:"sidebar content";}
#stylos-root.stylos-is-front.stylos-content-left .stylos-layout:not(.stylos-no-quick){grid-template-columns:1fr var(--stylos-qc-width, 320px);grid-template-areas:"content sidebar";}
#stylos-root .stylos-content{min-width:0;}
#stylos-root .stylos-sidebar{min-width:0;}
#stylos-root .stylos-sidebar .stylos-panel + .stylos-panel{margin-top:14px;}

/* STRICT typography scope (do not target img/a globally) */
#stylos-root .entry-content > h1{margin:0 0 12px;}
#stylos-root .entry-content > h2{margin:18px 0 10px;}
#stylos-root .entry-content > h3{margin:16px 0 8px;}
#stylos-root .entry-content > p{margin:0 0 12px;}
#stylos-root .entry-content > ul,
#stylos-root .entry-content > ol{margin:0 0 12px 22px;}

/* Media containment (scoped): prevent large media from bleeding outside the content panel.
   Not global: only targets media inside the Stylos content panel entry-content. */
#stylos-root .stylos-content-panel .entry-content img,
#stylos-root .stylos-content-panel .entry-content svg,
#stylos-root .stylos-content-panel .entry-content video{max-width:100%;height:auto;}
#stylos-root .stylos-content-panel .entry-content iframe,
#stylos-root .stylos-content-panel .entry-content embed,
#stylos-root .stylos-content-panel .entry-content object{max-width:100%;width:100%;}
#stylos-root .stylos-content-panel .entry-content .wp-block-embed,
#stylos-root .stylos-content-panel .entry-content .wp-block-embed__wrapper{max-width:100%;}

/* WordPress captioned images often include an inline width style (e.g. style="width:720px").
   That inline width can cause bleed outside the content box. We override it ONLY inside
   the Stylos content panel.
   Scoped + documented: this is required to restore normal responsive behavior inside the content box. */
#stylos-root .stylos-content-panel .entry-content figure.wp-caption{max-width:100% !important;width:auto !important;}
#stylos-root .stylos-content-panel .entry-content .wp-caption img{max-width:100%;height:auto;}

/* Links inside entry-content: DO NOT style globally; only here */
/* IMPORTANT: Typography scope is intentionally strict. Do not style links/images globally inside entry-content. */

/* Content media safety (ONLY for core WP blocks; avoids plugins like Modula) */
#stylos-root .entry-content > :where(figure.wp-block-image, figure, .wp-block-image) img{max-width:100%;height:auto;}
#stylos-root .entry-content > :where(.wp-block-embed, figure.wp-block-embed, .wp-block-iframe) iframe{max-width:100%;width:100%;}
#stylos-root .entry-content > :where(.wp-block-embed, figure.wp-block-embed, .wp-block-iframe){max-width:100%;overflow:hidden;}
/* Handle embeds nested inside block wrappers (common for maps/videos). Scoped to Gutenberg classes only. */
#stylos-root .entry-content .wp-block-embed iframe{max-width:100%;width:100%;}
#stylos-root .entry-content .wp-block-embed__wrapper{max-width:100%;overflow:hidden;}

/* Third-party iframes (TicketingHub / Maps) – mobile-friendly sizing.
   We avoid forcing aspect ratios globally. Instead we set reasonable heights on mobile only. */
@media (max-width: 980px){
  #stylos-root .stylos-content-panel .entry-content iframe{display:block;}
  #stylos-root .stylos-content-panel .entry-content iframe[src*="ticketinghub"],
  #stylos-root .stylos-content-panel .entry-content iframe[src*="ticketing-hub"]{width:100% !important;height:80vh;min-height:520px;max-height:900px;}
  #stylos-root .stylos-content-panel .entry-content iframe[src*="google.com/maps"],
  #stylos-root .stylos-content-panel .entry-content iframe[src*="maps.google"],
  #stylos-root .stylos-content-panel .entry-content iframe[src*="www.google.com/maps"]{width:100% !important;height:50vh;min-height:320px;max-height:700px;}
}

/* Tour Facts (Quick Facts DL) */
#stylos-root .stylos-tour-facts{margin:18px 0 0 0;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);background:rgba(255,255,255,0.75);}
#stylos-root .stylos-tour-facts-dl{display:grid;grid-template-columns:1fr 2fr;gap:8px 14px;margin:0;}
#stylos-root .stylos-tour-facts-dl dt{font-weight:700;opacity:0.9;margin:0;}
#stylos-root .stylos-tour-facts-dl dd{margin:0;opacity:0.92;}
@media (max-width: 620px){
  #stylos-root .stylos-tour-facts-dl{grid-template-columns:1fr;}
}


/* Stylos boxes grid */
#stylos-root .stylos-boxes{margin:18px 0;padding-top:var(--stylos-boxes-top-padding, 0px);}
#stylos-root .stylos-boxes-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);}
#stylos-root .stylos-box{overflow:hidden;position:relative;}
#stylos-root .stylos-box-card{display:block;height:100%;color:inherit;text-decoration:none;}
#stylos-root .stylos-box-card:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
#stylos-root .stylos-box-media{display:block;aspect-ratio:16/9;overflow:hidden;}
#stylos-root .stylos-box-media img{display:block;width:100%;height:100%;object-fit:cover;}
#stylos-root .stylos-box-body{display:flex;flex-direction:column;gap:6px;padding:12px;}
#stylos-root .stylos-box-title{display:block;margin:0;font-size:15px;color:#1c2b34;font-weight:700;line-height:1.3;}
#stylos-root .stylos-box-excerpt{display:block;margin:0;font-size:13px;color:#334a56;}
#stylos-root .stylos-box-more{display:block;margin-top:2px;}
#stylos-root .stylos-box-readmore{display:inline-block;text-decoration:underline;}

/* Featured images (posts/pages) */
#stylos-root .stylos-featured{margin:0 0 12px 0;}
#stylos-root .stylos-featured-img{display:block;width:100%;height:auto;border-radius:8px;}
#stylos-root .stylos-featured-cap{margin:6px 0 0 0;font-size:12px;opacity:0.8;}

/* Post meta (author/date) */
#stylos-root .stylos-post-meta{margin:0 0 10px 0;font-size:12px;opacity:0.75;}

/* Term description on archives */
#stylos-root .stylos-term-desc{margin:0 0 12px 0;opacity:0.92;}

/* Archive list (with optional thumbs) */
#stylos-root .stylos-postlist{display:flex;flex-direction:column;gap:14px;}
#stylos-root .stylos-postlist-item{margin:0;}
#stylos-root .stylos-postlist-row{display:flex;gap:14px;align-items:flex-start;}
#stylos-root .stylos-postlist-thumb{flex:0 0 var(--stylos-archive-thumb-width,220px);max-width:var(--stylos-archive-thumb-width,220px);display:block;}
#stylos-root .stylos-postlist-thumb img{display:block;width:100%;height:auto;border-radius:8px;}
#stylos-root .stylos-postlist-body{flex:1 1 auto;min-width:0;}

/* Footer */
#stylos-root .stylos-footer{margin-top:18px;}
#stylos-root .stylos-footer-columns{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);}

/* Quick Contact (desktop box) */
#stylos-root .stylos-quickbox .widget{margin:0;}
#stylos-root .stylos-quickbox .widget-title{margin:0 0 10px;font-size:var(--stylos-qc-title-size,16px);}

/* Quick Contact slide-out (tablet/mobile <=980px) */
#stylos-root .stylos-quickpanel{
  --stylos-qc-tab: 32px;
  --stylos-qc-tab-top: 100px;
  --stylos-qc-form: min(var(--stylos-qc-width, 320px), 90vw);
  width:calc(var(--stylos-qc-form) + var(--stylos-qc-tab));
  position:fixed;
  top:calc(var(--stylos-adminbar-offset, 0px) + var(--stylos-mobile-menubar-h, 80px) + 18px);
  right:0;
  z-index:10080;
  height:auto;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

/* Fix: quickpanel must not block taps outside the visible tab/form (mobile) */
#stylos-root .stylos-quickpanel{pointer-events:none;}
#stylos-root .stylos-quickpanel-tray,
#stylos-root .stylos-quickpanel-tray *{pointer-events:auto;}

/* Tray includes: [tab][form]. We translate the tray so only the tab remains visible when closed. */
#stylos-root .stylos-quickpanel-tray{
  position:relative;
  display:flex;
  align-items:flex-start;
  width:100%;
  transform:translateX(calc(100% - var(--stylos-qc-tab)));
  transition:transform 220ms ease;
}
#stylos-root .stylos-quickpanel.is-open .stylos-quickpanel-tray{transform:translateX(0);}

/* The form box */
#stylos-root .stylos-quickpanel .stylos-quickpanel-inner{
  width:var(--stylos-qc-form);
  margin-left:0;
  background:var(--stylos-qc-panel-bg,#f0ad4e);
  border-radius:12px 0 0 12px;
  box-shadow:0 10px 22px var(--stylos-qc-panel-shadow,rgba(0,0,0,0.18));
  padding:12px 12px 16px;
  overflow:hidden;
  position:relative;
  z-index:1;
}

/* The tab (only visible part when closed) */
#stylos-root .stylos-quickpanel-tab{
  /* Keep the tab physically attached to the panel edge without overlapping form fields */
  position:relative;
  top:var(--stylos-qc-tab-top);
  left:0;
  width:var(--stylos-qc-tab);
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0; /* no overlap; prevents a sliver of the panel bleeding into view */
  background:var(--stylos-qc-panel-bg,#f0ad4e);
  color:var(--stylos-qc-tab-color, #fff);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.5px;
  font-size:var(--stylos-qc-tab-font-size, 16px);
  padding:10px 6px;
  border-radius:var(--stylos-btn-radius, 12px) 0 0 var(--stylos-btn-radius, 12px);
  box-shadow:var(--stylos-btn-shadow-val, none);
  z-index:0;

  writing-mode:vertical-rl;
  text-orientation:mixed;
  line-height:1;
}
#stylos-root .stylos-quickpanel-tab-text{display:block;}
#stylos-root .stylos-quickpanel-tab:focus-visible{outline:2px solid rgba(255,255,255,0.7);outline-offset:2px;}

/* Hover styles should only apply on devices that actually support hover */
@media (hover:hover){
  #stylos-root .stylos-quickpanel-tab:hover{
    background:#f0ad4e;
    color:var(--stylos-qc-tab-color, #fff);
    box-shadow:var(--stylos-btn-shadow-val, none);
  }
}

#stylos-root .stylos-quickpanel-title{
  font-weight:700;
  margin:0 0 10px;
  font-size:var(--stylos-qc-tab-font-size, 16px);
  color:var(--stylos-qc-title-color-mobile, #fff);
}

/* Form fields inside quick panel: limited scope */
#stylos-root .stylos-quickpanel input,
#stylos-root .stylos-quickpanel textarea,
#stylos-root .stylos-quickpanel select{max-width:100%;}

/* Responsive */
@media (max-width: 1100px){
  /*
    Prevent horizontal scrolling on mobile/tablet.
    The slide-in Quick Contact panel sits off-canvas via transform.
    Some browsers expose that off-canvas area as horizontal overflow.
  */
  html, body { overflow-x: hidden; }

  #stylos-root .stylos-boxes-grid{grid-template-columns:repeat(3,1fr);} 

  /* Archive cards: keep the featured image above readable text on tablets and phones. */
  #stylos-root .stylos-postlist-row{flex-direction:column;align-items:stretch;}
  #stylos-root .stylos-postlist-thumb{
    flex:0 1 auto;
    width:100%;
    max-width:100%;
  }
  #stylos-root .stylos-postlist-thumb img{width:100%;max-width:100%;height:auto;}
  #stylos-root .stylos-postlist-body{width:100%;max-width:100%;}

  /* Front page tablet: preserve named grid areas and respect alignment setting. */
  #stylos-root.stylos-is-front .stylos-layout:not(.stylos-no-quick){grid-template-columns:300px 1fr;grid-template-areas:"sidebar content";}
  #stylos-root.stylos-is-front.stylos-content-left .stylos-layout:not(.stylos-no-quick){grid-template-columns:1fr 300px;grid-template-areas:"content sidebar";}

  /* Tablet: inner pages must be 1 column (content takes full width). */
  #stylos-root:not(.stylos-is-front) .stylos-layout{grid-template-columns:1fr !important;grid-template-areas:"content" !important;}
  #stylos-root:not(.stylos-is-front) .stylos-sidebar{display:none !important;}
  #stylos-root:not(.stylos-is-front) .stylos-content,
  #stylos-root:not(.stylos-is-front) .stylos-content-panel{width:100%;max-width:100%;}
}

@media (max-width: 980px){
  /* Page padding is driven by Customizer variables; don't hard-code values here. */
  #stylos-root .stylos-page-pad{padding:var(--stylos-screen-pad-m);padding-top:var(--stylos-page-pad-top);}
  /* On tablet/mobile the outer container must not constrain width. */
  #stylos-root .stylos-container{max-width:none;margin-left:0;margin-right:0;}
  #stylos-root .stylos-logo-top{display:none;}
  #stylos-root .stylos-logo-inbar{display:flex;}

  /* Sticky menubar for mobile/tablet */
  #stylos-root .stylos-menubar{
    padding-left:0;
    padding-right:0;
    position:fixed;
    top:var(--stylos-adminbar-offset, 0px);left:0;right:0;
    z-index:10050;
    border-radius:0;
    max-width:none;
    margin-left:0;margin-right:0;
    gap:10px;
  }

  /* Tablet/Mobile: hide phone/meta and secondary menu */
  #stylos-root .stylos-menubar-meta{display:none;}
  #stylos-root .stylos-nav-secondary{display:none;}

  /* Center quick-action icons in the remaining space */
  #stylos-root .stylos-menubar-center{flex:1;display:flex;justify-content:center;min-width:0;}
  #stylos-root .stylos-menubar-icons{display:flex;margin:0;max-width:100%;}

  /* Mobile ordering: logo, language, centered icons, hamburger (far right) */
  #stylos-root .stylos-lang{display:flex;align-items:center;order:1;margin:0;margin-left:8px;}
  #stylos-root .stylos-menubar-center{order:2;}
  #stylos-root .stylos-menubar-right{order:3;flex:0;display:flex;align-items:center;margin-left:auto;justify-content:flex-end;gap:10px;}
  #stylos-root .stylos-mobile-toggle{display:inline-flex;}

  /* Collapse primary nav behind hamburger */
  #stylos-root .stylos-nav-primary{display:none;}
  #stylos-root .stylos-nav-language{display:block;}

  /* Inner pages: 1 column */
  #stylos-root .stylos-boxes-grid{grid-template-columns:repeat(2,1fr);}
  #stylos-root .stylos-layout{grid-template-columns:1fr;}
  #stylos-root .stylos-sidebar{display:none;}
  #stylos-root .stylos-content,
  #stylos-root .stylos-content-panel{width:100%;max-width:100%;}

  /* Full-screen overlay menu when open */
  #stylos-root .stylos-menubar.is-mobile-open .stylos-nav-primary{
    display:flex;
    position:fixed;
    top:var(--stylos-adminbar-offset, 0px);
    left:0;
    right:0;
    bottom:0;
    z-index:11000;
    background:var(--stylos-mobile-menu-bg,rgba(10,12,16,0.92));
    padding:16px;
    flex-direction:column;
  }

  /* Close buttons (top-left and bottom-left) */
  #stylos-root .stylos-mobile-menu-close{
    width:44px;height:44px;
    display:inline-flex;
    align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,0.25);
    border-radius:10px;
    background:rgba(0,0,0,0.35);
    color:#fff;
    font-size:26px;
    line-height:1;
    cursor:pointer;
  }
  #stylos-root .stylos-mobile-menu-close.is-top{align-self:flex-start;margin-bottom:12px;}
  #stylos-root .stylos-mobile-menu-close.is-bottom{align-self:flex-start;margin-top:12px;}

  /* Scrollable menu content inside overlay */
  #stylos-root .stylos-menubar.is-mobile-open .stylos-nav-primary > ul{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--stylos-mobile-menu-card,#fff);
    border-radius:0;
    padding:10px;
  }

  /* Make the menu readable in overlay */
  #stylos-root .stylos-menubar.is-mobile-open .stylos-nav-primary a{color:var(--stylos-mobile-menu-link,#111);}
  #stylos-root .stylos-menubar.is-mobile-open .stylos-nav-primary ul ul{
    display:block;
    position:static;
    min-width:0;
    margin:0;
    padding:0 0 0 14px;
    background:transparent;
    box-shadow:none;
    border-radius:0;
  }
  #stylos-root .stylos-menubar.is-mobile-open .stylos-nav-primary ul ul a{
    padding:6px 8px;
    white-space:normal;
    opacity:0.95;
  }
}

/* Quick Contact slide panel is only for tablet/mobile.
   Treat "tablet" up to 1100px (covers common iPad landscape widths).
*/
@media (min-width: 1101px){
  #stylos-root .stylos-quickpanel{display:none;}
}

@media (max-width: 560px){
  #stylos-root .stylos-boxes-grid{grid-template-columns:1fr;}
}

/* ============================================================
   Contact Form 7 inside Stylos sidebar quickbox
   - Prevent bleed outside the panel
   - Make submit button look good
   - Support long multilingual labels
   ============================================================ */

#stylos-root .stylos-sidebar .stylos-panel-inner .wpcf7,
#stylos-root .stylos-sidebar .stylos-panel-inner .wp-block-contact-form-7-contact-form-selector,
#stylos-root .stylos-quickpanel .wpcf7,
#stylos-root .stylos-quickpanel .wp-block-contact-form-7-contact-form-selector{
  max-width: 100%;
  overflow: hidden;
}

#stylos-root .stylos-sidebar .wpcf7 form,
#stylos-root .stylos-quickpanel .wpcf7 form{
  margin: 0;
}

#stylos-root .stylos-sidebar .wpcf7 form p,
#stylos-root .stylos-quickpanel .wpcf7 form p{
  margin: 0 0 16px;
}

#stylos-root .stylos-sidebar .wpcf7 form p:last-of-type,
#stylos-root .stylos-quickpanel .wpcf7 form p:last-of-type{
  margin-bottom: 0;
}

#stylos-root .stylos-sidebar .wpcf7 label,
#stylos-root .stylos-quickpanel .wpcf7 label{
  display: block;
  margin: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#stylos-root .stylos-sidebar .wpcf7 .wpcf7-form-control-wrap,
#stylos-root .stylos-quickpanel .wpcf7 .wpcf7-form-control-wrap{
  display: block;
  margin-top: 2px;
}

#stylos-root .stylos-sidebar .wpcf7 input[type="text"],
#stylos-root .stylos-quickpanel .wpcf7 input[type="text"],
#stylos-root .stylos-sidebar .wpcf7 input[type="email"],
#stylos-root .stylos-quickpanel .wpcf7 input[type="email"],
#stylos-root .stylos-sidebar .wpcf7 input[type="tel"],
#stylos-root .stylos-quickpanel .wpcf7 input[type="tel"],
#stylos-root .stylos-sidebar .wpcf7 input[type="url"],
#stylos-root .stylos-quickpanel .wpcf7 input[type="url"],
#stylos-root .stylos-sidebar .wpcf7 input[type="number"],
#stylos-root .stylos-quickpanel .wpcf7 input[type="number"],
#stylos-root .stylos-sidebar .wpcf7 input[type="date"],
#stylos-root .stylos-quickpanel .wpcf7 input[type="date"],
#stylos-root .stylos-sidebar .wpcf7 select,
#stylos-root .stylos-quickpanel .wpcf7 select,
#stylos-root .stylos-sidebar .wpcf7 textarea,
#stylos-root .stylos-quickpanel .wpcf7 textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#stylos-root .stylos-sidebar .wpcf7 textarea,
#stylos-root .stylos-quickpanel .wpcf7 textarea{
  min-height: 120px;
  resize: vertical;
}

/* Better looking submit button (wired to global Button settings) */
#stylos-root .stylos-sidebar .wpcf7 .wpcf7-submit,
#stylos-root .stylos-quickpanel .wpcf7 .wpcf7-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border:0 !important;
  outline:0 !important;
  border-radius: var(--stylos-btn-radius, 12px);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--stylos-btn-bg, var(--stylos-accent, #0b63ce)) !important;
  color: var(--stylos-btn-text, #fff) !important;
  box-shadow: var(--stylos-btn-shadow-val, none) !important;
}

/* Hover styles should only apply on devices that actually support hover */
@media (hover:hover){
  #stylos-root .stylos-sidebar .wpcf7 .wpcf7-submit:hover,
  #stylos-root .stylos-quickpanel .wpcf7 .wpcf7-submit:hover{
    background: var(--stylos-btn-bg-h, var(--stylos-btn-bg, var(--stylos-accent, #04A4CC))) !important;
    color: var(--stylos-btn-text-h, var(--stylos-btn-text, #fff)) !important;
    box-shadow: var(--stylos-btn-shadow-val, none);
  }
}

#stylos-root .stylos-sidebar .wpcf7 .wpcf7-submit:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* =========================================================
   ELEMENTOR TEMPLATE (Stylos — Elementor Boxes)
   ========================================================= */
#stylos-root .stylos-elementor-template .stylos-panel{margin-bottom:var(--stylos-screen-pad,12px);}
#stylos-root .stylos-elementor-template .stylos-panel:last-child{margin-bottom:0;}

/* Featured image box: border+shadow only; image fills; no background visible */
#stylos-root .stylos-elementor-featured-box{background:transparent!important;padding:0!important;}
#stylos-root .stylos-elementor-featured-box img.stylos-elementor-featured-img{display:block;width:100%;height:auto;object-fit:cover;border-radius:inherit;}

#stylos-root .stylos-elementor-title-box .stylos-h1{color:var(--stylos-title-color, inherit);}

/* Elementor title box color swap (controlled by Customizer) */
#stylos-root.stylos-titlebox-reverse .stylos-elementor-title-box{background:var(--stylos-title-color, #111)!important;}
#stylos-root.stylos-titlebox-reverse .stylos-elementor-title-box .stylos-h1{color:var(--stylos-cbox-bg, #fff)!important;}



/* Stylos 2.0.31: hard override for desktop dropdown text color.
   Dropdown text must follow the menubar/top-bar background color, not the secondary menu text color. */
@media (min-width:981px){
  #stylos-root .stylos-menubar .stylos-nav ul.sm ul a,
  #stylos-root .stylos-menubar .stylos-nav ul.sm ul a:visited,
  #stylos-root .stylos-menubar .stylos-nav ul.sm ul a:hover,
  #stylos-root .stylos-menubar .stylos-nav ul.sm ul a:focus{
    color:var(--stylos-menubar-bg,#076e99) !important;
  }
  #stylos-root .stylos-menubar .stylos-nav ul.sm ul a::after{color:inherit !important;}
#stylos-root .stylos-nav ul.sm ul a .sub-arrow{color:inherit !important;}
}