@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Figtree:wght@300;400;500;600;700&display=swap');

/* ---- TOKENS ---- */
:root {
  --navy:      #0C2340;
  --navy-md:   #163560;
  --navy-lt:   #1E4A82;
  --navy-dk:   #06142A;
  --gold:      #B8972C;
  --gold-lt:   #D4AF5A;
  --gold-pale: #F7EDD0;
  --cream:     #F9F5EC;
  --warm-wh:   #FDFBF7;
  --text:      #0C1B2E;
  --muted:     #4A5568;
  --rule:      #D4C4A0;
}

/* ---- BASE TYPOGRAPHY ---- */
/* Set html/body to navy so any zone gaps show dark, not white */
html {
  background-color: var(--navy) !important;
}

body {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: var(--text) !important;
  background-color: var(--navy) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

/* Content area gets the warm white background */
.zoneContent,
.WaPlaceHolderContent,
.zoneContent .WaLayoutItem,
.zoneContent .gadgetContentEditableArea {
  background-color: var(--warm-wh) !important;
}

/* Replace Ubuntu with Figtree everywhere */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--navy) !important;
  line-height: 1.15 !important;
}

/* Override the .promo h1 (site title in header area).
   The original has font color #7a0026 via inline <font> tag;
   we can't remove that tag but we can force the h1 color. */
h1.promo {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: 40px !important;
  font-weight: 700 !important;
}

h1.promo font {
  color: #fff !important;
}

p {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  line-height: 1.7 !important;
}

a {
  color: var(--navy) !important;
  transition: color 0.15s !important;
}

a:hover {
  color: var(--gold) !important;
  text-decoration: none !important;
}

/* ---- HORIZONTAL NAV (zoneHeader2 / WaGadgetMenuHorizontal) ----
   Theme defaults: background #384244, links #d6dde1, active #e87f6d
   Override to: navy background, white links, gold active              */

.menuInner {
  background: var(--navy) !important;
  border-top: 3px solid var(--gold) !important;
  border-bottom: none !important;
}

.menuInner ul.firstLevel {
  background: var(--navy) !important;
}

/* Top-level link — keep original height/padding structure to preserve alignment */
.menuInner ul.firstLevel > li > .item > a {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  height: 26px !important;
  padding: 14px 11px 14px !important;
  line-height: 26px !important;
}

/* Hover */
.menuInner ul.firstLevel > li > .item:hover > a {
  background: var(--navy-md) !important;
  color: #fff !important;
}

/* Active / selected — inset shadow pins the indicator flush to the bottom edge */
.menuInner ul.firstLevel > li.sel > .item > a {
  color: var(--gold-lt) !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--gold) !important;
}

.menuInner ul.firstLevel > li.sel > .item:hover > a {
  color: var(--gold-lt) !important;
  background: var(--navy-md) !important;
}

/* Dropdown background */
.menuInner ul ul {
  background: var(--navy-dk) !important;
  border-top: 2px solid var(--gold) !important;
}

/* Dropdown links */
.menuInner ul ul li > .item > a {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  background: var(--navy-dk) !important;
}

.menuInner ul ul li > .item:hover > a {
  background: var(--navy-md) !important;
  color: var(--gold-lt) !important;
}

.menuInner ul ul li.sel > .item > a {
  color: var(--gold-lt) !important;
}

/* ---- HEADER ZONES ----
   zoneHeader1 = logo/title row, zoneHeader2 = nav bar
   Must target ALL intermediate containers — WA uses inline
   background-color:transparent on several child divs.             */
.zoneHeader1,
.zoneHeader2,
.WaPlaceHolderHeader,
.WaPlaceHolderHeader1,
.zoneHeader1 .WaLayoutContainerOnly,
.zoneHeader2 .WaLayoutContainerOnly,
.zoneHeader1 .WaLayoutItem,
.zoneHeader2 .WaLayoutItem,
.zoneHeader1 .WaLayoutPlaceHolder,
.zoneHeader2 .WaLayoutPlaceHolder,
.zoneHeader1 .WaGadgetOnly,
.zoneHeader2 .WaGadgetOnly {
  background-color: var(--navy) !important;
}

