/* ==========================================================================
   GENISYS site header - modern, light, sticky w/ shrink + mega dropdowns
   ========================================================================== */

:root {
  --genisys-green: #56AF40;
  --genisys-green-dark: #007A33;
  --header-ink: #1c2421;
  --header-muted: #5b6b63;
  --header-bg: #ffffff;
  --header-border: rgba(20, 30, 25, 0.08);
  --header-shadow: 0 6px 24px rgba(12, 30, 18, 0.10);
  --header-radius: 14px;
  --header-font: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link{
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 10000;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--genisys-green-dark);
  color: #fff;
  font-family: var(--header-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus{
  top: 12px;
}

/* --------------------------------------------------------------------------
   Top utility bar
   -------------------------------------------------------------------------- */
.topbar {
  background: linear-gradient(90deg, var(--genisys-green), var(--genisys-green-dark));
  color: #fff;
  font-family: var(--header-font);
  font-size: 13px;
  font-weight: 500;
}

.topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 7px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.topbar__links a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.15s ease;
}

.topbar__links a:hover {
  color: #fff;
}

.topbar__cta {
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--genisys-green-dark) !important;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.topbar__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   Sticky header shell
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  font-family: var(--header-font);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--header-shadow);
}

.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: padding 0.25s ease;
}

.site-header.is-scrolled .site-header__inner {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Logo */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-header__logo img {
  display: block;
  height: 58px;
  width: auto;
  transition: height 0.25s ease;
}

.site-header.is-scrolled .site-header__logo img {
  height: 46px;
}

/* --------------------------------------------------------------------------
   Primary nav
   -------------------------------------------------------------------------- */
.primary-nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: var(--header-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--header-ink);
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-link:hover,
.nav-item:focus-within > .nav-link {
  color: var(--genisys-green-dark);
  background: rgba(86, 175, 64, 0.08);
}

/* caret for dropdown parents */
.has-dropdown > .nav-link::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.has-dropdown:hover > .nav-link::after,
.has-dropdown > .nav-link[aria-expanded="true"]::after {
  transform: rotate(225deg) translateY(-1px);
}

/* CTA button in nav (hidden on desktop where topbar CTA exists, shown on mobile) */
.nav-item--cta {
  display: none;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--genisys-green), var(--genisys-green-dark));
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 122, 51, 0.28);
}

.nav-cta--secondary {
  background: #fff;
  color: var(--genisys-green-dark) !important;
  border: 2px solid var(--genisys-green-dark);
}

.nav-cta--secondary:hover {
  box-shadow: 0 6px 18px rgba(0, 122, 51, 0.16);
}

.drawer-logo {
  display: none;
}

/* --------------------------------------------------------------------------
   Dropdowns - shared look (box, links, mega inner layout)
   -------------------------------------------------------------------------- */
.dropdown {
  background: #fff;
  border: 1px solid var(--header-border);
  border-radius: var(--header-radius);
  box-shadow: var(--header-shadow);
  padding: 10px;
}

.dropdown__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropdown__list a,
.mega__grid a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--header-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}

.dropdown__list a:hover,
.mega__grid a:hover {
  color: var(--genisys-green-dark);
  background: rgba(86, 175, 64, 0.10);
}

.dropdown--mega {
  padding: 0;
  overflow: visible;
}

.mega {
  display: grid;
  grid-template-columns: 220px 1fr;
}

.mega__intro {
  padding: 24px;
  background: linear-gradient(160deg, rgba(86, 175, 64, 0.10), rgba(0, 122, 51, 0.06));
  border-right: 1px solid var(--header-border);
}

.mega__title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--genisys-green-dark);
  margin-bottom: 8px;
}

.mega__intro p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--header-muted);
}

.mega__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 0;
  padding: 14px;
  list-style: none;
  align-content: start;
}

.mega__item {
  position: relative;
}

.mega__row {
  display: flex;
  align-items: stretch;
}

.mega__row > a {
  flex: 1;
}

