/* Mobile menu: a full-screen panel that unrolls from the top, with the site's type, numbering and red marks. */
@media (min-width: 801px) {
  .nav__mobile-end, .menu__icon, .menu__label--close { display: none; }
}
@media (max-width: 800px) {
  .topbar { --menu-ease: cubic-bezier(.16, 1, .3, 1); --menu-bar: 78px; }

  /* Button: two lines that become a cross. */
  .topbar .menu { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; min-height: 40px; margin-top: -2px; padding: 0 2px 0 0; border: 0; color: #fff; font-size: 14px; letter-spacing: .01em; }
  .menu__icon { position: relative; width: 22px; height: 22px; }
  .menu__icon::before, .menu__icon::after { position: absolute; left: 2px; right: 2px; height: 1.5px; background: currentColor; content: ""; transition: transform .5s var(--menu-ease), top .5s var(--menu-ease); }
  .menu__icon::before { top: 7px; }
  .menu__icon::after { top: 14px; }
  .menu[aria-expanded="true"] .menu__icon::before { top: 10px; transform: rotate(45deg); }
  .menu[aria-expanded="true"] .menu__icon::after { top: 10px; transform: rotate(-45deg); }
  .menu__label--close, .menu[aria-expanded="true"] .menu__label--open { display: none; }
  .menu[aria-expanded="true"] .menu__label--close { display: inline; }
  /* 07/11: IT · EN · ES always visible in the bar on phones, left of "Menu" (it was only inside the menu). */
  html body .topbar { grid-template-columns: 1fr auto auto; column-gap: 18px; } /* beats home.css (1fr auto) */
  html body .topbar > a:first-child { order: 1; } html body .topbar .topbar__end, html body .topbar .topbar__end .lang-switch { order: 2; grid-column: 2; } html body .topbar .menu { order: 3; grid-column: 3; }
  .topbar__end { display: flex; align-items: center; min-height: 40px; margin-top: -2px; }
  .topbar .topbar__end .lang-switch { display: flex; gap: 12px; align-self: start; height: 40px; margin-top: -6px; padding: 0; align-items: center; }
  .topbar__end .lang-switch a { display: inline-flex; min-width: 24px; min-height: 40px; align-items: center; justify-content: center; color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .06em; text-decoration: none; }
  .topbar__end .lang-switch a[aria-current] { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
  html.jet-menu-open .topbar__end { visibility: hidden; }
  html body .topbar.is-floating .topbar__end .lang-switch { align-self: center; margin-top: 0; } /* scrolled black bar: centred like Menu */

  /* While open (and while closing) the bar stays on top of the panel. */
  html.jet-menu-open, html.jet-menu-open body { overflow: hidden; overscroll-behavior: none; } /* 07/11: body too (iOS) */
  html.jet-menu-open .hero { transform: none !important; } /* a zooming parent would trap the fixed bar */
  /* Logo and button sit above the panel, which lives inside the same bar. */
  .topbar > a:first-child { position: relative; z-index: 2; }
  html.jet-menu-open .topbar { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); right: 0; left: 0; z-index: 1000; height: var(--menu-bar); padding-top: 18px; align-items: start; background: transparent; color: #fff; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; border-bottom-color: transparent; } /* 07/11: the scrolled bar's blur trapped the fixed panel inside 72px */

  /* Panel. */
  .topbar .nav { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); right: 0; bottom: 0; left: 0; z-index: 1; display: flex; max-height: none; flex-direction: column; justify-content: flex-start; gap: 0; padding: calc(var(--menu-bar) + 20px) 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; background: #090a0a; color: #fff; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .5s var(--menu-ease), visibility 0s linear .5s; }
  .topbar .nav.is-open { visibility: visible; clip-path: inset(0); transition: clip-path .7s var(--menu-ease), visibility 0s; }
  .topbar .nav > * { flex-shrink: 0; }
  .topbar .nav a::after, .topbar .nav .service-menu__trigger::after { display: none; }

  /* Each item rises in after the panel. */
  .topbar .nav > a, .topbar .nav .service-menu__trigger, .topbar .nav .nav__mobile-end { opacity: 0; transform: translateY(18px); transition: opacity .2s ease, transform .2s ease; }
  .topbar .nav.is-open > a, .topbar .nav.is-open .service-menu__trigger, .topbar .nav.is-open .nav__mobile-end { opacity: 1; transform: none; transition: opacity .6s var(--menu-ease) calc(.18s + var(--i, 0) * 50ms), transform .8s var(--menu-ease) calc(.18s + var(--i, 0) * 50ms); }

  /* Main links and "Cosa facciamo": one list, same size; the current page has the red mark. */
  .topbar .nav > a, .topbar .nav .service-menu__trigger { display: flex; width: 100%; align-items: center; gap: 14px; min-height: 0; margin: 0; padding: 4px 0; border: 0; background: none; color: #fff; font-size: 36px; line-height: 1.12; font-weight: 400; letter-spacing: -.045em; text-decoration: none; }
  .topbar .nav > a::before, .topbar .nav .service-menu__trigger::before { width: 8px; height: 8px; flex: none; background: var(--red, #e5231f); content: ""; transform: scale(0); transition: transform .4s var(--menu-ease); }
  .topbar .nav > a[aria-current="page"]::before, .topbar .nav .service-menu__trigger[data-active]::before { transform: scale(1); }
  .topbar .nav > a:not([aria-current]), .topbar .nav .service-menu__trigger:not([data-active]) { margin-left: -22px; }
  .topbar .nav > a:active { color: var(--red, #e5231f); }
  .topbar .nav .service-menu { width: 100%; }
  .topbar .nav .service-menu__trigger { cursor: pointer; }
  .topbar .nav .service-menu__trigger:not([data-active]) { width: calc(100% + 22px); }

  /* Plus that turns into a minus. */
  .topbar .nav .service-menu__caret { position: relative; display: block; width: 18px; height: 18px; margin-left: auto; border: 0; transform: none; }
  .topbar .nav .service-menu__caret::before, .topbar .nav .service-menu__caret::after { position: absolute; top: 8px; left: 0; width: 18px; height: 1.5px; background: currentColor; content: ""; transition: transform .45s var(--menu-ease); }
  .topbar .nav .service-menu__caret::after { transform: rotate(90deg); }
  .topbar .nav .service-menu__trigger[aria-expanded="true"] .service-menu__caret::after { transform: rotate(0deg); }

  /* Services: the numbered list used in "Altri servizi", opening under its item. */
  .topbar .nav .service-menu__panel { position: static; width: 100%; max-width: none; margin: 0; padding: 10px 0 16px; border: 0; background: transparent; }
  .topbar .nav .service-menu__panel li { border-bottom: 1px solid #2d3235; transition: opacity .5s var(--menu-ease) calc(var(--j, 0) * 60ms), transform .6s var(--menu-ease) calc(var(--j, 0) * 60ms); }
  .topbar .nav .service-menu__panel li:first-child { border-top: 1px solid #2d3235; }
  @starting-style { .topbar .nav .service-menu__panel li { opacity: 0; transform: translateY(10px); } }
  .topbar .nav .service-menu__panel a { display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 54px; padding: 0; color: #fff; font-size: 19px; line-height: 1.25; letter-spacing: -.025em; }
  .topbar .nav .service-menu__panel a::after { position: static; display: block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 10h14M11.5 5l5 5-5 5' stroke='%23e5231f' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; content: ""; opacity: 1; transform: none; }
  .topbar .nav .service-menu__panel a[data-jet-soon]::after { opacity: .25; }
  .topbar .nav .service-menu__number { color: #8d969b; font-size: 11px; }

  /* Bottom: contact and languages. */
  .nav__mobile-end { display: flex; margin-top: auto; padding-top: 28px; flex-direction: column; gap: 14px; }
  .topbar .nav .nav__cta { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 20px; border: 0; background: #fff; color: #090a0a; font-size: 16px; }
  .topbar .nav .nav__cta::after { position: static; display: block; flex: none; width: 18px; height: 18px; opacity: 1; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 10h14M11.5 5l5 5-5 5' stroke='%23090a0a' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; content: ""; }
  .topbar .nav .lang-switch { display: flex; gap: 22px; padding: 6px 0 0; font-size: 13px; letter-spacing: .06em; }
  .topbar .nav .lang-switch a { display: inline-flex; min-height: 44px; align-items: center; padding: 0; border: 0; color: #fff; font-size: 14px; line-height: 1; font-size: 14px; line-height: 1; opacity: .45; text-decoration: none; }
  .topbar .nav .lang-switch a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .topbar .nav, .topbar .nav.is-open, .topbar .nav *, .menu__icon::before, .menu__icon::after { transition: none !important; }
}

/* Foundation version (31/10): a list with thin lines, 28px items, the red line on the current page,
   "Parliamone" as the underlined link used in the footer CTA */
@media (max-width: 800px) {
  .topbar .nav { padding-top: calc(var(--menu-bar) + 28px); }
  .topbar .nav > a, .topbar .nav .service-menu__trigger { min-height: 64px; padding: 0; gap: 12px; border-bottom: 1px solid #23272a; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
  .topbar .nav > a:first-child { border-top: 1px solid #23272a; }
  .topbar .nav > a:not([aria-current]), .topbar .nav .service-menu__trigger:not([data-active]) { margin-left: 0; }
  .topbar .nav .service-menu__trigger:not([data-active]) { width: 100%; }
  .topbar .nav > a::before, .topbar .nav .service-menu__trigger::before { width: 0; height: 2px; flex: 0 0 auto; transform: none; transition: width .4s var(--menu-ease); }
  .topbar .nav > a[aria-current="page"]::before, .topbar .nav .service-menu__trigger[data-active]::before { width: 16px; transform: none; }
  .topbar .nav .service-menu__panel { padding: 0 0 8px; }
  .topbar .nav .service-menu__panel li:first-child { border-top: 0; }
  .topbar .nav .service-menu__panel a { min-height: 50px; font-size: 17px; color: rgba(255,255,255,.82); }
  .nav__mobile-end { padding-top: 40px; gap: 18px; }
  .topbar .nav .nav__cta { display: inline-flex; width: max-content; min-height: 0; padding: 0 0 4px; gap: 10px; justify-content: flex-start; border-bottom: 1px solid #fff; background: none; color: #fff; font-size: 16px; }
  .topbar .nav .nav__cta::after { width: 16px; height: 16px; background: #fff; -webkit-mask: var(--jet-arrow) center/contain no-repeat; mask: var(--jet-arrow) center/contain no-repeat; }
  .topbar .nav .lang-switch { padding-top: 4px; }
}
@media (max-width: 800px) {
  .topbar .nav > a, .topbar .nav .service-menu__trigger { gap: 0; }
  .topbar .nav > a[aria-current="page"]::before, .topbar .nav .service-menu__trigger[data-active]::before { margin-right: 12px; }
}

/* 07/11: logged-in on phones the WP admin bar is position:absolute (it scrolls away) — the floating header must not keep its 46px. */
@media screen and (max-width: 600px) {
  /* only once scrolled (floating bar): at the top of the page the admin bar is still there and keeps its space */
  html body .topbar.is-floating, html.jet-menu-open body .topbar.is-floating, html.jet-menu-open body .topbar.is-floating .nav { top: 0; }
}

/* Keep scrolling navigation below the fixed logo / close-button row. */
@media(max-width:800px){
  html.jet-menu-open .topbar{background:#090a0a}
  .topbar .nav{top:calc(var(--wp-admin--admin-bar--height, 0px) + var(--menu-bar));padding-top:28px}
  html.jet-menu-open body .topbar.is-floating .nav{top:var(--menu-bar)}
  html:not(.jet-menu-open) .hero--plain .topbar:not(.is-floating) .topbar__end .lang-switch a{color:var(--ink,#202223)}
}