/* ====== Global resets & helpers ====== */
*,
*::before,
*::after { box-sizing: border-box; }

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

img,
video { max-width: 100%; height: auto; display: block; }

/* Font fallbacks */
:root {
  --font-sans-1: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans-2: "Avenir Next", "Avenir", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --brand-blue: #213E8C;
}

/* ====== Banner & placeholders ====== */
.main-banner {
  height: auto;
  overflow: hidden;
  position: relative;
}

/* Keep a single, predictable rule */
.main-banner .WaPlaceHolder {
  position: relative;
  left: 0;
  top: 0;
  transform: translate(0, 0);
}

/* ====== Blog styles ====== */
.blog-item { border: 1px solid #ddd; }

.blog-single {
  padding: 50px 10%;
}
.blog-single h2 {
  font: normal normal 600 40px/1.4 var(--font-sans-1);
}

/* ====== Forms ====== */
.form-title {
  font: normal normal 600 40px/1.4 var(--font-sans-1);
  color: #333333;
  margin-top: 60px;
}
.form-group textarea { min-height: 120px; }
.form-group .typeText,
.form-group .captchaCode {
  padding: 5px;
  border: none;
  border-bottom: 1px solid rgba(51, 51, 51, 1);
  border-radius: 0;
  margin: 0 0 5px;
  font: normal normal 400 15px/1.4 var(--font-sans-2);
}
.captchaCode { margin-bottom: 20px !important; }

input[name*="sendButton"] {
  width: auto;
  margin: auto;
  font: normal 700 18px/1.4 var(--font-sans-1);
  color: var(--brand-blue);
  border: none;
  padding-left: 30px;
  padding-right: 30px;
}
input[name*="sendButton"]:hover { border: 1px solid var(--brand-blue); }

/* ====== Utility backgrounds ====== */
.grey-bg { background: rgb(102, 102, 102); color: #fff; }
.bg-dark { background-color: rgba(47, 46, 46, 1) !important; }

.below-banner .col-sm-4 { padding-top: 39px; padding-bottom: 39px; }

/* ====== Mission boxes ====== */
.mission-boxes {
  font: normal normal 400 18px/1.4 var(--font-sans-2);
}
.mission-boxes h2 {
  font: normal normal 600 45px/1.2 var(--font-sans-1);
}
.mission-boxes .p-0 {
  background-size: cover;
  background-position: center;
}
.mission-boxes .d-flex > div {
  max-width: 418px;
  margin: auto;
  padding: 120px 0; /* reduced from 186px for mobile comfort */
}

/* ====== News / Events ====== */
.news-content,
.events-content { padding-bottom: 100px; }
.WaGadgetEvents .boxInfoContainer ul.boxInfo li > div { margin-bottom: .5em; }

/* ====== Footer & links ====== */
.fieldSubContainer > .fieldLabel { width: 25%; }
.bg-blue a,
.bg-grey a { color: #fff; text-decoration: none; }
#main-footer .btn {
  width: 100%;
  text-decoration: none;
  border-radius: 0;
}

/* ====== Login dropdown ====== */
.login-area { position: relative; }
.login-area .dropdown-links {
  position: absolute;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border-left: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  display: none;
  z-index: 999;
  background: #fff;
}
.login-area .dropdown-links li { list-style: none; }
.login-area .dropdown-links li a {
  text-align: center;
  font-size: 14px !important;
  padding: 15px 25px !important;
  color: #7d7d7d !important;
  display: block;
}
.login-area:hover > a {
  background: #bcc5dc !important;
  color: #324b92 !important;
}
.login-area .dropdown-links li a:hover { color: #fff !important; background: #324b92; }
.login-area:hover .dropdown-links { display: block; }

/* ====== Page content wrappers ====== */
.page-content.bg-colors { background: #e6e6e6; }
.page-content .contents { background: #fff; }
.page-content .contents-header { background: #b4b4b4; }
.contents-header .container { padding: 0; }

/* ====== Directory: make sure it actually shows ====== */
#membersTable {
  display: table !important; /* was none; this blocked directory rendering on phones */
  width: 100%;
}

.dp-container img { width: 100%; }

/* Alternate directory card styles */
#alter-directory a { color: #2faab7; }
#alter-directory .title a {
  color: #595959;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
}
#alter-directory p { font-size: 16px; }
#alter-directory em { margin-bottom: 10px; display: block; }

/* ====== Directory search area (normalize ID vs class usage) ====== */
#memberDirectorySearchArea label { display: none; }
#memberDirectorySearchArea .searchResult { display: none; }
#memberDirectorySearchArea input[type="text"] {
  width: 100%;
  margin: 20px 0;
  padding: 10px;
  font-size: 18px;
}
#memberDirectorySearchArea input[type="text"]::placeholder {
  text-align: center;
  color: #213e8c;
}

/* Some themes output .memberDirectorySearchArea as a class too */
.memberDirectorySearchArea .inner,
#memberDirectorySearchArea .inner { position: relative; }
.memberDirectorySearchArea .inner::before,
#memberDirectorySearchArea .inner::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  background: url('/resources/Pictures/search-duotone.png') no-repeat center center / contain;
  position: absolute;
  right: 10px;
  top: 32px;
}

/* ====== Directory pagination & advanced search ====== */
.advSearchContainerLink { margin-bottom: -20px; text-align: right; }
.advSearchContainerLink a { color: #fff; }
#FunctionalBlock1_ctl00_ctl00_advancedSearchStatusPanel_editSearchHyperLink {
  color: #fff;
  text-align: right;
  margin-bottom: -20px;
}
.dir-pagination li {
  display: inline-block;
  list-style: none;
  margin: 0 5px;
  font-size: 18px;
}
.dir-pagination a { color: #0d49ec !important; }
#idPagingData2 { font-size: 0; }
.top-pagination { text-align: right; }

.advanced-search-options {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s ease;
}
.advanced-search-options.visible { max-height: 400px; }
.advanced-search-options .col-sm-6 { margin: 20px 0; }
.clearAdvSearchContainer { display: none; }

.advancedSearchBtn {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: 120px;
  margin: 0;
  padding: 14px 18px 15px;
  background: #1f272b;
  border: 0;
  outline: 0;
  color: #6d7e88;
  font: normal 18px/1.22 'Ubuntu Condensed','Arial',sans-serif;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.advancedSearchBtn:hover { color: #fff; }

/* ====== Gadget scroll containment (was blocking page scroll) ====== */
.gadgetStyleBody.gadgetContentEditableArea {
  max-height: none;      /* allow full height on mobile */
  overflow: visible;     /* restore scrollability */
}

/* ====== Responsive ====== */

/* Small phones first */
@media (max-width: 380px) {
  #id_Logo { min-width: auto; font-size: 5vw; }
  #id_Logo a { font-size: 5vw; }
}

/* Phones & small tablets */
@media (max-width: 767px) {
  .navbar #id_Logo { padding: 20px 0; text-align: center; }
  .main-banner { height: auto; }
  .main-banner .WaPlaceHolder { position: relative; }
  .mobilePanel { display: none; } /* assuming intentional */
  .news-content .card + .card { margin-top: 10px; }
  .news-content .gadgetStyleTitle h4,
  .events-content .gadgetStyleTitle h4 { font-size: 32px !important; } /* reduced from 50px */
  #id_AFooterLeft { padding-bottom: 10px; }
  body.LayoutMain .WaGadgetMenuHorizontal { display: block; }
  #main-footer .col-sm-4 + .col-sm-4 { margin-top: 40px; }

  /* Mission padding smaller on mobile */
  .mission-boxes .d-flex > div { padding: 60px 0; }

  /* Keep directory fully usable on phones */
  #membersTable { display: table !important; table-layout: fixed; }
  #membersTable th, #membersTable td { word-wrap: break-word; }
}

/* Narrow laptops / landscape tablets */
@media (min-width: 992px) and (max-width: 1168px) {
  nav.navbar { margin-bottom: 42px; }

  .navbar #id_Logo {
    min-width: 100vw;
    text-align: center;
    display: block;
    padding: 20px 0;
  }

  #navbarSupportedContent {
    display: inline !important;
    position: absolute;
    top: 68px;
    width: 100%;
    background: rgba(47, 46, 46, 1) !important;
  }

  #id_Nav + div.form-inline {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
}

/* iOS Safari momentum scrolling for any overflow areas */
@supports (-webkit-overflow-scrolling: touch) {
  .scrollable,
  .gadgetStyleBody.gadgetContentEditableArea { -webkit-overflow-scrolling: touch; }
}