.submenu-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  width: 42px;
  cursor: pointer;
  color: var(--header-ink);
  border-radius: 8px;
  position: relative;
}

.submenu-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-60%, -60%) rotate(45deg);
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.has-submenu.open > .mega__row .submenu-toggle::after,
.has-submenu.open > .submenu-toggle::after {
  transform: translate(-40%, -40%) rotate(225deg);
}

.submenu {
  margin: 0;
  padding: 8px;
  list-style: none;
}

.submenu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--header-ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
  white-space: nowrap;
}

.submenu a:hover {
  color: var(--genisys-green-dark);
  background: rgba(86, 175, 64, 0.10);
}

/* --------------------------------------------------------------------------
   Dropdowns - desktop positioning + animation
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
  /* Fixtures stays in the 2-col grid beside siblings. Submenu is absolutely
     positioned so expanding it does not reflow the mega menu (which was
     causing the whole Solutions panel to close when the pointer moved down). */
  .mega__item.has-submenu {
    grid-column: 1 / -1;
    z-index: 3;
  }

  .submenu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: max(100%, 260px);
    min-width: 240px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--header-border);
    border-radius: 10px;
    box-shadow: var(--header-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 6;
  }

  /* Hover bridge between the Fixtures row and the submenu panel */
  .submenu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
  }

  .mega__item.has-submenu:hover > .submenu,
  .mega__item.has-submenu:focus-within > .submenu,
  .mega__item.has-submenu.open > .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mega__item.has-submenu > .mega__row > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.45;
    vertical-align: middle;
    transition: transform 0.2s ease;
  }

  .mega__item.has-submenu:hover > .mega__row > a::after,
  .mega__item.has-submenu:focus-within > .mega__row > a::after,
  .mega__item.has-submenu.open > .mega__row > a::after {
    transform: rotate(225deg) translateY(-1px);
  }

  .dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 260px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  /* hover bridge so the menu doesn't close in the gap */
  .dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }

  .nav-item.has-dropdown:hover > .dropdown,
  .nav-item.has-dropdown:focus-within > .dropdown,
  .nav-item.has-dropdown.open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Keep mega panels painted above neighboring nav items while open */
  .nav-item.has-dropdown:hover,
  .nav-item.has-dropdown:focus-within,
  .nav-item.has-dropdown.open {
    z-index: 5;
  }

  /* Mega panels: centered under their item by default */
  .dropdown--mega {
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: min(680px, 92vw);
  }

  .nav-item.has-mega:hover > .dropdown--mega,
  .nav-item.has-mega:focus-within > .dropdown--mega,
  .nav-item.has-mega.open > .dropdown--mega {
    transform: translate(-50%, 0);
  }

  /* Edge-aware alignment so wide panels never spill off-screen.
     First menu hugs the left; the two rightmost menus hug the right.
     (The very last nav item is the Contact CTA.) */
  .nav-item:first-child > .dropdown--mega {
    left: 0;
    right: auto;
    transform: translate(-220px, 8px);
  }
  .nav-item:first-child:hover > .dropdown--mega,
  .nav-item:first-child:focus-within > .dropdown--mega,
  .nav-item:first-child.open > .dropdown--mega {
    transform: translate(-220px, 0);
  }

  .nav-item:nth-last-child(2) > .dropdown--mega,
  .nav-item:nth-last-child(3) > .dropdown--mega {
    left: auto;
    right: 0;
    transform: translate(0, 8px);
  }
  .nav-item:nth-last-child(2):hover > .dropdown--mega,
  .nav-item:nth-last-child(2):focus-within > .dropdown--mega,
  .nav-item:nth-last-child(2).open > .dropdown--mega,
  .nav-item:nth-last-child(3):hover > .dropdown--mega,
  .nav-item:nth-last-child(3):focus-within > .dropdown--mega,
  .nav-item:nth-last-child(3).open > .dropdown--mega {
    transform: translate(0, 0);
  }
}

