/* =========================================================
   1) Small, site-specific helper styles
   (These are unrelated to layout; they just tweak specific elements.)
   ========================================================= */

/* Centers the logo inside its column */
#id_bLtkq94 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Footer links styling */
.footer_links {
  color: white;
  font-family: Arial, sans-serif;
  font-style: normal;
  padding: 5px;
  line-height: 1.5;
}

/* Rounded corners on Board of Directors bio pictures */
.biopic {
  border-radius: 10px;
}

/* Right-align these links (used somewhere specific on your site) */
.mo_links {
  text-align: right;
  text-decoration: none;
}


/* =========================================================
   2) Global page + Skyline Midtown layout overrides
   GOALS:
   - Header, black banner, and footer span full width (edge to edge)
   - Main content has 20px padding on left + right
   ========================================================= */

/* Remove browser default spacing and prevent tiny horizontal scroll slivers */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;          /* also needed for sticky footer setup */
  overflow-x: hidden !important;     /* prevents 1px “seams” from full-bleed elements */
}

/* WildApricot layout wrapper sometimes adds spacing/width constraints */
#mLayout, .mLayout, .layoutMain {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Skyline Midtown uses a 12-column "container_12" with a fixed width.
   This forces the theme to be fluid/full-width. */
.container_12 {
  width: 100% !important;
  max-width: none !important;
}

/* Skyline grid rows can add offsets/margins; remove them so sections can truly stretch */
.zoneInner,
.s1_grid_12,
.s2_grid_12,
.s3_grid_12 {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove rounded corners so the site doesn't look “boxed-in” */
.zoneRoundedCorners {
  border-radius: 0 !important;
}

/* Remove theme gutters on major zones (we control padding ourselves) */
.zoneHeader,
.zoneHeader1,
.zoneHeader12,
.zoneContent,
.zoneFooter,
.zoneFooter1,
.zoneBranding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Main content should have consistent 20px left/right padding */
.zoneContentInner {
  box-sizing: border-box !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Header/footer zones should be full-bleed bands (no forced padding) */
.zoneHeaderOuter .zoneInner,
.zoneHeader1Outer .zoneInner,
.zoneHeader2Outer .zoneInner,
.zoneFooterOuter .zoneInner,
.zoneFooter1Outer .zoneInner,
.zoneBrandingOuter .zoneInner {
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: white;
  margin-top: 20px;
}

/* Black banner gadget: make the background full width while keeping text aligned
   to the same 20px content padding. */
#id_kJFvoJ3 {
  width: 100vw !important;                 /* full viewport width */
  margin-left: calc(50% - 50vw) !important;/* pull it out of any container */
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Banner text stays aligned with the rest of your content */
#id_kJFvoJ3 .gadgetStyleBody {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Wild Apricot branding/footer area (Powered by...)
   We keep it visible again, but make it neat and aligned.
   ========================================================= */

.zoneBrandingOuter {
  /* keep it participating in the sticky footer layout */
  flex: 0 0 auto !important;
  background: black;
}



/* =========================================================
   3) Sticky footer (footer stays at bottom on short pages)
   How it works:
   - Make the page a vertical "stack"
   - Let the content grow to fill leftover space
   - Footer stays after content at the bottom
   ========================================================= */

/* Make the page a vertical flex stack */
body.LayoutMain {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Make WA's main wrapper also participate in the vertical flex layout */
#mLayout {
  flex: 1 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

/* This is what pushes the footer down:
   the content area expands to fill remaining vertical space */
.zoneContentOuter {
  flex: 1 0 auto !important;
}

/* Footer zones stay their natural height and sit at the bottom */
.zoneFooterOuter,
.zoneFooter1Outer,
.zoneBrandingOuter {
  flex: 0 0 auto !important;
  background: black;
}


/* =========================================================
   4) Navigation menu behavior
   GOALS:
   - Desktop: top-level links spread evenly across the available width
   - Mobile: allow WA's hamburger open/close behavior, but position the button + dropdown
   IMPORTANT NOTE:
   - We do NOT force display:block/none on the menu list on mobile,
     because WildApricot's JS controls that.
   ========================================================= */

/* Make the menu gadget the positioning anchor for the hamburger + dropdown */
#id_HFV4Tsg,
#id_HFV4Tsg .menuInner {
  position: relative !important;
}

/* -------------------------
   Desktop: even spacing
   ------------------------- */
@media (min-width: 616px) {

  /* Turn the top-level <ul> into a flex row so items can share width evenly */
  #id_HFV4Tsg .menuInner > ul.firstLevel {
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* Each <li> takes equal width */
  #id_HFV4Tsg .menuInner > ul.firstLevel > li {
    flex: 1 1 0 !important;
    float: none !important;              /* disables old float-based menu layout */
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* Make the clickable area fill each slot and center the text */
  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item,
  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item > a {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Keep dropdown sizing normal (don’t stretch submenus to full width) */
  #id_HFV4Tsg .menuInner > ul.firstLevel > li ul.secondLevel {
    width: auto !important;
  }

  /* Prevent menu labels from wrapping (keeps nav tidy) */
  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item > a span {
    white-space: nowrap !important;
  }
}

/* -------------------------
   Mobile: WA controls toggle;
   we only position button + dropdown visually
   ------------------------- */
@media (max-width: 616px) {

  /* Do NOT force display on this <ul>. WA needs to hide/show it.
     We ONLY set positioning and sizing. */
  #id_HFV4Tsg .menuInner > ul.firstLevel {
    width: auto !important;

    /* Position the opened menu near the hamburger.
       These negative values are what you set to align it in your header. */
    position: absolute !important;
    top: -122px !important;
    right: -20px !important;
    left: auto !important;

    /* Mobile dropdown size: max 320px, but never exceed screen width */
    width: min(320px, calc(100vw - 40px)) !important;

    margin: 0 !important;
    padding: 0 !important;

    /* Make sure it sits above the page content */
    z-index: 9998 !important;

    /* Visual dropdown styling */
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.2) !important;
    border-radius: 8px !important;
  }

  /* Undo desktop "flex" leftovers so the mobile list behaves like a normal list */
  #id_HFV4Tsg .menuInner > ul.firstLevel > li,
  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item,
  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item > a {
    flex: none !important;
  }

  /* Make each menu row full width inside the dropdown */
  #id_HFV4Tsg .menuInner > ul.firstLevel > li {
    width: 100% !important;
    display: block !important;
  }

  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item > a {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    text-align: left !important;
  }

  /* Hamburger button: force it to exist + move it where you want */
  #id_HFV4Tsg .menuButton {
    display: block !important;

    /* These values place it into the top-right header area for your layout */
    position: absolute !important;
    top: -192px !important;
    right: -20px !important;
    left: auto !important;

    margin: 0 !important;
    z-index: 9999 !important;

    background-color: white;
    color: black;
  }
}

html {
  background: white;
}