/**
 * Portale client — miglioramenti mobile / tablet (UI/UX)
 * Caricato dopo get_theme_css(). Fino a 1024px: header fisso + #nav-wrapper fisso
 * subito sotto (stessa chrome; non si separano allo scroll). top nav da fixNavGap.js.
 */

/* Smartphone: fallback (≤600px sovrascrive: header vetro > 60px) */
html body.client-side {
  scroll-padding-top: calc(60px + env(safe-area-inset-top, 0px) + 8px);
}

/* Tablet: header + striscia nav entrambe fixed → scroll-padding = entrambe + safe-area */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  html body.client-side {
    scroll-padding-top: calc(
      var(--portal-fixed-header-below-safe, 66px) + var(--portal-nav-strip-h, 50px) +
        env(safe-area-inset-top, 0px) + 8px
    );
  }
}

body.client-side {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Fino a 1024px: header fisso + nav fisso incollata sotto (no “stacco” allo scroll) */
@media screen and (max-width: 1024px) {
  body.client-side #container {
    height: auto !important;
    min-height: 0 !important;
    max-width: 100%;
  }

  /**
   * Solo header sito (primo #container del body). NON #footer … #header (legacy) —
   * altrimenti il blocco contatti diventa fixed z-index 2900 e copre il testo sotto.
   */
  body.client-side > #container > #header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box !important;
    height: auto !important;
    min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
    z-index: 2900 !important;
  }

  body.client-side > #container > #header > #header-inner {
    position: relative;
    z-index: 1;
  }

  /**
   * Striscia nav: fixed sotto #header-inner. `top` = rect.bottom da fixNavGap (ResizeObserver su #header-inner).
   * Fallback CSS ≈ safe-area + --portal-header-inner-min-h finché gira il JS.
   * A ≤600px il tema può nascondere #nav-wrapper.
   */
  body.client-side #nav-wrapper {
    /* position: fixed !important; */
    left: 0;
    right: 0;
    /*top: calc(env(safe-area-inset-top, 0px) + var(--portal-header-inner-min-h, 56px)); */
    width: 100% !important;
    z-index: 2890 !important;
    margin: 0 !important;
    border-top: none !important;
  }

  /* Area pagina sotto le barre (anche fuori dalla home vetro) */
  body.client-side #content {
    position: relative;
    z-index: 0 !important;
  }
}

/*
 * Tablet largo: da 901px in su usiamo barra orizzontale e togliamo hamburger/drawer.
 * Sotto 900px resta valido il comportamento RF-02 (hamburger attivo).
 */
@media screen and (min-width: 901px) and (max-width: 1024px) {
  body.client-side #nav-wrapper,
  body.client-side #nav {
    display: block !important;
  }

  body.client-side #nav-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.15rem 0.5rem !important;
    box-sizing: border-box !important;
    padding-left: var(--portal-header-pad-left, max(8px, env(safe-area-inset-left, 0px))) !important;
    padding-right: var(--portal-header-pad-right, max(8px, env(safe-area-inset-right, 0px))) !important;
  }

  body.client-side .c-hamburger {
    display: none !important;
  }

  body.client-side > #container > #header #right-menu {
    display: none !important;
  }

  body.client-side > #container > #header > #header-inner {
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  body.client-side #sidr-right {
    display: none !important;
  }

  /* Footer non tagliato: respiro in basso + safe area */
  body.client-side #footer-contact.footer-contact-block {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.client-side #footer-contact.footer-contact-block .footer-contact-header-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }
}

