/* ==========================================================
   MEDIA AGENCY
   MEGA MENU - VERSIONE 2 CORRETTA
   compatta / editoriale
   ========================================================== */


/* ==========================================================
   NAVBAR
   ========================================================== */

.mda-navbar {
 position: relative;
 z-index: 1000;
 width: 100%;
 background: #ffffff;
 border-bottom: 2px solid var(--mda-orange);
}


.mda-nav-container {
 display: flex;
 align-items: center;
 min-height: 86px;
 padding-left: 34px;
 padding-right: 34px;
}


/* ==========================================================
   LOGO
   ========================================================== */

.mda-logo {
 display: flex;
 align-items: center;
 flex-shrink: 0;
}


.mda-logo-img {
 display: block;
 width: auto;
 max-width: 200px;
 max-height: 68px;
}


/* ==========================================================
   MENU PRINCIPALE
   ========================================================== */

.mda-main-menu {
 display: flex;
 align-items: center;
 margin-left: auto;
}


.mda-menu-level-1 {
 display: flex;
 align-items: center;
 gap: 5px;
 margin: 0;
 padding: 0;
 list-style: none;
}


.mda-menu-item {
 position: relative;
 display: flex;
 align-items: center;
}


/* IMPORTANTE:
   la voce SERVIZI non deve diventare il riferimento
   di posizionamento per il mega menu */

.mda-has-megamenu {
 position: static;
}


.mda-main-link {
 position: relative;
 display: block;
 padding: 32px 15px;
 color: #202020;
 font-size: 14px;
 font-weight: 600;
 line-height: 1;
 text-decoration: none;
 transition: color 0.2s ease;
}


 .mda-main-link:hover,
 .mda-main-link:focus {
  color: var(--mda-orange);
 }


 /* linea elegante sotto la voce */

 .mda-main-link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 21px;
  height: 2px;
  background: var(--mda-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
 }


 .mda-main-link:hover::after,
 .mda-main-link:focus::after {
  transform: scaleX(1);
 }


/* ==========================================================
   FRECCINE
   ========================================================== */

.mda-submenu-toggle {
 border: 0;
 background: transparent;
 padding: 4px 3px;
 margin-left: -10px;
 margin-right: 5px;
 color: #777777;
 font-size: 10px;
 cursor: pointer;
}


 .mda-submenu-toggle i {
  display: block;
  transition: transform 0.2s ease;
 }


.mda-menu-item.is-open
.mda-submenu-toggle i {
 transform: rotate(180deg);
}


/* ==========================================================
   CTA PARLIAMONE
   ========================================================== */

.mda-nav-cta {
 margin-left: 20px;
 flex-shrink: 0;
}


.mda-btn-parliamone {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 42px;
 padding: 10px 24px;
 border-radius: 6px;
 background: var(--mda-orange);
 color: #ffffff !important;
 font-size: 14px;
 font-weight: 700;
 text-decoration: none;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}


 .mda-btn-parliamone:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
 }


/* ==========================================================
   DROPDOWN MEDIA AGENCY
   ========================================================== */

.mda-simple-dropdown {
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1010;
 min-width: 245px;
 margin: 0;
 padding: 10px 0;
 list-style: none;
 background: #fffdfb;
 border-top: 3px solid var(--mda-orange);
 border-radius: 0 0 8px 8px;
 box-shadow: 0 18px 38px rgba(0, 0, 0, 0.10);
 opacity: 0;
 visibility: hidden;
 transform: translateY(7px);
 transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}


 .mda-simple-dropdown a {
  display: block;
  padding: 10px 19px;
  color: #333333;
  font-size: 14px;
  text-decoration: none;
 }


  .mda-simple-dropdown a:hover {
   color: var(--mda-orange);
   background: #fff6ef;
  }


@media (min-width: 992px) {

 .mda-has-dropdown:hover > .mda-simple-dropdown,
 .mda-has-dropdown.is-open > .mda-simple-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
 }
}