/* Remove any gap between header zones and below nav */
.zoneHeader1,
.zoneHeader2 {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.zoneHeader2 .WaLayoutContainerOnly,
.zoneHeader2 .WaLayoutItem,
.zoneHeader2 .WaLayoutPlaceHolder,
.zoneHeader2 .WaGadgetOnly,
.zoneHeader2 .WaPlaceHolder,
.zoneHeader2 .placeHolderContainer,
.zoneHeader2 > div,
.menuInner,
.menuInner ul.firstLevel {
  border-bottom: none !important;
}

.zoneHeader2 .WaPlaceHolder,
.zoneHeader2 .placeHolderContainer,
.zoneHeader2 > div {
  background-color: var(--navy) !important;
}

/* Text inside header zone */
.zoneHeader1 p,
.WaPlaceHolderHeader p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.zoneHeader1 a,
.WaPlaceHolderHeader a {
  color: var(--gold-lt) !important;
}

/* ---- MOBILE PANEL (hamburger menu) ---- */
.mobilePanel {
  background: var(--navy) !important;
  border-bottom: 3px solid var(--gold) !important;
}

.mobilePanelButton {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: var(--navy) !important;
}

.mobilePanelButton:hover {
  background: var(--navy-md) !important;
  color: var(--gold-lt) !important;
}

/* Mobile menu first level links */
.mobilePanel .firstLevel > li > .item > a {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-bottom: 1px solid rgba(184, 151, 44, 0.15) !important;
  padding: 13px 20px !important;
}

.mobilePanel .firstLevel > li.sel > .item > a {
  color: var(--gold-lt) !important;
}

/* ---- CONTENT BLOCKS — recolor the 3 home panels ----
   Original inline colors: green #48A956, purple #9790BE, blue #2F88B8
   Override to navy shades. Uses attribute contains selector.          */
.WaLayoutItem[style*="#48A956"],
.WaLayoutItem[style*="48A956"] {
  background-color: var(--navy) !important;
}

.WaLayoutItem[style*="#9790BE"],
.WaLayoutItem[style*="9790BE"] {
  background-color: var(--navy-md) !important;
}

.WaLayoutItem[style*="#2F88B8"],
.WaLayoutItem[style*="2F88B8"] {
  background-color: var(--navy-lt) !important;
}

/* Text and headings inside dark content panels — scoped to the three
   background overrides so gadgetStyle002 on light backgrounds stays dark */
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
}

.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea li {
  color: rgba(255, 255, 255, 0.8) !important;
}

.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea a {
  color: var(--gold-lt) !important;
}

/* Ensure light-background content always reads dark */
.zoneContent .gadgetContentEditableArea p,
.zoneContent .gadgetContentEditableArea li {
  color: var(--text) !important;
}
.zoneContent .gadgetContentEditableArea h1,
.zoneContent .gadgetContentEditableArea h2,
.zoneContent .gadgetContentEditableArea h3,
.zoneContent .gadgetContentEditableArea h4 {
  color: var(--navy) !important;
}

/* gadgetStyle002 on transparent/light backgrounds — WA theme defaults this
   to light text; override to dark and include the legacy <font> wrapper     */
.gadgetStyle002 .gadgetContentEditableArea font,
.gadgetStyle002 .gadgetContentEditableArea p,
.gadgetStyle002 .gadgetContentEditableArea li {
  color: var(--text) !important;
}
.gadgetStyle002 .gadgetContentEditableArea h1,
.gadgetStyle002 .gadgetContentEditableArea h2,
.gadgetStyle002 .gadgetContentEditableArea h3,
.gadgetStyle002 .gadgetContentEditableArea h4 {
  color: var(--navy) !important;
}

