/* =========================================================
   OFWIM CUSTOM PAGE LAYOUT FIXES

   Targets only Custom HTML gadgets containing:
   - Homepage
   - Leadership
   - Leadership Roles
   - Procedures & Bylaws
   - Committees
   - About
========================================================= */


/* =========================================================
   1. RESET ALL CUSTOM PAGE BLOCKS
========================================================= */

.ofwim-homepage,
.ofwim-leadership,
.ofwim-roles,
.ofwim-governance,
.ofwim-committees,
.ofwim-about {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* =========================================================
   2. RESET CUSTOM HTML GADGET WRAPPERS
========================================================= */

.WaGadgetCustomHTML:has(.ofwim-homepage),
.WaGadgetCustomHTML:has(.ofwim-leadership),
.WaGadgetCustomHTML:has(.ofwim-roles),
.WaGadgetCustomHTML:has(.ofwim-governance),
.WaGadgetCustomHTML:has(.ofwim-committees),
.WaGadgetCustomHTML:has(.ofwim-about) {
  position: relative !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}


/* Remove spacing from all inner gadget wrappers */
.WaGadgetCustomHTML:has(.ofwim-homepage) .gadgetStyleBody,
.WaGadgetCustomHTML:has(.ofwim-homepage) .gadgetContentEditableArea,
.WaGadgetCustomHTML:has(.ofwim-homepage) .WaGadgetContent,

.WaGadgetCustomHTML:has(.ofwim-leadership) .gadgetStyleBody,
.WaGadgetCustomHTML:has(.ofwim-leadership) .gadgetContentEditableArea,
.WaGadgetCustomHTML:has(.ofwim-leadership) .WaGadgetContent,

.WaGadgetCustomHTML:has(.ofwim-roles) .gadgetStyleBody,
.WaGadgetCustomHTML:has(.ofwim-roles) .gadgetContentEditableArea,
.WaGadgetCustomHTML:has(.ofwim-roles) .WaGadgetContent,

.WaGadgetCustomHTML:has(.ofwim-governance) .gadgetStyleBody,
.WaGadgetCustomHTML:has(.ofwim-governance) .gadgetContentEditableArea,
.WaGadgetCustomHTML:has(.ofwim-governance) .WaGadgetContent,

.WaGadgetCustomHTML:has(.ofwim-committees) .gadgetStyleBody,
.WaGadgetCustomHTML:has(.ofwim-committees) .gadgetContentEditableArea,
.WaGadgetCustomHTML:has(.ofwim-committees) .WaGadgetContent,

.WaGadgetCustomHTML:has(.ofwim-about) .gadgetStyleBody,
.WaGadgetCustomHTML:has(.ofwim-about) .gadgetContentEditableArea,
.WaGadgetCustomHTML:has(.ofwim-about) .WaGadgetContent {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* =========================================================
   3. RESET THE WILDAPRICOT LAYOUT WRAPPERS
      CONTAINING CUSTOM PAGES
========================================================= */

.WaLayoutItem:has(.ofwim-homepage),
.WaLayoutItem:has(.ofwim-leadership),
.WaLayoutItem:has(.ofwim-roles),
.WaLayoutItem:has(.ofwim-governance),
.WaLayoutItem:has(.ofwim-committees),
.WaLayoutItem:has(.ofwim-about),

.WaPlaceHolderContent:has(.ofwim-homepage),
.WaPlaceHolderContent:has(.ofwim-leadership),
.WaPlaceHolderContent:has(.ofwim-roles),
.WaPlaceHolderContent:has(.ofwim-governance),
.WaPlaceHolderContent:has(.ofwim-committees),
.WaPlaceHolderContent:has(.ofwim-about),

.WaPlaceHolder:has(.ofwim-homepage),
.WaPlaceHolder:has(.ofwim-leadership),
.WaPlaceHolder:has(.ofwim-roles),
.WaPlaceHolder:has(.ofwim-governance),
.WaPlaceHolder:has(.ofwim-committees),
.WaPlaceHolder:has(.ofwim-about) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}


/* =========================================================
   4. REMOVE EMPTY TOP SPACE FROM THE CONTENT ZONE
      ONLY WHEN A CUSTOM PAGE IS PRESENT
========================================================= */

.zoneContent:has(.ofwim-homepage),
.zoneContent:has(.ofwim-leadership),
.zoneContent:has(.ofwim-roles),
.zoneContent:has(.ofwim-governance),
.zoneContent:has(.ofwim-committees),
.zoneContent:has(.ofwim-about),

.zoneContentInner:has(.ofwim-homepage),
.zoneContentInner:has(.ofwim-leadership),
.zoneContentInner:has(.ofwim-roles),
.zoneContentInner:has(.ofwim-governance),
.zoneContentInner:has(.ofwim-committees),
.zoneContentInner:has(.ofwim-about),

#idContent:has(.ofwim-homepage),
#idContent:has(.ofwim-leadership),
#idContent:has(.ofwim-roles),
#idContent:has(.ofwim-governance),
#idContent:has(.ofwim-committees),
#idContent:has(.ofwim-about),

#idContentContainer:has(.ofwim-homepage),
#idContentContainer:has(.ofwim-leadership),
#idContentContainer:has(.ofwim-roles),
#idContentContainer:has(.ofwim-governance),
#idContentContainer:has(.ofwim-committees),
#idContentContainer:has(.ofwim-about) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   5. HEADER SPACING — DESKTOP
========================================================= */

/* Remove remaining gap beneath the illustrated banner */
.zoneHeader1,
.zoneHeader1 .container,
.zoneHeader1 .container_12,
.zoneHeader1 .WaPlaceHolder,
.zoneHeader1 .WaPlaceHolderContent,
.zoneHeader1 .WaLayoutItem,
.zoneHeader1 .WaGadget,
.zoneHeader1 .WaGadgetContent {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* Pull the desktop navigation against the illustrated banner */
.zoneHeader2,
.zoneHeader2 .container,
.zoneHeader2 .container_12,
.zoneHeader2 .WaPlaceHolder,
.zoneHeader2 .WaPlaceHolderContent {
  margin-top: -6px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* =========================================================
   6. DESKTOP-ONLY WHITE-GAP CORRECTION

   Pulls custom pages upward without affecting mobile.
========================================================= */

@media screen and (min-width: 701px) {

  .WaGadgetCustomHTML:has(.ofwim-homepage),
  .WaGadgetCustomHTML:has(.ofwim-leadership),
  .WaGadgetCustomHTML:has(.ofwim-roles),
  .WaGadgetCustomHTML:has(.ofwim-governance),
  .WaGadgetCustomHTML:has(.ofwim-committees),
  .WaGadgetCustomHTML:has(.ofwim-about) {
    position: relative !important;
    top: -24px !important;
    margin-bottom: -24px !important;
  }

}


/* =========================================================
   7. MOBILE HEADER AND PAGE POSITIONING
========================================================= */

@media screen and (max-width: 700px) {

  /* ---------------------------------------------------------
     Hide the illustrated desktop header banner
  --------------------------------------------------------- */

  .ofwim-header-banner,
  div.ofwim-header-banner,
  .WaGadget.ofwim-header-banner,
  .WaGadgetContent.ofwim-header-banner {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }


  /* ---------------------------------------------------------
     Remove space left behind by the hidden banner
  --------------------------------------------------------- */

  .zoneHeader1,
  .zoneHeader1 .container,
  .zoneHeader1 .container_12,
  .zoneHeader1 .WaPlaceHolder,
  .zoneHeader1 .WaPlaceHolderContent,
  .zoneHeader1 .WaLayoutItem,
  .zoneHeader1 .WaGadget,
  .zoneHeader1 .WaGadgetContent {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }


  /* ---------------------------------------------------------
     Restore proper mobile navigation height and stacking
  --------------------------------------------------------- */

  .zoneHeader2,
  .zoneHeader2 .container,
  .zoneHeader2 .container_12,
  .zoneHeader2 .WaPlaceHolder,
  .zoneHeader2 .WaPlaceHolderContent,
  .zoneHeader2 .WaLayoutItem {
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* ---------------------------------------------------------
     Never pull custom-page gadgets upward on mobile
  --------------------------------------------------------- */

  .WaGadgetCustomHTML:has(.ofwim-homepage),
  .WaGadgetCustomHTML:has(.ofwim-leadership),
  .WaGadgetCustomHTML:has(.ofwim-roles),
  .WaGadgetCustomHTML:has(.ofwim-governance),
  .WaGadgetCustomHTML:has(.ofwim-committees),
  .WaGadgetCustomHTML:has(.ofwim-about) {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* ---------------------------------------------------------
     Reset the custom page blocks themselves
  --------------------------------------------------------- */

  .ofwim-homepage,
  .ofwim-leadership,
  .ofwim-roles,
  .ofwim-governance,
  .ofwim-committees,
  .ofwim-about {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }


  /* ---------------------------------------------------------
     Keep page content behind and beneath the navigation
  --------------------------------------------------------- */

  .zoneContent,
  .zoneContentInner,
  #idContent,
  #idContentContainer {
    position: relative !important;
    z-index: 1 !important;
  }

}

/* =========================================================
   MOBILE HORIZONTAL OVERFLOW FIX
========================================================= */

@media screen and (max-width: 700px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #idPageContainer,
  #idMainContainer,
  #idContentContainer,
  #idContent,
  .zoneHeader1,
  .zoneHeader2,
  .zoneContent,
  .zoneContentInner,
  .container,
  .container_12,
  .WaPlaceHolder,
  .WaPlaceHolderContent,
  .WaLayoutItem,
  .WaGadget,
  .WaGadgetContent,
  .WaGadgetCustomHTML {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ofwim-homepage,
  .ofwim-leadership,
  .ofwim-roles,
  .ofwim-governance,
  .ofwim-committees,
  .ofwim-about {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .ofwim-homepage *,
  .ofwim-leadership *,
  .ofwim-roles *,
  .ofwim-governance *,
  .ofwim-committees *,
  .ofwim-about * {
    max-width: 100%;
  }

  img,
  svg,
  video,
  iframe {
    max-width: 100% !important;
  }
}