/*
Theme Name: Stylos v3
Theme URI: https://underlab.gr
Author: underLab
Author URI: https://underlab.gr
Description: Stylos v3 – rebuilt from scratch with plugin-safety first (scoped CSS/JS, no inline CSS, Polylang-friendly).
Version: 3.0.48
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:#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);}
#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;}

/* Layout base (generated CSS refines via variables) */
#stylos-root .stylos-container{width:100%;max-width:none;margin-left:auto;margin-right:auto;}
#stylos-root .stylos-page-pad{padding:24px;}

#stylos-root .stylos-panel{background:rgba(255,255,255,0.80);border:1px solid rgba(255,255,255,0.35);border-radius:10px;box-shadow:0 10px 22px rgba(0,0,0,0.18);overflow:hidden;}
#stylos-root .stylos-panel-inner{padding:18px;}

/* Header/Menu */
#stylos-root .stylos-header{position:relative;z-index:9997;}
#stylos-root .stylos-header-inner{position:relative;}

/* 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 */
#stylos-root .stylos-menubar{display:flex;align-items:center;gap:14px;padding:10px 12px;padding-left:12px;margin-top:0;background:rgba(7,110,153,0.95);border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,0.28);position:relative;z-index:9996;}
#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;padding-left:12px;}
}

#stylos-root .stylos-menubar.is-sticky{position:fixed;top:0;left:0;right:0;margin-top:0;z-index:10050;border-radius:0;box-shadow:0 10px 22px rgba(0,0,0,0.22);max-width:var(--stylos-menubar-max-width, 1200px);margin-left:auto;margin-right:auto;}

/* Prevent layout jump when the menubar becomes fixed */
body.stylos-menubar-sticky-pad{padding-top:var(--stylos-menubar-sticky-h, 0px);}
body.stylos-menubar-fixed-pad{padding-top:var(--stylos-menubar-fixed-h, var(--stylos-mobile-menubar-h, 0px));}

#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 uses SmartMenus dropdown; mobile uses flags-only dropdown */
#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 flag switcher */
#stylos-root .stylos-lang-mobile{position:relative;display:flex;align-items:center;}
#stylos-root .stylos-lang-mobile-btn{background:transparent;border:0;padding:6px 8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-radius:6px;}
#stylos-root .stylos-lang-mobile-btn:hover{background:rgba(255,255,255,0.12);}
#stylos-root .stylos-lang-mobile-btn img{display:block;width:22px;height:auto;border-radius:2px;}
#stylos-root .stylos-lang-emoji{font-size:20px;line-height:1;display:block;}
#stylos-root .stylos-lang-mobile-list{display:none !important;position:absolute;top:100%;left:0;margin:6px 0 0;padding:6px;background:rgba(7,110,153,0.98);border-radius:8px;box-shadow:0 10px 22px rgba(0,0,0,0.28);list-style:none;min-width:48px;z-index:10080;}
#stylos-root .stylos-lang-mobile-list[hidden]{display:none !important;}
#stylos-root .stylos-lang-mobile.is-open .stylos-lang-mobile-list{display:block !important;}
#stylos-root .stylos-lang-mobile-item{margin:0;}
#stylos-root .stylos-lang-mobile-link{display:flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:6px;text-decoration:none;}
#stylos-root .stylos-lang-mobile-link:hover{background:rgba(255,255,255,0.12);}
#stylos-root .stylos-lang-mobile-link img{display:block;width:22px;height:auto;border-radius:2px;}

/* If you assign a dedicated Polylang language menu to "Language Menu (Mobile/Tablet)", force flags-only look */
#stylos-root .stylos-language-menu-mobile .lang-item-name{display:none !important;}
#stylos-root .stylos-language-menu-mobile img{width:22px;height:auto;vertical-align:middle;}

#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:#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{background:rgba(255,255,255,0.14);}
#stylos-root .stylos-nav .current-menu-item > a{background:rgba(255,255,255,0.18);}

@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:#123;}
#stylos-root .stylos-nav ul.sm ul a:hover{background:rgba(7,110,153,0.10);}

