/* =========================================================
   Site-specific utility styles
   ========================================================= */

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

.footer_links { /* fix footer links on main page */
  color: white;
  font-family: Arial, sans-serif;
  font-style: normal;
  padding: 5px;
  line-height: 1.5;
}

.biopic { /* round corners on BoD Bio page pics */
  border-radius: 10px;
}

.mo_links {
  text-align: right;
  text-decoration: none;
}

/* =========================================================
   Skyline Midtown layout overrides
   Goals:
   - Header + black banner + footer = full-width bands
   - Main content = 20px side padding
   ========================================================= */

/* 0) Kill default margins + prevent tiny overflow seams */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

#mLayout, .mLayout, .layoutMain {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 1) Make the Skyline grid container full width */
.container_12 {
  width: 100% !important;
  max-width: none !important;
}

/* 2) Expand inner grid rows to full width + remove grid offsets */
.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;
}

/* 3) Remove rounded “boxed” look */
.zoneRoundedCorners {
  border-radius: 0 !important;
}

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

/* 5) Main content padding rule */
.zoneContentInner {
  box-sizing: border-box !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* 6) Header/footer bands are full-bleed (no inner padding added by theme) */
.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;
}

/* 7) Black banner gadget full-bleed, with text aligned to 20px */
#id_kJFvoJ3 {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#id_kJFvoJ3 .gadgetStyleBody {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* 8) Branding zone: keep DOM but remove its footprint */
.zoneBrandingOuter,
.zoneBrandingOuter * {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* =========================================================
   Sticky footer: footer sits at bottom on short pages
   Works across Skyline Midtown pages (LayoutMain + #mLayout)
   ========================================================= */

html, body {
  height: 100% !important;
}

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

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

/* This is the key: content expands to fill remaining height */
.zoneContentOuter {
  flex: 1 0 auto !important;
}

/* Footer zones don't shrink / don't float upward */
.zoneFooterOuter,
.zoneFooter1Outer,
.zoneBrandingOuter {
  flex: 0 0 auto !important;
}



/* =========================================================
   NAV: desktop evenly-spaced, mobile uses WA default toggle
   ========================================================= */

/* Desktop only: evenly spaced */
@media (min-width: 616px) {
  #id_HFV4Tsg .menuInner > ul.firstLevel {
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  #id_HFV4Tsg .menuInner > ul.firstLevel > li {
    flex: 1 1 0 !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item {
    width: 100% !important;
    display: flex !important;
  }

  #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;
  }

  /* dropdown sizing */
  #id_HFV4Tsg .menuInner > ul.firstLevel > li ul.secondLevel {
    width: auto !important;
  }

  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item > a span {
    white-space: nowrap !important;
  }
}

/* Mobile: let WA control open/close. Only undo desktop leftovers. */
@media (max-width: 616px) {
  /* IMPORTANT: do NOT set display on ul.firstLevel */
  #id_HFV4Tsg .menuInner > ul.firstLevel {
    width: auto !important;
  }

  #id_HFV4Tsg .menuInner > ul.firstLevel > li,
  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item,
  #id_HFV4Tsg .menuInner > ul.firstLevel > li > .item > a {
    flex: none !important;
  }

  /* hamburger should exist */
  #id_HFV4Tsg .menuButton {
    display: block !important;
  }
}


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

/* MOBILE: put hamburger top-right */
@media (max-width: 616px) {
  #id_HFV4Tsg .menuButton {
    position: absolute !important;
    top: -200px !important;
    right: -20px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 9999 !important;
    background-color: white;
    color: black;
  }

    /* Position the opened menu under the hamburger */
  #id_HFV4Tsg .menuInner > ul.firstLevel {
    position: absolute !important;
    top: -130px !important; /* adjust: distance below hamburger */
    right: -20px !important;        /* align with hamburger */
    left: auto !important;

    width: min(320px, calc(100vw - 40px)) !important;  /* nice mobile width */
    margin: 0 !important;
    padding: 8px 0 !important;

    z-index: 9998 !important;      /* below the icon, above page */
    background: #fff !important;   /* or whatever matches your theme */
    box-shadow: 0 10px 30px rgba(0,0,0,.2) !important;
    border-radius: 8px !important;
  }

  /* Make each item full-width inside that 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;
  }
}