/* /nav.css (Last-known-good baseline + safe positioning tweaks)
   Theme: html { font-size: 62.5%; } => 1rem = 10px globally.
   We rebase nav locally and keep mega menus responsive.
*/

/* =========================
   Tokens
   ========================= */
   :root{
      --fp-accent: #26ff9a;
      --fp-bg: rgba(0, 25, 22, 0.98);
      --fp-bg-pill: rgba(0, 25, 22, 0.55);
      --fp-border: rgba(255,255,255,0.12);
      --fp-text: rgba(255,255,255,1);
      --fp-text-dim: rgba(255,255,255,0.78);
      --fp-shadow: 0 1.6rem 4.2rem rgba(0,0,0,0.35);
      --fp-radius: 3px;

      /* Local nav scale */
      --fp-nav-base: 1.6rem;   /* ~16px inside nav */

      /* Mega sizing + safe gutters */
      --fp-mega-max: 120rem;
      --fp-mega-gutter: 2.4rem;

      /* Positioning (SAFE) */
      --fp-mega-top-gap: 0.6rem; /* adjust only this if needed */
  }

/* =========================
   Header layout (optional)
   ========================= */
   .fp-header{
      position: relative;
      z-index: 60;
  }

  .fp-header__inner{
      max-width: min(120rem, 96vw);
      margin-inline: auto;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: clamp(1.0rem, 2vw, 1.8rem);
      padding-block: clamp(1.0rem, 2vw, 1.4rem);
      padding-inline: clamp(1.2rem, 2vw, 1.8rem);

      background: var(--fp-bg-pill);
      backdrop-filter: blur(10px);
      border: 1px solid var(--fp-border);
      border-radius: var(--fp-radius);
  }

  .fp-brand{
      display: inline-flex;
      align-items: center;
      gap: 1.0rem;
      text-decoration: none;
      color: inherit;
  }

  .fp-brand__text{
      font-weight: 600;
      letter-spacing: 0.01em;
  }

  .fp-header__navwrap{
      display: flex;
      justify-content: center;
      min-width: 0;
  }

  .fp-header__cta{
      display: flex;
      justify-content: flex-end;
  }

/* Optional CTA styling if used */
.fp-cta{
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  border-radius: 0.9rem;
  padding: 1.0rem 1.3rem;
  background: #b7ff2a;
  color: #06211c;
  font-weight: 650;
  white-space: nowrap;
}
.fp-cta:hover{ filter: brightness(0.95); }

.fp-cta__icon{
  display: inline-flex;
  width: 2.2rem;
  height: 2.2rem;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.55);
  border-radius: 0.55rem;
}

/* =========================
   Nav base + local rebase
   ========================= */
   .fp-nav{
      position: relative; /* mega anchors to this */
      z-index: 50;

      font-size: var(--fp-nav-base);
      line-height: 1.35;
      color: var(--fp-text);
  }

  .fp-nav__list{
      list-style: none;
      display: flex;
      align-items: center;
      gap: clamp(1.2rem, 2vw, 2.2rem);
      margin: 0;
      padding: 0;
  }

/* Only top-level items are flex */
.fp-nav__list > .fp-item{
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Allow mega to span nav, not LI */
.fp-nav > .fp-nav__list > .fp-item--depth-0{
  position: static;
  padding-inline: 0.4rem;
}
.fp-nav > .fp-nav__list > .fp-item--depth-0 > a {
    text-transform: uppercase;
}

/* Default: submenu items are block */
.fp-subnav .fp-item{ display: block; }

/* Links */
.fp-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  padding-block: 1.2rem;
  padding-inline: 0.6rem;
  white-space: nowrap;
  font-weight: 520;
  letter-spacing: 0.01em;
}

.fp-link--depth-0{ font-size: 0.9em; }