/* 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);border-radius:var(--stylos-icon-radius,999px);display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-weight:800;line-height:1;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);}
#stylos-root .stylos-icon-btn svg{width:var(--stylos-icon-svg,18px);height:var(--stylos-icon-svg,18px);display:block;}
#stylos-root .stylos-icon-btn.is-tel{background:#FFA500;}
#stylos-root .stylos-icon-btn.is-wa{background:#25d366;}
#stylos-root .stylos-icon-btn.is-msgr{background:#0084ff;}
#stylos-root .stylos-icon-btn.is-ig{background:#e1306c;}
#stylos-root .stylos-icon-btn.is-tg{background:#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:#3a76f0;}
#stylos-root .stylos-icon-btn.is-viber{background:#59267c;}
#stylos-root .stylos-phone{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:#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:#eaf6ff;padding:8px;border-radius:6px;}
#stylos-root .stylos-mobile-toggle:focus{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;}
#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 > p,
#stylos-root .entry-content > h1,
#stylos-root .entry-content > h2,
#stylos-root .entry-content > h3,
#stylos-root .entry-content > ul,
#stylos-root .entry-content > ol,
#stylos-root .entry-content > li{color:#1c2b34;line-height:1.55;}

#stylos-root .entry-content > h1{font-size:28px;margin:0 0 12px;}
#stylos-root .entry-content > h2{font-size:22px;margin:18px 0 10px;}
#stylos-root .entry-content > h3{font-size:18px;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-link{position:absolute;inset:0;z-index:2;}
#stylos-root .stylos-box-media,#stylos-root .stylos-box-body{position:relative;z-index:3;}
#stylos-root .stylos-box-link:focus{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{padding:12px;}
#stylos-root .stylos-box-title{margin:0 0 4px;font-size:15px;color:#1c2b34;}
#stylos-root .stylos-box-excerpt{margin:0;font-size:13px;color:#334a56;}

/* 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:16px;}

/* Quick Contact slide-out (tablet/mobile <=980px) */
#stylos-root .stylos-quickpanel{
  /* Closed state: the FORM is fully off-canvas; only the tab is visible */
  /* Make the tab more discreet (narrower) while keeping text readable */
  --stylos-qc-tab: 32px;
  --stylos-qc-tab-top: 100px; /* ~100px lower from top of the quickform */
  --stylos-qc-form: min(var(--stylos-qc-width, 320px), 90vw);

  /* Ensure the fixed box always has a real width so the tab never disappears */
  width:calc(var(--stylos-qc-form) + var(--stylos-qc-tab));

  position:fixed;
  top:calc(var(--stylos-mobile-menubar-h, 80px) + 18px);
  right:0;
  z-index:10080;
  height:auto;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

/* 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:#f0ad4e;
  border-radius:12px 0 0 12px;
  box-shadow:0 10px 22px 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 -10px 0 0; /* overlap the form box slightly so there is NO visible gap */
  background:#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:12px 0 0 12px;
  /* Put it visually behind the panel so it never steps over inputs */
  box-shadow: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{outline:2px solid rgba(255,255,255,0.7);outline-offset:2px;}

#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-tab-color, #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){
  #stylos-root .stylos-boxes-grid{grid-template-columns:repeat(3,1fr);} 
  /* Front page: only create a 2-col layout when Quick Contact is shown */
  #stylos-root .stylos-layout:not(.stylos-no-quick){grid-template-columns:1fr 300px;}

  /* Tablet: inner pages must be 1 column (content takes full width).
     Front page keeps its own rule above. */
  #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){
  #stylos-root .stylos-page-pad{padding:18px;padding-top:92px;}
  /* 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:12px;
    padding-right:12px;
    position:fixed;
    top:0;left:0;right:0;
    z-index:10050;
    border-radius:0;
    max-width:var(--stylos-menubar-max-width, 1200px);
    margin-left:auto;margin-right:auto;
    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;
    inset:0;
    z-index:11000;
    background: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:#fff;
    border-radius:0;
    padding:10px;
  }

  /* Make the menu readable in overlay */
  #stylos-root .stylos-menubar.is-mobile-open .stylos-nav-primary a{color:#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;}
}