/* index-responsive.css
   Contiene override per TABLET (<= 768px) e MOBILE (350px - 550px).
   Non toccare le regole desktop: qui applichiamo solo media queries con max-width
   o range mirati in modo da non influenzare la versione desktop.
*/
/* TABLET: fino a 768px (inclusivo) */
@media (max-width: 768px) {
  /* Global rule: titles 30px, body/text 14px for tablet and smaller */
  h1, h2, h3, .hero-title, .vc-motion-card-title, .news-title, .report-title, .service-title {
    font-size: 30px !important;
    line-height: 1.1 !important;
  }

  /* Body and general text size */
  body, p, .hc-menu a, .site-header .nav-link, .service-description, .vc-motion-card-content, .news-excerpt {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* contenitori principali */
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* header / nav */
  .hc-nav {
    padding: 10px 0;
  }
  .hc-menu {
    gap: 10px;
  }
  .hc-brand img {
    height: 34px; /* riduce leggermente il logo per tablet */
  }

  /* layout card / grid: rendi le cards a colonna singola se necessario */
  .tx-grid-wrap,
  .news-grid,
  .cards-row {
    grid-template-columns: 1fr !important;
  }

  /* immagini responsive */
  .hero-image img,
  .tx-thumb img,
  .news-thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* footer */
  .site-footer .ft-top,
  .site-footer .ft-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* testi: leggera riduzione per adattarsi */
  body, .hc-menu a, .site-header .nav-link {
    font-size: 15px;
  }

  /* CTA e button più pieni e tactili */
  .btn, .cta {
    padding: 12px 18px;
  }

  /* Footer CTA fixes: remove fixed widths and absolute positioning on smaller screens */
  .ft-cta, .ft-cta-title {
    position: static !important;
    width: 100% !important;
  }
  .ft-cta-row { margin-top: 16px; }
  .ft-cta-input { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; }
  .ft-cta-btn { width: 100% !important; }
}

/* When mobile menu is open, lock background scroll and make menu act as overlay */
@media (max-width: 992px) {
  body.menu-open { overflow: hidden; height: 100vh; }

  /* Ensure menu overlays content and scrolls internally if needed */
  .hc-menu {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: none !important; /* hidden by default; shown when .is-open */
    flex-direction: column !important;
    padding: 20px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: linear-gradient(180deg, rgba(0,8,35,0.98) 0%, rgba(0,8,35,0.95) 100%);
    z-index: 9000 !important;
  }

  .hc-menu.is-open { display: flex !important
;
        margin: 0;
        margin-top: -4px;
        background: radial-gradient(133.3% 102.95% at 50.69% 2.24%, #00269D 0%, #000E3B 100%) !important; }

  /* dim the rest of the page subtly (via pseudo overlay technique) */
  body.menu-open::before {
    content: '';
    position: fixed;
    inset: 64px 0 0 0;
  /* meno opaco per non oscurare i pannelli interni */
  background: rgba(0,0,0,0.32);
  /* keep overlay under the menu */
  z-index: 6000;
  }

  /* On small/medium screens we don't want the overlay to hide the menu -> hide it */
  @media (max-width: 992px) {
    body.menu-open::before { display: none !important; }
  }

  /* Prevent the mobile menu from growing beyond the viewport
     and reduce large paddings coming from desktop rules (.has-sub) */
  .hc-menu {
    max-height: calc(100vh - 64px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  /* visual improvements */
  padding-top: 18px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  /* ensure a fully opaque solid background and remove any images/filters */
  background-image: none !important;
  background: #02193a !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(3,10,30,0.5);
  /* ensure menu sits above the page overlay */
  z-index: 10010 !important;
  background-color: rgba(3,18,60,1) !important; /* fully opaque */
  }

  /* desktop rule .has-sub adds big vertical padding; reduce it on mobile */
  .has-sub { padding: 12px 0 !important; }

  /* normalize spacing of menu items so a single item cannot force overflow */
  .hc-menu > li { padding: 0 !important; }

  /* make submenu items fluid and allow text to wrap */
  .hc-subitem {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    grid-template-columns: 40px 1fr 12px !important;
    align-items: center !important;
  }
  .hc-subitem:hover {
        background: none !important;
    }
    .ft-col {
    padding: 0;
    height: auto;
    padding-top: 20px;
}
.ft-block {
    margin-top: 20px !important;
}
  .hc-subitem .txt { white-space: normal !important; word-break: break-word !important; margin-left: 25px;}

  /* Allow header links to wrap on narrow screens */
  .hc-menu .hc-link { white-space: normal !important; word-break: break-word !important; }

  /* --- Aesthetic tweaks for menu items --- */
  .hc-menu > li { padding: 0 0 0 0 !important; }
  .hc-menu > li + li { border-top: 1px solid rgba(255,255,255,0.02); }
  .hc-menu .hc-link {
    color: rgba(255,255,255,0.92) !important;
    font-size: 18px !important;
  color: #ffffff !important;
    line-height: 1.6 !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 6px !important;
    padding-left: 8px !important;
    transition: color .12s ease, padding-left .12s ease, border-left-color .12s ease;
    border-left: 4px solid transparent !important;
  }
  .hc-menu .hc-link:hover,
  .hc-menu .hc-link:focus {
    color: #C4F222 !important;
    padding-left: 12px !important;
    border-left-color: rgba(196,242,34,0.95) !important;
    text-decoration: none !important;
  }

  /* scrollbar minor styling for nicer look when menu scrolls */
  .hc-menu::-webkit-scrollbar { width: 8px; }
  .hc-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 6px; }

  /* ensure submenu card is above overlay if its z-index gets lowered by stacking context */
  .hc-sub {
  z-index: 10011 !important;
  }
}

/* MOBILE: specifico 350px - 550px (maggiore granularità all'interno di max 550px) */
@media (max-width: 550px) {
  /* ulteriore compressione padding */
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* header: mostra solo elementi essenziali */
  .hc-brand img {
    height: 28px;
  }
  /* NOTE: non nascondere automaticamente le voci qui — usare la classe
     `.non-essential` o `.essential` nel markup se vuoi nascondere selettivamente.
     Lasciamo tutte le voci visibili per evitare menu vuoti su mobile. */

  /* testi e titoli */
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
  .news-title { max-width: 300px; width: 100%; }
  /* elementi multicolonna -> singola colonna */
  .two-cols, .three-cols {
    display: block;
  }

  /* immagini e card */
  .card, .tx-card, .news-card {
    margin-bottom: 18px;
  }

  /* touch targets */
  .btn, .cta {
    width: 100%;
    display: block;
  }

  /* On narrow phones, remove the page overlay to avoid hiding the menu
     and ensure the menu background and text have strong contrast. */
  body.menu-open::before { display: none !important; }

  .hc-menu {
    background-color: #031B3C !important; /* slightly lighter navy */
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .hc-menu .hc-link {
    color: rgba(255,255,255,0.96) !important;
    font-size: 18px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* EXTRA MOBILE TWEAK: molto piccoli (sotto 400px) e per 350px edge case */
@media (max-width: 400px) {
  body, .hc-menu a, .site-header .nav-link {
    font-size: 14px;
  }
  .hc-brand img { height: 24px; }
  .site-footer .ft-bottom { padding: 20px 12px; }
}

@media (max-width: 350px) {
  /* limite inferiore: semplifica ulteriormente alcune componenti */
  .site-header .top-info, .extra-info { display: none; }
  .hero-title { font-size: 18px; }
}

/* MOBILE RANGE: applicazioni specifiche solo tra 350px e 550px */
@media (min-width: 350px) and (max-width: 550px) {
  /* maggiore enfasi sui touch targets e spazi */
  .btn, .cta {
    padding: 14px 16px;
    font-size: 16px;
  }

  /* diminuisci margini e gap per adattare contenuti stretti */
  .section { margin-bottom: 20px; }
  .grid-gap { gap: 12px; }

  /* elementi opzionali che possono essere nascosti per risparmiare spazio */
  .promo-side, .aside-secondary { display: none; }

  /* Footer CTA: specific tweaks for narrow mobile */
  .ft-cta, .ft-cta-title { position: static !important; width: 100% !important; }
  .ft-cta-row { flex-direction: column; gap: 10px; align-items: stretch; }
  .ft-cta-input { width: 100% !important; max-width: 100% !important; }
  .ft-cta-btn { width: 100% !important; }
}