/* ==========================================================
   MEGA MENU
   ========================================================== */

.mda-megamenu {
 position: absolute;
 left: 0;
 right: 0;
 top: 100%;
 z-index: 1005;
 width: 100%;
 background: #fffdfb;
 border-bottom: 1px solid #eee8e3;
 box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10);
 opacity: 0;
 visibility: hidden;
 transform: translateY(7px);
 transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}


@media (min-width: 992px) {

 .mda-has-megamenu:hover > .mda-megamenu,
 .mda-has-megamenu.is-open > .mda-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
 }
}


/* ==========================================================
   CONTENITORE GENERALE
   ========================================================== */

.mda-megamenu-wrapper {
 width: min(1500px, calc(100% - 80px));
 margin-left: auto;
 margin-right: auto;
 padding-top: 24px;
 padding-bottom: 28px;
}


/* ==========================================================
   TESTATA EDITORIALE
   ========================================================== */

.mda-megamenu-intro {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 30px;
 margin-bottom: 23px;
 padding-bottom: 18px;
 border-bottom: 1px solid #ece7e2;
}


.mda-megamenu-eyebrow {
 display: block;
 margin-bottom: 3px;
 color: var(--mda-orange);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1.8px;
}


.mda-megamenu-payoff {
 color: #303030;
 font-size: 17px;
 font-weight: 500;
 line-height: 1.35;
}


.mda-all-services {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 flex-shrink: 0;
 color: var(--mda-orange);
 font-size: 13px;
 font-weight: 700;
 text-decoration: none;
}


 .mda-all-services i {
  transition: transform 0.2s ease;
 }


 .mda-all-services:hover i {
  transform: translateX(4px);
 }


/* ==========================================================
   GRIGLIA
   ========================================================== */

.mda-megamenu-inner {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 25px 38px;
}


/* ==========================================================
   BLOCCO SERVIZIO
   ========================================================== */

.mda-mega-column {
 min-width: 0;
 padding: 15px 16px;
 border-radius: 10px;
 transition: background-color 0.2s ease, transform 0.2s ease;
}


 .mda-mega-column:hover {
  background: #fff7f1;
  transform: translateY(-1px);
 }


/* ==========================================================
   TESTA COLONNA
   ========================================================== */

.mda-mega-heading {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 13px;
}


 .mda-mega-heading > a {
  color: #202020;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
 }


  .mda-mega-heading > a:hover {
   color: var(--mda-orange);
  }


/* ==========================================================
   ICONE
   ========================================================== */

.mda-mega-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 flex: 0 0 32px;
 border-radius: 50%;
 background: rgba(244, 123, 32, 0.09);
 color: var(--mda-orange);
 font-size: 15px;
 transition: transform 0.2s ease, background-color 0.2s ease;
}


.mda-mega-column:hover
.mda-mega-icon {
 transform: scale(1.06);
 background: rgba(244, 123, 32, 0.15);
}


/* ==========================================================
   LINK PRINCIPALI
   ========================================================== */

.mda-mega-links,
.mda-mega-submenu {
 margin: 0;
 padding: 0;
 list-style: none;
}


.mda-mega-item {
 margin-bottom: 9px;
}


.mda-mega-link {
 display: inline-block;
 color: #323232;
 font-size: 13.5px;
 font-weight: 600;
 line-height: 1.3;
 text-decoration: none;
}


 .mda-mega-link:hover {
  color: var(--mda-orange);
 }


/* ==========================================================
   SOTTOLIVELLI COMPATTI
   ========================================================== */

.mda-mega-submenu-inline {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 3px 0;
 margin-top: 5px;
}


 .mda-mega-submenu-inline li {
  display: inline-flex;
  align-items: center;
  margin: 0;
 }


  .mda-mega-submenu-inline li:not(:last-child)::after {
   content: "·";
   display: inline-block;
   margin: 0 7px;
   color: var(--mda-orange);
   font-weight: 700;
  }


 .mda-mega-submenu-inline a {
  padding: 0;
  color: #77716d;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
 }


  .mda-mega-submenu-inline a::before {
   display: none;
  }


  .mda-mega-submenu-inline a:hover {
   color: var(--mda-orange);
  }