/* Underline indicator */
.fp-item--depth-0 > .fp-link::after{
  content:"";
  position:absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.55rem;
  height: 0.22rem;
  border-radius: 999px;
  background: var(--fp-accent);
  opacity: 0;
  transform: scaleX(0.65);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}
.fp-item--depth-0.current-menu-item > .fp-link::after,
.fp-item--depth-0.current-menu-ancestor > .fp-link::after,
.fp-item--depth-0.is-open > .fp-link::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Toggle */
.fp-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color: inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 1.2rem 0.4rem;
  cursor:pointer;
  border-radius: 0.6rem;
}

.fp-icon--chev{
  width: 1.15em;
  height: 1.15em;
  opacity: 0.9;
  transition: transform 180ms ease;
}
.fp-item.is-open > .fp-toggle .fp-icon--chev{ transform: rotate(180deg); }

/* Focus styling */
.fp-link:focus,
.fp-toggle:focus{ outline: none; }
.fp-link:focus-visible,
.fp-toggle:focus-visible{
  outline: 2px solid rgba(38,255,154,0.7);
  outline-offset: 2px;
}

/* =========================
   Mega base (LAST KNOWN GOOD)
   ========================= */
   .fp-subnav{
      position:absolute;
      left:0;
      right:0;
      width:100%;
      top: calc(100% + var(--fp-mega-top-gap)); /* SAFE TWEAK */
      display:none;
      z-index:200;

      opacity: 0;
      transform: translateY(-0.45rem);
      transition: opacity 170ms ease, transform 170ms ease;
      pointer-events: none;
  }

  .fp-item.is-open > .fp-subnav{
      display:block;
      opacity:1;
      transform: translateY(1em) translateX(-71.5%);
      pointer-events:auto;
  }

  .fp-subnav,
  .fp-subnav *{ box-sizing:border-box; }

/* SAFE WIDTH: centered, wide, but never breaks header/nav */
.fp-subnav__inner{
  width: min(
    var(--fp-mega-max),
    calc(100vw - (var(--fp-mega-gutter) * 2))
);
  margin-inline: auto;

  background: var(--fp-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: clamp(2.0rem, 3vw, 2.8rem);
  box-shadow: var(--fp-shadow);

  font-size: 1em;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--fp-text);
}

/* reset theme bleed */
.fp-subnav__inner ul,
.fp-subnav__inner li{ margin:0; padding:0; }

.fp-subnav__list,
.fp-subnav__cols,
.fp-subnav__links{ list-style:none; margin:0; padding:0; }

.fp-subnav__inner a{
  text-decoration:none;
  color: rgba(255,255,255,0.88);
}
.fp-subnav__inner a:hover{ color: rgba(255,255,255,1); }

/* =========================
   PRODUCTS mega (columns)
   ========================= */
   .fp-subnav--products .fp-subnav__cols{
      display:grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(1.6rem, 3vw, 2.4rem);
      
    padding:2em 3em;
  }

