/*
 * ZALWEB GLOBAL FULL WIDTH V2
 * Full viewport layout for:
 * Header / Footer / Main Sections / Page Shells
 */

:root{
  --zw-global-gutter:
    clamp(16px, 2.2vw, 36px);
}


/* =========================================================
   ROOT
   ========================================================= */

html,
body{
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
}

body{
  overflow-x:clip;
}


/* =========================================================
   GLOBAL STRUCTURE
   ========================================================= */

header,
main,
footer,
section{
  width:100% !important;
  max-width:none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

header > *{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

header :where(
  .container,
  .container-fluid,
  [class$="-container"],
  [class$="__container"],
  [class$="-inner"],
  [class$="__inner"],
  [class$="-wrap"],
  [class$="__wrap"]
){
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer > *{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

footer :where(
  .container,
  .container-fluid,
  [class$="-container"],
  [class$="__container"],
  [class$="-inner"],
  [class$="__inner"],
  [class$="-wrap"],
  [class$="__wrap"]
){
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}


/* =========================================================
   MAIN SECTION OUTER WRAPPERS
   Every main section must use the full viewport width.
   ========================================================= */

main > section > :where(
  div,
  .container,
  .container-fluid,
  [class$="-shell"],
  [class$="__shell"],
  [class$="-container"],
  [class$="__container"]
){
  width:100% !important;
  max-width:none !important;

  margin-left:0 !important;
  margin-right:0 !important;

  padding-left:
    var(--zw-global-gutter) !important;

  padding-right:
    var(--zw-global-gutter) !important;

  box-sizing:border-box !important;
}


/* =========================================================
   ALL PAGE SHELLS
   Removes old width:min(1180px/1240px...)
   ========================================================= */

main :where(
  [class$="-shell"],
  [class$="__shell"]
){
  max-width:none !important;
}


/* =========================================================
   CURRENT ZALWEB PAGE SHELLS
   Explicit protection for V2 pages.
   ========================================================= */

.zwsol2-shell,
.zwpr2-shell,
.zwrd2-shell,
.zw-demo-container{
  width:100% !important;
  max-width:none !important;

  margin-left:0 !important;
  margin-right:0 !important;

  padding-left:
    var(--zw-global-gutter) !important;

  padding-right:
    var(--zw-global-gutter) !important;

  box-sizing:border-box !important;
}


/* =========================================================
   SECTION HEADINGS
   Removes max-width: 850px / 920px style limitations
   from high-level section headers.
   ========================================================= */

main > section > div > :where(
  .zwsol2-head,
  .zwpr2-head,
  .zwrd2-head,
  .zw-demo-head
),
.zwsol2-head,
.zwpr2-head,
.zwrd2-head{
  width:100% !important;
  max-width:none !important;

  margin-left:0 !important;
  margin-right:0 !important;
}


/* =========================================================
   INTRO / COPY BLOCKS
   Prevent large sections from becoming a narrow centered
   column while keeping their grid intact.
   ========================================================= */

.zwsol2-intro-grid,
.zwsol2-operating-grid,
.zwpr2-two,
.zwpr2-scope-grid,
.zwrd2-hero-grid,
.zwrd2-form-layout{
  width:100% !important;
  max-width:none !important;
}


/* =========================================================
   HERO
   ========================================================= */

main > section:first-child > div{
  width:100% !important;
  max-width:none !important;
}


/* =========================================================
   COMMON LEGACY CONTAINERS
   Only when they are direct children of main sections.
   ========================================================= */

main > section > .container,
main > section > .container-fluid{
  width:100% !important;
  max-width:none !important;

  margin-inline:0 !important;

  padding-inline:
    var(--zw-global-gutter) !important;
}


/* =========================================================
   LARGE SCREEN
   No artificial desktop max width.
   ========================================================= */

@media(min-width:1440px){

  :root{
    --zw-global-gutter:
      clamp(24px, 2.2vw, 42px);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

  :root{
    --zw-global-gutter:16px;
  }

}


/* =========================================================
   ZALWEB GLOBAL FULL WIDTH V3
   Remove remaining centered content limits
   ========================================================= */


/* ---------- ALL V2 SECTION HEADS ---------- */

.zwai2-section-head,
.zwba2-head,
.zwsol2-head,
.zwpr2-head,
.zwrd2-head,
.zw-demo-head{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}


/* ---------- ABOUT SECTION HEADS ---------- */

.zwabout2 :where(
  [class*="-head"],
  [class*="__head"]
){
  max-width:none !important;
}


/* ---------- MAIN GENERIC SECTION HEAD ---------- */

main .zw-section-head{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}


/* ---------- FAQ WRAPPERS ---------- */

.zwai2-faq-list,
.zwba2-faq-list,
.zwsol2-faq-list,
.zwpr2-faq-list,
.zwrd2-faq-list,
.zw-demo-faq{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}


/* ---------- HERO / SECTION LEADS ---------- */

.zwai2-lead,
.zwba2-lead,
.zwsol2-lead,
.zwpr2-lead,
.zwrd2-lead{
  max-width:none !important;
}


/* ---------- HEAD PARAGRAPHS ---------- */

.zwai2-section-head p,
.zwba2-head p,
.zwsol2-head p,
.zwpr2-head p,
.zwrd2-head p{
  max-width:none !important;
}


/* ---------- FINAL CTA COPY ---------- */

.zwai2-final h2,
.zwai2-final p,
.zwba2-final h2,
.zwba2-final p,
.zwsol2-final h2,
.zwsol2-final p,
.zwpr2-final h2,
.zwpr2-final p,
.zwrd2-final h2,
.zwrd2-final p{
  max-width:none !important;
}


/* ---------- HOME LARGE OUTER WRAPPERS ---------- */

main[class*="home"],
main [class*="home"] :where(
  [class$="-shell"],
  [class$="__shell"],
  [class$="-container"],
  [class$="__container"]
){
  max-width:none !important;
}


/*
 * Preserve readable line length only for actual
 * long-form prose, not for layout containers.
 */
main :where(
  article,
  .card,
  [class*="-card"],
  [class*="__card"]
) p{
  max-width:100%;
}


/* ---------- LARGE DESKTOP ---------- */

@media(min-width:1600px){

  :root{
    --zw-global-gutter:42px;
  }

}