/* =========================================================
   1) Small, site-specific helper styles
   (These are one-off tweaks to certain elements.)
   ========================================================= */

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

/* Footer links on the main page */
.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 specific link blocks */
.mo_links {
  text-align: right;
  text-decoration: none;
}


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

/* Remove browser default spacing and prevent tiny horizontal scroll bars */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;          /* required for sticky footer flex layout */
  overflow-x: hidden !important;     /* prevents 1px seams from full-bleed areas */
}

/* WildApricot main layout wrapper – remove any extra spacing/width limits */
#mLayout,
.mLayout,
.layoutMain {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Skyline “container_12” is normally fixed width; make it fluid */
.container_12 {
  width: 100% !important;
  max-width: none !important;
}

/* Grid rows / cells – remove offsets/margins 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 layout is not “boxed” */
.zoneRoundedCorners {
  border-radius: 0 !important;
}

/* Remove built-in left/right gutters on major zones
   (we’ll add the padding we want on content only) */
.zoneHeader,
.zoneHeader1,
.zoneHeader12,
.zoneContent,
.zoneFooter,
.zoneFooter1,
.zoneBranding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Main content gets consistent 20px padding on both sides */
.zoneContentInner {
  box-sizing: border-box !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Header/footer inner zones: full-bleed bands with no extra 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;  /* the band color; adjust if you want a different header/footer bg */
}

/* Black banner gadget: background should run full browser width */
#id_kJFvoJ3 {
  width: 100vw !important;                          /* full viewport width */
  margin-left: calc(50% - 50vw) !important;         /* pull out of container */
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Black banner text still lines up with the normal 20px content padding */
#id_kJFvoJ3 .gadgetStyleBody {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}


/* =========================================================
   3) Sticky footer (footer stays at bottom on short pages)
   ========================================================= */

/* Treat the body as a vertical flex container */
body.LayoutMain {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

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

/* Content zone grows to fill leftover height, pushing footer down */
.zoneContentOuter {
  flex: 1 0 auto !important;
}

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

/* Optional: extra padding/black background on the primary footer band */
.zoneFooter1Outer {
  padding-bottom: 40px;
  background: black;
}

/* Hide WildApricot’s tiny “Powered by” branding bar at the very bottom */
.zoneBrandingOuter {
  display: none !important;
}


/* =========================================================
   4) Navigation menu behavior
   GOALS:
   - Desktop: top-level links spread evenly across the available width
   - Mobile:
       * WA hamburger controls open/close
       * Fullscreen overlay when open
       * Overlay itself scrolls
       * Background page does NOT scroll
   ========================================================= */

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

/* -------------------------
   Desktop (>= 617px): even spacing
   ------------------------- */
@media (min-width: 617px) {

  /* Flex row so items 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;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* Clickable area fills slot, centered 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;
  }

  /* Submenus behave normally */
  #id_HFV4Tsg .menuInner > ul.firstLevel > li ul.secondLevel {
    width: auto !important;
  }
}

/* When nav is open, stop background scroll */
html.nav-lock,
body.nav-lock {
  overflow: hidden !important;
  height: 100% !important;
}

/* ============================================
   MOBILE NAV OVERLAY (<= 616px)
   - Full-screen menu
   - Own scroll area
   - Close button + WA hamburger
   ============================================ */
@media (max-width: 616px) {





/* ============================
   Fix ALL phantom sections
   (About PFC, Our Work, Events, Membership, Donate, Forums)
   ============================ */

/* 1) Hide the ≡ label itself */
#id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li.phantom > .item > a {
  display: none !important;
}

/* 2) Treat phantom's first secondLevel as a flat list of
      promoted top-level sections (About PFC, Our Work, ...) */
#id_HFV4Tsg .menuInner.mobileView li.phantom > .item > ul.secondLevel {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  list-style: none !important;
}

/* Each of those children is a full-width "section header" row */
#id_HFV4Tsg .menuInner.mobileView li.phantom > .item > ul.secondLevel > li {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

/* Style the section header link itself to look like a top-level item */
#id_HFV4Tsg .menuInner.mobileView li.phantom > .item > ul.secondLevel > li > .item > a {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  float: none !important;

  /* Optional: mimic WA's top-level styling */
  text-transform: uppercase;
  font-weight: 600;
}

/* 3) Now fix ALL grandchildren under those sections
      (Our Mission, Activism and Social Justice, etc.) */

/* The nested UL that holds the real sub-items */
#id_HFV4Tsg .menuInner.mobileView li.phantom ul.secondLevel li ul.secondLevel {
  position: static !important;
  padding: 0 0 0 24px !important;  /* indent under the section header */
  margin: 0 !important;
  width: 100% !important;
  list-style: none !important;
}

/* Each sub-item row */
#id_HFV4Tsg .menuInner.mobileView li.phantom ul.secondLevel li ul.secondLevel > li {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