/* Column stacks: title + children */
.fp-subnav--products .fp-subnav__cols > li{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.fp-subnav--products .fp-subnav__cols > li > a{
  padding-block: 0.4rem;
  padding-inline: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.fp-col__title{
  font-size: 1.5em;
  font-family: "acumin-variable", sans-serif;
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.01em;
  color:#CCD2D1;
}
.fp-col__title span {
  color:#99A4A3;
}

/* Depth-2 links */
.fp-subnav__links{
  width: 100%;
  margin-top: 0.2rem;
  padding-top: 0.9rem;
  font-weight:300;
  text-transform: uppercase;
  color:#E4E8E7;
}

.fp-subnav__links > li{ display:block; }

.fp-subnav__links a{
  display:inline-flex;
  width:100%;
  padding-block: 0.85rem;
  font-size: 1.00em;
  opacity: 0.92;
}
.fp-subnav__links a:hover{ opacity: 1; }

@media (max-width: 56rem){
  .fp-subnav--products .fp-subnav__cols{
    /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    grid-template-columns: 100%;
    /*position: absolute;*/
}
}
@media (max-width: 36rem){
  .fp-subnav--products .fp-subnav__cols{
    grid-template-columns: 1fr;
}
}

/* =========================
   SECTORS mega (list + panel)
   ========================= */
   .fp-subnav__grid--sectors {
      display:grid;
      grid-template-columns: minmax(18rem, 1fr) minmax(32rem, 1.15fr);
      gap: clamp(2.0rem, 3vw, 3.2rem);
      align-items: stretch;
  }
  .fp-subnav__grid--sectors .fp-subnav__left {
    font-size:1.5em;
    padding:2em 3em;
  }

  .fp-subnav__grid--sectors .fp-subnav__right {
    flex-grow:1;
  }

  .fp-subnav__list > li{ display:block; }

  .fp-subnav__list a{
      display:inline-flex;
      width: 100%;
      padding-block: 1.05rem;
      font-size: 1.05em;
      color: rgba(255,255,255,0.86);
      font-weight:400;
      letter-spacing: -0.015em;
  }
  .fp-subnav__list a:hover{ color: rgba(255,255,255,1); }

  .fp-panel{
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--fp-radius);
      padding: clamp(2.0rem, 3vw, 2.8rem);
      display:grid;
      gap: 1.2rem;
      height:100%;
      width: min(56rem, 100%);
      justify-self: end;
  }

  .fp-panel__title{
      margin:0;
      font-size: 1.7em;
      line-height: 1.15;
      color: rgba(255,255,255,0.95);
      font-weight: 350;
  }
  .fp-panel__body{
      color: var(--fp-text-dim);
      font-size: 1.3em;
      line-height: 1.3;
      margin-bottom:50px;
  }


  #panel-button {
    position: relative;
    font-family: "acumin-variable", sans-serif;
    font-variation-settings: "slnt" 0, "wdth" 90, "wght" 600;
    font-size: 1em;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: uppercase;

    color:#302e2e;
    color: #ffffff;
    background-color: #05211b;
    padding:0.9em 3.8em 0.9em 0.9em;
    display: inline-block;
    border-radius:3px;
    text-decoration: none;
    transition:0.6s background-color;
}
#panel-button:hover {
   /*background-color: #f1e7d8; */
}
#panel-button::before {
    content:'';
    display: block;
    position: absolute;
    right:5px;
    top:50%;
    transform: translateY(-50%);
    height:40px;
    width:40px;
    background-color: #344d48;
    /*opacity:0.3;*/
    border-radius:3px;
}
#panel-button:hover:before {
    background-color: #1ad385;
}

#panel-button:after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    background-image: url(img/button-arrow.php?col=ffffff);
    background-size: contain;
    background-position: center;
    position: absolute;
    right: 1.1em;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s all;
}

#panel-button:hover:after {
    background-image: url(img/button-arrow.php?col=02211b);
    transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 56rem){
  .fp-subnav__grid--sectors{ grid-template-columns: 1fr; }
  .fp-panel{ width: 100%; justify-self: stretch; }
}
/* =========================
   Mobile nav (hamburger + drawer)
   ========================= */

.fp-mobile-toggle{
  display:none;
  appearance:none;
  border:none;
  background:none;
  padding:0;
  margin:0;
  cursor:pointer;
}


/* default: drawer hidden on desktop */
.fp-mobile-drawer{
  display:none;
}
@media only screen and (min-width: 901px) {

  .hamburger {
    display: none !important; 
  }
}