/* --------------------------------------------------------------------------
   Hamburger toggle
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--header-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle__box {
  position: relative;
  width: 22px;
  height: 16px;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--header-ink);
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobile / tablet
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .topbar {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .drawer-logo {
    display: block;
    margin: 0 12px 18px;
  }

  .drawer-logo img {
    display: block;
    height: 48px;
    width: auto;
  }

  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    margin: 0;
    padding: 28px 18px 32px;
    background: #fff;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1200;
  }

  body.nav-open .primary-nav {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Header must sit above the dimmer so drawer links receive taps.
     The dimmer is a body pseudo; the drawer lives inside .site-header. */
  body.nav-open .site-header,
  body.nav-open .topbar {
    z-index: 1300;
  }

  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 13, 0.45);
    z-index: 900;
    pointer-events: auto;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    font-size: 16px;
    padding: 14px 12px;
  }

  /* dropdowns become accordions */
  .dropdown,
  .dropdown--mega {
    position: static;
    transform: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 8px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.28s ease;
  }

  .nav-item.has-dropdown:hover > .dropdown,
  .nav-item.has-dropdown:focus-within > .dropdown {
    /* don't auto-open on hover/focus when in mobile accordion mode */
    max-height: 0;
  }

  .nav-item.has-dropdown.open > .dropdown,
  .nav-item.has-mega.open > .dropdown--mega {
    max-height: 720px;
  }

  .mega {
    grid-template-columns: 1fr;
  }

  .mega__intro {
    display: none;
  }

  .mega__grid {
    grid-template-columns: 1fr;
    padding: 0;
  }

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

  .submenu {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.28s ease;
  }

  .submenu::before {
    display: none;
  }

  .mega__item.has-submenu.open > .submenu {
    max-height: 420px;
    padding: 0 0 6px;
  }

  .submenu a {
    padding: 10px 16px 10px 28px;
    font-size: 14px;
    white-space: normal;
  }

  .dropdown__list a,
  .mega__grid a {
    padding: 11px 16px;
    font-size: 15px;
  }

  .nav-item--cta {
    display: block;
    margin-top: 10px;
  }

  .nav-item.has-dropdown + .nav-item--cta {
    margin-top: 16px;
  }

  .nav-cta {
    width: 100%;
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open main,
  body.nav-open .hero {
    pointer-events: none;
  }
}

@media (max-width: 480px) {
  .topbar__links a:not(.topbar__cta) {
    display: none;
  }
}

/* ==========================================================================
   Landing page: transparent header that sits on top of the hero image
   ========================================================================== */

/* Logo swap: white logo only on the home overlay header.
   Scoped through .site-header__logo so it beats `.site-header__logo img { display:block }`. */
.site-header__logo .logo--white { display: none; }
.site-header__logo .logo--color { display: block; }

body.home .topbar,
body.home .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
}

/* Sticky home header: gains a dark glass backdrop once you scroll into the content */
body.home .site-header.is-scrolled {
  background: rgba(10, 14, 12, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(111, 206, 87, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

body.home:has(.site-header.is-scrolled) .topbar {
  background: rgba(10, 14, 12, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

body.home .topbar {
  top: 0;
  z-index: 1001;
}

body.home .site-header {
  top: 40px;                       /* sit just below the utility bar */
  z-index: 1000;
  border-bottom-color: transparent;
}

@media (max-width: 992px) {
  body.home .site-header {
    top: 0;
  }
}

/* Must beat body.home .site-header { z-index: 1000 } so the drawer is
   above the dimmer and above the landing page stacking context. */
body.home.nav-open .site-header,
body.home.nav-open .topbar {
  z-index: 1300;
}

body.home .site-header__logo .logo--color { display: none; }
body.home .site-header__logo .logo--white { display: block; }

/* white hamburger over the image */
body.home .nav-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
}

body.home .nav-toggle__bar {
  background: #fff;
}

/* white nav text on desktop; the mobile drawer stays a solid white panel */
@media (min-width: 993px) {
  body.home .nav-link {
    color: #fff;
  }

  body.home .nav-link:hover,
  body.home .nav-item:focus-within > .nav-link {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
  }
}