/* Sub-item link styling (same as "Is This You?") */
#id_HFV4Tsg .menuInner.mobileView li.phantom ul.secondLevel li ul.secondLevel > li > .item > a {
  display: block !important;
  width: 100% !important;
  padding: 10px 20px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  float: none !important;
}







  /* Make sure the container itself does NOT clip the overlay. */
  #id_HFV4Tsg .menuInner.mobileView {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Full-screen overlay for the mobile UL.
     WA controls display (block/none); we control position/scroll. */
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    min-height: 100vh !important;
    max-height: none !important;

    margin: 0 !important;

    /* space at top for hamburger + close button */
    padding: 64px 0 24px !important;

    list-style: none !important;
    background: #ffffff !important;
    z-index: 2000 !important;

    overflow-y: auto !important;          /* menu itself scrolls */
    -webkit-overflow-scrolling: touch;
  }

  /* Top-level items: full-width vertical list */
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li {
    float: none !important;
    display: block !important;
    width: 100% !important;
  }

  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li > .item > a {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Second-level (dropdown) items: default indented list */
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li ul.secondLevel {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 24px !important;
    box-sizing: border-box !important;
  }

  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li ul.secondLevel > li > .item > a {
    display: block !important;
    padding: 10px 0 !important;
  }

  /* ============================================
     FIX: WildApricot "phantom" item on mobile
     WA shoves most items under:
       li.phantom > .item > ul.secondLevel
     We make those act like normal top-level rows
     in the fullscreen overlay.
     ============================================ */

  /* Hide the phantom's own "≡" label; we already have a hamburger. */
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li.phantom > .item > a {
    display: none !important;
  }

  /* Make the phantom's submenu visible and flat (no indent). */
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li.phantom > .item > ul.secondLevel {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;               /* override generic 24px indent */
    list-style: none !important;
    width: 100% !important;
  }

  /* Each child of that submenu is a full-width row. */
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li.phantom > .item > ul.secondLevel > li {
    display: block !important;
    width: 100% !important;
  }

  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li.phantom > .item > ul.secondLevel > li > .item > a {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;       /* match top-level row padding */
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Hamburger button: fixed top-right */
  #id_HFV4Tsg .menuButton {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 2100 !important;
    display: block !important;
  }

  /* Close button: fixed top-left (injected by JS) */
  .wa-mobile-close {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 2101 !important;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

    /* -----------------------------------------
     Normalize ALL section headers on mobile:
     - real top-level dirs (ABOUT FREETHOUGHT,
       ABOUT PFC, …)
     - phantom-promoted dirs (OUR WORK, EVENTS, …)
     ----------------------------------------- */
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li.dir > .item > a > span,
  #id_HFV4Tsg .menuInner.mobileView li.phantom > .item > ul.secondLevel > li.dir > .item > a > span {
    display: block !important;
    padding: 14px 20px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-style: normal !important;
    letter-spacing: 0.03em !important;
    /* let color be controlled by WA so the active item
       highlight (yellow) still works */
    color: inherit;
  }

  /* -----------------------------------------
     Normalize ALL sub-items (children under any dir)
     so they look like “Is This You?”
     ----------------------------------------- */
  #id_HFV4Tsg .menuInner.mobileView ul.secondLevel li:not(.dir) > .item > a > span,
  #id_HFV4Tsg .menuInner.mobileView ul.secondLevel li.dir ul.secondLevel > li > .item > a > span {
    display: block !important;
    padding: 10px 20px !important;
    text-align: left !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: none !important;
    color: inherit;
  }
}















/* =========================================================
   MOBILE MENU: make grouped sections look like normal items
   (ABOUT FREETHOUGHT / ABOUT PFC / OUR WORK / EVENTS / MEMBERSHIP)
   ========================================================= */
@media (max-width: 616px) {

  /* 1) Section labels (the ones that currently look grey/italic) */
  #id_HFV4Tsg .menuInner.mobileView ul.secondLevel > li.dir > .item > a,
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li.dir > .item > a {
    /* visually match HOME / DONATE */
    font-style: normal !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #333333 !important;

    display: block !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    border-top: 1px solid #e0e0e0 !important;
  }

  /* 2) Their children (real page links under each section) */
  #id_HFV4Tsg .menuInner.mobileView ul.secondLevel > li.dir > ul.secondLevel > li > .item > a {
    font-style: normal !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #555555 !important;

    display: block !important;
    padding: 10px 32px !important;   /* indent under the section label */
    box-sizing: border-box !important;
    border-top: none !important;
  }

  /* 3) Hide the phantom "≡" label itself; we only want its children */
  #id_HFV4Tsg .menuInner.mobileView > ul.firstLevel > li.phantom > .item > a {
    display: none !important;
  }
}