/* Dark panels win back white text — more specific due to parent attribute selector */
.WaLayoutItem[style*="#48A956"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="48A956"]  .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="#9790BE"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="9790BE"]  .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="#2F88B8"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="2F88B8"]  .gadgetStyle002 .gadgetContentEditableArea font {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ---- BUTTONS ---- */
input[type="submit"],
input[type="button"],
button[type="submit"],
.buttonLink,
.WaButtonText,
.sysButton,
a.button,
.button {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background-color: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 26px !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  text-decoration: none !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover,
.buttonLink:hover,
.WaButtonText:hover,
a.button:hover {
  background-color: #A0811F !important;
  color: #fff !important;
}

/* ---- FOOTER ---- */

/* Footer zone 1 (social icons) */
.zoneFooter1,
.WaPlaceHolderFooter {
  background-color: var(--navy-dk) !important;
  border-top: 3px solid var(--gold) !important;
}

/* Footer zone 2 — override the inline #566467 background */
.zoneFooter2,
.WaPlaceHolderFooter1,
#id_Footer1 {
  background-color: var(--navy-dk) !important;
}

.zoneFooter1 p,
.zoneFooter2 p,
.WaPlaceHolderFooter p,
.WaPlaceHolderFooter1 p {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: #4A5568 !important;
}

.zoneFooter1 a,
.zoneFooter2 a,
.WaPlaceHolderFooter a,
.WaPlaceHolderFooter1 a {
  color: #64748B !important;
}

.zoneFooter1 a:hover,
.zoneFooter2 a:hover,
.WaPlaceHolderFooter a:hover,
.WaPlaceHolderFooter1 a:hover {
  color: #94A3B8 !important;
}

.zoneFooter1 h1, .zoneFooter1 h2, .zoneFooter1 h3,
.zoneFooter2 h1, .zoneFooter2 h2, .zoneFooter2 h3 {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.pac-banner {
    background-color: var(--navy-dk) !important; /* Changes the background */
    color: #333333 !important; /* Changes the text color */
    border-radius: 8px !important; /* Adds rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* Adds a shadow */
    font-size: 14px !important; /* Changes font size */
    padding: 20px !important; /* Adjusts the padding inside the banner */
}

/* ---- FORMS ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 15px !important;
  border: 1.5px solid var(--rule) !important;
  padding: 9px 13px !important;
  color: var(--text) !important;
  background-color: #fff !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(12, 35, 64, 0.08) !important;
}

label {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--navy) !important;
}

/* ---- TABLES ---- */
th {
  background-color: var(--navy) !important;
  color: #fff !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 11px 14px !important;
}

td {
  border-bottom: 1px solid var(--rule) !important;
  padding: 11px 14px !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
}

/* ---- EVENTS GADGET ---- */
.WaGadgetUpcomingEvents .eventTitle,
.WaGadgetUpcomingEvents h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
}

.WaGadgetUpcomingEvents a {
  color: var(--gold-lt) !important;
}

.WaGadgetUpcomingEvents a:hover {
  color: #fff !important;
}

/* ---- WA BRANDING BAR ---- */
.zoneWAbranding {
  background-color: var(--navy-dk) !important;
  border-top: 1px solid rgba(184, 151, 44, 0.15) !important;
}

.zoneWAbranding a {
  color: #334155 !important;
}

/* ---- SYSTEM / ALERT MESSAGES ---- */
.systemMessage,
.WaSystemMessage,
.errorMessage {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  border-left: 4px solid var(--gold) !important;
  background-color: var(--gold-pale) !important;
  color: var(--navy) !important;
  padding: 12px 16px !important;
}

/* ---- TOPBAR (HTML gadget injected above logo zone) ----
   Classes used by wildapricot-header-html.html snippet            */
.iao-topbar {
  background: var(--navy) !important;
  border-bottom: 2px solid var(--gold) !important;
  padding: 7px 0 !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
}
.iao-topbar-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.iao-topbar-announce {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
}
.iao-topbar-announce a {
  color: var(--gold-lt) !important;
  text-decoration: none !important;
}
.iao-topbar-announce a:hover { color: #fff !important; }
.iao-topbar-links {
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
}
.iao-topbar-links a {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.iao-topbar-links a:hover { color: var(--gold-lt) !important; }
.iao-topbar-divider {
  width: 1px !important;
  height: 12px !important;
  background: rgba(255,255,255,0.15) !important;
  display: inline-block !important;
}

/* ---- STICKY NAV ---- */
.zoneHeader2 {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 16px rgba(12,35,64,0.10) !important;
}

/* ---- LOGO ZONE — height + vertical centering ---- */
/* Only target the innermost gadget container — avoids breaking WA's layout grid */
.zoneHeader1 {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.zoneHeader1 .gadgetContentEditableArea {
  display: flex !important;
  align-items: center !important;
}
/* Logo image — cap height, preserve aspect ratio */
.zoneHeader1 img {
  max-height: 64px !important;
  width: auto !important;
  display: block !important;
}
h1.promo {
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* ---- NAV CENTERING ---- */
.menuInner {
  text-align: center !important;
}
.menuInner ul.firstLevel {
  display: inline-flex !important;
  justify-content: center !important;
}

/* ---- DROPDOWN CHEVRONS ---- */
/* WA renders expand arrows as border triangles on .item or via span.arrow */
.menuInner .hasChildren > .item::after,
.menuInner .hasChildren > .item > a::after {
  border-top-color: var(--gold-lt) !important;
  border-bottom-color: var(--gold-lt) !important;
}
.menuInner .hasChildren.open > .item::after,
.menuInner .hasChildren.open > .item > a::after {
  border-top-color: var(--gold) !important;
}
.menuInner .hasChildren > .item .arrow {
  border-top-color: var(--gold-lt) !important;
  opacity: 0.85 !important;
}

/* ---- FOCUS RINGS ---- */
/* Restore visible focus for keyboard users (navy outline removed by theme) */
.menuInner a:focus-visible,
.menuInner a:focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}
.mobilePanel a:focus-visible,
.mobilePanel a:focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* ---- WA LOGIN GADGET ---- */
/* ROOT CAUSE OF THE "NAVY BANDS IN THE POPUP":
   The login icon lives in the logo zone (above the nav). When the popup
   drops down it crosses over .zoneHeader2, which is position:sticky with
   z-index:1000. The nav therefore PAINTS ON TOP of the middle of the popup
   — that's the navy band (and you can see the nav's gold top border and
   menu items inside it). It was never a background-color problem.
   Fix: lift the login gadget + its popup above the sticky nav.            */
.loginContainer,
.WaGadgetLogin {
  position: relative !important;
  z-index: 1100 !important;
}

.loginPanel {
  z-index: 1100 !important;
}

/* Panel cosmetics — white card matching the redesign */
.loginPanel {
  background-color: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--rule) !important;
  box-shadow: 0 8px 32px rgba(12,35,64,0.18) !important;
  border-radius: 4px !important;
}

.loginPanel input[type="text"],
.loginPanel input[type="password"] {
  background-color: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--rule) !important;
  /* WA renders a person/lock icon as a left background-image inside the
     input; pad the text over so it no longer overlaps the icon */
  padding-left: 24px !important;
  background-repeat: no-repeat !important;
  background-position: 11px center !important;
}

.loginPanel input[type="submit"],
.loginPanel .loginButton {
  background-color: var(--gold) !important;
  color: #fff !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  width: 100% !important;
  padding: 11px 26px !important;
  cursor: pointer !important;
}

.loginPanel label {
  color: var(--navy) !important;
}

.loginPanel a {
  color: var(--navy) !important;
}
.loginPanel a:hover {
  color: var(--gold) !important;
}

/* Eye icon for password toggle */
.loginPanel .toggle-password {
  color: var(--muted) !important;
  cursor: pointer !important;
}

/* The "Log in" trigger link in the header stays as a white ghost button */
.loginContainer .loginLink,
.loginContainer .logoutLink,
.loginContainer .memberLink {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  padding: 7px 16px !important;
  transition: all 0.15s !important;
  display: inline-block !important;
}
.loginContainer .loginLink:hover,
.loginContainer .logoutLink:hover,
.loginContainer .memberLink:hover {
  border-color: var(--gold-lt) !important;
  color: var(--gold-lt) !important;
}

/* ---- HEADER BANNER FIX ---- */
/* Hide the banner gif that appears on inner pages */
img[src*="Banner-2"] {
  display: none !important;
}

/* Inject org name — target the <p> that holds the hidden image */
.zoneHeader1 p:has(img[src*="Banner-2"])::after {
  content: 'Indiana Academy of Ophthalmology';
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* ---- MOBILE ---- */
@media (max-width: 768px) {
  h1.promo { font-size: 28px !important; }
  h2 { font-size: 24px !important; }

  .iao-topbar-announce { display: none !important; }
  .iao-topbar-inner { justify-content: flex-end !important; }

  input[type="submit"],
  .buttonLink,
  .WaButtonText {
    width: 100% !important;
    text-align: center !important;
  }
}