/* ===========================
   FANTONI HEADER
   Fixed header + mega-menu panels + mobile panel
   =========================== */

/* ---- FIXED HEADER ---- */
header.wp-block-template-part,
#fantoni-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  will-change: transform;
  /* No transition by default — JS adds it only when intentionally revealing */
}

/* Kill ensoul custom.js scroll behavior — we handle it ourselves.
   Plugin uses .header-scroll-hide + .header-hidden-on-scroll (2 classes).
   Our rules must have higher specificity + !important to always win. */
header.wp-block-template-part.header-scroll-hide {
  transition: none !important;
}
header.wp-block-template-part.header-scroll-hide.header-hidden-on-scroll {
  transform: none !important;
}

/* OUR hide/reveal — 3 class specificity to beat the plugin's 2 classes */
header.wp-block-template-part.header-scroll-hide.fantoni-header-hidden {
  transform: translateY(-100%) !important;
  transition: transform 300ms ease !important;
}
header.wp-block-template-part.header-scroll-hide.fantoni-header-revealing {
  transition: transform 300ms ease !important;
}

/* ---- NAV BUTTONS ---- */
.fantoni-nav-buttons {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

[id^="trigger-"] {
  cursor: pointer;
  user-select: none;
  transition: opacity 200ms ease;
}

[id^="trigger-"]:hover {
  opacity: 0.7;
}

.fantoni-nav-active {
  opacity: 1 !important;
}

.fantoni-nav-buttons:has(.fantoni-nav-active)
  [id^="trigger-"]:not(.fantoni-nav-active) {
  opacity: 0.5;
}

/* ============================================================
   MEGA-MENU PANELS
   Phase 1: bg slides down
   Phase 2: headings slide from left (staggered)
   Phase 3: list items slide from left (staggered, slight randomness)
   Close: reverse order
   ============================================================ */

/* Collapse the outer <section> */
header.wp-block-template-part > section:not([id^="group-"]) {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 0;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  transition: grid-template-rows 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

header.wp-block-template-part
  > section:not([id^="group-"])
  > .wp-block-ensoul-spacing-wrapper {
  min-height: 0;
  background: #fff !important;
  width: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: padding 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* All staggerable items: hidden by default */
header.wp-block-template-part > section:not([id^="group-"]) .wp-block-ensoul-heading,
header.wp-block-template-part > section:not([id^="group-"]) .wp-block-ensoul-list,
header.wp-block-template-part > section:not([id^="group-"]) .wp-block-ensoul-spacer {
  transform: translateX(-30px);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: var(--sd, 0ms);
}

/* OPEN: bg expanded */
header.wp-block-template-part > section.fantoni-panel--open {
  grid-template-rows: 1fr;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

header.wp-block-template-part
  > section.fantoni-panel--open
  > .wp-block-ensoul-spacing-wrapper {
  padding-top: var(--spacing-3xl) !important;
  padding-bottom: var(--spacing-3xl) !important;
}

/* CONTENT VISIBLE: items slide in (class added by JS after bg opens) */
header.wp-block-template-part > section.fantoni-panel--content-in .wp-block-ensoul-heading,
header.wp-block-template-part > section.fantoni-panel--content-in .wp-block-ensoul-list,
header.wp-block-template-part > section.fantoni-panel--content-in .wp-block-ensoul-spacer {
  transform: translateX(0);
  opacity: 1;
}

/* CLOSING: content slides out first */
header.wp-block-template-part > section.fantoni-panel--closing .wp-block-ensoul-heading,
header.wp-block-template-part > section.fantoni-panel--closing .wp-block-ensoul-list,
header.wp-block-template-part > section.fantoni-panel--closing .wp-block-ensoul-spacer {
  transform: translateX(-30px);
  opacity: 0;
  transition-delay: var(--sd-out, 0ms);
}

header.wp-block-template-part > section.fantoni-panel--closing {
  grid-template-rows: 0fr;
  transition-delay: var(--close-bg-delay, 300ms);
}

header.wp-block-template-part
  > section.fantoni-panel--closing
  > .wp-block-ensoul-spacing-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition-delay: var(--close-bg-delay, 300ms);
}

/* ---- BACKDROP ---- */
.fantoni-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.fantoni-menu-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- MOBILE PANEL ---- */
.fantoni-mobile-panel {
  display: none !important;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fantoni-mobile-panel.header-menu-panel--open {
  display: block !important;
}

header.wp-block-template-part section:has(> .fantoni-mobile-panel) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

header.wp-block-template-part
  section:has(> .fantoni-mobile-panel.header-menu-panel--open) {
  display: block !important;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .fantoni-nav-buttons { display: none !important; }
  header.wp-block-template-part > section:not([id^="group-"]) { display: none !important; }
}

@media (min-width: 769px) {
  .header-hamburger-block { display: none !important; }
  .fantoni-mobile-panel,
  .fantoni-mobile-panel.header-menu-panel--open { display: none !important; }
  header.wp-block-template-part section:has(> .fantoni-mobile-panel) { display: none !important; }
}