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


/* ---- FIXED HEADER ---- */
header.wp-block-template-part,
#fantoni-header {
  position: fixed !important;
  top: var(--wp-admin-bar-h, 0px);
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  will-change: transform;
}

/* Kill ensoul custom.js scroll behavior */
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 */
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;
}

/* ensoul paragraph resets white-space: keep every nav item on one line */
.fantoni-nav-buttons p {
  white-space: nowrap;
}

[id^="trigger-"],
.fantoni-nav-buttons .fantoni-nav-link {
  cursor: pointer;
  user-select: none;
  transition: opacity 200ms ease;
}

[id^="trigger-"]:hover,
.fantoni-nav-buttons .fantoni-nav-link:hover {
  opacity: 0.7;
}

.fantoni-nav-buttons .fantoni-nav-link a {
  text-decoration: none;
}

/* Header and footer links show hover through opacity, not colour: North's global
   a:hover colour is cancelled here. */
.fantoni-logo-column a:hover,
.fantoni-nav-buttons a:hover,
.fantoni-lang-missing a:hover,
.fantoni-mobile-section a:hover,
.fantoni-social-icons a:hover {
  color: inherit !important;
}

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

/* Nav items live in two columns (left / right of the logo): dim every
   non-active item of the bar, not only those in the active item's column */
header.wp-block-template-part
  > section[id^="group-"]:has(.fantoni-nav-active)
  .fantoni-nav-buttons
  [id^="trigger-"]:not(.fantoni-nav-active),
header.wp-block-template-part
  > section[id^="group-"]:has(.fantoni-nav-active)
  .fantoni-nav-buttons
  .fantoni-nav-link {
  opacity: 0.5;
}

/* Nav bar columns (left nav / logo / right nav) must never wrap on desktop:
   the ensoul columns block is flex-wrap by default and would push the right
   column under the logo on narrow desktops */
@media (min-width: 769px) {
  header.wp-block-template-part
    > section[id^="group-"]:has(.fantoni-nav-buttons)
    .ensoul-columns-block {
    flex-wrap: nowrap !important;
  }
}

/* Six uppercase items beside a centered logo need ~1350px of content width
   at 16px. Instead of wrapping, the item font-size and the gap between items
   shrink fluidly with the viewport (16px/30px at ~1900px down to 12px/10px at
   ~1240px). The side columns are flex: 1 1 0 with min-width auto, so the logo
   stays centered as long as both sides fit in half the space and drifts by
   the least amount otherwise. ensoul sets font-size via
   var(--text-paragraph-base) inside a cascade layer with !important, so the
   variable is overridden, not the property; the gap lives on the inner
   .column, which is the real flex container. */
@media (min-width: 1200px) {
  .fantoni-nav-buttons {
    --text-paragraph-base: clamp(12px, 0.6vw + 4.5px, 16px);
  }
  .fantoni-nav-buttons > .column {
    column-gap: clamp(10px, 3.08vw - 28.5px, 30px) !important;
  }
}

/* ---- NARROW DESKTOP / TABLET LANDSCAPE (769–1199px): six nav items do not fit next to a
   centered logo, so reuse the mobile layout (logo + hamburger + panel).
   ensoul hides/shows these blocks with `md:!hidden` / `max-md:!hidden`
   utilities living in the `utilities` cascade layer with !important: an
   unlayered !important cannot beat them, so the overrides go in the same
   layer with a higher specificity. ---- */
