/**
 * FSPL theme - Header
 * Sticky header, logo, desktop navigation (hover dropdowns + 3-column mega menu), mobile/tablet menu panel.
 * Mirrors the reference design: breakpoint 1120px switches desktop nav -> "Menu" button, 600px hides the quote button.
 * The header is built from native Elementor containers/widgets; this file only adds behaviour that Elementor has no control for.
 */

/* ---- Bar ---- */
.fspl-header{position:relative;z-index:40;transition:box-shadow .3s ease}
.fspl-header.elementor-sticky--effects{box-shadow:0 10px 30px rgba(32,44,80,.10)}
.elementor .e-con.fspl-header-row,.fspl-wrap{width:100%;max-width:1264px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}

/* ---- Logo (shortcode [fspl_logo]: Customizer logo or the FSPL text mark) ---- */
.fspl-logo-widget{flex:0 1 auto;min-width:0}
.fspl-logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:1;min-width:0;max-width:100%;text-decoration:none;color:var(--fspl-head)}
.fspl-logo__mark{font:800 20px/1 var(--fspl-font-display);font-stretch:80%;letter-spacing:.05em;background:var(--fspl-navy);color:var(--fspl-white);padding:7px 9px 6px}
.fspl-logo__text{font:650 18px/1 var(--fspl-font-display);font-stretch:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* a logo image placed directly in the Elementor header/footer (Image widget) is limited the same way */
.fspl-header .elementor-widget-image img{display:block;width:auto;max-height:44px;max-width:min(220px,46vw);object-fit:contain}
.fspl-footer .elementor-widget-image img{display:block;width:auto;max-height:60px;max-width:min(260px,100%);object-fit:contain}
@media(max-width:1120px){.fspl-header .elementor-widget-image img{max-height:40px}}
@media(max-width:600px){.fspl-header .elementor-widget-image img{max-height:34px;max-width:min(170px,44vw)}}
.fspl-quote-btn .elementor-button{white-space:nowrap}
.fspl-logo__img{display:block;width:auto;height:auto;max-height:44px;max-width:min(220px,46vw);object-fit:contain}
.fspl-logo--light .fspl-logo__mark{background:var(--fspl-white);color:var(--fspl-navy-deep)}
.fspl-logo--light .fspl-logo__text{color:var(--fspl-white)}
.fspl-footer .fspl-logo__img{max-height:60px;max-width:min(260px,100%)}
@media(max-width:1120px){.fspl-logo__img{max-height:40px}}
@media(max-width:600px){.fspl-logo__img{max-height:34px;max-width:min(170px,44vw)}.fspl-header .fspl-logo__text{display:none}}
.fspl-header-row>*{min-width:0}

/* ---- Desktop navigation ---- */
.fspl-navwrap{position:static!important}
.fspl-navitem{position:relative;align-self:stretch}
.fspl-navitem.fspl-has-mega{position:static!important}
.fspl-navlink .elementor-heading-title{transition:color .15s;white-space:nowrap}
.fspl-navitem:hover>.fspl-navtop .elementor-heading-title,
.fspl-navitem:focus-within>.fspl-navtop .elementor-heading-title,
.fspl-navtop:hover .elementor-heading-title{color:var(--fspl-navy)}
.fspl-hasdrop .elementor-heading-title::after{content:"";display:inline-block;width:12px;height:12px;margin-left:5px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%237F87A1' stroke-width='1.6'/%3E%3C/svg%3E") center/12px no-repeat}

/* current section (body class set by the theme: fspl-section-home / about / products / industries / quality / contact) */
body.fspl-section-home .fspl-navtop.fspl-nav-home,
body.fspl-section-about .fspl-nav-about>.fspl-navtop,
body.fspl-section-products .fspl-nav-products>.fspl-navtop,
body.fspl-section-industries .fspl-nav-industries>.fspl-navtop,
body.fspl-section-quality .fspl-nav-quality>.fspl-navtop,
body.fspl-section-contact .fspl-nav-contact>.fspl-navtop,
.fspl-navtop.is-current{box-shadow:inset 0 -3px 0 var(--fspl-navy)}
body.fspl-section-home .fspl-navtop.fspl-nav-home .elementor-heading-title,
body.fspl-section-about .fspl-nav-about>.fspl-navtop .elementor-heading-title,
body.fspl-section-products .fspl-nav-products>.fspl-navtop .elementor-heading-title,
body.fspl-section-industries .fspl-nav-industries>.fspl-navtop .elementor-heading-title,
body.fspl-section-quality .fspl-nav-quality>.fspl-navtop .elementor-heading-title,
body.fspl-section-contact .fspl-nav-contact>.fspl-navtop .elementor-heading-title{color:var(--fspl-navy)}

/* ---- Dropdown + mega panels ---- */
.fspl-drop{position:absolute;top:100%;left:0;z-index:45;min-width:250px;border-top:3px solid var(--fspl-navy)!important;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.fspl-drop:not(.fspl-mega){width:max-content}
.fspl-mega{left:50%;right:auto;width:min(100%,1264px);transform:translate(-50%,6px)}
.fspl-navitem:hover>.fspl-drop,.fspl-navitem:focus-within>.fspl-drop{opacity:1;visibility:visible;transform:translateY(0)}
.fspl-navitem:hover>.fspl-mega,.fspl-navitem:focus-within>.fspl-mega{transform:translate(-50%,0)}
.fspl-dlink{transition:background-color .15s}
.fspl-dlink:hover{background:var(--fspl-mist)}
.fspl-dlink:hover .elementor-heading-title a{color:var(--fspl-navy)}

/* ---- Menu button (animated hamburger) + mobile/tablet panel ---- */
.fspl-menu-btn{display:none;flex:none}
.elementor .elementor-widget-button.fspl-menu-btn .elementor-button.elementor-button{position:relative;padding-left:44px;gap:0;line-height:1.2}
.fspl-menu-btn .elementor-button::before,.fspl-menu-btn .elementor-button::after{content:"";position:absolute;left:15px;top:calc(50% - 1px);width:18px;height:2px;background:currentColor;
  transition:transform .28s var(--fspl-ease),box-shadow .28s var(--fspl-ease),opacity .2s}
.fspl-menu-btn .elementor-button::before{box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.fspl-menu-btn .elementor-button::after{opacity:0;transform:rotate(-45deg)}
.fspl-menu-btn .elementor-button[aria-expanded="true"]::before{transform:rotate(45deg);box-shadow:0 0 0 transparent,0 0 0 transparent}
.fspl-menu-btn .elementor-button[aria-expanded="true"]::after{opacity:1}

.elementor .e-con.e-child.fspl-mnav{padding-top:0;padding-bottom:0;border-top-width:0}
.elementor .e-con.e-child.fspl-mnav.is-open{padding-top:8px;padding-bottom:24px;border-top-width:1px}
.fspl-mnav{display:block;visibility:hidden;opacity:0;transform:translateY(-8px);max-height:0;overflow:hidden;
  transition:max-height .38s var(--fspl-ease),opacity .26s ease,transform .3s var(--fspl-ease),padding .3s var(--fspl-ease),visibility 0s .38s}
.fspl-mnav.is-open{visibility:visible;opacity:1;transform:none;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transition:max-height .38s var(--fspl-ease),opacity .26s ease,transform .3s var(--fspl-ease),visibility 0s}
.fspl-msum{position:relative;cursor:pointer;user-select:none}
.fspl-msum::after{content:"+";position:absolute;right:4px;top:14px;font:400 16px/1.6 var(--fspl-font-mono);color:var(--fspl-steel);transition:transform .25s var(--fspl-ease)}
.fspl-mrow.is-open .fspl-msum::after{content:"\2013"}
.fspl-mbody{max-height:0;overflow:hidden;padding-top:0!important;padding-bottom:0!important;border-bottom-width:0!important;transition:max-height .34s var(--fspl-ease),padding .3s var(--fspl-ease)}
.fspl-mrow.is-open>.fspl-mbody{max-height:1600px;padding-top:8px!important;padding-bottom:12px!important;border-bottom-width:1px!important}
.fspl-mlink .elementor-heading-title a,.fspl-mbody .elementor-heading-title a{display:block}
.fspl-mbody .elementor-heading-title a:hover{color:var(--fspl-navy)}
/* lock page scroll while the menu is open (no layout shift: scrollbar width is compensated by nav.js) */
html.fspl-menu-open,html.fspl-menu-open body{overflow:hidden}
html.fspl-menu-open body{padding-right:var(--fspl-scrollbar,0)}
/* show everything while editing in Elementor so the panel can be styled */
.elementor-editor-active .fspl-mnav{visibility:visible;opacity:1;transform:none;max-height:none}
.elementor-editor-active .fspl-mbody{max-height:none;padding:8px 0 12px 12px!important;border-bottom-width:1px!important}

/* ---- Breakpoints ---- */
@media(max-width:1120px){
  .fspl-deskNav{display:none!important}
  .fspl-menu-btn{display:block}
}
@media(min-width:1121px){
  .fspl-menu-btn,.fspl-mnav{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .fspl-drop,.fspl-mnav,.fspl-mbody,.fspl-menu-btn .elementor-button::before,.fspl-menu-btn .elementor-button::after{transition:none}
}