/* =============================================================
   ANSA SITE STYLES: Whiteboard (Maya Blue) theme
   Paste into the Website CSS page, replacing what is there.
   Part 1 styles the header. Part 2 styles the new homepage
   sections. Neither affects other page content.
   ============================================================= */


/* =============================================================
   PART 1: HEADER
   ============================================================= */


/* ---------- Header area: white with a thin line underneath ---------- */
.zoneHeader1 {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D9DFE8;
}
.WaPlaceHolderHeader {
  font-family: Arial, Helvetica, sans-serif;
}


/* ---------- Logo: no fixed height, no stray line under it ---------- */
.WaPlaceHolderHeader .WaGadgetContent:has(.ansa-logo) {
  height: auto !important;
  margin: 0 !important;
}
.WaPlaceHolderHeader .WaGadgetContent:has(.ansa-logo) p {
  margin: 0 !important;
  line-height: 0 !important;
}
.WaPlaceHolderHeader .ansa-logo,
.WaPlaceHolderHeader .ansa-logo a {
  display: block;
  line-height: 0;
}
.WaPlaceHolderHeader .ansa-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64px;
  border: 0;
}


/* ---------- Menu: remove the full-width blue bar ---------- */
.WaPlaceHolderHeader .WaGadgetMenuHorizontal .menuBackground {
  display: none !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal {
  margin-bottom: 0 !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal .menuInner,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li > .item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* ---------- Menu: top-level links ---------- */
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li > .item > a {
  background: transparent !important;
  color: #001A4E !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  height: auto !important;
  padding: 10px 10px 7px !important;
  border-bottom: 3px solid transparent !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li > .item > a span {
  color: inherit !important;
}
/* Gold underline on hover and on the current section */
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li > .item:hover > a,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a {
  color: #001A4E !important;
  border-bottom-color: #E8C97A !important;
}


/* Remove the theme's own pointer on the current item */
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel::before,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel::after,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item::before,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item::after,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a::before,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a::after,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a span::before,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a span::after {
  display: none !important;
}

/* Homepage: the homepage sits under "About ANSA" in the menu, so don't
   mark that item as the current section there (hover still works).
   Applies to any page containing the homepage hero block. */
body:has(.ansa-home) .WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item > a {
  border-bottom-color: transparent !important;
}
body:has(.ansa-home) .WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.sel > .item:hover > a {
  border-bottom-color: #E8C97A !important;
}


/* ---------- Menu: dropdowns ---------- */
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel {
  background: #FFFFFF !important;
  border: 1px solid #D9DFE8 !important;
  border-top: 3px solid #E8C97A !important;
  box-shadow: 0 8px 24px rgba(0, 26, 78, 0.12) !important;
  padding: 6px 0 !important;
  min-width: 240px;
}
/* Keep dropdowns open while the mouse moves down into them:
   attach them to the bottom of their menu item, add an invisible
   strip that bridges any gap, and keep them above the page below */
.zoneHeader1 {
  position: relative;
  z-index: 50;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal {
  position: relative;
  z-index: 100;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li > .item {
  position: relative !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li > .item > ul.secondLevel {
  top: 100% !important;
  margin-top: 0 !important;
  z-index: 1000 !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li > .item > ul.secondLevel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: transparent;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel li,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel .item {
  background: transparent !important;
  border: 0 !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel > li > .item > a {
  background: transparent !important;
  color: #1C2638 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  padding: 9px 16px !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel > li > .item > a span {
  color: inherit !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel > li:hover > .item > a,
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel > li > .item:hover > a {
  background: #F3F5F9 !important;
  color: #001A4E !important;
}
.WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel > li.sel > .item > a {
  color: #001A4E !important;
  font-weight: 700 !important;
}


/* ---------- Menu: one line, on the right, on larger screens ----------
   Items that don't fit go into the theme's own "≡" item at the end,
   so the menu adjusts itself as pages are added or renamed. */
@media (min-width: 617px) {
  .WaPlaceHolderHeader .WaGadgetMenuHorizontal .menuInner {
    text-align: right;
  }
  .WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    vertical-align: top;
    text-align: left;
  }
  /* Keep the last item's dropdown on screen */
  .WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel > li.last-child > .item > ul.secondLevel {
    left: auto !important;
    right: 0 !important;
  }
}


/* ---------- Menu: phones (the theme switches below 617px) ---------- */
.WaPlaceHolderHeader .WaGadgetMenuHorizontal .menuButton {
  background-color: #001A4E !important;
  border-radius: 4px;
}
@media (max-width: 616px) {
  .WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.firstLevel {
    background: #FFFFFF !important;
    border-top: 1px solid #D9DFE8 !important;
  }
  .WaPlaceHolderHeader .WaGadgetMenuHorizontal ul.secondLevel {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 6px 12px !important;
    min-width: 0;
  }
}


/* ---------- Join ANSA and Member log in, side by side ---------- */
.WaPlaceHolderHeader .WaGadgetContent:has(.ansa-join),
.WaPlaceHolderHeader .WaGadgetLoginButton {
  display: inline-block !important;
  vertical-align: middle;
  width: auto !important;
  margin: 8px 10px 0 0 !important;
}
.WaPlaceHolderHeader .WaGadgetContent:has(.ansa-join) p {
  margin: 0 !important;
}
/* Hide Join ANSA when someone is signed in */
body.memberContentView .WaPlaceHolderHeader .WaGadgetContent:has(.ansa-join) {
  display: none !important;
}

/* Signed out: outlined navy log-in button */
.WaPlaceHolderHeader .WaGadgetLoginButton a,
.WaPlaceHolderHeader .WaGadgetLoginButton input[type="submit"],
.WaPlaceHolderHeader .WaGadgetLoginButton button {
  display: inline-flex !important;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 18px !important;
  border: 2px solid #001A4E !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  color: #001A4E !important;
  font: 700 15px Arial, Helvetica, sans-serif !important;
  text-decoration: none !important;
  cursor: pointer;
}
.WaPlaceHolderHeader .WaGadgetLoginButton a:hover,
.WaPlaceHolderHeader .WaGadgetLoginButton input[type="submit"]:hover,
.WaPlaceHolderHeader .WaGadgetLoginButton button:hover {
  background: #001A4E !important;
  color: #FFFFFF !important;
}

/* Signed in: one slim line of text links, like the old header */
.WaPlaceHolderHeader .WaGadgetLoginButton:has(.loginBoxLogout) .alignLeft {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 !important;
  padding: 8px 0 !important;
}
.WaPlaceHolderHeader .WaGadgetLoginButton:has(.loginBoxLogout) .alignLeft > * {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.WaPlaceHolderHeader .WaGadgetLoginButton:has(.loginBoxLogout) .loginBoxProfileLink {
  display: inline !important;
  margin: 0 !important;
}
.WaPlaceHolderHeader .WaGadgetLoginButton:has(.loginBoxLogout) a {
  display: inline !important;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  color: #001A4E !important;
  font: 400 13px Arial, Helvetica, sans-serif !important;
  text-decoration: underline !important;
  white-space: nowrap;
}
.WaPlaceHolderHeader .WaGadgetLoginButton:has(.loginBoxLogout) .loginBoxProfileLink a {
  font-weight: 700 !important;
  text-decoration: none !important;
}
.WaPlaceHolderHeader .WaGadgetLoginButton:has(.loginBoxLogout) a:hover {
  background: transparent !important;
  color: #334B7A !important;
}
.WaPlaceHolderHeader .WaGadgetLoginButton:has(.loginBoxLogout) .loginBoxProfileLink a:hover {
  text-decoration: underline !important;
}


/* =============================================================
   PART 2: HOMEPAGE SECTIONS
   Each section is a Custom HTML gadget whose content is marked
   with the class "ansa-band".
   ============================================================= */

/* No gaps around the section gadgets */
.zoneContent .WaGadgetCustomHTML:has(.ansa-band),
.zoneContent .WaGadgetCustomHTML:has(.ansa-band) .gadgetStyleBody {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Section colours run the full width of the window */
.zoneContent .ansa-band {
  clip-path: inset(0 -100vmax);
}
.zoneContent .ansa-bg-navy {
  box-shadow: 0 0 0 100vmax #001A4E;
}
.zoneContent .ansa-bg-white {
  box-shadow: 0 0 0 100vmax #FFFFFF;
}
.zoneContent .ansa-bg-grey {
  box-shadow: 0 0 0 100vmax #F3F5F9;
}

/* Keep the theme's text, heading and table styles out of the sections */
.zoneContent .ansa-band,
.zoneContent .ansa-band * {
  font-family: Arial, Helvetica, sans-serif !important;
}
.zoneContent .ansa-band h1,
.zoneContent .ansa-band h2,
.zoneContent .ansa-band h3,
.zoneContent .ansa-band h4,
.zoneContent .ansa-band h5,
.zoneContent .ansa-band h6,
.zoneContent .ansa-band button {
  text-transform: none !important;
}
.zoneContent .ansa-band table {
  border: 0 !important;
}
.zoneContent .ansa-band th,
.zoneContent .ansa-band td {
  border: 0 !important;
  vertical-align: top;
}

/* Pages built from these sections: no gap between the header and
   the first section, or between the last section and the footer */
.zoneContent:has(.ansa-band),
.zoneContent:has(.ansa-band) .container_12 > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Upcoming events gadget on these pages: sits in a grey band, so on
   the homepage it continues the grey Learn section */
.zoneContent:has(.ansa-band) .WaGadgetUpcomingEvents {
  display: flow-root !important;
  margin: 0 !important;
  padding: 8px 24px 72px !important;
  background: #F3F5F9 !important;
  box-shadow: 0 0 0 100vmax #F3F5F9;
  clip-path: inset(0 -100vmax);
  font-family: Arial, Helvetica, sans-serif;
}

/* Anything marked "ansa-hide-signed-in" is hidden once someone is
   signed in (for example the log-in button on the professionals page) */
body.memberContentView .ansa-hide-signed-in {
  display: none !important;
}

/* Public page, feedback loop diagram: when the space is too narrow to
   read the diagram (mainly phones), a stacked version replaces it */
.ansa-loop {
  container-type: inline-size;
}
@container (max-width: 400px) {
  .ansa-loop .ansa-loop-wide {
    display: none !important;
  }
  .ansa-loop .ansa-loop-narrow {
    display: flex !important;
  }
}