/* ============================================================
   SINTEX — GLOBAL MOBILE HEADER COMPACT V1

   Scope:
   - mobile only <= 980px
   - desktop untouched
   - mobile drawer untouched
   - visual header bar only

   Loaded LAST on every public page.
   ============================================================ */

@media (max-width: 980px) {

  /*
   * MAIN HEADER ROW
   *
   * Previous final page rules:
   * min-height ~94px
   * padding 10px 26px
   *
   * New compact target:
   * 82px / 6px 20px
   */
  html body
  header.site-header > .container.nav-wrap,

  html body
  .site-header > .container.nav-wrap,

  html body
  .site-header .container.nav-wrap {
    width:
      100% !important;

    max-width:
      none !important;

    min-height:
      82px !important;

    height:
      auto !important;

    padding:
      6px 20px !important;

    margin:
      0 !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      12px !important;

    box-sizing:
      border-box !important;
  }


  /*
   * BRAND GROUP
   */
  html body
  header.site-header .brand,

  html body
  .site-header .brand {
    flex:
      1 1 auto !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    gap:
      10px !important;

    align-items:
      center !important;
  }


  /*
   * CLOUD LOGO
   * 54px -> 48px
   */
  html body
  header.site-header .brand-mark,

  html body
  .site-header .brand-mark {
    width:
      48px !important;

    height:
      48px !important;

    min-width:
      48px !important;

    min-height:
      48px !important;

    flex:
      0 0 48px !important;

    padding:
      0 !important;
  }


  html body
  header.site-header .brand-mark img,

  html body
  .site-header .brand-mark img {
    width:
      48px !important;

    height:
      48px !important;

    max-width:
      48px !important;

    max-height:
      48px !important;

    object-fit:
      contain !important;
  }


  /*
   * TEXT LOGO WRAPPER
   */
  html body
  header.site-header .brand-text,

  html body
  .site-header .brand-text {
    height:
      48px !important;

    min-width:
      0 !important;

    display:
      flex !important;

    align-items:
      center !important;
  }


  /*
   * SINTEX INFORMATICA IMAGE-TEXT
   *
   * Keeps current asset.
   * Only reduces its footprint.
   */
  html body
  header.site-header .brand-title,

  html body
  .site-header .brand-title {
    width:
      clamp(150px, 45vw, 212px) !important;

    height:
      32px !important;

    max-height:
      32px !important;

    transform:
      translateY(0) !important;

    background-size:
      contain !important;

    background-position:
      left center !important;
  }


  /*
   * BURGER
   * 58px -> 52px
   */
  html body
  header.site-header button.mobile-burger,

  html body
  .site-header button.mobile-burger,

  html body
  button.mobile-burger#mobileBurger {
    width:
      52px !important;

    height:
      52px !important;

    min-width:
      52px !important;

    min-height:
      52px !important;

    flex:
      0 0 52px !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }

}


/* ============================================================
   SINTEX — SERVIZI STICKY CONTEXT FIX V1

   Servizi historically applies horizontal overflow clipping
   directly to both html and body.

   Keep clipping on the root element, but let BODY remain
   outside that overflow context so the mobile sticky header
   can use the viewport normally.

   Servizi only. Mobile only.
   ============================================================ */

@media (max-width: 980px) {

  html {
    overflow-x:
      clip !important;
  }

  html body.sintex-servizi-sticky-safe {
    overflow-x:
      visible !important;
  }

}