/* ========================================
   HEADER STYLES - IO BLUE CUSTOM THEME
   ========================================
   
   Breakpoints based on design mockups:
   - Desktop: ≥ 1920px
   - Tablet: 768px - 1919px  
   - Mobile: ≤ 767px (with specific 576px step)
   
   Mobile-first approach with progressive enhancement
   ======================================== */

/* ========================================
   BASE STYLES (Mobile First - ≤ 767px)
   ======================================== */

/* Logo styles for mobile devices */
.logo-desktop {
  width: 180px;          /* Smaller mobile logo width */
  height: auto;          /* Auto height to maintain aspect ratio */
  max-width: 90vw;       /* Responsive constraint */
  max-height: none;      /* Override any max-height constraints */
  display: block;        /* Ensure block display */
  object-fit: contain;   /* Maintain aspect ratio */
}

/* Language flags styling for mobile */
.lang-desktop img {
  width: 24px !important;   /* Bandiera più piccola */
  height: 16px !important;  /* Bandiera più piccola */
  display: inline-block;
  object-fit: cover;
}

/* Navigation menu spacing for mobile */
.menu.nav {
  gap: 20px;                 /* Reduced gap for mobile */
  flex-wrap: wrap;           /* Allow menu items to wrap if needed */
}

/* ========================================
   TABLET STYLES (768px - 1919px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1919px) {
  /* HEADER TABLET LAYOUT */
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    min-height: unset;
    height: auto;
  }
  .header-logo {
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0;
    padding-top: 32px;
    padding-left: 32px;
  }
  .header-right {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 0;
    padding: 32px 32px 0 0;
  }
  .header-lang {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    margin-left: auto;
    gap: 0;
  }
  .header-menu {
    width: 100%;
    justify-content: center !important;
    align-items: center;
    margin: 32px 0 0 0;
    padding: 0 0 16px 0;
  }
  
  /* Logo styles for tablet devices */
  .logo-desktop {
    width: 267px;            /* Same as mobile for tablet */
    height: 188px;           /* Same as mobile for tablet */
    /* Note: If design provides different tablet dimensions, update here */
  }
  
  /* Language flags styling for tablet */
  .lang-desktop img {
    width: 24px !important;  /* Same flag size as mobile */
    height: 16px !important; /* Same flag size as mobile */
  }
  
  /* Navigation menu spacing for tablet */
  .menu.nav {
    gap: 30px;               /* Medium gap for tablet */
  }

  .hide-flags-tablet {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .header-box {
    display: flex !important;
    align-items: center !important;
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
    padding-top: 0 !important;
    padding-bottom: 16px !important;
  }
  .header-left {
    position: relative !important;
  }
  .header-lang.d-lg-none {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .logo-desktop {
    width: 220px !important;
    height: 83px !important;
    margin: 0 auto !important;
  }
  .menu.nav, .header-menu {
    font-family: 'tenso', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px !important;
    margin-top: 0 !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
  }
  .menu.nav a {
    padding: 9px 11px !important;
    white-space: nowrap !important;
  }
}

/* Media query per schermi medi dove il menu può andare a capo */
@media (min-width: 992px) and (max-width: 1200px) {
  .menu.nav {
    font-size: 19px !important;
    gap: 10px !important;
  }
  .menu.nav a {
    padding: 10px 6px !important;
  }
}

@media (min-width: 1201px) and (max-width: 1300px) {
  .menu.nav {
    font-size: 19px !important;
    gap: 15px !important;
  }
  .menu.nav a {
    padding: 10px 8px !important;
  }
}

/* Media query per schermi larghi ma non full desktop */
@media (min-width: 1301px) and (max-width: 1599px) {
  .menu.nav {
    font-size: 16.5px !important;
    gap: 30px !important;
  }
}

/* ========================================
   DESKTOP STYLES (≥ 1920px)
   ======================================== */

@media (min-width: 1920px) {
  
  /* Logo styles for desktop devices */
  .logo-desktop {
    width: 306px;            /* Desktop logo width from design specs */
    height: 264px;           /* Desktop logo height from design specs */
    max-width: none;         /* Ensure no max-width constraints */
    max-height: none;        /* Ensure no max-height constraints */
  }
  
  /* Language flags styling for desktop */
  .lang-desktop img {
    width: 24px !important;  /* Flag width on desktop */
    height: 16px !important; /* Flag height on desktop */
  }
  
  /* Navigation menu spacing for desktop */
  .menu.nav {
    gap: 40px;               /* Larger gap for desktop */
  }

  .header-box {
    height: 257px;
    min-height: 257px;
    max-height: 257px;
  }
}

/* ========================================
   EXTRA SMALL MOBILE STYLES (≤ 575px)
   ======================================== */

@media (max-width: 575px) {
  
  /* Additional styles for very small screens if needed */
  .logo-desktop {
    width: 260px;            /* Smaller logo for very small screens */
    height: 188px;           /* Maintain aspect ratio */
  }
  
  .menu.nav {
    gap: 15px;               /* Minimal gap for very small screens */
  }
}

/* ========================================
   UTILITY CLASSES & OVERRIDES
   ======================================== */

/* Ensure logo maintains aspect ratio across all devices */
.logo-desktop {
  aspect-ratio: 373/264;     /* Desktop aspect ratio */
}

/* Force language flags to display properly */
.lang-desktop {
  display: flex;             /* Flex container for flags */
  align-items: center;       /* Center flags vertically */
  gap: 8px;                  /* Space between flags */
  list-style: none !important;
}

.lang-desktop li {
  list-style: none !important;
  margin-left: 0 !important;
}

/* Ensure navigation menu is properly aligned */
.menu.nav {
  align-items: center;       /* Center menu items vertically */
  justify-content: center;   /* Center menu horizontally */
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Hide elements on specific breakpoints if needed */
@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

/* ========================================
   HEADER BOX STYLES (bordo blu solo sotto, variabile)
   ======================================== */
.header-box {
  border: none;
  border-bottom: 2px solid var(--primary-color); /* Solo bordo inferiore, colore da variabile */
  padding: 32px 32px;
  background: #fff;
  padding-top: 0 !important;
  margin-top: 0 !important;
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}

/* Rimuovo sottolineatura dalle voci del menu */
.menu.nav a {
  text-decoration: none !important;
  color: var(--primary-color) !important;
}

/* ========================================
   HEADER INNER FLEX LAYOUT
   ======================================== */
.header-inner {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

.header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.header-lang {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-left: 24px;
  gap: 8px;
}

.header-menu {
  display: flex;
  justify-content: center !important;
  align-items: center;
  width: 100%;
  margin-top: 24px;
}

/* Nascondi il select lingua ovunque */
.lang-select-tablet { display: none !important; }

/* Responsive: logo e bandiere sempre centrati e accanto */
@media (max-width: 767px) {
  .header-top {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .header-lang {
    margin-left: 12px;
  }
  .header-menu {
    margin-top: 16px;
  }
}

@media (min-width: 768px) {
  .header-top {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .header-lang {
    margin-left: 24px;
  }
  .header-menu {
    margin-top: 24px;
  }
}

@media (min-width: 1920px) {
  .header-top {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .header-lang {
    margin-left: 32px;
  }
  .header-menu {
    margin-top: 32px;
  }
}

/* ========================================
   END HEADER STYLES
   ======================================== */

/* Forza dimensioni bandiere Polylang ovunque */
.header-lang img,
.lang-desktop img,
.header-lang img.flag,
.lang-desktop img.flag {
  width: 48px !important;
  height: 20px !important;
  max-width: 48px !important;
  max-height: 20px !important;
  min-width: 48px !important;
  min-height: 20px !important;
  object-fit: cover;
  display: inline-block;
}

/* Inverti l'ordine delle bandiere (prima in basso, poi in alto) */
.header-lang,
.lang-desktop {
  flex-direction: column-reverse !important;
}

/* ========================================
   MENU: font Tenso Light 24px
   ======================================== */
.menu.nav, .header-menu {
  font-family: 'tenso', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 24px;
}

/* --- LAYOUT DESKTOP (≥992px) --- */
@media (min-width: 992px) {
  .header-box {
    display: flex !important;
    align-items: center !important;
    height: 248px !important;
    min-height: 248px !important;
    max-height: 248px !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .header-flex {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-left {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
  .header-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: column;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .logo-desktop {
    width: 420px !important;
   
    max-width: 306px !important;
   
    min-width: 306px !important;
    min-height: 115px !important;
    object-fit: contain;
    display: block;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .header-lang.d-none.d-lg-flex {
    margin: 0 0 8px 0 !important;
  }
  .header-menu, .menu.nav {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap !important;
    width: auto;
  }
  .header-left .header-lang { display: none !important; }
  .header-lang.d-none.d-lg-flex li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-menu {
    justify-content: flex-end !important;
    text-align: right !important;
    width: 100%;
  }
  .header-menu ul {
    justify-content: flex-end !important;
    text-align: right !important;
    width: 100%;
  }
}

/* --- LAYOUT TABLET & MOBILE (<991.98px) --- */
@media (max-width: 991.98px) {
  .header-flex {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    position: relative;
    
  }
  .header-left {
    flex-direction: row;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto;
    width: 100%;
    position: relative;
  }
  .header-right {
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    margin: 0;
  }
  .header-lang.d-lg-none {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    margin-left: 16px;
    gap: 8px;
    position: static;
  }
  .header-lang.d-none.d-lg-flex {
    display: none !important;
  }
  .header-lang.d-lg-none li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-menu {
    width: 100%;
    justify-content: center !important;
    margin-top: 24px;
    position: static;
  }
}

/* Nascondi il select lingua ovunque */
.lang-select-tablet { display: none !important; }

.container-fluid { padding-top: 0 !important; margin-top: 0 !important; }

@media (min-width: 1200px) {
  .header-flex {
    align-items: center !important;
    padding-top: 26px;
  }
}

/* Burger menu visibile solo su mobile, colore blu */
.navbar-toggler {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 8px;
  box-shadow: none;
  z-index: 9999;
}
.navbar-toggler-icon {
  width: 32px;
  height: 32px;
  background-image: none !important;
  position: relative;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
  content: '';
  display: block;
  height: 4px;
  width: 28px;
  background: #006798;
  border-radius: 2px;
  margin: 5px 0;
}
.navbar-toggler-icon span {
  margin: 0;
}
@media (min-width: 768px) {
  .navbar-toggler {
    display: none !important;
  }
}

/* --- LAYOUT MOBILE (≤ 767.98px) --- */
@media (max-width: 767.98px) {
  .header-left {
    min-height: 110px !important;
    height: 110px !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
  }
  .logo-desktop {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 2 !important;
    width: 160px !important;
    height: auto !important;
    max-width: 80vw !important;
    max-height: none !important;
    min-width: 120px !important;
    min-height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  .navbar-toggler {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
  }
  .navbar-toggler .navbar-toggler-icon {
    background: none !important;
    width: 36px;
    height: 24px;
    position: relative;
    display: block;
    margin: 0 auto;
  }
  .navbar-toggler .navbar-toggler-icon:before,
  .navbar-toggler .navbar-toggler-icon:after,
  .navbar-toggler .navbar-toggler-icon span {
    content: '';
    display: block;
    background: #000 !important;
    height: 4px;
    border-radius: 2px;
    position: absolute;
    left: 0;
    right: 0;
  }
  .navbar-toggler .navbar-toggler-icon:before {
    top: 0;
  }
  .navbar-toggler .navbar-toggler-icon span {
    top: 10px;
  }
  .navbar-toggler .navbar-toggler-icon:after {
    top: 20px;
  }
  .header-lang.d-lg-none {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    max-width: 48px !important;
    white-space: nowrap !important;
    gap: 4px !important;
    margin-left: 0 !important;
    grid-column: unset !important;
    justify-self: unset !important;
    display: flex !important;
    align-items: center !important;
  }
  .header-lang.d-lg-none img {
    width: 20px !important;
    height: 14px !important;
    min-width: 20px !important;
    min-height: 14px !important;
    max-width: 20px !important;
    max-height: 14px !important;
  }
  .navbar-toggler .custom-burger {
    display: block;
    width: 36px;
    height: 24px;
    position: relative;
    margin: 0 auto;
  }
  .navbar-toggler .custom-burger span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: #888;
    border-radius: 2px;
    transition: all 0.2s;
  }
  .navbar-toggler .custom-burger span:nth-child(1) { top: 0; }
  .navbar-toggler .custom-burger span:nth-child(2) { top: 10px; }
  .navbar-toggler .custom-burger span:nth-child(3) { top: 20px; }
  .header-box,
  .header-menu-mobile,
  .header-menu-mobile ul,
  .header-menu-mobile li,
  .header-menu-mobile a {
    font-family: "tenso", "Tenso", "Tenso Light", Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 17px !important;
    letter-spacing: 0.01em;
  }
  .header-menu-mobile {
    z-index: 9999;
  }
  .header-box {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
  }
}

/* Colore rosa hover su tutti i menu */
.header-menu a:hover,
.header-menu-mobile a:hover,
.menu a:hover,
.nav a:hover,
.header-menu a:focus,
.header-menu-mobile a:focus,
.menu a:focus,
.nav a:focus {
  color: var(--pink) !important;
  transition: color 0.2s;
}

.header-maxwidth {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}

/* ========================================
   MENU DROPDOWN STYLES
   ======================================== */

/* Menu principale */
.menu.nav {
  position: relative;
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Contenitore del menu */
.header-menu, .header-menu nav {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

.menu.nav li {
  position: relative;
  display: inline-block;
}

.menu.nav a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

.menu.nav a:hover {
  color: var(--pink) !important;
}

/* Menu dropdown */
.menu.nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  min-width: 200px;
  max-width: 250px;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Desktop: assicura spacing corretto per quadratini */
@media (min-width: 992px) {
  .menu.nav .sub-menu a {
    padding: 12px 20px 12px 35px !important;
  }
  
  .menu.nav .sub-menu a::before {
    left: 15px !important;
    width: 8px !important;
    height: 8px !important;
  }
}

/* Responsive: adatta dropdown su schermi medi */
@media (max-width: 1200px) {
  .menu.nav .sub-menu {
    right: 0;
    left: auto;
    min-width: 180px;
    max-width: 200px;
  }
}

/* Responsive: dropdown su tablet */
@media (max-width: 991px) {
  .menu.nav .sub-menu {
    right: 0;
    left: auto;
    min-width: 160px;
    max-width: 180px;
  }
  
  .menu.nav .sub-menu a {
    padding: 12px 20px 12px 25px !important;
  }
  
  .menu.nav .sub-menu a::before {
    left: 10px !important;
    background-color: #006798 !important;
  }
}

/* Responsive: dropdown su schermi piccoli */
@media (max-width: 768px) {
  .menu.nav .sub-menu {
    right: 0;
    left: auto;
    min-width: 140px;
    max-width: 160px;
    font-size: 14px;
  }
  
  .menu.nav .sub-menu a {
    padding: 10px 15px 10px 22px !important;
  }
  
  .menu.nav .sub-menu a::before {
    width: 6px;
    height: 6px;
    left: 8px !important;
    background-color: #006798 !important;
  }
}

/* Mostra dropdown al hover */
.menu.nav li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Stili per gli elementi del dropdown */
.menu.nav .sub-menu li {
  display: block;
  width: 100%;
}

.menu.nav .sub-menu a {
  padding: 12px 20px 12px 35px;
  color: #555;
  text-align: left;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Quadratino blu prima del testo */
.menu.nav .sub-menu a::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #006798;
  transition: background-color 0.3s ease;
}

.menu.nav .sub-menu a:hover {
  background-color: #f8f9fa;
  color: var(--pink) !important;
}

/* Quadratino diventa rosa al hover */
.menu.nav .sub-menu a:hover::before {
  background-color: var(--pink) !important;
}





/* Responsive: dropdown su mobile */
@media (max-width: 767px) {
  .menu.nav .sub-menu {
    display: none;
    position: static;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  
  /* Mostra dropdown quando il parent ha la classe active */
  .menu.nav .menu-item-has-children.active .sub-menu {
    display: block;
    margin-left: 20px;
    margin-top: 10px;
  }
  
  .menu.nav .sub-menu a {
    padding: 8px 15px;
    display: block;
  }
}