/* Prevent default Terra background photo from flashing on page load */
html,
body,
.WaLayoutBody,
.WaPlaceHolderBody,
.WaPlaceHolderHeader,
.WaPlaceHolderOuterHeader,
#id_Header,
#id_Header1,
#id_Header2 {
  background-image: none !important;
  background-color: #ffffff !important; /* Match your actual page background color */
}

/* Add breathing room to the left of the Terra horizontal menu */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner,
.WaGadgetMenuHorizontal.menuStyle001 .menuBackground {
  padding-left: 20px !important;
}

/* 1. WCAG-accessible border around horizontal dropdown menus */
.WaGadgetMenuHorizontal .menuInner ul ul,
.WaGadgetMenuHorizontal ul.level1 ul,
.WaGadgetMenuHorizontal ul.firstLevel ul {
  border: 1px solid #737c8c !important;
  box-shadow: 0 4px 12px rgba(27, 38, 84, 0.12) !important;
}

/* 2. Subtle divider lines between individual dropdown items */
.WaGadgetMenuHorizontal .menuInner ul ul li + li,
.WaGadgetMenuHorizontal ul.level1 ul li + li,
.WaGadgetMenuHorizontal ul.firstLevel ul li + li {
  border-top: 1px solid #f0f4fa !important;
}

/* 1. WCAG-accessible border around horizontal dropdown menus */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.secondLevel {
  border: 1px solid #737c8c !important;
  box-shadow: 0 4px 12px rgba(27, 38, 84, 0.12) !important;
}

/* 2. Subtle divider lines between individual dropdown items */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.secondLevel > li + li {
  border-top: 1px solid #f0f4fa !important;
}

/* 3. Active top-level menu text in Warm Gold */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li.sel > .item > a,
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li.sel > .item > a span,
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li.dir:has(li.sel) > .item > a,
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li.dir:has(li.sel) > .item > a span {
  background-color: transparent !important;
  background-image: none !important;
  color: #ffc107 !important;
}

/* 4. Crisp gold underline sized ONLY to the text width (attached to span, not a) */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li.sel > .item > a span,
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li.dir:has(li.sel) > .item > a span {
  border-bottom: 3px solid #ffc107 !important;
  padding-bottom: 6px !important;
}

/* 5. Hide Terra's built-in white dot under active items so it doesn't collide */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li.sel > .item > a span::after {
  display: none !important;
}

/* 6. Keep dropdown triangle arrow aligned and gold when a subpage is active */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li.dir:has(li.sel) > .item > a span::after {
  border-top-color: #ffc107 !important;
}

/* 7. Hover state on menu tabs */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li:hover > .item > a,
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel > li:hover > .item > a span {
  color: #ffc107 !important;
}

/* Change 'Powered by Wild Apricot' text and links to deep teal */
#idFooterPoweredByWA,
#idFooterPoweredByWA span,
#idFooterPoweredByWA a {
  color: #00696b !important;
}

/* Optional: Ensure teal color persists on hover for the link */
#idFooterPoweredByWA a:hover {
  color: #1b2654 !important;
  text-decoration: underline !important;
}

/* WCAG 2.1 AA keyboard focus outline across links, buttons, and form inputs */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.WaGadgetMenuHorizontal a:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* Ensure Terra navigation containers don't clip the 2px offset outline */
.WaGadgetMenuHorizontal,
.WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal ul.firstLevel,
.WaGadgetMenuHorizontal ul.firstLevel > li,
.WaGadgetMenuHorizontal ul.firstLevel > li > .item {
  overflow: visible !important;
}