/* =========================================================
   M2A GROUP — MASTER LAYOUT PARITY V4
   Homepage remains the single header/spacing reference.
   Shared by Arabic + English master templates.
   ========================================================= */

/* ---------- English desktop header: exact homepage three-zone system ---------- */
@media (min-width:1101px){
  html[dir="ltr"] body.m2a-master-template .m2a-master-header .header-container{
    display:grid !important;
    width:min(1580px,calc(100% - 48px)) !important;
    max-width:none !important;
    margin-inline:auto !important;
    padding-inline:0 !important;
    grid-template-columns:minmax(210px,240px) minmax(0,1fr) minmax(210px,240px) !important;
    grid-template-areas:"brand nav actions" !important;
    align-items:center !important;
    column-gap:clamp(14px,1.4vw,24px) !important;
    direction:ltr !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .brand{
    position:static !important;
    grid-area:brand !important;
    justify-self:start !important;
    align-self:center !important;
    transform:none !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .desktop-nav{
    position:static !important;
    grid-area:nav !important;
    justify-self:center !important;
    align-self:center !important;
    display:grid !important;
    grid-template-columns:repeat(8,max-content) !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:min(100%,880px) !important;
    min-width:0 !important;
    gap:clamp(10px,1.05vw,20px) !important;
    direction:ltr !important;
    inset:auto !important;
    transform:none !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .desktop-nav a{
    min-width:0 !important;
    padding-block:8px !important;
    font-size:clamp(12.5px,.85vw,14px) !important;
    line-height:1.25 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .desktop-nav a.active{
    padding:7px 13px !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .header-actions{
    position:static !important;
    grid-area:actions !important;
    justify-self:end !important;
    align-self:center !important;
    display:flex !important;
    width:auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    direction:ltr !important;
    white-space:nowrap !important;
    inset:auto !important;
    transform:none !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header :is(.language-link,.header-cta){
    flex:0 0 auto !important;
  }
}

@media (min-width:1101px) and (max-width:1240px){
  html[dir="ltr"] body.m2a-master-template .m2a-master-header .header-container{
    width:calc(100% - 28px) !important;
    grid-template-columns:190px minmax(0,1fr) 190px !important;
    column-gap:12px !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .desktop-nav{
    width:100% !important;
    gap:8px !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .desktop-nav a{
    font-size:11.5px !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .desktop-nav a.active{
    padding:6px 10px !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header .header-actions{
    gap:8px !important;
  }

  html[dir="ltr"] body.m2a-master-template .m2a-master-header :is(.language-link,.header-cta){
    min-height:38px !important;
    padding:8px 11px !important;
    font-size:11.5px !important;
  }
}

/* ---------- Global mobile/tablet header: EXACTLY logo + language + hamburger ---------- */
@media (max-width:1100px){
  body.m2a-master-template .m2a-master-header .header-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    direction:ltr !important;
  }

  body.m2a-master-template .m2a-master-header .brand{
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
  }

  body.m2a-master-template .m2a-master-header .desktop-nav,
  body.m2a-master-template .m2a-master-header .header-cta{
    display:none !important;
  }

  body.m2a-master-template .m2a-master-header .header-actions{
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    gap:8px !important;
    direction:ltr !important;
  }

  body.m2a-master-template .m2a-master-header .language-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
  }

  body.m2a-master-template .m2a-master-header .menu-toggle{
    display:flex !important;
    flex:0 0 auto !important;
  }
}

/* ---------- Floating controls: fixed, safe, never lost at page end ---------- */
body.m2a-master-template .contact-launcher,
body.m2a-master-template .back-to-top{
  position:fixed !important;
  z-index:2400 !important;
  transition:opacity .24s ease,visibility .24s ease,transform .24s ease !important;
}

body.m2a-master-template.contact-form-is-visible:not(.m2a-actual-form-visible) .contact-launcher,
body.m2a-master-template.contact-form-is-visible:not(.m2a-actual-form-visible) .back-to-top{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}

body.m2a-master-template.m2a-actual-form-visible .contact-launcher,
body.m2a-master-template.m2a-actual-form-visible .back-to-top{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(18px) !important;
}

/* ---------- Page end: no synthetic body/footer height ---------- */
html,
body.m2a-master-template{
  min-height:100%;
  overflow-x:hidden;
}

@supports (overflow:clip){
  html,
  body.m2a-master-template{overflow-x:clip}
}

body.m2a-master-template{
  padding-bottom:0 !important;
}

body.m2a-master-template main{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

body.m2a-master-template main > :last-child{
  margin-bottom:0 !important;
}

body.m2a-master-template .m2a-master-footer{
  min-height:0 !important;
  margin:0 !important;
}

/* ---------- Mobile page-end spacing: compact, safe, no artificial blank band ---------- */
@media(max-width:720px){
  body.m2a-master-template .m2a-master-footer{
    padding-top:22px !important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important;
  }

  body.m2a-master-template .contact-launcher{
    bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important;
  }

  body.m2a-master-template .back-to-top{
    bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important;
  }

  body.m2a-master-template:not(.m2a-last-block-has-real-form) main > :last-child{
    padding-bottom:0 !important;
  }

  body.m2a-master-template:not(.m2a-last-block-has-real-form) main > :last-child > .container{
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)) !important;
  }

  body.m2a-master-template.m2a-last-block-has-real-form main > :last-child > .container{
    padding-bottom:0 !important;
  }

  /*
   * Mobile image gate for homepage sector cards.
   * Keep the premium gradient immediately, but do not resolve the heavy
   * --sector-image URL until the observer marks the card as near viewport.
   */
  .home-page .sector-image-card:not(.m2a-bg-loaded){
    background-image:linear-gradient(135deg,
      rgba(7,13,14,.76) 0%,
      rgba(7,13,14,.84) 55%,
      rgba(5,9,10,.95) 100%
    ) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.m2a-master-template .contact-launcher,
  body.m2a-master-template .back-to-top{
    transition:none !important;
  }
}