@layer utilities {
  @media (min-width: 768px) and (max-width: 1199px) {
    header.wp-block-template-part .fantoni-nav-buttons {
      display: none !important;
    }
    header.wp-block-template-part
      .ensoul-column-wrapper:has(.header-hamburger-block) {
      display: flex !important;
    }
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .header-hamburger-block {
    display: block !important;
  }
  header.wp-block-template-part
    .ensoul-column-wrapper:has(.header-hamburger-block) {
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
}

/* Phone top bar: the five items stay on one line, inset 32px like the logo
   and the hamburger below. Type and gaps shrink with the viewport down to
   320px; ensoul sizes paragraphs through var(--text-paragraph-base), which
   the language switcher inherits too. */
@media (max-width: 767px) {
  header.wp-block-template-part div:has(> .wpml-lingua) {
    --text-paragraph-base: clamp(11px, 3.6vw, 16px);
    column-gap: clamp(6px, 4vw - 4px, 48px);
    padding-inline: var(--spacing-l, 32px);
  }
  header.wp-block-template-part div:has(> .wpml-lingua) > p {
    white-space: nowrap;
  }
}

/* Il Gruppo and Persone stay in the phone top bar and open their mega-menu
   panel as on desktop. ensoul hides every panel below 768px with
   `max-md:!hidden` (utilities layer, !important), so they are shown again in
   the same layer; they stay collapsed until opened. */
@layer utilities {
  @media (max-width: 767px) {
    header.wp-block-template-part
      > section:not([id^="group-"]):not(:has(.fantoni-mobile-panel)) {
      display: grid !important;
    }
  }
}

/* Below 1200px an open panel can be taller than the screen: it scrolls on its own */
@media (max-width: 1199px) {
  header.wp-block-template-part
    > section.fantoni-panel--open:not([id^="group-"])
    > .wp-block-ensoul-spacing-wrapper {
    max-height: calc(100dvh - var(--header-h, 70px) - var(--wp-admin-bar-h, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- MEGA-MENU LINK HOVER ---- */
header.wp-block-template-part
  > section:not([id^="group-"]):not(:has(.fantoni-mobile-panel))
  .wp-block-ensoul-list-element
  span,
header.wp-block-template-part
  > section:not([id^="group-"]):not(:has(.fantoni-mobile-panel))
  .wp-block-ensoul-list-element
  a {
  display: inline;
  border-radius: 0px;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

header.wp-block-template-part
  > section:not([id^="group-"]):not(:has(.fantoni-mobile-panel))
  .wp-block-ensoul-list-element
  span:hover,
header.wp-block-template-part
  > section:not([id^="group-"]):not(:has(.fantoni-mobile-panel))
  .wp-block-ensoul-list-element
  a:hover {
  background-color: #fff;
  color: #1a2d4e !important;
  transition:
    background-color 300ms ease,
    color 300ms ease;
}

/* ============================================================
   MEGA-MENU PANELS
   Simple slide-down + fade. No stagger.
   ============================================================ */

/* Collapse the outer <section> — panels stay in the flow (visible in editor),
   collapsed here via grid rows. JS manages .fantoni-panel--open for animation. */
header.wp-block-template-part
  > section:not([id^="group-"]):not(:has(.fantoni-mobile-panel)) {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  width: 100vw;
  position: relative;
  /* North's .ensoul-breakout pulls the panel back by -50vw with a layered !important margin. */
  left: 50%;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  transition: grid-template-rows 350ms ease;
}

/* Inner wrapper — bg appears first, content fades in after */
header.wp-block-template-part
  > section:not([id^="group-"]):not(:has(.fantoni-mobile-panel))
  > .wp-block-ensoul-spacing-wrapper {
  min-height: 0;
  width: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: padding 350ms ease;
}

/* Inner content — fades in with delay after bg opens */
header.wp-block-template-part
  > section:not([id^="group-"]):not(:has(.fantoni-mobile-panel))
  > .wp-block-ensoul-spacing-wrapper
  > * {
  opacity: 0;
  transition: opacity 250ms ease;
}

/* OPEN: slide down */
header.wp-block-template-part
  > section.fantoni-panel--open:not([id^="group-"]) {
  grid-template-rows: 1fr;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Animated border — on the nav bar bottom, reveals left-to-right when a panel opens */
header.wp-block-template-part
  > section[id^="group-"]:has(.fantoni-nav-buttons)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #fff;
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

header.wp-block-template-part:has(.fantoni-panel--open)
  > section[id^="group-"]:has(.fantoni-nav-buttons)::after {
  transform: scaleX(1);
  transition-delay: 250ms;
}

header.wp-block-template-part:has(.fantoni-panel--closing)
  > section[id^="group-"]:has(.fantoni-nav-buttons)::after {
  transform: scaleX(0);
  transition-delay: 0ms;
}

header.wp-block-template-part
  > section.fantoni-panel--open:not([id^="group-"])
  > .wp-block-ensoul-spacing-wrapper {
  padding-top: var(--spacing-xl) !important;
  padding-bottom: var(--spacing-xl) !important;
}

/* Content fades in (class added by JS after bg opens) */
header.wp-block-template-part
  > section.fantoni-panel--content-in:not([id^="group-"])
  > .wp-block-ensoul-spacing-wrapper
  > * {
  opacity: 1;
}

/* CLOSING: content fades out first, then bg closes */
header.wp-block-template-part
  > section.fantoni-panel--closing:not([id^="group-"])
  > .wp-block-ensoul-spacing-wrapper
  > * {
  opacity: 0;
}

header.wp-block-template-part
  > section.fantoni-panel--closing:not([id^="group-"]) {
  grid-template-rows: 0fr;
  transition-delay: 200ms;
}

header.wp-block-template-part
  > section.fantoni-panel--closing:not([id^="group-"])
  > .wp-block-ensoul-spacing-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition-delay: 200ms;
}

/* ---- 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 ---- */

/* Section appended by megamenu.js as the last child of the header, so it
   opens flush under the bars. It stays in the header flow on purpose: the
   header has will-change: transform, which makes it the containing block of
   any fixed descendant, and a fixed panel ended up offset by the admin bar
   twice. */
header.wp-block-template-part > section:has(.fantoni-mobile-panel) {
  height: 0;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Open, and while closing so the fade-out stays visible */
header.wp-block-template-part
  > section.fantoni-mobile--open:has(.fantoni-mobile-panel),
header.wp-block-template-part
  > section.fantoni-mobile--closing:has(.fantoni-mobile-panel) {
  height: auto;
  max-height: calc(100dvh - var(--header-h, 70px) - var(--wp-admin-bar-h, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fantoni-mobile-panel {
  background-color: var(--wp--preset--color--base, #1a2d4e);
  color: var(--wp--preset--color--accent-4, #fff);
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

section.fantoni-mobile--open .fantoni-mobile-panel {
  opacity: 1;
  transform: none;
}

.fantoni-mobile-panel a {
  color: inherit;
  text-decoration: none;
}

.fantoni-mobile-nav,
.fantoni-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Rows sit flush against each other, split by a thin line */
.fantoni-mobile-nav__item {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.fantoni-mobile-nav__row {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px var(--spacing-l, 32px);
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--tracking-paragraph, 0.3px);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

@media (hover: hover) {
  .fantoni-mobile-nav__row:hover,
  .fantoni-mobile-nav__group a:hover {
    opacity: 0.7;
  }
}

/* Accordion body: the grid row animates the height, and visibility keeps the
   links of a closed row out of the tab order */
.fantoni-mobile-nav__sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 300ms ease,
    visibility 0s 300ms;
}

.fantoni-mobile-nav__item.is-open > .fantoni-mobile-nav__sub {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 300ms ease,
    visibility 0s;
}

.fantoni-mobile-nav__sub-inner {
  min-height: 0;
  overflow: hidden;
}

.fantoni-mobile-nav__group {
  padding: 0 var(--spacing-l, 32px) 20px;
  text-align: center;
}

.fantoni-mobile-nav__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.fantoni-mobile-nav__group li {
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.3;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .fantoni-nav-buttons {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .header-hamburger-block {
    display: none !important;
  }
  .fantoni-mobile-panel {
    display: none !important;
  }
}

/* LANGUAGE SWITCHER: same type as the top bar items next to it.
   WPML and north give the labels Inter 14px, line-height 100% and a 5px top
   margin on the list items, so the languages sit lower than the bold
   paragraphs on their left. */
.wpml-lingua ul.horizontal-list li,
.wpml-lingua ul.horizontal-list li > div,
.wpml-lingua ul.horizontal-list li a,
.wpml-lingua .wp-block-navigation-item__label {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 700;
  letter-spacing: var(--tracking-paragraph);
}

/* ---- LANGUAGE SWITCHER: languages without a translation ----
   Items appended by inc/wpml-language-switcher.php. Not clickable; a click
   (megamenu.js toggles .is-open) shows the message stored in
   data-fantoni-missing as a tooltip under the item. */
.fantoni-lang-missing {
  position: relative;
}
.fantoni-lang-missing a {
  cursor: not-allowed;
}
/* dim the label only: the tooltip is a pseudo-element of the link */
.fantoni-lang-missing a > span {
  opacity: 0.45;
}
.fantoni-lang-missing a:hover,
.fantoni-lang-missing a:focus {
  color: inherit;
}
.fantoni-lang-missing a::after {
  content: attr(data-fantoni-missing);
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1000;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 14px;
  background: #fff;
  color: #1a2d4e;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.fantoni-lang-missing a::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  right: 10px;
  z-index: 1001;
  border: 5px solid transparent;
  border-bottom-color: #fff;
  border-top: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.fantoni-lang-missing.is-open a::after,
.fantoni-lang-missing.is-open a::before {
  opacity: 1;
  transform: none;
}
/* The bar holding the switcher must paint above the following nav bar (both
   inner containers carry z-index: 10), otherwise the tooltip is covered */
header.wp-block-template-part > section[id^="group-"]:has(.fantoni-lang-missing) {
  z-index: 20;
}

/* Link to the page being viewed (set by megamenu.js), bold as on the previous site. */
header.wp-block-template-part a[aria-current="page"] {
  font-weight: 700 !important;
}