/* Solo smartphone: sheet menu full-screen (chrome-glass); niente offset sul drawer */
@media screen and (max-width: 600px) {
  body.client-side > #container > #header .pull-right.flush-right {
    display: none !important;
  }

  body.client-side > #container > #header #right-menu .c-hamburger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: linear-gradient(180deg, rgba(24, 38, 62, 0.94), rgba(14, 26, 46, 0.96)) !important;
    box-shadow: 0 6px 18px rgba(0, 8, 24, 0.35) !important;
  }

  body.client-side > #container > #header #right-menu .c-hamburger span {
    top: 21px !important;
    left: 11px !important;
    right: 11px !important;
    height: 2px !important;
    border-radius: 999px;
  }

  body.client-side > #container > #header #right-menu .c-hamburger span::before,
  body.client-side > #container > #header #right-menu .c-hamburger span::after {
    height: 2px !important;
    border-radius: 999px;
  }

  body.client-side > #container > #header #right-menu .c-hamburger span::before {
    top: -7px !important;
  }

  body.client-side > #container > #header #right-menu .c-hamburger span::after {
    bottom: -7px !important;
  }

  body.client-side #sidr-right {
    margin-top: 0 !important;
  }

  /*
   * Header vetro (logo + sottotitoli): altezza reale > 60px. Min ~6.85rem come prima
   * del tentativo “compatto”; 28vw scala su schermi larghi senza tornare a 11rem.
   */
  html body.client-side {
    scroll-padding-top: calc(clamp(6.85rem, 28vw, 9.25rem) + env(safe-area-inset-top, 0px) + 10px);
  }

  /* tickets.php: coerente con client-open-view-glass (meno vuoto + scroll anchor) */
  html body.client-side.tickets-page {
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + clamp(6.05rem, 24vw, 7.85rem) + 12px);
  }

  body.client-side:not(.index-page) #content {
    padding-top: calc(
      env(safe-area-inset-top, 0px) + clamp(6.85rem, 28vw, 9.25rem)
    ) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.client-side.tickets-page:not(.index-page) #content {
    padding-top: calc(
      env(safe-area-inset-top, 0px) + clamp(6.05rem, 24vw, 7.85rem) + 6px
    ) !important;
  }

  body.client-side:not(.index-page) {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/*
 * 601–900px: nav orizzontale nascosta, resta solo hamburger + drawer.
 * Override della regola legacy in client-mobile.css: #sidr-right {display:none} da 601px in su.
 */
@media screen and (min-width: 601px) and (max-width: 900px) {
  body.client-side #nav-wrapper,
  body.client-side #nav,
  body.client-side #header #nav.pull-right,
  body.client-side #nav-inner #nav {
    display: none !important;
  }

  body.client-side > #container > #header .pull-right.flush-right {
    display: none !important;
  }

  body.client-side > #container > #header #right-menu,
  body.client-side > #container > #header #right-menu .c-hamburger {
    display: flex !important;
  }

  body.client-side > #container > #header #right-menu .c-hamburger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: linear-gradient(180deg, rgba(24, 38, 62, 0.94), rgba(14, 26, 46, 0.96)) !important;
    box-shadow: 0 6px 18px rgba(0, 8, 24, 0.35) !important;
  }

  body.client-side > #container > #header #right-menu .c-hamburger span {
    top: 21px !important;
    left: 11px !important;
    right: 11px !important;
    height: 2px !important;
    border-radius: 999px;
  }

  body.client-side > #container > #header #right-menu .c-hamburger span::before,
  body.client-side > #container > #header #right-menu .c-hamburger span::after {
    height: 2px !important;
    border-radius: 999px;
  }

  body.client-side > #container > #header #right-menu .c-hamburger span::before {
    top: -7px !important;
  }

  body.client-side > #container > #header #right-menu .c-hamburger span::after {
    bottom: -7px !important;
  }

  body.client-side #sidr-right {
    display: block !important;
    margin-top: 0 !important;
  }

  body.client-side #sidr-right.sidr.right {
    right: -100vw;
    right: -100dvw;
  }

  body.client-side.sidr-open #sidr-right.sidr.right,
  body.client-side.sidr-right-open #sidr-right.sidr.right {
    right: 0;
  }
}

/* Tablet largo: contenuto sotto header + striscia nav fisse (stesse variabili della chrome) */
@media screen and (min-width: 901px) and (max-width: 1024px) {
  body.client-side:not(.index-page) #content {
    /*padding-top: calc(
      var(--portal-fixed-header-below-safe, 66px) + var(--portal-nav-strip-h, 50px) +
        env(safe-area-inset-top, 0px) + 12px
    ) !important;*/
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
}

/* 601–900: nav spesso nel drawer (nessuna striscia in flusso) → offset sotto header fisso */
@media screen and (min-width: 601px) and (max-width: 900px) {
  body.client-side:not(.index-page) #content {
    padding-top: calc(
      var(--portal-fixed-header-below-safe, 66px) + env(safe-area-inset-top, 0px) + 12px
    ) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 768px) {
  body.client-side input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  body.client-side select,
  body.client-side textarea,
  body.client-side .select2-container--default .select2-selection--single {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  body.client-side select[name="lang"],
  body.client-side .select2-container {
    max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.client-side table,
  body.client-side .thread-body,
  body.client-side #reply {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.client-side .thread-body img,
  body.client-side #landing_page img {
    max-width: 100% !important;
    height: auto !important;
  }

  body.client-side .action-button,
  body.client-side button,
  body.client-side input[type="submit"],
  body.client-side input[type="button"] {
    min-height: 44px;
    box-sizing: border-box;
  }

  body.client-side #msg_notice,
  body.client-side #msg_warning,
  body.client-side #msg_error {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box;
    margin-left: max(0px, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(0px, env(safe-area-inset-right, 0px)) !important;
  }

  body.client-side button.c-hamburger {
    min-width: 48px;
    min-height: 48px;
    padding: 10px;
    box-sizing: border-box;
  }

  body.client-side li#contact-id {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.client-side #footer-contact.footer-contact-block {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  body.client-side #footer-contact.footer-contact-block .footer-contact-header-inner {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}

/*
 * tickets.php: allineato a header + nav fissi (tablet).
 * Stesso obiettivo di client-open-view-glass — qui per browser senza :has() attendibile.
 */
@media screen and (min-width: 901px) and (max-width: 1024px) {
  body.client-side.tickets-page:not(.index-page) #content {
    padding-top: calc(48px + 36px + env(safe-area-inset-top, 0px) + 10px) !important;
  }
}

@media screen and (max-width: 600px) {
  body.client-side.tickets-page:not(.index-page) #content {
    padding-top: calc(
      env(safe-area-inset-top, 0px) + clamp(6.05rem, 24vw, 7.85rem) + 6px
    ) !important;
  }

  /* Dashboard ticket: nascosta su smartphone (spazio ridotto). */
  body.client-side.tickets-page #portal-tickets-sezione-dashboard,
  body.client-side.tickets-page #portal-tickets-dashboard-dialog,
  body.client-side.tickets-page .portal-tickets-open-year,
  body.client-side.tickets-page .portal-tickets-page-menubar__item--dashboard {
    display: none !important;
  }
}