@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* APHMG - sitewide CSS (2026 Brand Guidelines + Open Sans).
   Paste into Wild Apricot: Website > CSS, replacing the current contents.
   Block comments only. To change a color later, edit it once in :root.
   Design system: https://claude.ai/artifact/HaowzboBzGC6b7fCTaQBq1 */

:root {
  --aphmg-eggplant:      #710F70;  /* primary: menu, links, main buttons */
  --aphmg-eggplant-deep: #4A0A48;  /* hover states */
  --aphmg-forest-green:  #267A32;  /* text-safe green */
  --aphmg-helix-green:   #5EBB46;  /* shapes and rules only, never text */
  --aphmg-burnt-orange:  #B4540F;  /* text-safe orange */
  --aphmg-burnt-dark:    #8F430C;  /* burnt orange hover */
  --aphmg-ink:           #1A1A1A;
}

/* ---- Links ---- */
A, A:link, A:active, A:visited {
  color: #710F70;
  color: var(--aphmg-eggplant);
}
A:hover {
  color: #4A0A48;
  color: var(--aphmg-eggplant-deep);
}

/* ---- Buttons ----
   002 = "Become a member today" (was green #39B54A, white text failed contrast)
   003 = eggplant, same as 002
   001 = burnt orange (was #F26522, white text failed contrast) */
a.stylizedButton.buttonStyle001,
a.stylizedButton.buttonStyle002,
a.stylizedButton.buttonStyle003 {
  color: #FFFFFF;
  border-radius: 4px;
}
a.stylizedButton.buttonStyle002,
a.stylizedButton.buttonStyle003 {
  background-color: #710F70;
  background-color: var(--aphmg-eggplant);
}
a.stylizedButton.buttonStyle002:hover,
a.stylizedButton.buttonStyle003:hover {
  background-color: #4A0A48;
  background-color: var(--aphmg-eggplant-deep);
  color: #FFFFFF;
}
a.stylizedButton.buttonStyle001 {
  background-color: #B4540F;
  background-color: var(--aphmg-burnt-orange);
}
a.stylizedButton.buttonStyle001:hover {
  background-color: #8F430C;
  background-color: var(--aphmg-burnt-dark);
  color: #FFFFFF;
}

/* ---- Log in button ---- */
.WaGadgetLoginForm .loginContainerForm[class*=orientation] form .loginAction input.loginButton,
.WaGadgetLoginButton .loginBoxLinkContainer .loginBoxLinkButton {
  background-color: #710F70;
  background-color: var(--aphmg-eggplant);
  color: #FFFFFF;
}
.WaGadgetLoginForm .loginContainerForm[class*=orientation] form .loginAction input.loginButton:hover,
.WaGadgetLoginButton .loginBoxLinkContainer .loginBoxLinkButton:hover {
  background-color: #4A0A48;
  background-color: var(--aphmg-eggplant-deep);
}

/* ---- Menu bar (Menu style 002, the one in use) ----
   Hover and current page: white text on Deep Eggplant with a helix-green underline.
   The old lavender #BC8DBF hover failed contrast in the drop-downs. */
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul.firstLevel,
.WaGadgetMenuHorizontal.menuStyle002 .menuBackground {
  background: #710F70;
  background: var(--aphmg-eggplant);
}
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul.firstLevel > li > .item:hover > a,
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul.firstLevel > li.sel > .item > a,
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul.firstLevel > li.sel > .item:hover > a {
  color: #FFFFFF;
  background-color: #4A0A48;
  background-color: var(--aphmg-eggplant-deep);
  box-shadow: inset 0 -4px 0 #5EBB46;
  box-shadow: inset 0 -4px 0 var(--aphmg-helix-green);
}
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul.secondLevel > li > .item > a {
  background-color: #710F70;
  background-color: var(--aphmg-eggplant);
  color: #FFFFFF;
}
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul ul.secondLevel > li > .item:hover > a,
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul ul.secondLevel > li:hover > .item > a,
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul.secondLevel > li.sel > .item > a,
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul.secondLevel > li.sel > .item:hover > a,
.WaGadgetMenuHorizontal.menuStyle002 .menuInner ul.secondLevel > li.sel:hover > .item > a {
  background-color: #4A0A48;
  background-color: var(--aphmg-eggplant-deep);
  color: #FFFFFF;
}

/* ---- Menu style 001 (not in use; was green #39B54A) ---- */
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.firstLevel,
.WaGadgetMenuHorizontal.menuStyle001 .menuBackground,
.WaGadgetMenuHorizontal.menuStyle001 .menuInner ul.secondLevel > li > .item > a {
  background: #267A32;
  background: var(--aphmg-forest-green);
}

/* ---- Gadget styles ----
   003 Forest Green, 004 Burnt Orange, 005 Eggplant (white titles pass on all three) */
.gadgetStyle003 .gadgetStyleTitle {
  padding: 12px 20px 14px 20px;
  background: #267A32;
  background: var(--aphmg-forest-green);
}
.gadgetStyle003 {
  background: white;
  border: 5px solid #267A32;
  border-color: var(--aphmg-forest-green);
}

.gadgetStyle004 .gadgetStyleTitle {
  padding: 12px 20px 14px 20px;
  background: #B4540F;
  background: var(--aphmg-burnt-orange);
}
.gadgetStyle004 {
  background: white;
  border: 5px solid #B4540F;
  border-color: var(--aphmg-burnt-orange);
}

.gadgetStyle005 .gadgetStyleTitle {
  padding: 12px 20px 14px 20px;
  background: #710F70;
  background: var(--aphmg-eggplant);
}
.gadgetStyle005 {
  background: white;
  border: 5px solid #710F70;
  border-color: var(--aphmg-eggplant);
}

/* ---- Open Sans sitewide (icon fonts excluded) ---- */

body,
h1, h2, h3, h4, h5, h6,
p, li, td, th, dt, dd, blockquote, label, legend, caption,
input, select, textarea, button,
a:not([class*="icon"]):not([class*="Icon"]),
span:not([class*="icon"]):not([class*="Icon"]):not([class*="fa"]):not([class*="glyph"]),
strong, em, b, small,
.gadgetStyleTitle, .gadgetStyleBody,
.WaGadgetMenuHorizontal, .WaGadgetMenuVertical, .WaGadgetMobilePanel,
.WaGadgetContent, .WaGadgetEvents, .WaGadgetLoginForm {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
}

body, p, li { font-weight: 400; line-height: 1.6; }
h1, h2, h3 { font-weight: 700; }
h4, h5, h6 { font-weight: 600; }
strong, b { font-weight: 700; }