@media (max-width: 900px){
  .hamburger {
    display: block !important;
    z-index:999 !important;
  }
  .fp-header__inner{
    grid-template-columns: auto auto;
    grid-template-areas:
      "brand cta"
      "nav nav";
  }
  .fp-brand{ grid-area: brand; }
  .fp-header__cta{ grid-area: cta; }
  .fp-header__navwrap{ grid-area: nav; justify-content: flex-start; }

  .fp-mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Hide desktop nav list on mobile */
  .fp-nav__list{
    display:none;
  }

  /* Off-canvas drawer from the right */
  .fp-mobile-drawer{
    display:block;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:100%;
/*    max-width:32rem;*/
    background: var(--fp-bg);
    border-left:1px solid var(--fp-border);
    box-shadow: var(--fp-shadow);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index:200;
    padding:1.6rem 1.8rem;
  }

  .nav-open .fp-mobile-drawer{
    transform: translateX(0) !important;
  }

  /* Panels */
  .fp-mobile-panel{
    position:absolute;
    inset:0;
    overflow-y:auto;
    transition: transform 0.3s ease;
    padding-top:150px;
  }

  .fp-mobile-panel--root{
    transform: translateX(0);
  }

  .fp-mobile-panel--root.fp-mobile-panel--shift-left{
    transform: translateX(-100%);
  }

  .fp-mobile-panel--child{
    transform: translateX(100%);
  }

  .fp-mobile-panel--child.is-active{
    transform: translateX(0);
  }


  /* ==================================================
     NEW: 3-level mobile drawer panels (root -> mid -> child)
     Driven by .fp-mobile-drawer[data-level="0|1|2"]
     ================================================== */

  /* Ensure panels don't spill horizontally while sliding */
  .fp-mobile-drawer{ overflow:hidden; }

  /* New middle panel (Products types / Sectors list) */
  .fp-mobile-panel--mid{
    transform: translateX(100%);
  }

  /* Level positioning:
     0 = root visible
     1 = mid visible
     2 = child visible
  */
  .fp-mobile-drawer[data-level="0"] .fp-mobile-panel--root{  transform: translateX(0); }
  .fp-mobile-drawer[data-level="0"] .fp-mobile-panel--mid{   transform: translateX(100%); }
  .fp-mobile-drawer[data-level="0"] .fp-mobile-panel--child{ transform: translateX(200%); }

  .fp-mobile-drawer[data-level="1"] .fp-mobile-panel--root{  transform: translateX(-100%); }
  .fp-mobile-drawer[data-level="1"] .fp-mobile-panel--mid{   transform: translateX(0); }
  .fp-mobile-drawer[data-level="1"] .fp-mobile-panel--child{ transform: translateX(100%); }

  .fp-mobile-drawer[data-level="2"] .fp-mobile-panel--root{  transform: translateX(-200%); }
  .fp-mobile-drawer[data-level="2"] .fp-mobile-panel--mid{   transform: translateX(-100%); }
  .fp-mobile-drawer[data-level="2"] .fp-mobile-panel--child{ transform: translateX(0); }


  /* Lists & items */
  .fp-mobile-list{
    list-style:none;
    margin:0;
    padding:0;
  }

  .fp-mobile-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.9rem 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  .fp-mobile-link{
    flex:1 1 auto;
    text-decoration:none;
    color: var(--fp-text);
    font-size:1.4rem;
    padding:1em;
  }

  .fp-mobile-link--l1{
    font-weight:500;
  }

  .fp-mobile-link--l2{
    font-size:1.35rem;
  }

  .fp-mobile-plus{
    flex:0 0 auto;
    border:none;
    background:none;
    color: var(--fp-text);
    font-size:2rem;
    padding-left:1rem;
    cursor:pointer;
    line-height:1;
    padding-right: 1em;
  }

  .fp-mobile-back{
    border:none;
    background:none;
    color: var(--fp-text);
    font-size:1.4rem;
    margin-bottom:0.5rem;
    cursor:pointer;
    /*background-color: #03211B;*/
    margin-left:1em;
    padding: 0;
  }

  .fp-mobile-title{
    font-weight:600;
    font-size:1.5rem;
    margin-bottom:1.2rem;
    color:#fff;
    text-transform: uppercase;
    text-align: center;
  }
}