/* ==========================================================
   HAMBURGER
   ========================================================== */

.mda-menu-toggle {
 display: none;
 width: 46px;
 height: 42px;
 margin-left: auto;
 border: 0;
 background: transparent;
 cursor: pointer;
}


 .mda-menu-toggle span {
  display: block;
  width: 27px;
  height: 2px;
  margin: 6px auto;
  background: #222222;
  transition: transform 0.2s ease, opacity 0.2s ease;
 }


 .mda-menu-toggle.is-open
 span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
 }


 .mda-menu-toggle.is-open
 span:nth-child(2) {
  opacity: 0;
 }


 .mda-menu-toggle.is-open
 span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
 }


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1199.98px) and (min-width: 992px) {

 .mda-megamenu-wrapper {
  width: calc(100% - 40px);
 }


 .mda-megamenu-inner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }


 .mda-nav-container {
  padding-left: 20px;
  padding-right: 20px;
 }


 .mda-main-link {
  padding-left: 10px;
  padding-right: 10px;
 }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 991.98px) {

 .mda-nav-container {
  min-height: 74px;
  padding-left: 18px;
  padding-right: 18px;
  flex-wrap: wrap;
 }


 .mda-logo-img {
  max-width: 155px;
  max-height: 55px;
 }


 .mda-menu-toggle {
  display: block;
 }


 .mda-nav-cta {
  display: none;
 }


 .mda-main-menu {
  display: none;
  width: 100%;
  margin: 0;
 }


  .mda-main-menu.is-open {
   display: block;
  }


 .mda-menu-level-1 {
  display: block;
  width: 100%;
  padding: 8px 0 18px;
  border-top: 1px solid #eeeeee;
 }


 .mda-menu-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
 }


 .mda-has-megamenu {
  position: relative;
 }


 .mda-main-link {
  flex: 1;
  padding: 15px 4px;
  font-size: 15px;
 }


  .mda-main-link::after {
   display: none;
  }


 .mda-submenu-toggle {
  width: 45px;
  margin: 0;
  font-size: 12px;
 }


 /* dropdown mobile */

 .mda-simple-dropdown {
  position: static;
  display: none;
  width: 100%;
  min-width: 0;
  padding: 5px 0 12px 14px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
 }


 .mda-menu-item.is-open > .mda-simple-dropdown {
  display: block;
 }


 /* mega menu mobile */

 .mda-megamenu {
  position: static;
  display: none;
  width: 100%;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
 }


 .mda-has-megamenu.is-open > .mda-megamenu {
  display: block;
 }


 .mda-megamenu-wrapper {
  width: 100%;
  padding: 12px 5px 18px;
 }


 .mda-megamenu-intro {
  display: block;
  margin-bottom: 12px;
  padding: 12px 10px 16px;
 }


 .mda-megamenu-payoff {
  font-size: 15px;
 }


 .mda-all-services {
  margin-top: 10px;
 }


 .mda-megamenu-inner {
  display: block;
 }


 .mda-mega-column {
  margin-bottom: 7px;
  padding: 14px 10px;
  border-bottom: 1px solid #eee9e5;
  border-radius: 0;
 }


  .mda-mega-column:hover {
   transform: none;
  }


 .mda-mega-heading {
  margin-bottom: 10px;
 }


 .mda-mega-submenu-inline {
  padding-right: 15px;
 }
}


/* ==========================================================
   SMARTPHONE PICCOLO
   ========================================================== */

@media (max-width: 575.98px) {

 .mda-nav-container {
  padding-left: 14px;
  padding-right: 14px;
 }


 .mda-logo-img {
  max-width: 135px;
 }


 .mda-megamenu-payoff {
  font-size: 14px;
 }
}