/* ===== BEGIN ISONG DESIGN SYSTEM 2026 BASE (2026-11-01) ===== */
/* Placed FIRST in user.css on purpose. These rules re-state the theme's
   own selectors (Website > Colors and styles: BODY #333333, teal headings
   and links) with the design-system values. At equal specificity a later
   rule wins, so: they beat the theme, which loads before user.css, and
   every later rule in this file and every gadget's inline <style> still
   beats them (white headings on navy bands, the sponsor wall, the footer).
   Rollback: delete this block. Companion block: DESIGN SYSTEM 2026 PHASE 2
   at the end of this file. */
:root{ --isong-text-primary:#162232; --isong-text-heading:#314D79; --isong-text-link:#276A58; --isong-text-link-hover:#1E5645; --isong-font:Ubuntu, Arial, Helvetica, sans-serif; }
BODY, .gadgetStyleNone{ color:var(--isong-text-primary); }
body{ font-family:var(--isong-font); }
H1:not(.promo), .gadgetStyleNone H1:not(.promo),
H2, .gadgetStyleNone H2,
H3, .gadgetStyleNone H3,
H4:not(.gadgetTitleH4), .gadgetStyleNone H4:not(.gadgetTitleH4),
H5, .gadgetStyleNone H5{ color:var(--isong-text-heading); }
.gadgetStyle001 h1:not(.promo), .gadgetStyle002 h1:not(.promo),
.gadgetStyle001 h4:not(.gadgetTitleH4), .gadgetStyle002 h4:not(.gadgetTitleH4){ text-transform:none; }

A:not(.stylizedButton), A:link:not(.stylizedButton), A:active:not(.stylizedButton), A:visited:not(.stylizedButton){ color:var(--isong-text-link); }
A:hover:not(.stylizedButton){ color:var(--isong-text-link-hover); }
/* ===== END ISONG DESIGN SYSTEM 2026 BASE (2026-11-01) ===== */

.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink {
width: 150px;
height: 50px;
}

.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink:before {
   font: normal 25px/50px 'Tahoma';
content: 'Profile';
}
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink:before {
font: normal 25px/50px 'Tahoma';
   content: 'Login';
}

/* Contact Us header fix 2026-07-04: make the CTA a deliberate top-aligned button instead of stranded text */
.isong-header-inner { align-items: flex-start !important; }
.isong-header-cta { margin-top: 20px; }
.isong-header-text { background-color: #314D79 !important; color: #ffffff !important; border: 2px solid #314D79 !important; }
.isong-header-text:hover { background-color: #ffffff !important; color: #314D79 !important; border: 2px solid #59BAA1 !important; }

/* ISONG header: match the Login/Profile button to the Contact Us button and align it */
.WaGadgetLoginForm .loginContainer .loginLink {
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 124px !important;
  height: 46px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  background-color: #67B8DB !important;
  border: 2px solid #67B8DB !important;
  border-radius: 8px !important;
  vertical-align: middle !important;
}
.WaGadgetLoginForm .loginContainer .loginLink:before {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Ubuntu, -apple-system, "system-ui", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #ffffff !important;
}
@media (max-width: 900px) {
  .WaGadgetLoginForm .loginContainer .loginLink { width: 106px !important; height: 40px !important; }
  .WaGadgetLoginForm .loginContainer .loginLink:before { font-size: 13px !important; }
}
@media (min-width: 901px) { .WaGadgetLoginForm { margin-top: 42px !important; } }
@media (max-width: 900px) { .WaGadgetLoginForm { margin-top: 38px !important; } }

/* Give the Login/Profile button room on inner-page headers so it does not
   overflow the header area. Inner pages split the header table 95%/5% (only
   ~60px for the login); this matches them to the home page's split so both
   buttons sit inside the header, identically on every page. */
.WaLayoutItem:has(.isong-header) { width: 83% !important; }
.WaLayoutItem:has(.WaGadgetLoginForm) { width: 17% !important; }
.WaGadgetLoginForm,
.WaGadgetLoginForm .loginContainer,
.WaGadgetLoginForm .authBox { text-align: left !important; }

/* ==========================================================================
   ISONG accessibility overrides - added July 2026
   Fixes WCAG 1.4.3 (contrast, AA) and WCAG 2.1.1 (keyboard, A) identified in
   the members-only accessibility audit. Each rule notes what it fixes.
   ========================================================================== */

/* --- 1. Keyboard-operable dropdown menus (WCAG 2.1.1, Level A) -------------
   The theme opened submenus on :hover only, so keyboard users could not reach
   ANY second-level page, including the entire members-only area. Mirror the
   hover reveal with :focus-within. */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within > ul,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within ul.secondLevel {
  visibility: visible !important;
  opacity: 1 !important;
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within > ul > li,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within > ul > li > .item,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within > ul > li > .item > a {
  visibility: visible !important;
}

/* Visible focus indicator on menu links (WCAG 2.4.7) */
.WaGadgetMenuHorizontal .menuInner ul a:focus,
.WaGadgetMenuHorizontal .menuInner ul a:focus-visible {
  outline: 3px solid #1A4E8A !important;
  outline-offset: -2px !important;
}

/* --- 2. Colour contrast (WCAG 1.4.3, Level AA) ----------------------------
   Brand green #59BAA1 on white is 2.37:1; AA needs 4.5:1 (body) / 3:1 (large).
   Darken green TEXT on light backgrounds to #276A58 (4.94:1 on white).
   Decorative rules and buttons keep the original green. */
h1:not(.promo),
.gadgetStyleNone h1:not(.promo),
.pageTitleOuterContainer h1,
.WaGadgetContentBlock h1, .WaGadgetContentBlock h2, .WaGadgetContentBlock h3,
.gadgetContentEditableArea h1, .gadgetContentEditableArea h2, .gadgetContentEditableArea h3 {
  color: var(--isong-text-heading); /* 2026-11-01: navy per the design system (was #276A58) */
}
.WaGadgetContentBlock a:not(.functionalButton),
.gadgetContentEditableArea a:not(.functionalButton),
.boxOuterContainer a:not(.functionalButton),
.WaGadgetPoweredByWA a,
a[href*="wildapricot.com"] {
  color: #276A58 !important;
}

/* Green headline banners carry WHITE text (white on #59BAA1 = 2.13:1).
   Darken the FILL so the white text passes (white on #276A58 = 4.94:1). */
[style*="background-color:#59BAA1"],
[style*="background-color: #59BAA1"],
[style*="background-color:#59BAA1"],
[style*="background-color: #59BAA1"] {
  background-color: #276A58 !important;
}

/* --- 3. Footer: green on the navy footer is 3.68:1. LIGHTEN (never darken)
   to the palette's lighter green #7DD4BE = 5.01:1 on navy. ----------------- */
.isong-footer h1, .isong-footer h2, .isong-footer h3,
.isong-footer h4, .isong-footer h5, .isong-footer h6 {
  color: #7DD4BE !important;
}

/* --- 4. Inline colour overrides (added after post-fix re-audit) -----------
   Abstract titles, presenter names and similar content are authored with an
   INLINE font colour of #59BAA1, which beats a plain stylesheet rule. Force the
   accessible green (#276A58 = 4.94:1 on white) wherever that colour is set
   inline. Elements on the navy banners set their own colours, so they are
   unaffected. */
font[color="#59BAA1"], font[color="#59BAA1"],
[style*="color:#59BAA1"], [style*="color: #59BAA1"],
[style*="color:#59BAA1"], [style*="color: #59BAA1"] {
  color: #276A58 !important;
}

/* The "Published Research" panel uses a mid-blue fill (#6C8EBF) behind WHITE link
   text, which measures only 3.36:1. Darken the fill to #4A6FA5 (5.11:1 with white)
   so those links pass AA. Same blue family, no visible redesign. */
[style*="background-color:#6C8EBF"], [style*="background-color: #6C8EBF"],
[style*="background-color:#6c8ebf"], [style*="background-color: #6c8ebf"] {
  background-color: #4A6FA5 !important;
}

/* --- 5. Site-wide contrast sweep (public + member pages) ------------------
   Found by auditing all 49 pages. Each replacement was checked to pass AA
   before being applied; the "was" figure is the failing ratio it replaces. */

/* Event-list dates were light grey (#B7B7B7) at 2.01:1. -> #6E6E6E = 5.10:1 */
.boxesListInner td.left,
.WaGadgetEventsStateList td.left,
td.left {
  color: #6E6E6E !important;
}

/* Committee chair roles were a lighter green (#276A58) at 3.15:1 on the card
   background. -> #276A58 = 4.72:1 */
.isong-chair-role,
span.isong-chair-role {
  color: #276A58 !important;
}

/* Brand-green buttons carried white text at 2.37:1. Darken the fill so the
   white text passes: white on #276A58 = 4.94:1. */
a.stylizedButton.buttonStyle001,
a.stylizedButton.buttonStyle002,
.stylizedButton.buttonStyle001,
.stylizedButton.buttonStyle002 {
  background-color: #276A58 !important;
  color: #FFFFFF !important;
}

/* Blue callout panels (#3598C1) held dark body text at 3.86:1, and after the
   green link fix their links dropped to 1.5:1. Darken the panel and set all
   text and links inside to white (5.86:1), matching the navy callouts used
   elsewhere on the site. */
[style*="background-color:#3598C1"], [style*="background-color: #3598C1"],
[style*="background-color:#3598c1"], [style*="background-color: #3598c1"] {
  background-color: #1F6C8C !important;
}
[style*="background-color:#3598C1"] *, [style*="background-color: #3598C1"] *,
[style*="background-color:#3598c1"] *, [style*="background-color: #3598c1"] * {
  color: #FFFFFF !important;
}
[style*="background-color:#3598C1"] a, [style*="background-color:#3598c1"] a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

/* Muted italic note on the homepage was #6B7A90 at 4.36:1. -> #5A6778 = 5.76:1 */
.isong-repro-note, em[style*="color:#6B7A90"], [style*="color:#6b7a90"] {
  color: #5A6778 !important;
}

/* --- 6. Final contrast pass (all 49 pages re-audited) ---------------------
   Every replacement below was measured before being applied. */

/* IMPORTANT GUARD: text sitting on the navy panels must be WHITE, not the
   darkened green. Darkened green on navy is 1.76:1 - worse than the original
   problem. This is what stops a global green from breaking the dark panels.
   Do not remove it if you ever change the green. */
[style*="background-color:#314D79"] h1, [style*="background-color:#314D79"] h2,
[style*="background-color:#314D79"] h3, [style*="background-color:#314D79"] h4,
[style*="background-color:#314D79"] p,  [style*="background-color:#314D79"] span,
[style*="background-color:#314D79"] li, [style*="background-color:#314D79"] a,
[style*="background-color:#314D79"] h2, [style*="background-color:#314D79"] a,
[style*="background-color: #314D79"] h2, [style*="background-color: #314D79"] a {
  color: #FFFFFF !important;
}
[style*="background-color:#314D79"] a,
[style*="background-color:#314D79"] a { text-decoration: underline !important; }

/* Brand-green button/fill: white text needs the darker green (4.94:1). */
a.isong-members-btn, .isong-members-btn, span.isong-welcome-divider {
  background-color: #276A58 !important;
}
a.isong-members-btn, .isong-members-btn { color: #FFFFFF !important; }

/* Header Profile / login button: white on #67B8DB was 2.22:1 -> 5.25:1. */
/* ISONG's own CSS sets this blue with !important at higher specificity, so we keep
   their blue button and darken the TEXT instead: #162232 on #67B8DB = 5.69:1
   (white was 2.22:1). Least invasive, button looks unchanged. */
.WaGadgetLoginForm .loginContainer .loginLink,
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink,
.WaGadgetLoginForm .loginContainer.authenticated .loginLink,
a.loginLink, .loginLink {
  color: #162232 !important;
}

/* Role labels on board and committee cards (#276A58 -> 4.72:1). */
.isong-member-role, span.isong-member-role,
.isong-chair-role,  span.isong-chair-role,
.isong-committee-card h3, .isong-member-card h3 { color: #276A58 !important; }

/* Forum metadata greys (#B7B7B7 = 2.0:1 -> 5.10:1). */
span.linkDisabled, .linkDisabled,
span.lastReplyAuthor, .lastReplyAuthor { color: #6E6E6E !important; }

/* Muted homepage note (#6B7A90 = 4.36:1 -> 5.76:1). */
p.isong-welcome-note, .isong-welcome-note { color: #5A6778 !important; }

/* Green text on the pale green tint: #276A58 there is 4.48:1 (just under).
   #26685A = 5.93:1. */
[style*="background-color:#E8F7F3"] a, [style*="background-color:#E8F7F3"] span,
[style*="background-color:#e8f7f3"] a, [style*="background-color:#e8f7f3"] span {
  color: #26685A !important;
}

/* --- 7. Corrections after re-audit --------------------------------------- */
.WaGadgetContent[style*="2E4C78"] *, .isong-navy *, .isong-navy-panel * { color:#FFFFFF !important; }
a.stylizedButton.buttonStyle001, a.stylizedButton.buttonStyle002,
.stylizedButton.buttonStyle001, .stylizedButton.buttonStyle002,
a.isong-members-btn { color:#FFFFFF !important; }
.isong-muted, [style*="color:#AAAAAA"], [style*="color:#aaaaaa"] { color:#6E6E6E !important; }
[style*="color:#777777"] { color:#5F5F5F !important; }

/* --- 8. Residual contrast + dark-mode opt-out ----------------------------
   From an audit of ALL 49 pages (public and member). Every replacement below
   was measured before being applied. */

/* Opt out of forced dark mode. The site has no dark theme; without this, some
   mobile browsers (notably Chrome on Android "Auto Dark Theme") will invert it
   and produce unpredictable, low-contrast results. Equivalent to
   <meta name="color-scheme" content="light">. */
:root { color-scheme: light; }

/* The SELECTED top-level nav item was brand green on white (2.37:1). This was
   the single most common failure - one on nearly every page. -> 4.94:1 */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel.dir > .item > a {
  color: #276A58 !important;
}

/* Content buttons (.btn) were white on brand green (2.37:1). -> 4.94:1 */
a.btn, .btn {
  background-color: #276A58 !important;
  color: #FFFFFF !important;
}

/* Labels/badges on the pale green tint (2.15:1). -> 5.93:1 */
.mission-label, .badge { color: #26685A !important; }

/* Small print inside content cards (#AAAAAA on #F8FAFB = 2.21:1). -> 4.87:1 */
.isong-committee-card .footer, .footer[class="footer"], div.footer {
  color: #6E6E6E !important;
}

/* Donation form: "Mandatory fields" note (#777 = 4.47:1). -> 6.39:1 */
.WaGadgetDonationForm strong, .generalFieldsContainer strong { color: #5F5F5F !important; }

/* Donation form buttons: white on the light blue (2.22:1). As with the Profile
   button, keep the blue and darken the text: #162232 = 5.69:1. */
input.nextButton, .nextButton, input.nextButton.button {
  color: #162232 !important;
}

/* Board role-group headings (#276A58 = 3.29:1). -> 4.94:1 */
.isong-role-group-header h3, .isong-role-group h3 { color: #276A58 !important; }

/* GUARD: navy buttons (.buttonStyle003) had our green text inside at 1.75:1.
   Text on navy must be white. */
a.buttonStyle003, a.buttonStyle003 *, .buttonStyle003, .buttonStyle003 * {
  color: #FFFFFF !important;
}

/* Links on the light-grey callout (#E6E6E6): our green is 3.96:1 there. -> 6.21:1 */
[style*="background-color:#E6E6E6"] a, [style*="background-color: #E6E6E6"] a,
[style*="background-color:#e6e6e6"] a { color: #245C4C !important; }

/* ============================================================
   WCAG 2.1 AA - 1.4.3 Contrast (final pass, 12 Jul 2026)
   ============================================================ */

/* Light ISONG green (#59BAA1) applied INLINE by the editor as rgb(86,185,160).
   2.37:1 on white -> #276A58 = 4.94:1.
   NOTE: earlier rules matched only the hex spelling, so they never fired.
   Keep BOTH the rgb() and hex forms below. */
.gadgetContentEditableArea [style*="rgb(86, 185, 160)"],
.gadgetContentEditableArea [style*="rgb(86,185,160)"],
.gadgetContentEditableArea [style*="#59BAA1" i],
.gadgetContentEditableArea font[color="#59BAA1" i],
.gadgetContentEditableArea font[color="#59BAA1" i] * {
  color: #276A58 !important;
}

/* Plain links on the light-grey (#E6E6E6) content panel: 3.96:1 -> #245C4C = 6.21:1.
   DO NOT REMOVE :not(.stylizedButton) - filled buttons on that same panel are white
   text on a #276A58 fill; darkening them drops the button to 1.56:1. */
div[style*="background-color:#E6E6E6" i] .gadgetContentEditableArea a:not(.stylizedButton),
div[style*="background-color:#E6E6E6" i] .gadgetContentEditableArea a:not(.stylizedButton) * {
  color: #245C4C !important;
}

/* WildApricot membership-application form (the Join page) - vendor system greys.
   #777777 = 4.48:1 and #888888 = 3.54:1 -> #6E6E6E = 5.10:1.
   Text elements only; never inputs, so member-typed text stays black. */
.formTitleContainer, .formTitleContainer div,
.mandatoryFieldsTitle, .mandatoryFieldsTitle strong,
.textLine.typeInstruction, .typeInstruction, .extraInfo,
.levelDescription, .levelRenewal, .levelRecurring {
  color: #6E6E6E !important;
}

/* ============================================================
   Top-level menu: keep all 10 items visible (2026-07-12)
   ============================================================
   WA collapses menu items it cannot fit into an unlabelled '...' overflow,
   and it always sacrifices the LAST item. With 10 top-level items the default
   padding overflows at 1200px. Trimming the horizontal padding lets all 10 fit
   down to 1200px (covers 1280/1366/1440/1512/1920).
   Menu order is deliberately: ... Resources, Members Only, Build the Helix.
   Members Only must NOT be last - it is the paid member benefit and was the
   original findability bug. Build the Helix is public and always visible to
   non-members (their menu is only 9 items), so it is the safe last item. */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
  padding-left: 11px !important;
  padding-right: 11px !important;
  letter-spacing: 0 !important;
}

/* ================= BEGIN ISONG ACCESSIBILITY PATCH ================= */
/* Added 25 July 2026. WCAG 2.1 AA contrast corrections.               */
/* To remove, delete everything between the BEGIN and END markers.     */
/* Nothing above this block was modified.                              */

/* -- Skip link (needs the companion script to be inserted) ---------- */
.isong-skip{
  position:absolute; left:-9999px; top:0; z-index:100000;
  display:inline-block; padding:.7rem 1.25rem;
  background:#0C3D33; color:#fff; text-decoration:none;
  font:600 1rem/1.2 Ubuntu,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  border-radius:0 0 4px 0;
}
.isong-skip:focus,.isong-skip:focus-visible{ left:0; outline:3px solid #A8E6D5; outline-offset:2px; }

/* -- Visible keyboard focus ---------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #17685A; outline-offset:2px;
}

/* -- Build the Helix card: white text was 2.02:1 to 2.37:1 ---------- */
/*    Same hue family, darker. Now 5.3:1 to 9.3:1.                     */
.isong-helix{
  background-image:linear-gradient(135deg,#17685A 0%,#115043 55%,#0C3D33 100%) !important;
}
.isong-helix .isong-eyebrow{ color:#FFFFFF !important; }
.isong-helix .isong-lead,.isong-helix .isong-pullquote{ color:#FFFFFF !important; }

/* -- Footer: 4.26:1 and 4.00:1, both just under 4.5:1 --------------- */
.isong-brand-tag{ color:#C9D4E2 !important; }
.isong-fb,.isong-x,.isong-bs,.isong-li,.isong-ig{ color:#A8E6D5 !important; }

/* -- Login page ----------------------------------------------------- */
/*    Theme link color #276A58 was inherited by the sign-in buttons:   */
/*      Google 1.38:1, Microsoft 2.70:1, Apple 4.24:1                  */
.wa-authenticateLoginButton,.wa-authenticateLoginButton *{ color:#FFFFFF !important; }

/*    Google gets its own sanctioned neutral button rather than a      */
/*    darkened blue, so there is no branding conflict. 10.5:1.         */
.googlePlus.wa-authenticateLoginButton{
  background-color:#FFFFFF !important;
  border:1px solid #DADCE0 !important;
}
.googlePlus.wa-authenticateLoginButton,.googlePlus.wa-authenticateLoginButton *{ color:#3C4043 !important; }

/*    Submit button: white on #67B8DB was 2.22:1. Brand teal is 6.6:1. */
input[type=submit].loginButton,.loginContainerForm input[type=submit]{
  background-color:#17685A !important; color:#FFFFFF !important;
}

/* ================== END ISONG ACCESSIBILITY PATCH ================== */

/* ================= BEGIN ISONG BUTTON CONTRAST ===================== */
/* Added 25 July 2026. WCAG 1.4.3.                                     */
/* Measured from what actually renders, across all 26 stylized buttons */
/* on the public site:                                                 */
/*   buttonStyle001  12 instances  #FFFFFF on #276A58  4.94:1  pass    */
/*   buttonStyle002  12 instances  #FFFFFF on #276A58  4.94:1  pass    */
/*   buttonStyle003   2 instances  #276A58 on #314D79  1.76:1  FAIL    */
/* Only 003 fails. Both instances are on the 2026 World Congress page: */
/* "Become a Sponsor Today" and "Call for Abstracts". The theme link   */
/* color is inheriting onto a navy button, the same root cause as the  */
/* sign-in buttons on the login page.                                  */
/* White on #314D79 gives 8.68:1. Background is left untouched.        */
/* To remove, delete everything between the BEGIN and END markers.     */
a.buttonStyle003,
a:link.buttonStyle003,
a:visited.buttonStyle003,
a.buttonStyle003:hover,
a:link.buttonStyle003:hover,
a.buttonStyle003:active,
a:link.buttonStyle003:active{ color:#FFFFFF !important; }

/* Keyboard focus for the stylized buttons. WCAG 2.4.7. */
a[class*="buttonStyle"]:focus-visible{
  outline:3px solid #17685A !important; outline-offset:3px;
}
/* ================== END ISONG BUTTON CONTRAST ====================== */

/* ===== BEGIN ISONG HOME HEADING FONT (2026-07-25c) ===== */
/* The home page "Welcome to ISONG" h1 is set in Caveat, a handwriting face,
   by an inline style block inside the home page content gadget. This overrides
   the family only, leaving the responsive sizes and the brand colour alone.
   user.css loads last, so this wins without editing the fragile gadget.
   Rollback: delete everything between these two markers. */
.isong-welcome-header h1 {
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: -0.01em !important;
}
/* ===== END ISONG HOME HEADING FONT (2026-07-25c) ===== */

/* ===== BEGIN ISONG CONTRAST FIXES (2026-07-29) ===== */
/* From the site-wide contrast audit of 2026-07-29. Both rules fix WCAG 1.4.3
   failures that cannot be corrected where they are declared:
     - the menu colour lives in customStyles.css, which the Colors and styles
       screen generates, so editing it there would not survive;
     - the event labels are Wild Apricot Events gadget output and are
       unreachable from the page editor.
   Neither needs !important: user.css loads after the theme and after
   customStyles.css, so equal specificity plus later source order is enough. */

/* Dropdown submenu, current page. Was #59BAA1 on #F7F7F7 = 2.22:1 against a
   4.5:1 requirement, on 27 pages. #1E5645 = 5.96:1, and is already a site
   colour: it is the middle stop of the /committees banner gradient. */
.WaGadgetMenuHorizontal .menuInner ul.secondLevel > li.sel > .item > a {
  color: #1E5645;
}

/* Events gadget field labels (Start / End / Location) on /Upcoming-Events,
   /Past-Events and /register-for-webinars. Was #898989 on #F6FAFD = 3.33:1
   against 4.5:1. #6b6b6b = 5.08:1. */
/* The theme selector below is (0,3,3); a bare label.eventInfoBoxLabel is
   (0,1,1) and loses on specificity no matter how late user.css loads.
   Source order only breaks ties. Matching the theme chain and adding the
   class makes this (0,4,3) and avoids !important. */
.WaGadgetEvents .boxInfoContainer ul.boxInfo li > label.eventInfoBoxLabel {
  color: #6b6b6b;
}

/* Footer contact labels and copyright bar: the #8a9bb2 -> #b8c6d8 override
   that lived here from 2026-07-29 was retired on 2026-08-22. The three footer
   gadgets (id_F1yfIMK, id_2nXyIfb, id_VmoyRsC) now declare #b8c6d8 themselves,
   so the declared and rendered colours agree and nothing here is needed. */

/* --- /bod, bespoke board gadget id_x9iivxv ------------------------------ */
/* 1. Governance headings were #276A58 on the navy panel #314D79 = 1.76:1
      against a 3:1 requirement (22px/700 is large text). The gadget already
      INTENDS white here - it declares .isong-governance-block h4 { color:#fff }
      - but the headings are not inside .isong-governance-block, so that rule
      matches nothing and customStyles.css h4:not(.gadgetTitleH4) wins with brand
      teal. This restores the gadget's own intent. White on #314D79 = 8.67:1. */
.isong-board .isong-board-governance h4 {
  color: #ffffff;
}

/* 2. Board intro panel: white text on a gradient starting #59BAA1 = 2.37:1
      against 4.5:1 (20px/500 is normal text). #59BAA1 is the same colour removed
      from the /committees banner on 28 July for the same reason. Darkened to the
      values that banner now uses, which put white at 4.94:1 or better. */
.isong-board .isong-board-intro {
  background-image: linear-gradient(135deg, #276A58 0%, #1E5645 55%, #1E5645 100%);
}

/* --- /bylaws-and-2030-plan, bespoke hero gadget -------------------------- */
/* #6fcdb5 (the gadget's --teal-light) on #3A6090 = 3.40:1 against 4.5:1, at
   12px/500 and 11px/500. The second element also carries opacity:0.7, which
   lowers the effective ratio further, so the opacity is neutralised here rather
   than compensated for. #C8EDE1 = 5.12:1. Only these two text uses change;
   --teal-light is left alone everywhere else (buttons, rules, gradients). */
.gadgetContentEditableArea .isong-page .hero-org {
  color: #C8EDE1;
}
.gadgetContentEditableArea .isong-page .hero-vision strong {
  color: #C8EDE1;
  opacity: 1;
}
/* ===== END ISONG CONTRAST FIXES (2026-07-29) ===== */

/* ===== BEGIN ISONG PAGE HEADER BANNERS (2026-07-31) ===== */
/* The artwork stays a background plate with its pill painted blank; the page  */
/* title sits on top as real HTML text. Replaces title-banner PNGs that had    */
/* the words baked in as pixels, which failed WCAG 1.4.5 everywhere and 1.4.3  */
/* invisibly on three pages. To remove, delete everything between the BEGIN    */
/* and END markers and restore the <img> markup in each banner gadget.         */
.isong-pagehead{
  position:relative; width:100%; max-width:1170px; margin:0 auto;
  aspect-ratio:1920/300;
  container-type:inline-size;   /* so the title scales with the box, not the viewport */
  background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:center;
}
.isong-pagehead--teal{ background-image:url('/resources/Pictures/isong-banner-plate-teal.png'); }
.isong-pagehead--navy{ background-image:url('/resources/Pictures/isong-banner-plate-navy.png'); }

/* Specificity (0,2,1) is REQUIRED. At (0,1,0) or (0,1,1) a theme h1 rule wins and the
   title renders #276A58 on #32496E = 1.84:1, worse than the image it replaces. Tested.
   text-transform:none is load-bearing: the theme uppercases h1.

   Sizing is not a taste call. The banner PNG this replaces baked "Practice" at a
   52px cap height on a 1920x300 plate, which is 31.7 CSS px once the plate is
   drawn at 1170. Ubuntu Bold has a measured cap ratio of 0.785, so 40px gives
   31.4 CSS px - the original design to within a third of a pixel. The previous
   34px rendered 26.7, about 19% small, which is why the title looked lost in
   the pill. Left padding 6.7% is the source artwork's own inset (129/1920).

   The unit is cqw, not vw: the box is max-width:1170px but a vw-sized font keeps
   growing past that, so the title-to-pill ratio drifted with viewport width above
   1170 until the clamp caught it. cqw is a share of the box, which is the thing
   the title actually has to fit. */
.isong-pagehead h1.isong-pagehead__title,
.isong-pagehead div.isong-pagehead__title{
  margin:0; padding:0 2% 0 6.7%;
  display:flex; align-items:center;
  height:55%; width:72%; box-sizing:border-box;
  color:#fff; font-weight:700;
  font-size:clamp(18px,3.42cqw,40px); line-height:1.12;
  text-transform:none; text-align:left; letter-spacing:.01em;
}
.isong-pagehead h1.isong-pagehead__title--long,
.isong-pagehead div.isong-pagehead__title--long{ font-size:clamp(14px,2.41cqw,28px); }
/* ===== END ISONG PAGE HEADER BANNERS (2026-07-31) ===== */

/* ===== BEGIN ISONG HEADER TAGLINE (2026-07-29) ===== */
/* The header gadget's own CSS caps the tagline at a fixed 640px, and browsers
   break lines greedily, which left a 607px line above a 193px orphan at every
   desktop width and read as a hardcoded break. 75ch is 639px at 15px Ubuntu, so
   the measure is unchanged today but now tracks the font size; text-wrap:
   balance evens the two lines to 424/376.
   The descendant selector is required. The gadget declares
   .isong-header-tagline in an inline <style> in the body, which outranks
   user.css on document order at equal specificity: a single-class rule here
   wins text-wrap but loses max-width. Verified by measuring the rendered
   element, not the declaration. */
.isong-header-brand .isong-header-tagline {
  max-width: 75ch;
  text-wrap: balance;
}
/* ===== END ISONG HEADER TAGLINE (2026-07-29) ===== */

/* ===== BEGIN ISONG HOME SECTION HEADINGS ============================
   The home page carried three different section-heading sizes: 24px in the
   Vision/Mission cards, 30px in the Build-the-Helix / Member-News cards, and
   18px in the Sponsors band. The theme's own h2 is 28px, so these pull the
   two card families back to the theme value instead of inventing a fourth.
   Colour and margins stay as each card family sets them; only the type scale
   is unified. The Sponsors band is matched in the SPONSOR WALL block below.

   Scoped with a leading "body " purely to out-specify the .isong-mv-card h2
   and .isong-home-card h2 rules, which live in <style> blocks inside the
   gadgets themselves and therefore sit after this file in document order.
   Both classes appear ONLY on the home page, so nothing else is affected.
   Added 2026-07-30. To roll back, delete between these markers.          */
body .isong-mv-card h2,
body .isong-home-card h2,
body h2.isong-spon__banner{
  font-size:28px;
  line-height:1.2;
  letter-spacing:-0.0125em;
}
/* The theme steps h2 down 28 > 24 > 22 as the viewport narrows. Because the
   selectors above out-specify it, they have to repeat the ladder or the cards
   would stay at 28px on a phone while everything else shrank. */
@media screen and (max-width:767px){
  body .isong-mv-card h2,
  body .isong-home-card h2,
  body h2.isong-spon__banner{ font-size:24px; }
}
@media screen and (max-width:479px){
  body .isong-mv-card h2,
  body .isong-home-card h2,
  body h2.isong-spon__banner{ font-size:22px; }
}
/* ===== END ISONG HOME SECTION HEADINGS ============================== */

/* ===== BEGIN ISONG SPONSOR WALL =====================================
   Sponsor wall used on the Home page and the 2026 World Congress page.
   Markup lives in two Content gadgets per page: the navy banner gadget
   (which paints #314D79 itself) and the gadget holding the tier list.
   Content gadgets silently empty an inline <style>, which is why this
   CSS lives here rather than in the gadget. Added 2026-07-30.
   To roll back, delete everything between these markers.             */
.isong-spon,
.isong-spon__banner,
.isong-spon *,
.isong-spon *::before,
.isong-spon *::after{ box-sizing:border-box; }
.isong-spon{
  --isong-navy:#314D79;
  --isong-ink:#3A4A62;
  --isong-muted:#5A6778;
  background:#F8FAFB;
  margin:0;
  padding:40px 36px 36px;
  font-family:Ubuntu,Arial,sans-serif;
}
h2.isong-spon__banner{
  /* Literal, not var(--isong-navy): this h2 is a SIBLING of .isong-spon,
     not a descendant, so the custom property does not inherit here.
     28px / 1.2 / -0.0125em is the page's shared section-heading spec,
     the same one the Vision-Mission and Build-the-Helix cards now use. */
  margin:0;
  padding:1.35rem 2.25rem;
  background:#314D79;
  color:#fff;
  font-family:Ubuntu,Arial,sans-serif;
  font-weight:700;
  text-align:center;
}
/* Band + body read as one rounded panel, matching the Vision/Mission cards.
   The wrapper carries the radius and shadow so no seam shows between them. */
.isong-spon-panel{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(49,77,121,.12);
  /* 24px each side matches .isong-home-sections' own padding, so this panel
     shares the page's content edge with the Vision/Mission and Build-the-Helix
     cards instead of sitting 24px wider on each side. */
  margin:0 24px 2.5rem;
}
/* No max-width. A fixed cap left a 248px void on the right at full laptop width
   while buying almost nothing: the line ran to ~100 characters capped and ~111
   uncapped, both past the ideal measure, and the paragraph is three lines either
   way. Letting it fill the panel makes it read as part of the block. */
.isong-spon__intro{
  margin:0 0 2.5rem;
  padding:0;
  text-align:left;
  color:var(--isong-ink);
  font-size:1rem;
  line-height:1.65;
}
.isong-spon__tier{ margin:0 0 2.75rem; }
/* The trailing "Learn more" line moved into the intro paragraph, so the last
   tier no longer needs its own bottom margin; without this the panel ends
   with 80px of dead space against 40px at the top. */
.isong-spon__tier:last-child{ margin-bottom:0; }
/* Level labels. Centred over the logo row they introduce, and set at 18px
   rather than the page's 14px eyebrow size: these head a full-width band of
   logos, not a short column of text, so they need to carry more weight.
   No other heading on isong.org carries a decorative underline, so the one
   that used to sit here has been removed. */
h3.isong-spon__tier-name{
  text-align:center;
  color:var(--isong-navy);
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 1.5rem;
}
.isong-spon__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:2.25rem 3rem;
}
.isong-spon__grid li{ margin:0; padding:0; }
.isong-spon__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:100%;
}
.isong-spon .isong-spon__link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-bottom:0;
  background:none;
  transition:opacity .15s ease;
}
.isong-spon .isong-spon__link:hover,
.isong-spon .isong-spon__link:focus-visible{ opacity:.72; }
.isong-spon .isong-spon__link:focus-visible{
  outline:3px solid var(--isong-navy);
  outline-offset:6px;
}
.isong-spon__logo{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.isong-spon__note{
  margin:.85rem 0 0;
  font-size:.875rem;
  line-height:1.5;
  color:var(--isong-muted);
}
.isong-spon__tier--host   .isong-spon__item,
.isong-spon__tier--host   .isong-spon__link{ width:24rem; }
/* --lunch is a named-benefit tier at the same $5,000 value as Gold, so it
   shares Gold's slot size; --grant (Grant Program Sponsor, added 2026-08-23
   on John's instruction that a grant supporter is its own level rather than
   a caption under Bronze) is the same at $2,000 beside Bronze.
   --coffee (Exhibit Hall Coffee Break Sponsor, $500, added 2026-08-25) also takes
   Bronze's slot at every breakpoint: John's call, because the same UF logo at a
   slightly smaller size read as a mistake, not a rank; the tier ORDER carries the
   hierarchy below Gold, and only the advertisers step down in size. */
.isong-spon__tier--gold   .isong-spon__item,
.isong-spon__tier--gold   .isong-spon__link,
.isong-spon__tier--gold   .isong-spon__plate,
.isong-spon__tier--lunch  .isong-spon__item,
.isong-spon__tier--lunch  .isong-spon__link{ width:17.5rem; }
.isong-spon__tier--bronze .isong-spon__item,
.isong-spon__tier--bronze .isong-spon__link,
.isong-spon__tier--grant  .isong-spon__item,
.isong-spon__tier--grant  .isong-spon__link,
.isong-spon__tier--coffee .isong-spon__item,
.isong-spon__tier--coffee .isong-spon__link{ width:13.75rem; }
.isong-spon__tier--ad     .isong-spon__item,
.isong-spon__tier--ad     .isong-spon__link{ width:11.25rem; }
.isong-spon__tier--host   .isong-spon__link{ height:6.9rem; }
.isong-spon__tier--gold   .isong-spon__link,
.isong-spon__tier--gold   .isong-spon__plate,
.isong-spon__tier--lunch  .isong-spon__link{ height:4.9rem; }
.isong-spon__tier--bronze .isong-spon__link,
.isong-spon__tier--grant  .isong-spon__link,
.isong-spon__tier--coffee .isong-spon__link{ height:3.9rem; }
.isong-spon__tier--ad     .isong-spon__link{ height:3rem; }
.isong-spon__tier--host .isong-spon__note{ font-size:.875rem; }
.isong-spon .isong-spon__plate{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 1rem;
  border-radius:4px;
  background:rgba(49,77,121,.06);
  color:var(--isong-navy);
  font-size:1.25rem;
  font-weight:700;
  text-decoration:none;
  border-bottom:0;
}
.isong-spon .isong-spon__plate:hover,
.isong-spon .isong-spon__plate:focus-visible{ background:rgba(49,77,121,.12); }
.isong-spon .isong-spon__plate:focus-visible{ outline:3px solid var(--isong-navy); outline-offset:4px; }
/* Mid-width windows: force a clean 2-across in Bronze rather than 3 + 1 orphan.
   320px items mean a third will not fit until the container passes ~1030px,
   at which point the 4-across default has already taken over. */
@media (max-width:1024px){
  .isong-spon__tier--bronze .isong-spon__item,
  .isong-spon__tier--bronze .isong-spon__link,
  .isong-spon__tier--grant  .isong-spon__item,
  .isong-spon__tier--grant  .isong-spon__link,
  .isong-spon__tier--coffee .isong-spon__item,
  .isong-spon__tier--coffee .isong-spon__link{ width:20rem; }
  .isong-spon__tier--bronze .isong-spon__link,
  .isong-spon__tier--grant  .isong-spon__link,
  .isong-spon__tier--coffee .isong-spon__link{ height:5rem; }
}
@media (max-width:640px){
  .isong-spon__grid{ gap:2rem; }
  .isong-spon__tier--host   .isong-spon__item,
  .isong-spon__tier--host   .isong-spon__link{ width:17rem; }
  .isong-spon__tier--gold   .isong-spon__item,
  .isong-spon__tier--gold   .isong-spon__link,
  .isong-spon__tier--gold   .isong-spon__plate,
  .isong-spon__tier--lunch  .isong-spon__item,
  .isong-spon__tier--lunch  .isong-spon__link{ width:14rem; }
  .isong-spon__tier--bronze .isong-spon__item,
  .isong-spon__tier--bronze .isong-spon__link,
  .isong-spon__tier--grant  .isong-spon__item,
  .isong-spon__tier--grant  .isong-spon__link,
  .isong-spon__tier--coffee .isong-spon__item,
  .isong-spon__tier--coffee .isong-spon__link{ width:11.5rem; }
  .isong-spon__tier--ad     .isong-spon__item,
  .isong-spon__tier--ad     .isong-spon__link{ width:10rem; }
  .isong-spon__tier--host   .isong-spon__link{ height:4.9rem; }
  .isong-spon__tier--gold   .isong-spon__link,
  .isong-spon__tier--gold   .isong-spon__plate,
  .isong-spon__tier--lunch  .isong-spon__link{ height:4rem; }
  .isong-spon__tier--bronze .isong-spon__link,
  .isong-spon__tier--grant  .isong-spon__link,
  .isong-spon__tier--coffee .isong-spon__link{ height:3.3rem; }
  .isong-spon__tier--ad     .isong-spon__link{ height:2.7rem; }
  h3.isong-spon__tier-name{ font-size:1rem; margin:0 0 1.25rem; }
  .isong-spon .isong-spon__plate{ font-size:1.05rem; }
}
/* Below 480px the theme's own h3 rule (20px) sits after user.css in document
   order and wins on equal specificity, which would make the level labels LARGER on
   a phone than on a laptop. The leading "body " is only there to out-specify it. */
@media screen and (max-width:479px){
  body h3.isong-spon__tier-name{ font-size:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .isong-spon .isong-spon__link{ transition:none; }
}

/* The theme sets link colour at .gadgetContentEditableArea a:not(.functionalButton),
   which out-specifies a two-class selector. These win it back. */
.isong-spon a.isong-spon__link,
.isong-spon a.isong-spon__link:link,
.isong-spon a.isong-spon__link:visited,
.isong-spon a.isong-spon__link:hover{
  color:inherit;
  text-decoration:none;
  border-bottom:0;
}
/* An earlier ISONG contrast block in this file sets link colour with
   !important, so the plate needs !important plus higher specificity to win.
   The "Learn more" link is deliberately left alone: it is an ordinary link
   and should keep the site's standard link colour. */
.isong-spon a.isong-spon__plate,
.isong-spon a.isong-spon__plate:link,
.isong-spon a.isong-spon__plate:visited,
.isong-spon a.isong-spon__plate:hover{
  color:#314D79 !important;
  text-decoration:none !important;
  border-bottom:0;
}

/* ===== END ISONG SPONSOR WALL ===================================== */

/* ===== BEGIN ISONG MOBILE MENU CURRENT PAGE (2026-07-31) ===== */
/* The 2026-07-28 fix is scoped to .WaGadgetMenuHorizontal, so the mobile
   panel was never covered and still rendered the theme green.
   Measured 2026-07-31 at a real 375px viewport, menu open:
     first level  #87C97F on #F7F7F7  18px/400  1.83:1  ->  #1E5645  5.96:1
     second level #87C97F on #F2F2F2  15px/400  1.75:1  ->  #1E5645  5.70:1
   The .mobilePanel step is load-bearing: the theme rule
   .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li.sel > .item > a
   is (0,5,4) and the plain mirror of the horizontal rule loses to it.
   Same colour the desktop fix already uses; no new value in the palette. */
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.sel > .item > a,
.WaGadgetMobilePanel .mobilePanel .menuInner ul.secondLevel > li.sel > .item > a {
  color: #1E5645;
}
/* ===== END ISONG MOBILE MENU CURRENT PAGE (2026-07-31) ===== */

/* ===== BEGIN ISONG H2 STANDARDISATION (2026-07-31) ===== */
/* John settled the section heading on 2026-07-31: 28 / 1.2 / 700 / -0.0125em
   in navy is canonical, and the interior 28 / 1.21 / 500 teal treatment
   retires onto it. Navy is 8.28:1 on the card surface where teal is 4.72:1,
   and the 700/navy treatment is the one already unified across three card
   families on 2026-07-30.

   The :not([class*="isong-"]) exclusion is load-bearing. Without it
   h2.isong-spon__banner is caught: the sponsor wall sits in a Content gadget,
   not a Custom HTML one, so .gadgetContentEditableArea reaches it, and forcing
   it to #314D79 puts navy text on the navy band. Measured while testing
   before the exclusion was added: 8.67:1 -> 1.05:1.

   The 28/24/22 ladder is repeated because an override that omits it would
   leave these headings at 28px on a phone while the rest of the page shrank.
   2026-08-22: the scroll-reveal script (v5, 2026-08-14) adds isong-anim and
   isong-anim-in to bare h2s it arms, which made them match the exclusion and
   fall back to the theme teal/500 while an unarmed h2 above the fold on the
   same page stayed navy/700. The two exact-class selectors below readmit an
   h2 whose ONLY classes are the reveal classes. */
body .gadgetContentEditableArea h2:not([class*="isong-"]),
body .gadgetContentEditableArea h2[class="isong-anim"],
body .gadgetContentEditableArea h2[class="isong-anim isong-anim-in"] {
  color: #314D79;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.0125em;
}
@media screen and (max-width: 767px) {
  body .gadgetContentEditableArea h2:not([class*="isong-"]),
body .gadgetContentEditableArea h2[class="isong-anim"],
body .gadgetContentEditableArea h2[class="isong-anim isong-anim-in"] { font-size: 24px; }
}
@media screen and (max-width: 479px) {
  body .gadgetContentEditableArea h2:not([class*="isong-"]),
body .gadgetContentEditableArea h2[class="isong-anim"],
body .gadgetContentEditableArea h2[class="isong-anim isong-anim-in"] { font-size: 22px; }
}
/* ===== END ISONG H2 STANDARDISATION (2026-07-31) ===== */

/* ===== BEGIN ISONG SECTION HEADING CLASS (2026-07-31) ===== */
/* An explicit allow-list class, applied at source in the gadget markup.

   The H2 STANDARDISATION block above is scoped to .gadgetContentEditableArea,
   so it reaches Content gadgets only. Sixteen section headings live in Custom
   HTML gadgets on eleven pages and were left on the theme default of
   28 / 1.21 / 500 in teal.

   Widening that selector is not the fix. The ISONG components live in Custom
   HTML gadgets too, and several of their headings carry no class of their own:
   the two gradient home cards render white h2 on teal, and a blanket rule
   would put navy on teal at 1.76:1. This class is opt-in instead, added to the
   specific headings that should carry the canonical treatment, which follows
   the same allow-list pattern as ISONG HOME SECTION HEADINGS.

   Font size is not set at desktop: the theme already gives h2 28px. Only the
   767 / 479 steps are repeated, for the same reason as the block above.

   Applied on: /asia-pacific, /education, /emea, /isong-resource,
   /member-publications, /membership, /north-america, /regions, /research,
   /south-america-latin-america, /standards-of-practice. */
body .isong-h2 {
  color: #314D79;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.0125em;
}
@media screen and (max-width: 767px) {
  body .isong-h2 { font-size: 24px; }
}
@media screen and (max-width: 479px) {
  body .isong-h2 { font-size: 22px; }
}
/* ===== END ISONG SECTION HEADING CLASS (2026-07-31) ===== */

/* ===== BEGIN ISONG SCROLL REVEAL (2026-08-13) ===== */
@media (prefers-reduced-motion: no-preference) {
  html.isong-anim-ready .isong-anim {
    opacity: 0;
    transform: translateY(18px);
  }
  html.isong-anim-ready .isong-anim.isong-anim-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.55s cubic-bezier(0.33, 1, 0.68, 1),
                transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  }
}
@media print {
  .isong-anim { opacity: 1 !important; transform: none !important; }
}
/* ===== END ISONG SCROLL REVEAL (2026-08-13) ===== */

/* ===== BEGIN ISONG MICRO-INTERACTIONS (2026-08-14) =====
   Phase 2, workstream 1: motion tokens plus a consistent hover /
   focus / press layer for theme-owned interactive elements.
   Pure state styling: nothing here hides content, nothing auto-plays,
   and everything animated is paint-only (opacity, transform,
   box-shadow, colour, underline weight). Transitions live inside
   prefers-reduced-motion: no-preference; the state changes themselves
   apply to everyone. Rollback: delete this block. */

:root {
  --isong-dur-fast: 150ms;  /* colour, opacity, pressed feedback */
  --isong-dur-base: 250ms;  /* hover lift + shadow, dropdowns; matches the deployed home cards */
  --isong-dur-slow: 550ms;  /* scroll reveal, already deployed; listed so the ladder is complete */
  --isong-ease: cubic-bezier(0.33, 1, 0.68, 1);  /* easeOutCubic, same curve as the scroll reveal */
  --isong-lift: -3px;      /* standard card / tile */
  --isong-lift-lg: -4px;   /* large feature panel */
  --isong-lift-sm: -2px;   /* buttons and small controls */
  --isong-slide: 6px;      /* dropdown entry distance */
  --isong-shadow-hover: 0 14px 34px rgba(49,77,121,.18);
  --isong-shadow-hover-lg: 0 16px 44px rgba(49,77,121,.24);
  --isong-shadow-press: 0 4px 12px rgba(49,77,121,.16);
}

/* ---------- State styles (all users, any motion preference) ---------- */

/* Stylized buttons: 4px radius (John, 2026-08-14), hover deepen + lift,
   pressed state. The background deepen applies to buttonStyle001/002
   only; 003 renders white-on-navy (see reference_button-contrast.css)
   and keeps its own background. .nextButton / .typeButton / login
   controls are deliberately untouched, same as the button contrast work. */
.stylizedButton,
a[class*="buttonStyle"] {
  border-radius: 4px;
}
a.buttonStyle001:hover, a:link.buttonStyle001:hover,
a.buttonStyle002:hover, a:link.buttonStyle002:hover {
  background-color: #1E5645; /* white on this: 6.39:1 */
}
.stylizedButton:hover {
  transform: translateY(var(--isong-lift-sm));
  box-shadow: var(--isong-shadow-hover);
}
.stylizedButton:active {
  transform: translateY(0);
  box-shadow: var(--isong-shadow-press);
}

/* Content links: colour deepens one design-system step and the
   underline thickens. The selector list mirrors the 2026-07-29
   !important link-colour rule; buttons are excluded so button text can
   never inherit the hover colour (buttonStyle003 is white on navy). */
.WaGadgetContentBlock a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link),
.gadgetContentEditableArea a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link),
.boxOuterContainer a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.WaGadgetContentBlock a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link):hover,
.gadgetContentEditableArea a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link):hover,
.boxOuterContainer a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link):hover {
  color: #1E5645 !important; /* 6.39:1 on white; !important mirrors the base rule it shifts */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Links on the grey #E6E6E6 bands keep their darker #245C4C on hover
   (the underline feedback still applies). */
div[style*="background-color:#E6E6E6" i] .gadgetContentEditableArea a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link):hover {
  color: #245C4C !important;
}

/* Sponsor wall: full colour always (John, 2026-08-14 - no grayscale,
   no dimming). Hover / keyboard focus lifts the mark on a white plate
   with the standard card shadow. Replaces the earlier opacity dim. */
.isong-spon .isong-spon__link:hover,
.isong-spon .isong-spon__link:focus-visible {
  opacity: 1;
  background-color: #ffffff;
  border-radius: 12px;
  transform: translateY(var(--isong-lift));
  box-shadow: var(--isong-shadow-hover);
}
.isong-spon .isong-spon__plate:hover,
.isong-spon .isong-spon__plate:focus-visible {
  transform: translateY(var(--isong-lift));
  box-shadow: var(--isong-shadow-hover);
}

/* Pressed states for the home-page interactive cards */
a.isong-mv-card:active {
  transform: translateY(-1px);
  box-shadow: var(--isong-shadow-press);
}
.isong-btn:active {
  transform: translateY(0);
  box-shadow: 0 3px 9px rgba(0,0,0,.2);
}

/* ---------- Motion (suppressed under reduced motion) ----------
   transition-property is always named explicitly: the theme declares
   transition-property: all at zero duration on nearly everything, and
   an unqualified duration here would start animating layout site-wide. */
@media (prefers-reduced-motion: no-preference) {
  .stylizedButton,
  a[class*="buttonStyle"] {
    transition:
      background-color var(--isong-dur-fast) var(--isong-ease),
      color var(--isong-dur-fast) var(--isong-ease),
      transform var(--isong-dur-fast) var(--isong-ease),
      box-shadow var(--isong-dur-fast) var(--isong-ease);
  }
  .stylizedButton:active { transition-duration: 60ms; }

  .WaGadgetContentBlock a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link),
  .gadgetContentEditableArea a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link),
  .boxOuterContainer a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):not(.isong-spon__link) {
    transition:
      color var(--isong-dur-fast) var(--isong-ease),
      text-decoration-thickness var(--isong-dur-fast) var(--isong-ease),
      text-underline-offset var(--isong-dur-fast) var(--isong-ease);
  }

  /* Menu: colour feedback on items; fade-plus-slide on the dropdowns.
     The theme already fades them at 300ms; this adds direction and a
     clean exit (visibility joins the transition so the panel no longer
     cuts out at the end of its own fade). The reveal selectors repeat
     the transform reset for :hover, :focus-within and a scripted
     li.hover, so keyboard users from the 2026-07 accessibility block
     can never be left with an offset dropdown. */
  .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a,
  .WaGadgetMenuHorizontal .menuInner ul.secondLevel > li > .item > a {
    transition:
      background-color var(--isong-dur-fast) var(--isong-ease),
      color var(--isong-dur-fast) var(--isong-ease);
  }
  .WaGadgetMenuHorizontal .menuInner ul.secondLevel {
    transform: translateY(calc(-1 * var(--isong-slide)));
    transition:
      opacity var(--isong-dur-base) var(--isong-ease),
      transform var(--isong-dur-base) var(--isong-ease),
      visibility 0s linear var(--isong-dur-base);
  }
  .WaGadgetMenuHorizontal .menuInner ul.firstLevel li:hover ul.secondLevel,
  .WaGadgetMenuHorizontal .menuInner ul.firstLevel li.hover ul.secondLevel,
  .WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within ul.secondLevel {
    transform: translateY(0);
    transition:
      opacity var(--isong-dur-base) var(--isong-ease),
      transform var(--isong-dur-base) var(--isong-ease),
      visibility 0s linear 0s;
  }

  .isong-spon .isong-spon__link,
  .isong-spon .isong-spon__plate {
    transition:
      opacity var(--isong-dur-fast) var(--isong-ease),
      background-color var(--isong-dur-base) var(--isong-ease),
      transform var(--isong-dur-base) var(--isong-ease),
      box-shadow var(--isong-dur-base) var(--isong-ease);
  }

  a.isong-mv-card:active,
  .isong-btn:active { transition-duration: 60ms; }
}

/* Under reduced motion, also stop the theme's own 300ms dropdown fade. */
@media (prefers-reduced-motion: reduce) {
  .WaGadgetMenuHorizontal .menuInner ul.secondLevel { transition: none; }
}
/* ===== END ISONG MICRO-INTERACTIONS (2026-08-14) ===== */

/* ===== BEGIN ISONG MOBILE MENU MOTION (2026-08-14) ===== */
/* Entrance animation states for the mobile menu and login panels.
   The classes are added ONLY by the ISONG MOBILE MENU MOTION block in
   Global JavaScript, which observes Wild Apricot's own display toggle
   and never intercepts it - the menu cannot fail to open because of
   this code. Hidden state exists only under .isong-mm-enter, which the
   script adds and removes (with a hard cleanup that also cancels the
   transition object). Uses the motion tokens defined above. */
@media (prefers-reduced-motion: no-preference) {
  .WaGadgetMobilePanel .mobilePanel .menuInner.isong-mm-enter,
  .WaGadgetMobilePanel .mobilePanel .loginInner.isong-mm-enter {
    opacity: 0;
    transform: translateY(calc(-1 * var(--isong-slide, 6px)));
  }
  .WaGadgetMobilePanel .mobilePanel .menuInner.isong-mm-enter.isong-mm-in,
  .WaGadgetMobilePanel .mobilePanel .loginInner.isong-mm-enter.isong-mm-in {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--isong-dur-base, 250ms) var(--isong-ease, ease-out),
      transform var(--isong-dur-base, 250ms) var(--isong-ease, ease-out);
  }
}
/* ===== END ISONG MOBILE MENU MOTION (2026-08-14) ===== */

/* ===== BEGIN ISONG HERO ENTRANCE (2026-08-14) ===== */
/* One-shot entrance choreography for the home hero, approved from the
   2026-08-14 demo: h1 clip rise, divider wipe, then tagline / lead /
   note / CTA staggering in. ~1.3s total, runs once per load, never
   repeats - WCAG 2.2.2 not engaged. Hidden states exist ONLY under
   html.isong-hero-ready, a class only the ISONG HERO ENTRANCE script
   in Global JavaScript adds (same safety pattern as the scroll
   reveal): no script, nothing hidden. Reduced motion is respected at
   the script layer (never arms) and here (no-preference wrapper). */
@media (prefers-reduced-motion: no-preference) {
  html.isong-hero-ready .isong-welcome-header h1 {
    clip-path: inset(0 0 100% 0);
    transform: translateY(24px);
    opacity: .001;
  }
  html.isong-hero-ready .isong-welcome-divider {
    transform: scaleX(0);
    transform-origin: left center;
  }
  html.isong-hero-ready .isong-welcome-tagline,
  html.isong-hero-ready .isong-welcome-header p:not(.isong-welcome-tagline):not(.isong-welcome-note),
  html.isong-hero-ready .isong-welcome-note,
  html.isong-hero-ready .isong-welcome-cta-wrap {
    opacity: 0;
    transform: translateY(14px);
  }

  html.isong-hero-ready.isong-hero-in .isong-welcome-header h1 {
    clip-path: inset(-2% -2% -2% -2%);
    transform: translateY(0);
    opacity: 1;
    transition:
      clip-path var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .1s,
      transform var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .1s,
      opacity .2s linear .1s;
  }
  html.isong-hero-ready.isong-hero-in .isong-welcome-divider {
    transform: scaleX(1);
    transition: transform .4s var(--isong-ease, ease-out) .48s;
  }
  html.isong-hero-ready.isong-hero-in .isong-welcome-tagline {
    opacity: 1; transform: translateY(0);
    transition: opacity var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .56s,
                transform var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .56s;
  }
  html.isong-hero-ready.isong-hero-in .isong-welcome-header p:not(.isong-welcome-tagline):not(.isong-welcome-note) {
    opacity: 1; transform: translateY(0);
    transition: opacity var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .68s,
                transform var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .68s;
  }
  html.isong-hero-ready.isong-hero-in .isong-welcome-note {
    opacity: 1; transform: translateY(0);
    transition: opacity var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .78s,
                transform var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .78s;
  }
  html.isong-hero-ready.isong-hero-in .isong-welcome-cta-wrap {
    opacity: 1; transform: translateY(0);
    transition: opacity var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .88s,
                transform var(--isong-dur-slow, 550ms) var(--isong-ease, ease-out) .88s;
  }
}
@media print {
  .isong-welcome-section * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
/* ===== END ISONG HERO ENTRANCE (2026-08-14) ===== */

/* ===== BEGIN ISONG SPONSOR REVEAL STAGGER (2026-08-14) ===== */
/* v2 2026-08-14 (John): each TIER group now reveals as it scrolls
   into view (the reveal script v3 targets .isong-spon__tier instead of
   the whole panel), and within each arriving tier the logo tiles
   cascade in 70ms steps (nth-child counts within the tier's grid).
   Hidden state exists only under html.isong-anim-ready - the class the
   scroll-reveal script adds, and it never adds it under reduced
   motion - so no script means nothing hidden, same as the panel. */
@media (prefers-reduced-motion: no-preference) {
  html.isong-anim-ready .isong-spon__tier.isong-anim .isong-spon__item {
    opacity: 0;
    transform: translateY(10px);
  }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity .45s var(--isong-ease, ease-out),
      transform .45s var(--isong-ease, ease-out);
  }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(1) { transition-delay: .15s }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(2) { transition-delay: .22s }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(3) { transition-delay: .29s }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(4) { transition-delay: .36s }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(5) { transition-delay: .43s }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(6) { transition-delay: .50s }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(7) { transition-delay: .57s }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(8) { transition-delay: .64s }
  html.isong-anim-ready .isong-spon__tier.isong-anim.isong-anim-in .isong-spon__item:nth-child(9) { transition-delay: .71s }
}
@media print {
  .isong-spon__item { opacity: 1 !important; transform: none !important; }
}
/* ===== END ISONG SPONSOR REVEAL STAGGER (2026-08-14) ===== */

/* ===== BEGIN ISONG SMOOTH SCROLL (2026-08-14) ===== */
/* Native smooth scrolling for in-page anchors, disabled for reduced
   motion. scroll-margin joins later with the sticky header work. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* ===== END ISONG SMOOTH SCROLL (2026-08-14) ===== */

/* ===== BEGIN ISONG HELIX HERO (2026-08-14) ===== */
/* The drawn-helix ambient layer behind the home hero, approved from
   demo 03 with John's dials: full colour, 10% opacity, parallax on.
   The SVG itself is injected by the ISONG HELIX HERO block in Global
   JavaScript (inline, so the strand strokes can line-draw); no script,
   no layer, and the page renders exactly as before. The line-draw
   rides the hero entrance's arming classes (isong-hero-ready /
   isong-hero-in), so it inherits that block's reduced-motion gate and
   its 2.6s hard cleanup; the draw completes at ~2.4s. Decorative:
   aria-hidden, pointer-events none, one-shot - WCAG 2.2.2 untouched. */
.isong-welcome-section { position: relative; overflow: hidden; }
.isong-welcome-header { position: relative; z-index: 1; }
.isong-helix-layer {
  position: absolute; top: -10px; right: 14px; width: 335px;
  opacity: .10; pointer-events: none; z-index: 0; will-change: transform;
}
.isong-helix-layer svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .isong-helix-layer { width: 250px; right: 10px; opacity: .07; } }
@media (max-width: 700px) { .isong-helix-layer { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  html.isong-hero-ready .isong-helix-layer .ih-teal,
  html.isong-hero-ready .isong-helix-layer .ih-navy-upper,
  html.isong-hero-ready .isong-helix-layer .ih-navy-lower,
  html.isong-hero-ready .isong-helix-layer .ih-pinbar {
    stroke-dasharray: 1; stroke-dashoffset: 1;
  }
  html.isong-hero-ready .isong-helix-layer .ih-pindot {
    opacity: 0; transform: scale(.4); transform-origin: center; transform-box: fill-box;
  }
  html.isong-hero-ready .isong-helix-layer .ih-arcL,
  html.isong-hero-ready .isong-helix-layer .ih-arcR {
    opacity: 0; transform: translateY(6px); transform-box: fill-box;
  }
  html.isong-hero-ready .isong-helix-layer .ih-flame {
    opacity: 0; transform: scale(.85) translateY(8px);
    transform-origin: center bottom; transform-box: fill-box;
  }

  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-teal {
    stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--isong-ease, ease-out) .15s;
  }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-navy-upper {
    stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--isong-ease, ease-out) .35s;
  }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-navy-lower {
    stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--isong-ease, ease-out) .55s;
  }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-pinbar {
    stroke-dashoffset: 0; transition: stroke-dashoffset .3s var(--isong-ease, ease-out);
  }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-pindot {
    opacity: 1; transform: scale(1);
    transition: opacity .25s var(--isong-ease, ease-out), transform .35s var(--isong-ease, ease-out);
  }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-pin1 { transition-delay: .9s }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-pin2 { transition-delay: 1.05s }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-pin3 { transition-delay: 1.2s }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-pin4 { transition-delay: 1.35s }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-arcL {
    opacity: 1; transform: translateY(0);
    transition: opacity .5s var(--isong-ease, ease-out) 1.5s, transform .5s var(--isong-ease, ease-out) 1.5s;
  }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-arcR {
    opacity: 1; transform: translateY(0);
    transition: opacity .5s var(--isong-ease, ease-out) 1.6s, transform .5s var(--isong-ease, ease-out) 1.6s;
  }
  html.isong-hero-ready.isong-hero-in .isong-helix-layer .ih-flame {
    opacity: 1; transform: scale(1) translateY(0);
    transition: opacity .55s var(--isong-ease, ease-out) 1.85s, transform .55s var(--isong-ease, ease-out) 1.85s;
  }
}
@media print { .isong-helix-layer { display: none; } }
/* ===== END ISONG HELIX HERO (2026-08-14) ===== */

/* ===== BEGIN ISONG STATS BAND (2026-08-14) ===== */
/* "ISONG at a glance": four measured figures on a navy panel, injected
   before the sponsor wall by the ISONG STATS BAND block in Global
   JavaScript (no script, no band - pure enhancement). Figures measured
   2026-08-14 from the members database and the About page: 258 members
   (worded 250+), 17 countries and territories, incorporated 1988 (38
   years), 2026 World Congress Miami. Count-up runs once on first view,
   under no-preference only; the injected markup carries the final
   numbers, and the tile-hidden state exists only under .is-armed,
   which only the script adds. */
.isong-stats {
  background: linear-gradient(135deg, #314D79, #233A60);
  border-radius: var(--isong-radius, 16px);
  padding: 44px 36px 40px;
  margin: 0 0 2.5rem;
  color: #fff;
}
.isong-stats h2 {
  /* Band-heading size per the sponsor tier-label precedent: a 14px
     eyebrow reads as a stray label on a full-width band (John,
     2026-08-14); 18px also read too small (John, same day). Now on
     the site h2 scale so it reads as a true section heading:
     28px, 22px under 640px. */
  font-size: 28px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #7DD4BE; text-align: center;
  margin: 0 0 32px; line-height: 1.2;
}
@media (max-width: 640px) { .isong-stats h2 { font-size: 22px; } }
.isong-stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
@media (max-width: 900px) { .isong-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; } }
@media (max-width: 480px) { .isong-stats__grid { grid-template-columns: 1fr; gap: 26px; } }
.isong-stats__stat { text-align: center; }
.isong-stats__num {
  font-size: 46px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.0125em; color: #fff; font-variant-numeric: tabular-nums;
}
.isong-stats__num .isong-stats__suffix { color: #7DD4BE; }
.isong-stats__label {
  margin-top: 8px; font-size: 15px; color: #B8C6D8; line-height: 1.45;
}
@media (prefers-reduced-motion: no-preference) {
  .isong-stats.is-armed .isong-stats__stat { opacity: 0; transform: translateY(14px); }
  .isong-stats.is-armed .isong-stats__stat.is-in {
    opacity: 1; transform: translateY(0);
    transition: opacity .55s var(--isong-ease, ease-out),
                transform .55s var(--isong-ease, ease-out);
  }
}
@media print { .isong-stats__stat { opacity: 1 !important; transform: none !important; } }
/* ===== END ISONG STATS BAND (2026-08-14) ===== */

/* ===== BEGIN ISONG STICKY HEADER (2026-08-14) ===== */
/* The compact quick-nav bar (vector mark, menu + submenu dropdowns, Contact Us),
   injected site-wide by the ISONG STICKY HEADER block in Global
   JavaScript. The full header scrolls away untouched; the bar arrives
   as a fixed overlay by transform only, so there is never a layout
   shift. visibility joins the transition so its links cannot take
   keyboard focus while off-screen. Desktop only (the mobile panel is
   the phone navigation). Menu links are cloned from the live menu at
   load, so Becky's menu edits propagate automatically. */
.isong-sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  background: #fff; box-shadow: 0 4px 18px rgba(49,77,121,.14);
  transform: translateY(-110%); visibility: hidden;
  will-change: transform;
  transition: transform .3s var(--isong-ease, ease-out),
              visibility 0s linear .3s;
}
.isong-sticky-bar.is-on {
  transform: translateY(0); visibility: visible;
  transition: transform .3s var(--isong-ease, ease-out),
              visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) { .isong-sticky-bar { transition: none; } }
.isong-sticky-inner {
  max-width: 1200px; margin: 0 auto; padding: 7px 24px;
  display: flex; align-items: center; gap: 16px;
}
.isong-sticky-mark { display: block; flex: 0 0 auto; }
.isong-sticky-mark svg { width: 38px; height: auto; display: block; }
.isong-sticky-bar nav { display: flex; flex: 1 1 auto; min-width: 0; }
.isong-sticky-bar nav a {
  display: block; padding: 12px 9px; text-decoration: none; color: #162232;
  font-family: var(--isong-font-condensed, "Ubuntu Condensed", Arial, sans-serif);
  font-size: 15.5px; letter-spacing: .01em; white-space: nowrap;
  transition: background-color var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out);
}
.isong-sticky-bar nav a:hover { background: rgba(49,77,121,.06); }
/* Submenu dropdowns (2026-08-14, same day): the bar first carried
   only top-level links, which stranded the subheader pages once the
   full header scrolled away (John). Each top-level item now carries
   its child pages, cloned from the live menu like the bar itself.
   Open on hover and on keyboard focus (:focus-within); the closed
   state keeps visibility:hidden so closed links never take focus. */
.isong-sticky-item { position: relative; }
.isong-sticky-bar nav .isong-sticky-item.has-drop > a::after {
  content: "\25BE"; content: "\25BE" / ""; margin-left: 6px; font-size: 10px; color: #8CA0B8;
}
.isong-sticky-drop {
  position: absolute; top: 100%; left: 0; min-width: 230px; max-width: 300px;
  background: #fff; border-radius: 0 0 8px 8px; padding: 6px 0;
  box-shadow: 0 18px 34px rgba(49,77,121,.20);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out),
              transform var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out),
              visibility 0s linear var(--isong-dur-fast, 150ms);
}
.isong-sticky-item:hover .isong-sticky-drop,
.isong-sticky-item:focus-within .isong-sticky-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out),
              transform var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out),
              visibility 0s linear 0s;
}
.isong-sticky-bar nav .isong-sticky-item:nth-last-child(-n+2) .isong-sticky-drop {
  left: auto; right: 0;
}
.isong-sticky-bar .isong-sticky-drop a {
  white-space: normal; font-size: 14.5px; line-height: 1.35; padding: 9px 16px;
}
/* !important: the open state re-declares transition at higher
   specificity, so a bare override can never win from here. */
@media (prefers-reduced-motion: reduce) { .isong-sticky-drop { transition: none !important; } }
.isong-sticky-cta {
  flex: 0 0 auto; display: inline-block; background: #314D79; color: #fff !important;
  font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 6px;
  text-decoration: none;
  transition: transform var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out),
              box-shadow var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out);
}
.isong-sticky-cta:hover { transform: translateY(-2px); box-shadow: var(--isong-shadow-hover, 0 14px 34px rgba(49,77,121,.18)); }
@media (max-width: 1120px) { .isong-sticky-cta { display: none; } }
@media (max-width: 960px) { .isong-sticky-bar { display: none; } }
@media print { .isong-sticky-bar { display: none; } }
/* Anchor targets land clear of the fixed bar on desktop */
@media (min-width: 960px) {
  h1, h2, h3, h4, [id] { scroll-margin-top: 72px; }
}
/* Sticky bar overflow guard (2026-08-23): the "More" item and how moved
   menu items render inside its panel. The button borrows the nav link
   look; colour is inherited from the bar's link rule so the two cannot
   drift. Items moved into More keep their own submenu markup, which here
   turns from a hover flyout into an indented static group: the panel's
   visibility is INHERITED rather than set, so the nested links stay
   unfocusable while More is closed (an explicit visibility:visible on a
   descendant would defeat the parent's hidden state). */
.isong-sticky-bar nav .isong-sticky-more-btn {
  display: block; padding: 12px 9px; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; line-height: inherit; cursor: pointer;
  font-family: var(--isong-font-condensed, "Ubuntu Condensed", Arial, sans-serif);
  font-size: 15.5px; letter-spacing: .01em; white-space: nowrap;
  transition: background-color var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out);
}
.isong-sticky-bar nav .isong-sticky-more-btn::after {
  content: "\25BE"; content: "\25BE" / ""; margin-left: 6px; font-size: 10px; color: #8CA0B8;
}
.isong-sticky-bar nav .isong-sticky-more-btn:hover { background: rgba(49,77,121,.06); }
.isong-sticky-bar.is-tight nav > .isong-sticky-item > a,
.isong-sticky-bar.is-tight nav > .isong-sticky-item > .isong-sticky-more-btn { padding-left: 7px; padding-right: 7px; }
.isong-sticky-bar nav .isong-sticky-more-btn:focus-visible { outline: 3px solid #17685A; outline-offset: -3px; }
.isong-sticky-item.is-open > .isong-sticky-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out),
              transform var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out),
              visibility 0s linear 0s;
}
.isong-sticky-more > .isong-sticky-drop { left: auto; right: 0; min-width: 250px; max-width: 320px; }
.isong-sticky-more .isong-sticky-drop .isong-sticky-item { position: static; }
.isong-sticky-more .isong-sticky-drop .isong-sticky-item > a { font-weight: 700; }
.isong-sticky-bar nav .isong-sticky-more .isong-sticky-drop .has-drop > a::after { content: none; }
.isong-sticky-more .isong-sticky-drop .isong-sticky-item .isong-sticky-drop {
  position: static; opacity: 1; visibility: inherit; transform: none;
  min-width: 0; max-width: none; padding: 0 0 6px; border-radius: 0; box-shadow: none;
  transition: none;
}
.isong-sticky-bar .isong-sticky-more .isong-sticky-drop .isong-sticky-item .isong-sticky-drop a {
  padding: 6px 16px 6px 30px; font-size: 13.5px;
}
/* ===== END ISONG STICKY HEADER (2026-08-14) ===== */

/* ===== BEGIN ISONG HOME BANNER FIELD (2026-08-15) ===== */
/* The home slideshow (id_67G96dd) is a fixed-height camera.js box that
   FITS each slide; whatever the slide does not cover shows the theme's
   pale blue (#d4ecf7). The slides are 1920x300 plates padded cream, so
   the field is cream too and any sliver at narrow widths blends in. */
#camera_wrap_67G96dd { background: #FDF6F0; }
/* ===== END ISONG HOME BANNER FIELD (2026-08-15) ===== */

/* ===== BEGIN ISONG HOME BANNER MOBILE HEIGHT (2026-08-22) ===== */
/* The slideshow gadget's Fixed height (188px, set 2026-08-15) was tuned for
   the 1200px content width, where a 1920x300 plate fills it exactly. Below
   that width camera.js keeps the 188px box and FITS the plate into it, so at
   390px the banner rendered 58px tall inside 130px of cream field (measured
   2026-08-22). This lets the box follow the plate's own 6.4:1 ratio at every
   width: 188px at 1200, 115px at 768, 60px at 390, no field. camera.js still
   runs; its inline height and margin-top are overridden with !important, and
   the wrap id is the same one the FIELD block above already scopes by.
   Rollback: delete this block; the 188px box returns on narrow screens. */
#camera_wrap_67G96dd,
#camera_wrap_67G96dd .camerarelative { height: auto !important; aspect-ratio: 1920 / 300; }
#camera_wrap_67G96dd .cameraSlide img { width: 100% !important; height: auto !important; margin-top: 0 !important; margin-left: 0 !important; }
/* ===== END ISONG HOME BANNER MOBILE HEIGHT (2026-08-22) ===== */

/* ===== BEGIN ISONG READING COLUMN (2026-08-15) ===== */
/* Steve's review #6: prose ran the full 1200px content width (About measured
   160 characters per line). John's call: a centered reading column for prose
   sections, structured blocks left full width. Opt-in class added at source in
   the gadget markup, so it never constrains cards, tables, bands or grids.
   MEASURED, not assumed: `ch` is the width of the zero glyph, which in Ubuntu
   is well under the average character, so a ch value buys ~1.4x that many
   characters. 68ch was tried first and rendered 80-94 characters per line on
   /about-us - still outside the target. 56ch measures 62-78 across the site's
   16px and 18px body sizes, which is the 66-80 reading measure. Re-measure the
   text node if the body font ever changes; do not trust the ch number.
   Centred, so the leftover space is symmetric and reads as an article rather
   than the hardcoded-band defect the no-hardcoded-widths rule is about. Full
   width again below 820px, where the gap would only waste space. */
.isong-prose { max-width: 56ch; margin-left: auto; margin-right: auto; }
@media (max-width: 820px) { .isong-prose { max-width: none; } }
/* ===== END ISONG READING COLUMN (2026-08-15) ===== */

/* ===== BEGIN ISONG STICKY LOGIN (2026-08-15) ===== */
/* Steve's review #7: the full-header Login sat only at the top of the page, so
   a scrolled-down visitor had to return to the top to log in. The sticky bar
   now carries a Log in link (injected by the ISONG STICKY HEADER block in
   Global JavaScript, right before the Contact Us CTA). The bar is a flex row
   with gap 16px and a flex-grow nav, so the link needs no margin of its own.
   Desktop-only like the rest of the bar. It points at the Wild Apricot login
   page rather than the header's OAuth dropdown, which cannot be cloned into a
   fixed bar. */
.isong-sticky-login {
  flex: 0 0 auto; display: inline-block;
  color: #314D79; font-size: 13.5px; font-weight: 700;
  padding: 9px 14px; border: 1.5px solid #C7D2E0; border-radius: 6px;
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out),
              background-color var(--isong-dur-fast, 150ms) var(--isong-ease, ease-out);
}
.isong-sticky-login:hover, .isong-sticky-login:focus-visible {
  border-color: #59BAA1; background-color: rgba(49,77,121,.05); text-decoration: none;
}
@media (max-width: 960px) { .isong-sticky-login { display: none; } }
/* ===== END ISONG STICKY LOGIN (2026-08-15) ===== */

/* ===== BEGIN ISONG BAND LINK CONTRAST (2026-08-15) ===== */
/* Links inside the blue callout bands must stay WHITE in EVERY state.
   The generic content-link rules earlier in this file are very specific - the
   micro-interactions hover rule reaches (0,6,1) - so a link on one of these
   bands was being repainted the site green on rest and #1E5645 on hover, which
   measures about 1.2:1 and 1.4:1 against the darkened band. John reported the
   hover state as 'almost impossible to see', which is exactly right.
   These selectors match that (0,6,1) and win on source order, being later.
   Scoped to the band, so ordinary links elsewhere keep the site link colour.
   White on #1F6C8C measures 5.86:1. Buttons are excluded: they carry their own
   fill and their own contrast. */
[style*="background-color:#3598C1"] .gadgetContentEditableArea a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]),
[style*="background-color:#3598C1"] .gadgetContentEditableArea a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):visited,
[style*="background-color:#3598C1"] .gadgetContentEditableArea a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):hover,
[style*="background-color:#3598C1"] .gadgetContentEditableArea a:not(.functionalButton):not(.stylizedButton):not([class*="buttonStyle"]):focus-visible {
  color: #FFFFFF !important;
}
/* ===== END ISONG BAND LINK CONTRAST (2026-08-15) ===== */

/* ===== BEGIN ISONG LATEST (2026-08-15) ===== */
/* "Latest from ISONG" - the home page block that replaces the Facebook page
   plugin. Markup is injected by the ISONG LATEST FROM ISONG block in Global
   JavaScript; the section shell and the follow row are authored in the gadget,
   so if the script never runs the visitor still gets the heading and the five
   follow links rather than an empty box.
   Tokens from 08 Design system: surface #F8FAFB, line #E1E7EF, navy #314D79,
   teal #276A58, radius 16px, card shadow. */

.isong-latest-section {
  background: #F8FAFB;
  border-radius: var(--isong-radius, 16px);
  padding: 34px 34px 30px;
  box-shadow: var(--isong-shadow, 0 8px 26px rgba(49,77,121, .12));
  margin: 0 0 2.5rem;
}
.isong-latest-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 0 0 4px;
}
.isong-latest-section h2.isong-latest-eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #276A58; margin: 0; line-height: 1.3;
}
.isong-latest-section p.isong-latest-title {
  font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.0125em;
  color: #314D79; margin: 2px 0 0;
}
@media (max-width: 640px) { .isong-latest-section p.isong-latest-title { font-size: 22px; } }

/* Follow row: all five ISONG accounts, so the block is the social hub even
   though only Bluesky is readable without credentials. */
.isong-latest-follow { display: flex; gap: 8px; align-items: center; margin: 0; padding: 0; list-style: none; }
.isong-latest-follow li { margin: 0; padding: 0; list-style: none; }
.isong-latest-follow a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid #E1E7EF; color: #314D79; text-decoration: none;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.isong-latest-follow a:hover, .isong-latest-follow a:focus-visible {
  border-color: #59BAA1; background: rgba(49,77,121, .05); text-decoration: none;
}
.isong-latest-follow svg { width: 17px; height: 17px; fill: currentColor; display: block; }

.isong-latest-section ul.isong-latest__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin: 22px 0 0; padding: 0; list-style: none;
}
@media (max-width: 1024px) { .isong-latest-section ul.isong-latest__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .isong-latest-section ul.isong-latest__grid { grid-template-columns: 1fr; } }

.isong-latest-section ul.isong-latest__grid li.isong-latest__card {
  background: #fff; border: 1px solid #E1E7EF; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;
}
/* Fixed-height media so the three cards line up whatever the posts contain.
   A social feed mixes landscape photographs with portrait flyers, and one
   crop rule cannot serve both: centre-cropping a portrait flyer cuts the
   headline out, which is the whole point of the flyer. The script reads the
   aspect ratio Bluesky reports and adds .is-portrait, so tall or near-square images are
   shown whole (object-fit: contain) on the soft field, while clearly
   landscape photographs stay centred and cover-cropped. Media box raised
   160px -> 230px on 2026-08-23 so contained flyers read at a useful size. */
.isong-latest__media { height: 230px; overflow: hidden; background: #EEF3F7; }
.isong-latest__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.isong-latest__media.is-portrait img { object-fit: contain; }
.isong-latest__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.isong-latest-section p.isong-latest__meta { font-size: 12.5px; color: #5A6778; margin: 0; }
.isong-latest-section p.isong-latest__text { font-size: 14.5px; line-height: 1.5; color: #3A4A62; margin: 0; }

/* The generic content-link colour already gives 4.94:1 here; this only sets
   weight and the underline behaviour. */
.isong-latest-section a.isong-latest__more {
  margin-top: auto; font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.isong-latest-section a.isong-latest__more:hover { text-decoration: underline; }

/* Visually hidden, still read aloud - used to say where a link opens. */
.isong-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Card entrance (John, 2026-08-16: "no fade-in for the stay current material").
   The cards arrive by script a second or so after the page, so the site's
   scroll reveal treats the block as already visible on a tall window and shows
   them at once. A short keyframe fade runs the moment each card enters the DOM,
   staggered left to right; it lives on the cards, not the section, so it also
   works when the section reveal has already fired. Reduced-motion users get
   the cards instantly. Cards only exist when the script rendered them, so
   nothing can be left hidden. */
@media (prefers-reduced-motion: no-preference) {
  .isong-latest-section ul.isong-latest__grid li.isong-latest__card {
    animation: isong-latest-in .55s cubic-bezier(.33, 1, .68, 1) both;
  }
  .isong-latest-section ul.isong-latest__grid li.isong-latest__card:nth-child(2) { animation-delay: .1s; }
  .isong-latest-section ul.isong-latest__grid li.isong-latest__card:nth-child(3) { animation-delay: .2s; }
  @keyframes isong-latest-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
/* Scroll reveal for the cards, as a cascade (John, 2026-08-16: it "fades, but
   barely noticeable"). The Global JavaScript block arms the grid (#isong-latest
   gets isong-anim, then isong-anim-in at 30% visible). With only the site rule the
   whole grid faded as one block in .55s, easy to miss. Now the mount stays put
   and the three cards rise in sequence, further and longer than the site reveal,
   so the moment reads. The load-time keyframe above is switched off in that
   case, otherwise its fill-mode would show the cards before the scroll. When the
   grid is not armed (already on screen when the cards land) the keyframe runs
   as before. Same reduced-motion gate as everything else here. */
@media (prefers-reduced-motion: no-preference) {
  html.isong-anim-ready #isong-latest.isong-anim {
    opacity: 1; transform: none; transition: none;
  }
  html.isong-anim-ready #isong-latest.isong-anim li.isong-latest__card {
    animation: none;
    opacity: 0;
    transform: translateY(28px);
  }
  html.isong-anim-ready #isong-latest.isong-anim.isong-anim-in li.isong-latest__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s cubic-bezier(.33, 1, .68, 1),
                transform .8s cubic-bezier(.33, 1, .68, 1);
  }
  html.isong-anim-ready #isong-latest.isong-anim.isong-anim-in li.isong-latest__card:nth-child(2) { transition-delay: .15s; }
  html.isong-anim-ready #isong-latest.isong-anim.isong-anim-in li.isong-latest__card:nth-child(3) { transition-delay: .3s; }
}
/* ===== END ISONG LATEST (2026-08-15) ===== */

/* ===== BEGIN ISONG HOME WELCOME MEASURE (2026-08-15) ===== */
/* Removing the Facebook column let the Welcome panel span the full 1200px
   content width, which took the intro paragraph from roughly 98 characters per
   line to 110 - the same over-long measure Steve's review flagged elsewhere.
   The gadget's own <style> caps .isong-welcome-header at 920px; that cap is
   right for the 68px display heading and the tagline, which must not wrap, and
   wrong for running prose. This constrains ONLY the paragraphs, using the
   reading measure already established in the ISONG READING COLUMN block.
   Two class selectors so it out-specifies the gadget's own (0,1,0) rule, which
   sits later in document order. Left-aligned rather than centred, because the
   section is left-aligned. Rollback: delete this block; lines get longer. */
.isong-welcome-section .isong-welcome-header p:not(.isong-welcome-tagline) {
  max-width: 62ch;
  margin-right: auto;
}
@media (max-width: 820px) {
  .isong-welcome-section .isong-welcome-header p:not(.isong-welcome-tagline) {
    max-width: none;
  }
}
/* ===== END ISONG HOME WELCOME MEASURE (2026-08-15) ===== */

/* ===== BEGIN ISONG HOME LAYOUT (2026-08-15) ===== */
/* John, 2026-08-15. Removing the Facebook column left the home page a stack of
   full-width horizontal bands with nothing to break the rhythm, and left three
   pockets of dead space. What shipped, in his words: one welcome panel holding
   the welcome text, the vision, the mission and the member link, with the mark
   showing through behind it; Latest from ISONG at full width below it; and the
   stats band as a rail beside the member map.

   Two things need the ISONG HOME LAYOUT block in Global JavaScript: moving the
   helix inside the panel so it sits under the text rather than beside it, and
   wrapping the stats band with the map. Without that block the page renders as
   a plain stack with the mark in the margin, which is where it started.
   Rollback: delete this block and its Global JavaScript twin. */

/* --- 1. one welcome panel --- */
.isong-welcome-section { background: #fff; }
.isong-welcome-inner {
  position: relative;              /* the mark is positioned against this */
  overflow: hidden;                /* and cropped by it */
  background: #F8FAFB;
  border-top: 6px solid #314D79;
  border-radius: var(--isong-radius, 16px);
  box-shadow: var(--isong-shadow, 0 8px 26px rgba(49,77,121, .12));
  padding: 42px 44px 38px;
}
@media (min-width: 1000px) {
  .isong-welcome-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    column-gap: 44px;
    align-items: start;
  }
  .isong-welcome-section .isong-welcome-header { grid-column: 1; grid-row: 1; }
  .isong-welcome-section .isong-mv-panel { grid-column: 2; grid-row: 1; }
}
/* content sits above the mark */
.isong-welcome-section .isong-welcome-header,
.isong-welcome-section .isong-mv-panel { position: relative; z-index: 1; }

/* the inner card chrome comes off: one panel, not two. A hairline divides the
   columns instead. */
.isong-welcome-section .isong-mv-panel {
  background: none;
  box-shadow: none;
  border-top: 0;
  border-radius: 0;
  margin-top: 0;
  padding: 4px 0 0 44px;
  border-left: 1px solid #e1e7ef;
}
/* each column sets its own measure now, so the single-column caps come off */
.isong-welcome-section .isong-welcome-header { margin-bottom: 0; max-width: none; }
.isong-welcome-section .isong-welcome-header p:not(.isong-welcome-tagline) { max-width: none; }
.isong-welcome-section p.isong-mv-vision { font-size: 23px; max-width: none; }
.isong-welcome-section p.isong-mv-mission { max-width: none; }
.isong-welcome-section p.isong-mv-plan { max-width: none; }

/* the mark, inside the panel and under the text. Behind rather than in front:
   at the same opacity the two look identical, but behind keeps every glyph
   crisp and never sits between the pointer and a link. Opacity settled at .12
   over three rounds: John could not see it at .09 and found .16 in the way of
   the text. top:14px so the whole flame stays inside the panel even after the
   hero block's parallax has drifted it (translateY of 6% of scroll); at -90px
   the flame tip was cropped by the panel's overflow. Anchored on the column
   gutter so the strokes fall mostly in whitespace. */
.isong-welcome-inner > .isong-helix-layer {
  z-index: 0;
  left: 44%; right: auto;
  top: 14px; width: 560px; opacity: .12;
}
/* Contrast under the mark, measured at .16 and kept at .12 for margin. Text
   over a navy stroke at .16 sits on #D8DFE6, not #F8FAFB. The headings and body
   clear 5.5:1 there; the two lightest pieces did not: the 2030 Plan note
   (#5A6778, 4.25:1) and the teal link (#276A58, 3.65:1). Both darkened one step
   so the worst spot on the panel is 4.69:1 or better at .16, and better still
   at .12. The link's hover already used #17685A, so this stays in family. */
.isong-welcome-section .isong-mv-panel .isong-mv-plan { color: #4A5568; }
.isong-welcome-section .isong-mv-panel a.isong-mv-link:link,
.isong-welcome-section .isong-mv-panel a.isong-mv-link:visited { color: #1F6B5A !important; }
@media (max-width: 999px) {
  .isong-welcome-section .isong-mv-panel {
    border-left: 0; border-top: 1px solid #e1e7ef;
    padding: 26px 0 0; margin-top: 26px;
  }
  .isong-welcome-inner > .isong-helix-layer {
    left: auto; right: -60px; width: 320px;
  }
}

/* --- 2. ISONG at a glance as a rail beside Where our members are --- */
.isong-home-map {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  margin: 0 0 2.5rem;
}
.isong-home-map > .isong-stats { margin: 0; padding: 34px 26px; }
.isong-home-map > .isong-globe { margin: 0; }
.isong-home-map .isong-stats h2 { font-size: 20px; margin-bottom: 26px; }
/* the four figures stack in the rail instead of running across 1200px */
.isong-home-map .isong-stats .isong-stats__grid { grid-template-columns: 1fr; gap: 22px; }
@media (max-width: 900px) {
  .isong-home-map { grid-template-columns: 1fr; gap: 20px; }
  .isong-home-map .isong-stats .isong-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 3. vertical rhythm --- */
/* 160px between the hero and the next block, from three margins stacking. */
.isong-welcome-section.isong-welcome-section { padding-bottom: 26px; }

/* --- 4. the header, tightened --- */
/* 259px tall with roughly 500px of nothing between the mark and the buttons.
   The tagline moves alongside the mark instead of under it. */
.isong-header { padding: 14px 32px 12px; }
.isong-header .isong-header-inner { gap: 26px; }
.isong-header .isong-header-brand { flex-direction: row; align-items: center; gap: 22px; }
.isong-header .isong-header-logo { max-width: 250px; }
.isong-header .isong-header-tagline {
  font-size: 14px; max-width: 340px;
  padding-left: 22px; border-left: 1px solid #e1e7ef; color: #5A6778;
}
@media (max-width: 900px) {
  .isong-header .isong-header-brand { flex-direction: column; align-items: flex-start; gap: 10px; }
  .isong-header .isong-header-tagline { padding-left: 0; border-left: 0; max-width: 640px; }
}

/* --- 5. the page menu, matched to the sticky bar --- */
/* They were 18px uppercase with a right-pointing triangle against 15.5px
   sentence case with a chevron. Same family and colour already; this settles
   case, size and the caret. !important because both declarations are the
   theme's own and sit later in the cascade. */
.WaGadgetMenuHorizontal .menuInner a,
.WaGadgetMenuHorizontal .menuInner a span {
  text-transform: none !important;
  font-size: 16.5px !important;
}
.WaGadgetMenuHorizontal li.dir > .item > a > span::after {
  content: "\25BE" !important; content: "\25BE" / "" !important;      /* the sticky bar's chevron, not a triangle */
  font-family: inherit !important;
  margin-left: 6px; font-size: 10px; color: #8CA0B8;
}

/* --- 6. the header Login button, matched to the sticky bar --- */
/* It was the Wild Apricot login gadget skinned as a fixed light-blue plate with
   white text: 2.2:1, a contrast failure, and nothing like the outlined pill in
   the sticky bar. Same pill now, and 4.94:1. The gadget builds its label in a
   ::before with a fixed box; fighting that box collapses the button, so the box
   stays and only the colours change. The pill ends up 124x46, the same size as
   Contact Us beside it. */
.WaGadgetLoginForm .loginContainer .loginLink {
  background: #fff !important;
  border: 2px solid #C7D2E0 !important;
  border-radius: 8px !important;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.WaGadgetLoginForm .loginContainer .loginLink:hover {
  border-color: #59BAA1 !important;
  background: rgba(49,77,121, .05) !important;
}
.WaGadgetLoginForm .loginContainer .loginLink::before {
  color: #276A58 !important;
}

/* --- 7. section labels on the home page, one size --- */
/* "ISONG at a glance" is 20px in the rail; "Take part" and "Stay current" were
   14px eyebrows. John, 2026-08-16: the same size for all three. */
/* Specificity: the kicker's 14px is set in the gadget's own <style>, which
   sits in the body and beats a head rule on a tie. */
.isong-cta .isong-cta-inner .isong-cta-kicker,
.isong-latest-section .isong-latest-head h2.isong-latest-eyebrow { font-size: 20px; }
/* ===== END ISONG HOME LAYOUT (2026-08-15) ===== */

/* ===== BEGIN ISONG EVENT TICKET GROUPS (2026-08-23) ===== */
/* Section headings inserted into an event's ticket-type list by the
   ISONG EVENT TICKET GROUPS block in Global JavaScript. Inert without it.
   Heading is the site's card eyebrow (14 / 700 / uppercase / +.06em) in
   navy; groups after the first are separated by a hairline, not by an
   underlined heading (house rule: no decorative heading underlines). */
.isong-tix-group { margin: 0 0 .5rem; }
.isong-tix-group + .isong-tix-group { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #E1E7EF; }
h4.isong-tix-group__title {
  margin: 0 0 .5rem; padding: 0;
  font-family: Ubuntu, Arial, sans-serif; font-size: 14px; line-height: 1.3; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #314D79;
}
.isong-tix-group__note { margin: 0 0 .85rem; font-size: 14px; line-height: 1.5; color: #5A6778; }
/* ===== END ISONG EVENT TICKET GROUPS (2026-08-23) ===== */


/* ===== BEGIN ISONG WEBINARS PAGE TYPE (2026-09-26) ===== */
/* The /webinars copy was pasted from Word and carries 90+ inline
   <font face="Calibri"> tags. Calibri is missing on most Macs, phones and
   Linux machines, so the page rendered in whatever sans-serif each device
   had instead of the site's Ubuntu. The November notice also sat in 48px
   orange (#F26522, 3.0:1 on white) beside 30px navy month headings; it now
   takes the navy and a size between the body and the month headings.
   Scoped to this page by its body id. Rollback: delete this block. */
body#PAGEID_1325047 .gadgetContentEditableArea font[face*="Calibri"] {
  font-family: Ubuntu, Arial, sans-serif;
}
body#PAGEID_1325047 .gadgetContentEditableArea font[color="#f26522" i] {
  color: #314D79;
  font-size: 22px !important;
  line-height: 1.35;
}
/* ===== END ISONG WEBINARS PAGE TYPE (2026-09-26) ===== */

/* ===== BEGIN ISONG AWARD CARDS (2026-09-26) ===== */
/* Recipient cards on /awards and /Education-Awards-Program. /awards also carries an inline copy (2026-07-30) and /Education-Awards-Program one from 2026-09-26; the WA content editor strips <style> when a gadget is edited, so this block is the durable copy. */
.isong-awards{font-family:'Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;max-width:1200px;margin:0 auto;color:#314D79;line-height:1.6}
.isong-award{margin:0 0 56px 0}
.isong-award h2{margin:0 0 16px 0}
.isong-award-desc{margin:0 0 14px 0;max-width:100ch}
.isong-award-more{margin:18px 0 26px 0;font-size:16px}
.isong-award-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:26px}
.isong-recipient{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;background:#ffffff;border:1px solid #dde5f0;border-radius:14px;box-shadow:0 4px 14px rgba(49,77,121,0.06)}
.isong-recipient-photo{flex:0 0 96px;width:96px;height:96px;border-radius:50%;overflow:hidden;background:#276A58;display:flex;align-items:center;justify-content:center}
.isong-recipient-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.isong-recipient-initials{color:#ffffff;font-size:30px;font-weight:600;letter-spacing:1px}
.isong-recipient-body{min-width:0}
.isong-recipient-eyebrow{margin:0 0 6px 0;font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#1F5A4A}
.isong-recipient-name{margin:0 0 4px 0;font-size:18px;font-weight:700}
.isong-recipient-affil{margin:0;font-size:15px;color:#41567C}
.isong-recipient-project{margin:10px 0 0 0;font-size:14px;color:#41567C;font-style:italic}
@media (max-width:640px){.isong-award{margin-bottom:40px}.isong-recipient{padding:18px;gap:14px}.isong-recipient-photo{flex-basis:72px;width:72px;height:72px}.isong-recipient-initials{font-size:24px}}
.isong-award-grid-fill{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.isong-award-grid-fill .isong-recipient{align-items:center}
.isong-award-project{margin:0 0 6px 0;max-width:76ch}
.isong-award-project + .isong-award-grid{margin-top:14px}
.isong-award-grid + .isong-award-project{margin-top:26px}
/* ===== END ISONG AWARD CARDS (2026-09-26) ===== */

/* ===== BEGIN ISONG MEMBER PRESENTATIONS (2026-09-26) ===== */
/* /member-presentations (page 1325307): webinar recordings and Congress research presentations. */
.isong-pres-wrap{font-family:'Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:#314D79;line-height:1.55}
.isong-pres-wrap .isong-pres-lead{font-size:19px;line-height:1.6;color:#162232;margin:0 0 8px 0}
.isong-pres-wrap .isong-pres-jump{margin:0 0 28px 0;font-size:16px}
.isong-pres-wrap .isong-pres-jump a{color:#276A58;font-weight:700}
.isong-pres-wrap h2.isong-pres-h2{font-family:Ubuntu,Arial,sans-serif;font-size:26px;color:#2E4B7A;margin:36px 0 12px 0;padding:0 0 8px 0;border-bottom:2px solid #59BAA1;scroll-margin-top:90px}
.isong-pres-wrap .isong-pres-intro{margin:0 0 20px 0;max-width:76ch;color:#444444}
.isong-pres-wrap h3.isong-pres-year{font-family:Ubuntu,Arial,sans-serif;font-size:20px;color:#276A58;margin:30px 0 14px 0}
.isong-pres-wrap .isong-pres-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:24px;margin:0 0 12px 0}
.isong-pres-wrap .isong-pres-grid-compact{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.isong-pres-wrap .isong-pres{display:flex;flex-direction:column;background:#ffffff;border:1px solid #dde5f0;border-radius:14px;box-shadow:0 4px 14px rgba(49,77,121,0.06);overflow:hidden}
.isong-pres-wrap .isong-pres-media{position:relative;padding-top:56.25%;background:#10233F}
.isong-pres-wrap .isong-pres-media iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.isong-pres-wrap .isong-pres-body{padding:18px 20px 20px 20px}
.isong-pres-wrap h4.isong-pres-title{font-family:Ubuntu,Arial,sans-serif;font-size:17px;line-height:1.35;font-weight:700;color:#314D79;margin:0 0 12px 0;text-transform:none}
.isong-pres-wrap .isong-pres-people{display:flex;gap:12px;align-items:flex-start}
.isong-pres-wrap .isong-pres-people p{margin:0;font-size:14px;line-height:1.5;color:#41567C}
.isong-pres-wrap .isong-pres-people strong{color:#314D79}
.isong-pres-wrap .isong-pres-face{flex:0 0 56px;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 18%}
.isong-pres-wrap .isong-pres-link{margin:14px 0 0 0;font-size:15px}
.isong-pres-wrap .isong-pres-link a{font-weight:700;color:#276A58}
.isong-pres-wrap .isong-pres-link a.stylizedButton{color:#ffffff}
.isong-pres-wrap .isong-pres-note{margin:8px 0 0 0;font-size:14px;color:#555555}
.isong-pres-wrap .isong-pres-note a,.isong-pres-wrap .isong-pres-intro a{color:#276A58;font-weight:700}
.isong-pres-wrap .isong-pres-body{flex:1 1 auto;display:flex;flex-direction:column}
.isong-pres-wrap .isong-pres-body .isong-pres-link{margin-top:auto;padding-top:14px}
.isong-pres-wrap a.isong-pres-media-link{display:block;text-decoration:none;background:#314D79}
.isong-pres-wrap a.isong-pres-media-link:before{content:'';position:absolute;top:50%;left:50%;width:76px;height:76px;margin:-54px 0 0 -38px;border-radius:50%;background:#59BAA1;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.isong-pres-wrap a.isong-pres-media-link:after{content:'';position:absolute;top:50%;left:50%;margin:-32px 0 0 -8px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #ffffff}
.isong-pres-wrap .isong-pres-media-label{position:absolute;left:0;right:0;top:50%;margin-top:36px;text-align:center;color:#ffffff;font-weight:700;font-size:17px}
.isong-pres-wrap a.isong-pres-media-link:hover:before,.isong-pres-wrap a.isong-pres-media-link:focus:before{background:#3fa088}
.isong-pres-wrap .isong-pres-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){.isong-pres-wrap h2.isong-pres-h2{font-size:22px}.isong-pres-wrap .isong-pres-body{padding:16px}}
body#PAGEID_1325307 #id_6GZqkME{margin-left:0!important;margin-right:0!important}
body#PAGEID_1325307 #id_lpF3ENJ .gadgetStyleBody{padding-bottom:0!important}
body#PAGEID_1325307 #id_z5DDVAA{display:none}
/* ===== END ISONG MEMBER PRESENTATIONS (2026-09-26) ===== */

/* ===== BEGIN ISONG DESIGN SYSTEM 2026 (2026-10-30) ===== */
/* Moves the live site onto the ISONG design system (new logo, the DBA
   name ISONG: The International Society of Nursing Genomics and
   Precision Health, and the migration list in the system's README):
   one navy #314D79, action teal #276A58 (white on it 6.39:1), navy-
   tinted body ink #162232 at 1.6, one 14px overline, 4px mint card bar,
   16px card radius, pill buttons, an 18px navy menu with the current
   item marked by a bar as well as colour, white footer links and the
   32px brand bar under footer headings. Same day, every legacy hex in
   the blocks above was remapped in place to the token values (old
   #2E4C78 > #314D79, #2E7D68 > #276A58, #276A58 hover > #1E5645,
   #333333 > #162232, #56B9A0 > #59BAA1, #1F3556 > #233A60).
   Gadget inline <style> blocks render after user.css, so overrides here
   carry one extra type selector (body) to win on specificity, and
   !important only where the gadget itself uses it.
   Rollback: delete this block; the remap is recorded in
   04 Deployed code/rollback 2026-10-30/user.css_before_2026-10-30.css. */

:root{
  --isong-brand-navy:#314D79; --isong-brand-mint:#59BAA1; --isong-brand-gold:#E5B841;
  --isong-text-primary:#162232; --isong-text-secondary:#3A4A62; --isong-text-muted:#5A6778;
  --isong-text-heading:#314D79; --isong-text-display:#276A58;
  --isong-text-link:#276A58; --isong-text-link-hover:#1E5645;
  --isong-text-inverse:#FFFFFF; --isong-text-inverse-muted:#CDDCF2; --isong-text-inverse-accent:#7DD4BE;
  --isong-surface-page:#FFFFFF; --isong-surface-subtle:#F8FAFB; --isong-surface-muted:#EDF0F4;
  --isong-surface-inverse:#314D79; --isong-surface-inverse-strong:#233A60; --isong-surface-accent:#EBFBF6;
  --isong-info-surface:#F3F7FE; --isong-border-subtle:#DAE0E8;
  --isong-action:#276A58; --isong-action-hover:#1E5645; --isong-action-pressed:#153E33;
  --isong-focus-ring:#233A60; --isong-focus-ring-inverse:#E5B841;
  --isong-shadow-sm:0 1px 3px rgba(49,77,121,.12); --isong-shadow-md:0 8px 24px rgba(49,77,121,.12);
  --isong-shadow-lg:0 12px 36px rgba(49,77,121,.18); --isong-shadow-action:0 6px 18px rgba(39,106,88,.24);
  --isong-radius-sm:4px; --isong-radius-md:8px; --isong-radius-lg:16px; --isong-radius-pill:999px;
  --isong-font:Ubuntu, Arial, Helvetica, sans-serif;
  --isong-font-menu:"Ubuntu Condensed", Ubuntu, Arial, sans-serif;
}

/* -- Body copy: navy-tinted ink, 1.6 leading in editable content ----- */
body{ color:var(--isong-text-primary); }
body .gadgetContentEditableArea p,
body .gadgetContentEditableArea li{ line-height:1.6; }
/* Links in running text are underlined, so colour is never the only cue */
body .gadgetContentEditableArea p a:not([class]),
body .gadgetContentEditableArea li a:not([class]){
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em;
}
body .gadgetContentEditableArea p a:not([class]):hover,
body .gadgetContentEditableArea li a:not([class]):hover{ text-decoration-thickness:2px; }

/* Titles and headings are Title Case as typed; the theme's uppercase
   transform on content headings is dropped. */
body .gadgetContentEditableArea h1, body .gadgetContentEditableArea h2,
body .gadgetContentEditableArea h3, body .gadgetContentEditableArea h4{ text-transform:none; }

/* -- Focus: one ring, navy on light grounds, gold on navy and teal ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
a[class*="buttonStyle"]:focus-visible{ outline:3px solid var(--isong-focus-ring) !important; outline-offset:3px; }
body .isong-footer a:focus-visible, body .isong-board-intro a:focus-visible, body .isong-committees-intro a:focus-visible,
body .isong-on-dark a:focus-visible{ outline-color:var(--isong-focus-ring-inverse) !important; }

/* -- Main menu: 18px navy, current item teal with a 4px action bar ---- */
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a{
  font-family:var(--isong-font-menu); font-size:18px; color:var(--isong-text-heading);
  transition:color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:hover{
  color:var(--isong-text-display); background-color:var(--isong-surface-muted);
}
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a{
  color:var(--isong-text-display); box-shadow:inset 0 -4px 0 var(--isong-action);
}
body .WaGadgetMenuHorizontal .menuInner ul.secondLevel a{
  font-family:var(--isong-font-menu); font-size:17px; color:var(--isong-text-heading);
}
body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li.sel > .item > a{
  color:var(--isong-text-display); box-shadow:inset 4px 0 0 var(--isong-action);
}
body .isong-sticky-bar nav a,
body .isong-sticky-bar nav .isong-sticky-more-btn{ font-size:17px; color:var(--isong-text-heading); }
body .isong-sticky-bar nav a:hover{ color:var(--isong-text-display); background:var(--isong-surface-muted); }

/* -- The 2026 mark, and the flame that changed ----------------------- */
/* The 2026 logo keeps the 2024 helix and turns the flame gold, so every
   place the mark appears now carries one short animation of that flame.
   The marks behind the home hero and in the sticky bar are injected by
   Global JavaScript with the 2024 mark drawn inline; that <svg> is
   hidden and the 2026 files are shown in its place, so no script edit
   is needed. All of it is decorative (aria-hidden layer and bar, links
   named "ISONG home"), one-shot and under five seconds (WCAG 2.2.2),
   and still under prefers-reduced-motion, which shows the end state.
   Files: /resources/Pictures/Brand/ (README in 04 Deployed code). */

/* Home hero: the 2024 mark (helix and navy flame) fades in at John's
   settled .12, in the place the HOME LAYOUT block gives it; then the
   navy flame gives way and the flame ignites gold, flickers and settles.
   Gold peaks at .5 so every piece of text over it keeps 4.5:1 (worst
   case, the teal overline at the peak, 4.58:1), then rests at .18, the
   helix's visual weight, so the flame stops competing with the text. */
body .isong-welcome-section .isong-helix-layer{
  opacity:1; aspect-ratio:382/590; height:auto;
  background:url("/resources/Pictures/Brand/isong-mark-helix-12.svg") center/contain no-repeat;
}
body .isong-helix-layer svg{ display:none; }
body .isong-helix-layer::before,
body .isong-helix-layer::after{ content:""; position:absolute; inset:0; background:center/contain no-repeat; pointer-events:none; }
body .isong-helix-layer::before{ background-image:url("/resources/Pictures/Brand/isong-flame-2024.svg"); opacity:0; }
body .isong-helix-layer::after{
  background-image:url("/resources/Pictures/Brand/isong-flame-gold.svg"); opacity:.18;
  transform-origin:46% 16%;
}
@media (prefers-reduced-motion:no-preference){
  body .isong-welcome-section .isong-helix-layer{ animation:isong-mark-in .9s ease-out .1s both; }
  body .isong-helix-layer::before{ animation:isong-flame-old 2.1s ease-in-out .1s both; }
  body .isong-helix-layer::after{ animation:isong-flame-ignite 3.3s cubic-bezier(.3,.6,.3,1) 1.4s both; }
}
@keyframes isong-mark-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes isong-flame-old{ 0%{opacity:0} 40%{opacity:.12} 62%{opacity:.12} 100%{opacity:0} }
@keyframes isong-flame-ignite{
  0%  { opacity:0;   transform:scale(.8) translateY(14px); filter:brightness(1); }
  24% { opacity:.5;  transform:scale(1.07) translateY(-3px); filter:brightness(1.15); }
  40% { opacity:.32; transform:scale(.98); filter:brightness(1); }
  55% { opacity:.44; transform:scale(1.03); filter:brightness(1.1); }
  72% { opacity:.26; transform:scale(.995); }
  86% { opacity:.3;  transform:scale(1.01); }
  100%{ opacity:.18; transform:none; filter:none; }
}

/* Header lockup: a gold glow rises behind the flame once on load and
   again on hover or focus. The logo artwork itself is untouched. */
body .isong-header-brand > a{ position:relative; display:inline-block; isolation:isolate; }
body .isong-header-brand > a img{ position:relative; z-index:1; }
body .isong-header-brand > a::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-5.758%; top:-9.6%; width:111.516%; height:119.2%;
  background:url("/resources/Pictures/Brand/isong-logo-flame-glow.svg") center/100% 100% no-repeat; opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  body .isong-header-brand > a::before{ animation:isong-flame-glow 2.6s ease-in-out .4s 1 both; }
  body .isong-header-brand > a:hover::before,
  body .isong-header-brand > a:focus-visible::before{ animation:isong-flame-glow-hover 1.6s ease-in-out 1 both; }
}
@keyframes isong-flame-glow{ 0%{opacity:0} 30%{opacity:.95} 50%{opacity:.55} 70%{opacity:.9} 100%{opacity:0} }
@keyframes isong-flame-glow-hover{ 0%{opacity:0} 40%{opacity:.9} 100%{opacity:0} }

/* Sticky bar: the 2026 mark, its flame glowing once as the bar arrives */
body .isong-sticky-mark{
  position:relative; isolation:isolate; width:30px; height:47px; flex:0 0 30px;
  background:url("/resources/Pictures/Brand/isong-mark-pad.svg") center/contain no-repeat;
}
body .isong-sticky-mark svg{ display:none; }
body .isong-sticky-mark::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("/resources/Pictures/Brand/isong-flame-glow.svg") center/contain no-repeat; opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  body .isong-sticky-bar.is-on .isong-sticky-mark::before{ animation:isong-flame-glow 2.2s ease-in-out .35s 1 both; }
  body .isong-sticky-bar .isong-sticky-mark:hover::before{ animation:isong-flame-glow-hover 1.4s ease-in-out 1 both; }
}

/* -- Header: new lockup, Contact Us as a secondary pill -------------- */
body .isong-header .isong-header-logo{ width:240px; max-width:240px; height:auto; }
body .isong-header .isong-header-tagline{ color:var(--isong-text-secondary); font-size:16px; line-height:1.6; font-weight:400; }
body .isong-header-text{
  min-height:44px; padding:10px 24px !important; border-radius:var(--isong-radius-pill) !important;
  background-color:transparent !important; color:var(--isong-text-heading) !important;
  border:2px solid var(--isong-text-heading) !important;
  font-family:var(--isong-font); font-size:16px; font-weight:700; letter-spacing:0;
}
body .isong-header-text:hover{
  background-color:var(--isong-info-surface) !important; color:var(--isong-text-heading) !important;
  border-color:var(--isong-text-heading) !important;
}
body .isong-header-cta:hover{ border:0; background-color:transparent; }
body .isong-sticky-cta{
  background:transparent; color:var(--isong-text-heading) !important; border:2px solid var(--isong-text-heading);
  border-radius:var(--isong-radius-pill); font-size:15px; padding:8px 18px;
}
body .isong-sticky-cta:hover{ background:var(--isong-info-surface); transform:none; box-shadow:none; }
@media (max-width:900px){ body .isong-header .isong-header-logo{ width:200px; max-width:200px; } }
@media (max-width:767px){ body .isong-header .isong-header-tagline{ display:none; } }

/* -- Buttons: pill, 16px bold, action teal with the teal glow -------- */
body a.buttonStyle001, body a.buttonStyle002,
body .isong-cta a.isong-btn, body .isong-welcome-section a.isong-members-btn{
  border-radius:var(--isong-radius-pill) !important; background:var(--isong-action) !important;
  color:#FFFFFF !important; box-shadow:var(--isong-shadow-action);
  font-family:var(--isong-font) !important; font-size:16px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; min-height:44px;
}
body a.buttonStyle001:hover, body a.buttonStyle002:hover,
body .isong-cta a.isong-btn:hover, body .isong-welcome-section a.isong-members-btn:hover{
  background:var(--isong-action-hover) !important;
}
body a.buttonStyle003{
  border-radius:var(--isong-radius-pill) !important; background:var(--isong-brand-navy) !important;
  font-family:var(--isong-font) !important; font-size:16px !important; font-weight:700 !important;
}

/* -- One overline: 14px, bold, +0.08em, uppercase, teal --------------- */
body .isong-member-role, body .isong-chair-role, body .isong-cta .isong-cta-eyebrow,
body .isong-cta .isong-cta-kicker, body .isong-welcome-section h2.isong-mv-eyebrow,
body .isong-contact li.isong-contact__card h2.isong-contact__eyebrow,
body .isong-recipient-eyebrow, body .isong-page .mission-label{
  font-family:var(--isong-font); font-size:14px; line-height:1.4; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--isong-text-display);
}

/* -- Cards: 4px mint bar, 16px radius, navy-tinted shadow ------------- */
body .isong-member-card, body .isong-committee-card, body .isong-cta .isong-home-card,
body .isong-contact ul.isong-contact__grid li.isong-contact__card, body .isong-about-res div.isong-about-res__card{
  border-top:4px solid var(--isong-brand-mint); border-radius:var(--isong-radius-lg);
  box-shadow:var(--isong-shadow-md);
}

/* -- Footer: overline headings over a 32px brand bar, white links ----- */
body .isong-footer{ background:linear-gradient(135deg, var(--isong-surface-inverse) 0%, var(--isong-surface-inverse-strong) 100%); }
body .isong-footer h4{
  font-family:var(--isong-font); font-size:14px !important; line-height:1.4; letter-spacing:.08em;
  color:var(--isong-text-inverse-accent) !important; border-bottom:0 !important; padding-bottom:0 !important;
}
body .isong-footer h4::after{
  content:""; display:block; width:32px; height:4px; margin-top:8px;
  border-radius:var(--isong-radius-sm); background:var(--isong-brand-mint);
}
body .isong-footer a, body .isong-footer a:link, body .isong-footer a:visited,
body .isong-fb, body .isong-x, body .isong-bs, body .isong-li, body .isong-ig{
  color:#FFFFFF !important;
}
body .isong-footer a:hover{ text-decoration:underline; text-underline-offset:.18em; }
body .isong-footer .isong-brand-tag, body .isong-footer .isong-contact-label{ color:var(--isong-text-inverse-muted) !important; }
body .isong-footer .isong-contact-label{ font-size:12px; letter-spacing:.08em; }

/* -- Page header: flat navy (teal on the eight section landings) over
   the 4px mint brand bar; the raster plates are retired. The title stays
   the page's single live h1, now a fixed 40px stepping to 32px. ------- */
body .isong-pagehead{
  aspect-ratio:auto; container-type:normal; min-height:0;
  background-image:none !important; background-color:var(--isong-surface-inverse);
  border-bottom:4px solid var(--isong-brand-mint); border-radius:var(--isong-radius-lg) var(--isong-radius-lg) 0 0;
  padding:48px 48px 40px; box-sizing:border-box;
}
body .isong-pagehead.isong-pagehead--teal{ background-color:var(--isong-action); }
body .isong-pagehead h1.isong-pagehead__title,
body .isong-pagehead div.isong-pagehead__title{
  display:block; width:auto; height:auto; padding:0; margin:0;
  font-family:var(--isong-font); font-size:40px; line-height:1.15; letter-spacing:-.01em; color:#FFFFFF;
}
body .isong-pagehead h1.isong-pagehead__title--long,
body .isong-pagehead div.isong-pagehead__title--long{ font-size:32px; }
@media (max-width:767px){
  body .isong-pagehead{ padding:32px 20px 28px; }
  body .isong-pagehead h1.isong-pagehead__title, body .isong-pagehead div.isong-pagehead__title{ font-size:32px; }
  body .isong-pagehead h1.isong-pagehead__title--long, body .isong-pagehead div.isong-pagehead__title--long{ font-size:26px; }
}

/* -- Notice: a compact banner alert; replaces text-in-image announcements.
   One word label inline in bold caps, then the message; no date. ------ */
.isong-notice{
  display:block; max-width:1200px; margin:24px auto 0; padding:16px 20px; box-sizing:border-box;
  border:1px solid #A9BFE2; border-left:4px solid var(--isong-brand-mint); border-radius:var(--isong-radius-md);
  background:var(--isong-info-surface); color:#233A60;
  font-family:var(--isong-font); font-size:16px; line-height:1.6; font-weight:400;
}
.isong-notice p{ margin:0; color:#233A60; font-size:16px; line-height:1.6; }
.isong-notice .isong-notice__label{
  display:inline; margin-right:8px; font-size:14px; line-height:1.4; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--isong-text-display);
}
@media (max-width:767px){ .isong-notice{ margin:16px 16px 0; padding:14px 16px; } }

/* -- Retired: the darker Build the Helix gradient -------------------- */
body .isong-helix{
  background-image:linear-gradient(135deg, var(--isong-action) 0%, var(--isong-action-hover) 100%) !important;
}

@media (prefers-reduced-motion:reduce){
  body .WaGadgetMenuHorizontal .menuInner a, body .isong-header-text, body a[class*="buttonStyle"]{ transition:none !important; }
}
/* -- Header: Contact Us and Login as one matched pair (2026-10-30) ----- */
/* Same pill, size, outline and type for both. Login's label lives in the
   gadget's ::before, so the box keeps a fixed size and only its look changes. */
body .isong-header a.isong-header-text,
body .WaGadgetLoginForm .loginContainer .loginLink{
  box-sizing:border-box !important; width:136px !important; height:46px !important; min-height:46px !important;
  padding:0 !important; justify-content:center !important; align-items:center !important;
  border:2px solid var(--isong-text-heading) !important; border-radius:var(--isong-radius-pill) !important;
  background:transparent !important; line-height:1 !important;
}
body .isong-header a.isong-header-text{ display:inline-flex !important; font-size:16px !important; font-weight:700 !important; color:var(--isong-text-heading) !important; }
body .WaGadgetLoginForm .loginContainer .loginLink::before{
  color:var(--isong-text-heading) !important; font-family:var(--isong-font) !important;
  font-size:16px !important; font-weight:700 !important;
}
body .isong-header a.isong-header-text:hover,
body .WaGadgetLoginForm .loginContainer .loginLink:hover{
  background:var(--isong-info-surface) !important; border-color:var(--isong-text-heading) !important;
}
@media (max-width:900px){
  body .isong-header a.isong-header-text,
  body .WaGadgetLoginForm .loginContainer .loginLink{ width:112px !important; height:40px !important; min-height:40px !important; }
  body .isong-header a.isong-header-text,
  body .WaGadgetLoginForm .loginContainer .loginLink::before{ font-size:14px !important; }
}
/* -- Sticky bar: Contact Us and Login as the same matched pair (2026-10-30) --
   The sticky Login kept its August look (6px corners, pale border) while Contact Us
   became the secondary pill; both now use the header pair's outline pill. */
body .isong-sticky-bar a.isong-sticky-cta,
body .isong-sticky-bar a.isong-sticky-login{
  display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box;
  min-width:104px; height:40px; padding:0 18px !important;
  background:transparent !important; color:var(--isong-text-heading) !important;
  border:2px solid var(--isong-text-heading) !important; border-radius:var(--isong-radius-pill) !important;
  font-family:var(--isong-font); font-size:15px !important; font-weight:700 !important; line-height:1 !important;
  text-decoration:none !important; transform:none; box-shadow:none;
}
body .isong-sticky-bar a.isong-sticky-cta:hover, body .isong-sticky-bar a.isong-sticky-cta:focus-visible,
body .isong-sticky-bar a.isong-sticky-login:hover, body .isong-sticky-bar a.isong-sticky-login:focus-visible{
  background:var(--isong-info-surface) !important; border-color:var(--isong-text-heading) !important;
  color:var(--isong-text-heading) !important; transform:none; box-shadow:none;
}
/* ===== END ISONG DESIGN SYSTEM 2026 (2026-10-30) ===== */

/* ===== BEGIN ISONG DESIGN SYSTEM 2026 PHASE 2 (2026-11-01) ===== */
/* Carries the design system from the custom gadgets into everything the
   theme and Wild Apricot draw themselves: body ink and headings, links,
   legacy WYSIWYG colours and fonts, the header rule, every pill button,
   the sign-in, search and event pages, and the footer.
   Tokens are the :root set in the DESIGN SYSTEM 2026 block above.
   The theme's own ink, heading and link colours are re-stated in the
   DESIGN SYSTEM 2026 BASE block at the top of this file, so that every
   later rule and every gadget's inline <style> still wins over them.
   Deliberately untouched, per the design system's revenue-path rule:
   .nextButton, .typeButton and the fields of the membership application,
   event registration and donation forms (they inherit ink and type only).
   Rollback: delete this block. */

/* -- 1. Legacy WYSIWYG markup inside page content -------------------- */
/* Word and the old editor left <font face>, <font color> and inline
   font-family and colour on hundreds of paragraphs (event descriptions
   above all): Arial, Calibri, #333333, #000000, the old navy and the
   mint, which fails as text on white (2.34:1). Faces become Ubuntu, and
   the listed legacy inks map to the system's. Colours not listed (light
   text set for a dark cell, the dark reds used for emphasis) are left
   alone, so nothing turns dark on dark. */
body .gadgetContentEditableArea font[face],
body .gadgetEventEditableArea font[face]{ font-family:inherit; }
body .gadgetContentEditableArea [style*="font-family"],
body .gadgetEventEditableArea [style*="font-family"]{ font-family:var(--isong-font) !important; }
body .gadgetContentEditableArea font[color="#000000" i],
body .gadgetContentEditableArea font[color="#000" i],
body .gadgetContentEditableArea font[color="#333333" i],
body .gadgetContentEditableArea font[color="#333" i],
body .gadgetContentEditableArea font[color="#242424" i],
body .gadgetContentEditableArea font[color="#4d4d4d" i],
body .gadgetContentEditableArea font[color="#202124" i],
body .gadgetContentEditableArea font[color="#1f272b" i],
body .gadgetContentEditableArea font[color="#3d250d" i],
body .gadgetContentEditableArea font[color="#414a53" i],
body .gadgetEventEditableArea font[color="#000000" i],
body .gadgetEventEditableArea font[color="#000" i],
body .gadgetEventEditableArea font[color="#333333" i],
body .gadgetEventEditableArea font[color="#333" i],
body .gadgetEventEditableArea font[color="#242424" i],
body .gadgetEventEditableArea font[color="#4d4d4d" i],
body .gadgetEventEditableArea font[color="#202124" i],
body .gadgetEventEditableArea font[color="#1f272b" i],
body .gadgetEventEditableArea font[color="#3d250d" i],
body .gadgetEventEditableArea font[color="#414a53" i]{ color:var(--isong-text-primary); }
body .gadgetContentEditableArea font[color="#2e4c78" i],
body .gadgetContentEditableArea font[color="#2f4b78" i],
body .gadgetContentEditableArea font[color="#002157" i],
body .gadgetContentEditableArea font[color="#1f497d" i],
body .gadgetContentEditableArea font[color="#34495e" i],
body .gadgetEventEditableArea font[color="#2e4c78" i],
body .gadgetEventEditableArea font[color="#2f4b78" i],
body .gadgetEventEditableArea font[color="#002157" i],
body .gadgetEventEditableArea font[color="#1f497d" i],
body .gadgetEventEditableArea font[color="#34495e" i]{ color:var(--isong-text-heading); }
body .gadgetContentEditableArea font[color="#56b9a0" i],
body .gadgetContentEditableArea font[color="#39b54a" i],
body .gadgetEventEditableArea font[color="#56b9a0" i],
body .gadgetEventEditableArea font[color="#39b54a" i]{ color:var(--isong-text-display); }
body .gadgetContentEditableArea font[color="#6c8ebf" i],
body .gadgetContentEditableArea font[color="#878787" i],
body .gadgetEventEditableArea font[color="#6c8ebf" i],
body .gadgetEventEditableArea font[color="#878787" i]{ color:#5A6778; }
body .gadgetContentEditableArea [style*="color: rgb(51, 51, 51)"], body .gadgetContentEditableArea [style*="color:#333" i],
body .gadgetContentEditableArea [style*="color: #333" i], body .gadgetContentEditableArea [style*="color: rgb(0, 0, 0)"],
body .gadgetContentEditableArea [style*="color:#000" i], body .gadgetContentEditableArea [style*="color: #000" i],
body .gadgetEventEditableArea [style*="color: rgb(51, 51, 51)"], body .gadgetEventEditableArea [style*="color:#333" i],
body .gadgetEventEditableArea [style*="color: #333" i], body .gadgetEventEditableArea [style*="color: rgb(0, 0, 0)"],
body .gadgetEventEditableArea [style*="color:#000" i], body .gadgetEventEditableArea [style*="color: #000" i]{
  color:var(--isong-text-primary) !important; }
body .gadgetContentEditableArea [style*="color: rgb(46, 76, 120)"], body .gadgetContentEditableArea [style*="#2E4C78" i],
body .gadgetEventEditableArea [style*="color: rgb(46, 76, 120)"], body .gadgetEventEditableArea [style*="#2E4C78" i],
body .gadgetContentEditableArea [style*="color: rgb(31, 73, 125)"], body .gadgetContentEditableArea [style*="#1F497D" i],
body .gadgetEventEditableArea [style*="color: rgb(31, 73, 125)"], body .gadgetEventEditableArea [style*="#1F497D" i]{
  color:var(--isong-text-heading) !important; }
body .gadgetContentEditableArea [style*="color: rgb(86, 185, 160)"], body .gadgetContentEditableArea [style*="color:#56B9A0" i],
body .gadgetContentEditableArea [style*="color: #56B9A0" i], body .gadgetContentEditableArea [style*="color: rgb(89, 186, 161)"],
body .gadgetEventEditableArea [style*="color: rgb(86, 185, 160)"], body .gadgetEventEditableArea [style*="color:#56B9A0" i],
body .gadgetEventEditableArea [style*="color: #56B9A0" i]{ color:var(--isong-text-display) !important; }
body .gadgetContentEditableArea [style*="color: rgb(255, 0, 0)"], body .gadgetEventEditableArea [style*="color: rgb(255, 0, 0)"],
body .gadgetContentEditableArea font[color="#ff0000" i], body .gadgetEventEditableArea font[color="#ff0000" i]{ color:#972622 !important; }
/* Grey "meta" text the editor set at 2:1 to 3.5:1 */
body .gadgetContentEditableArea [style*="color: rgb(110, 110, 110)"], body .gadgetContentEditableArea [style*="color: rgb(127, 127, 127)"],
body .gadgetContentEditableArea [style*="color: rgb(153, 153, 153)"], body .gadgetContentEditableArea [style*="color: rgb(108, 142, 191)"],
body .gadgetEventEditableArea [style*="color: rgb(110, 110, 110)"], body .gadgetEventEditableArea [style*="color: rgb(127, 127, 127)"],
body .gadgetEventEditableArea [style*="color: rgb(153, 153, 153)"], body .gadgetEventEditableArea [style*="color: rgb(108, 142, 191)"]{
  color:var(--isong-text-muted) !important; }
/* Content dividers drawn in the old slate */
body .gadgetContentEditableArea img.WaContentDivider{ border-color:var(--isong-border-subtle) !important; background-color:var(--isong-border-subtle) !important; }

/* -- 2. Links: the theme's #2E7D68 becomes isong-text-link ------------ */
body .gadgetEventEditableArea a:not([class]){ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; }
/* Skip link: the action-pressed teal with white text (11.5:1), shown on focus */
body a.isong-skip, body a.isong-skip:link, body a.isong-skip:visited{
  background:var(--isong-action-pressed) !important; color:#FFFFFF !important;
  font-family:var(--isong-font); font-weight:700; border-radius:0 0 var(--isong-radius-md) var(--isong-radius-md);
}

/* -- 3. Header rule: one full-width hairline instead of the half-width
   line under the header and the 7px slate bar (an inline layout colour)
   above the menu ------------------------------------------------------ */
body .isong-header{ border-bottom:0; }
body .WaLayoutContainerOnly[style*="background-color:#414A53" i],
body .WaLayoutContainerFirst[style*="background-color:#414A53" i]{ background-color:transparent !important; }
body .WaGadgetMenuHorizontal{ border-top:1px solid var(--isong-border-subtle); border-bottom:1px solid var(--isong-border-subtle); }
/* Second-level menu: hover was the old navy fill with white text */
body .WaGadgetMenuHorizontal .menuInner ul ul.secondLevel > li > .item:hover > a,
body .WaGadgetMenuHorizontal .menuInner ul ul.secondLevel > li > .item > a:hover{
  background-color:var(--isong-surface-muted) !important; color:var(--isong-text-display) !important;
}

/* -- 4. Buttons: one pill, label centred, 48px tall ------------------- */
/* The pill rules above kept the theme's 20px block padding and line
   height, so labels sat at the top of a 72px pill. */
body a.stylizedButton.buttonStyle001, body a.stylizedButton.buttonStyle002,
body a.stylizedButton.buttonStyle003, body a.stylizedButton.buttonStyle004,
body .isong-cta a.isong-btn, body .isong-welcome-section a.isong-members-btn, body a.isong-btn{
  display:inline-flex !important; align-items:center; justify-content:center; box-sizing:border-box;
  min-height:48px; height:auto !important; padding:12px 28px !important; line-height:1.25 !important;
  text-align:center; text-decoration:none !important; vertical-align:middle;
  transition:background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
body a.stylizedButton.buttonStyle003{ box-shadow:none; }
body a.stylizedButton.buttonStyle003:hover{ background:var(--isong-surface-inverse-strong) !important; }
/* Secondary pill (buttonStyle004): navy outline, no fill */
body a.stylizedButton.buttonStyle004{
  background:transparent !important; color:var(--isong-text-heading) !important;
  border:2px solid var(--isong-text-heading) !important; border-radius:var(--isong-radius-pill) !important;
  font-family:var(--isong-font) !important; font-size:16px !important; font-weight:700 !important; text-transform:none !important;
}
body a.stylizedButton.buttonStyle004:hover{ background:var(--isong-info-surface) !important; }
body a.stylizedButton:active, body a.isong-btn:active{ background:var(--isong-action-pressed) !important; }

/* -- 5. Notice: full border, no side stripe (design system, Notice) ---- */
body .isong-notice{ border-left-width:1px; border-left-color:#A9BFE2; }

/* -- 6. Sign-in page and the login box -------------------------------- */
body .loginContainerForm .loginUserName input, body .loginContainerForm .loginPassword input,
body .generalLoginBox input[type="text"], body .generalLoginBox input[type="email"], body .generalLoginBox input[type="password"],
body .authFormContainer input[type="text"], body .authFormContainer input[type="email"], body .authFormContainer input[type="password"]{
  box-sizing:border-box; min-height:44px; padding:8px 12px; font-family:var(--isong-font); font-size:16px;
  color:var(--isong-text-primary); background:#FFFFFF;
  border:1px solid #768191; border-radius:var(--isong-radius-md);
}
body .generalLoginBox .loginPassword .password-wrapper .toggle-password{ color:var(--isong-text-muted); }
body .generalLoginBox input.loginButton, body .authFormContainer input.loginButton, body .loginContainerForm input.loginButton{
  min-height:48px; padding:12px 32px; border:0; border-radius:var(--isong-radius-pill);
  background:var(--isong-action); color:#FFFFFF; box-shadow:var(--isong-shadow-action);
  font-family:var(--isong-font) !important; font-size:16px !important; font-weight:700; text-transform:none !important; letter-spacing:0 !important; cursor:pointer;
}
body .generalLoginBox input.loginButton:hover, body .authFormContainer input.loginButton:hover{ background:var(--isong-action-hover); }
body .authFormContainer label, body .generalLoginBox label{ font-family:var(--isong-font); font-size:16px; color:var(--isong-text-primary); }
/* Single sign-on buttons: one neutral outline treatment, provider marks kept */
body .oAuthForm a.wa-authenticateLoginLink, body .openAuthFormContainer a.wa-authenticateLoginLink{
  display:flex; align-items:center; gap:10px; box-sizing:border-box; min-height:44px; padding:8px 16px;
  background:#FFFFFF !important; border:1px solid #768191; border-radius:var(--isong-radius-pill);
  color:var(--isong-text-heading) !important; text-decoration:none;
}
body .oAuthForm a.wa-authenticateLoginLink:hover{ background:var(--isong-surface-muted) !important; }
body .oAuthForm .authenticateLoginText{ font-family:var(--isong-font); font-size:15px; font-weight:500; color:var(--isong-text-heading) !important; }

/* -- 7. Text fields outside the revenue path: search, contact, profile - */
body .WaGadgetSiteSearchResults input[type="text"], body .WaGadgetSiteSearch input[type="text"],
body .WaGadgetContactProfile input[type="text"], body .WaGadgetContactProfile input[type="email"],
body .WaGadgetContactProfile select, body .WaGadgetContactProfile textarea{
  box-sizing:border-box; min-height:44px; padding:8px 12px; font-family:var(--isong-font); font-size:16px;
  color:var(--isong-text-primary); border:1px solid #768191; border-radius:var(--isong-radius-md); background:#FFFFFF;
}
body .WaGadgetSiteSearchResults input[type="submit"]:not(.typeButton):not(.nextButton), body .WaGadgetSiteSearchResults input[type="button"]:not(.typeButton):not(.nextButton),
body .WaGadgetContactProfile input[type="submit"]:not(.typeButton):not(.nextButton), body .WaGadgetContactProfile input[type="button"]:not(.typeButton):not(.nextButton){
  min-height:44px; padding:10px 24px; border:0; border-radius:var(--isong-radius-pill);
  background:var(--isong-action); color:#FFFFFF; font-family:var(--isong-font); font-size:16px; font-weight:700;
  text-transform:none; letter-spacing:0; cursor:pointer;
}
body .WaGadgetSiteSearchResults .additionalInfo, body .WaGadgetSiteSearchResults .foundLabel,
body .pagerOuterContainer span.bound, body .pagerOuterContainer span.near, body .sysFormatGray{ color:var(--isong-text-muted) !important; }

body span.mandatorySymbol{ color:#972622; }

/* -- 8. Events: list, details and past events ------------------------ */
body .WaGadgetEvents h1.pageTitle.SystemPageTitle,
body .WaGadgetEventsStateDetails h1.pageTitle{
  font-family:var(--isong-font); font-size:40px; line-height:1.15; font-weight:700; letter-spacing:-.01em;
  color:var(--isong-text-heading); text-transform:none; margin:8px 0 24px;
}
body .WaGadgetEvents h3.sectionTitle{
  font-family:var(--isong-font); font-size:28px; line-height:1.2; font-weight:700; letter-spacing:0;
  color:var(--isong-text-heading); text-transform:capitalize;
}
body .WaGadgetEventsStateList h4.boxHeaderTitle, body .WaGadgetEventsStateList h4.boxHeaderTitle a{
  font-family:var(--isong-font); font-size:22px; line-height:1.3; font-weight:700; text-transform:none;
}
body .WaGadgetEventsStateList h4.boxHeaderTitle a{ color:var(--isong-text-heading); text-decoration:none; }
body .WaGadgetEventsStateList h4.boxHeaderTitle a:hover{ color:var(--isong-text-link-hover); text-decoration:underline; text-underline-offset:.18em; }
/* The date and place box: the system's subtle surface, 16px corners */
body .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer:before,
body .WaGadgetEventsStateList .boxOuterContainer .boxBodyOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer,
body .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer{
  background:var(--isong-surface-subtle);
}
body .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer{
  border-top:4px solid var(--isong-brand-mint); border-radius:var(--isong-radius-lg); box-shadow:var(--isong-shadow-sm); padding:20px;
}
body .WaGadgetEvents label.eventInfoBoxLabel{
  font-family:var(--isong-font); font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--isong-text-display);
}
body .WaGadgetEvents .eventInfoBoxValue, body .WaGadgetEvents .eventInfoBoxValue span{ font-size:16px; color:var(--isong-text-primary); }
body .WaGadgetEventsStateDetails .registrationInfoContainer h4.infoTitle{
  font-family:var(--isong-font) !important; font-size:14px !important; line-height:1.4; font-weight:700 !important; letter-spacing:.08em;
  text-transform:uppercase; color:var(--isong-text-display) !important; margin-top:24px;
}
body .WaGadgetEventsStateDetails ul.registrationInfo label.regTypeLiLabel{ font-family:var(--isong-font); font-size:15px; font-weight:700; color:var(--isong-text-primary); }
body .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfo li .regTypeLiValue,
body .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer .registrationInfo li .regTypeLiValueSpan,
body .WaGadgetEventsStateDetails ul.registrationInfo li.disabled label.regTypeLiLabel{ color:var(--isong-text-muted); }
body .WaGadgetEventsStateDetails ul.registrationInfo li.disabled label.regTypeLiLabel{ text-decoration:line-through; font-weight:400; }
body .WaGadgetEventsStateDetails .infoText, body .WaGadgetEventsStateDetails .registrationInfoContainer .infoText{ color:var(--isong-text-secondary); font-size:15px; }
body .WaGadgetEvents a.eventBackLink, body .WaGadgetEvents a.calendarModeLink, body .WaGadgetEvents a.footerEventDetailsLink{
  font-family:var(--isong-font); font-size:16px; font-weight:700; color:var(--isong-text-link);
}
body .WaGadgetEvents .gadgetEventEditableArea{ font-size:16px; line-height:1.6; color:var(--isong-text-primary); }
body .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList td.left{ color:var(--isong-text-muted); font-size:15px; }
/* The grey side column on /Upcoming-Events and /Past-Events (an inline
   layout colour, #CCCCCC) becomes the subtle panel */
body td.WaLayoutItem[style*="background-color:#CCCCCC" i]{
  background-color:var(--isong-surface-subtle) !important; border:1px solid var(--isong-border-subtle); border-radius:var(--isong-radius-lg);
}
body .WaGadgetEventsStateList .pastEventsOuterContainer table.pastEventsList td{ padding-top:6px; padding-bottom:6px; font-size:16px; }

/* -- 9. Footer: the Footer component, exactly ------------------------ */
/* The gadget's own stylesheet still draws a white wave across the top,
   12-13px text and mint links; the design system has flat navy, no
   ornament but the brand bar, white links and nothing under 14px. */
body .isong-footer{ padding-top:48px; border-radius:var(--isong-radius-lg) var(--isong-radius-lg) 0 0; }
body .isong-footer::before{ display:none; }
body .isong-footer p, body .isong-footer address{ color:var(--isong-text-inverse-muted); font-size:15px; line-height:1.6; }
body .isong-footer .isong-brand-tag{ font-size:15px; }
body .isong-footer .isong-contact-label{ font-size:14px; font-weight:700; color:var(--isong-text-inverse-muted) !important; }
body .isong-footer a, body .isong-footer a:link{ font-size:16px; }
body .isong-footer .isong-social a{ width:44px; height:44px; background-color:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
body .isong-footer .isong-social a:hover, body .isong-footer .isong-social a:focus-visible{
  background-color:rgba(255,255,255,.18); border-color:#FFFFFF; transform:none;
}
@media (max-width:767px){ body .isong-footer{ border-radius:0; } }

/* -- 10. Awards: earlier recipients, one open/close panel per award ---- */
/* Markup: div.isong-archive > h3.isong-archive-title + .isong-archive-scroll.
   Global JavaScript (AWARDS ARCHIVE TOGGLES) puts a button in each heading;
   without it the lists simply show open. */
body .isong-award-archive .isong-archive{
  margin:0 0 16px; background:var(--isong-surface-subtle); border:1px solid var(--isong-border-subtle);
  border-radius:var(--isong-radius-lg); overflow:hidden;
}
body .isong-award-archive h3.isong-archive-title{
  margin:0; padding:14px 20px; font-family:var(--isong-font); font-size:18px; line-height:1.4; font-weight:700;
  letter-spacing:0; text-transform:none; color:var(--isong-text-heading);
}
body .isong-award-archive .isong-archive.is-enhanced h3.isong-archive-title{ padding:0; }
body .isong-award-archive button.isong-archive-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:16px; box-sizing:border-box;
  width:100%; min-height:44px; margin:0; padding:14px 20px; border:0; border-radius:0;
  background:transparent; cursor:pointer; text-align:left;
  font-family:var(--isong-font); font-size:18px; line-height:1.4; font-weight:700; color:var(--isong-text-heading);
}
body .isong-award-archive button.isong-archive-toggle::after{
  content:""; flex:0 0 auto; width:10px; height:10px; margin-right:4px;
  border-right:2px solid var(--isong-text-display); border-bottom:2px solid var(--isong-text-display);
  transform:rotate(45deg) translateY(-3px); transition:transform .15s ease;
}
body .isong-award-archive button.isong-archive-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-3px); }
body .isong-award-archive button.isong-archive-toggle:hover{ background:var(--isong-surface-muted); }
body .isong-award-archive button.isong-archive-toggle:focus-visible{ outline:3px solid var(--isong-focus-ring) !important; outline-offset:-3px; }
body .isong-award-archive .isong-archive-scroll{ overflow-x:auto; padding:0 20px 16px; }
body .isong-award-archive table.isong-archive-table{
  width:100%; border-collapse:collapse; font-family:var(--isong-font); font-size:16px; line-height:1.5; color:var(--isong-text-primary);
  background:transparent;
}
body .isong-award-archive table.isong-archive-table th, body .isong-award-archive table.isong-archive-table td{
  padding:10px 12px; text-align:left; vertical-align:top; border:0; border-bottom:1px solid var(--isong-border-subtle);
}
body .isong-award-archive table.isong-archive-table thead th{
  font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--isong-text-display);
  border-bottom:2px solid var(--isong-border-subtle);
}
body .isong-award-archive table.isong-archive-table tbody th{ width:4.5em; font-weight:700; color:var(--isong-text-heading); }
body .isong-award-archive table.isong-archive-table tbody tr:last-child th, body .isong-award-archive table.isong-archive-table tbody tr:last-child td{ border-bottom:0; }
@media (max-width:767px){
  body .isong-award-archive .isong-archive-scroll{ padding:0 12px 12px; }
  body .isong-award-archive table.isong-archive-table{ font-size:15px; }
  body .isong-award-archive table.isong-archive-table th, body .isong-award-archive table.isong-archive-table td{ padding:8px 6px; }
}
@media (max-width:600px){
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two),
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) tbody,
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) tr{ display:block; width:100%; }
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) tr{ padding:10px 0; border-bottom:1px solid var(--isong-border-subtle); }
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) tbody th,
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) td{ display:block; width:auto; padding:2px 6px; border:0; }
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) td::before{
    font-weight:700; color:var(--isong-text-muted); margin-right:6px; }
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) td:nth-child(2)::before{ content:"Education:"; }
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) td:nth-child(3)::before{ content:"Practice or Service:"; }
  body .isong-award-archive table.isong-archive-table:not(.isong-archive-table--two) td:nth-child(4)::before{ content:"Research:"; }
}
@media (prefers-reduced-motion:reduce){ body .isong-award-archive button.isong-archive-toggle::after{ transition:none; } }

/* The site's scroll fade-in is not applied row by row inside these tables */
body .isong-award-archive .isong-anim{ opacity:1 !important; transform:none !important; transition:none !important; }

/* -- 12. Two gadget colours below contrast ---------------------------- */
/* /ISONG-Newsletter: the "Newsletter Archives" band is a Content gadget
   whose editor-set background is mint #56B9A0 under near-white text
   (2.3:1); the band becomes the action teal (6.39:1). Only that gadget
   on the site uses this background. /bylaws-and-2030-plan: goals 1 and 4
   draw white numbers on mint badges (2.4:1); they become the action teal.
   The gadget's own rule is (0,3,0) and renders later, so these carry
   (0,4,1). */
body .WaGadgetContent[style*="background-color:#56B9A0" i]{ background-color:var(--isong-action) !important; }
body .isong-page .goal:nth-child(1) .goal-num,
body .isong-page .goal:nth-child(4) .goal-num{ background:var(--isong-action); }

/* -- 13. Awards: "To Be Announced" cards ------------------------------ */
/* Before a year's Founders' and President's Awards are presented, each
   card shows the ISONG mark on the quiet mint surface instead of a
   photograph, and the name line reads "To Be Announced at Congress". */
body .isong-awards .isong-recipient-photo.isong-recipient-photo--tba{ background:var(--isong-surface-accent); }
body .isong-awards .isong-recipient-photo.isong-recipient-photo--tba img{
  object-fit:contain; object-position:center; padding:16px 20px; box-sizing:border-box; }
body .isong-awards .isong-recipient--tba .isong-recipient-name{ color:var(--isong-text-heading); }

/* -- 14. Phone and tablet fit, system pages, member area -------------
   From the Nov 1 audit of 108 public pages and 14 member pages at 375,
   768 and 1280px. Wild Apricot's .nextButton and .typeButton are in
   section 15.                                                          */

/* Long button labels ran off the right edge at 375px and were clipped
   (Research Resources, Position Statements, 2026 Grant Program,
   Pre-Congress Workshops). Let them wrap inside the pill. */
body a.stylizedButton, body a.isong-btn{ max-width:100%; white-space:normal !important; overflow-wrap:anywhere; }
body a.stylizedButton *{ white-space:normal !important; }

/* Award card grids the editor saved with a fixed 500px width
   (Education and Clinical Practice grant pages) */
body .isong-award-grid[style*="width"]{ width:auto !important; max-width:100%; }

/* Embedded video players scale with the column (Webinars) */
body .gadgetContentEditableArea iframe[src*="vimeo.com"],
body .gadgetContentEditableArea iframe[src*="youtube"]{ max-width:100%; height:auto; aspect-ratio:16 / 9; }

/* Wide tables get a sideways scroll box from the Global JavaScript block
   ISONG SYSTEM PAGES AND PHONE FIT; this is its look. */
body .isong-table-scroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px; }
body .isong-table-scroll:focus-visible{ outline:3px solid var(--isong-focus-ring); outline-offset:3px; }

/* Justified paragraphs leave rivers of space on a phone; left-align them */
body .gadgetContentEditableArea [style*="text-align: justify" i],
body .gadgetContentEditableArea [style*="text-align:justify" i],
body .gadgetContentEditableArea [align="justify" i]{ text-align:left !important; }

/* Headings typed in lower case and shouted with an inline uppercase
   (About Us: "history", "what we do") read as title case at h2 size */
body .gadgetContentEditableArea h2[style*="text-transform:uppercase" i],
body .gadgetContentEditableArea h2[style*="text-transform: uppercase" i]{
  text-transform:capitalize !important; font-size:clamp(24px, 4vw, 30px) !important; line-height:1.25 !important;
}

/* Small print up to the 14px floor */
body .isong-footer .isong-footer-bottom, body .isong-footer .isong-footer-bottom *{ font-size:14px !important; }
body .isong-footer a.isong-search-link{ font-size:14px !important; }
body .WaGadgetMembershipApplicationForm span.levelDescription, body span.levelDescription{ font-size:14px !important; line-height:1.5; }
body .gadgetContentEditableArea font[size="1"], body .gadgetContentEditableArea font[size="2"],
body .gadgetEventEditableArea font[size="1"], body .gadgetEventEditableArea font[size="2"],
body .gadgetContentEditableArea [style*="font-size: 10px"], body .gadgetContentEditableArea [style*="font-size: 11px"], body .gadgetContentEditableArea [style*="font-size: 12px"],
body .gadgetEventEditableArea [style*="font-size: 10px"], body .gadgetEventEditableArea [style*="font-size: 11px"], body .gadgetEventEditableArea [style*="font-size: 12px"],
body .gadgetContentEditableArea [style*="font-size:10px"], body .gadgetContentEditableArea [style*="font-size:11px"], body .gadgetContentEditableArea [style*="font-size:12px"]{ font-size:14px !important; }

/* Pagers: the theme's pale green current page (1.96:1) and grey
   disabled labels (2.01:1) */
body span.linkCurrent{ color:var(--isong-text-heading) !important; font-weight:700; }
body .pagerOuterContainer span.linkDisabled{ color:var(--isong-text-muted) !important; }
body .searchPager span{ color:var(--isong-text-muted) !important; }
body .searchPager span.isong-pager-current{ color:var(--isong-text-heading) !important; font-weight:700; }
body .searchPager a{ display:inline-block; min-width:24px; min-height:24px; text-align:center; color:var(--isong-text-link) !important; text-decoration:underline; cursor:pointer; }

/* Phone menu button: the theme turned it orange on hover */
body .WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover,
body .WaGadgetMobilePanel .mobilePanel .mobilePanelButton:hover::before{ color:var(--isong-action) !important; }

/* Event pages: the "Add to my calendar" menu in Ubuntu */
body .WaGadgetEvents .-wa-add-event-to-calendar-dropdown, body .WaGadgetEvents .-wa-add-event-to-calendar-dropdown *{ font-family:var(--isong-font) !important; }

/* Text images from the retired Wild Apricot text generator become text
   (Global JavaScript); this is their look on the old event pages. */
body .isong-arttext{ display:inline-block; font-family:var(--isong-font); font-weight:700; font-size:20px; line-height:1.3; color:var(--isong-text-heading); }

/* Search page: the query box (no type attribute, so section 7 missed it) */
body .WaGadgetSiteSearchResults input.searchBoxField{
  box-sizing:border-box; min-height:44px; padding:8px 12px; font-family:var(--isong-font); font-size:16px;
  color:var(--isong-text-primary); border:1px solid #768191; border-radius:var(--isong-radius-md); background:#FFFFFF;
}

/* Member area (signed in) */
/* Profile: section heading in the type scale, not thin uppercase */
body .WaGadgetContactProfile h4{ text-transform:none !important; font-family:var(--isong-font) !important; font-weight:700 !important; font-size:22px !important; color:var(--isong-text-heading) !important; }
/* Profile tabs: current tab bold navy */
body .memberDetailsTabMenu li.selected, body .memberDetailsTabMenu li.selected span{ color:var(--isong-text-heading); font-weight:700; }
/* Past registrations and donations: the theme greys them to 2.49:1 */
body .grayedOut, body .grayedOut *{ color:var(--isong-text-muted) !important; }
body .WaGadgetContactProfile .explanation{ color:var(--isong-text-muted) !important; }
body .WaGadgetContactProfile .totalBalance{ color:var(--isong-text-primary) !important; font-weight:700; }
/* Social sign-in Connect buttons keep the provider ground; white label */
body .WaGadgetContactProfile a.connectExternalProfileButton, body .WaGadgetContactProfile a.connectExternalProfileButton *{ color:#FFFFFF !important; font-family:var(--isong-font) !important; }
/* Member Directory search box */
body .WaGadgetMemberDirectory input[type="text"]{
  box-sizing:border-box; min-height:44px; padding:8px 12px; font-family:var(--isong-font); font-size:16px;
  color:var(--isong-text-primary); border:1px solid #768191; border-radius:var(--isong-radius-md); background:#FFFFFF;
}
body .WaGadgetMemberDirectory select{ min-height:44px; padding:6px 10px; font-family:var(--isong-font); font-size:16px; border:1px solid #768191; border-radius:var(--isong-radius-md); background:#FFFFFF; color:var(--isong-text-primary); }

/* Change Password: Save as the primary pill, Cancel as the secondary
   (plain submit inputs, not .typeButton; theme blue gave white 2.22:1) */
body .WaGadgetChangePassword input[type="submit"]{
  min-height:44px !important; padding:10px 24px !important; border:0 !important; border-radius:var(--isong-radius-pill) !important;
  background:var(--isong-action) !important; color:#FFFFFF !important; font-family:var(--isong-font) !important; font-size:16px !important;
  font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; cursor:pointer;
}
body .WaGadgetChangePassword input[type="submit"]:hover{ background:var(--isong-action-hover) !important; }
body .WaGadgetChangePassword input[name="cancelButton"]{ background:#FFFFFF !important; color:var(--isong-text-heading) !important; border:2px solid var(--isong-text-heading) !important; }
body .WaGadgetChangePassword input[name="cancelButton"]:hover{ background:var(--isong-info-surface) !important; }
body .WaGadgetChangePassword input[type="password"], body .WaGadgetChangePassword input[type="text"]{
  box-sizing:border-box; min-height:44px; padding:8px 12px; font-family:var(--isong-font); font-size:16px;
  color:var(--isong-text-primary); border:1px solid #768191; border-radius:var(--isong-radius-md); background:#FFFFFF;
}
/* Profile: small labels up to the 14px floor */
body .WaGadgetContactProfile .eventHeaderLabel, body .WaGadgetContactProfile .eventHeaderLabel *,
body .WaGadgetContactProfile .authenticateLoginText{ font-size:14px !important; }
body .WaGadgetChangePassword .introContainer .inner{ text-transform:none !important; font-family:var(--isong-font) !important; font-weight:700 !important; font-size:22px !important; color:var(--isong-text-heading) !important; }

/* -- 15. Wild Apricot system buttons on the design system ------------
   John, Nov 1: the old "never restyle .nextButton / .typeButton" rule is
   lifted. Look only: colour, type, shape and size. No display, width,
   position or visibility property is set, so Wild Apricot's own show/hide
   of steps (the "hidden" class, the no-script Cancel) is untouched.
   Primary: Join Next, Pay with card, Register, Renew, Change membership
   level, Edit profile, Reset password Submit. Secondary (navy outline):
   Cancel, Back, Previous. */
body input.nextButton, body input.typeButton, body button.typeButton,
body input.nextButton.button, body input.typeButton.button, body button.typeButton.button,
body a.nextButton, body a.typeButton,
body .WaGadgetContactProfile .topButtonsOuterContainer input.typeButton{
  min-height:48px !important; height:auto !important; padding:12px 28px !important; line-height:1.25 !important;
  border:0 !important; border-radius:var(--isong-radius-pill) !important;
  background:var(--isong-action) !important; background-image:none !important; color:#FFFFFF !important;
  box-shadow:var(--isong-shadow-action) !important; text-shadow:none !important;
  font-family:var(--isong-font) !important; font-size:16px !important; font-weight:700 !important;
  letter-spacing:0 !important; text-transform:none !important; cursor:pointer;
  transition:background-color .15s ease, box-shadow .15s ease;
}
body input.nextButton:hover, body input.typeButton:hover, body button.typeButton:hover,
body a.nextButton:hover, body a.typeButton:hover{ background:var(--isong-action-hover) !important; }
body input.nextButton:active, body input.typeButton:active, body button.typeButton:active,
body a.nextButton:active, body a.typeButton:active{ background:var(--isong-action-pressed) !important; }
body input.nextButton.nextButton[value="Cancel" i], body input.nextButton[value="Back" i], body input.nextButton[value="Previous" i],
body input.typeButton[value="Cancel" i], body input.typeButton[value="Back" i], body input.typeButton[value="Previous" i],
body input.nextButton[name$="$back"], body input.nextButton[name$="$cancel"], body input.nextButton[name$="$cancelNoScript"]{
  background:#FFFFFF !important; color:var(--isong-text-heading) !important;
  border:2px solid var(--isong-text-heading) !important; box-shadow:none !important; padding:10px 26px !important;
}
body input.nextButton[value="Cancel" i]:hover, body input.nextButton[value="Back" i]:hover, body input.nextButton[value="Previous" i]:hover,
body input.typeButton[value="Cancel" i]:hover, body input.typeButton[value="Back" i]:hover, body input.typeButton[value="Previous" i]:hover,
body input.nextButton[name$="$back"]:hover, body input.nextButton[name$="$cancel"]:hover{ background:var(--isong-info-surface) !important; }
body input.nextButton:disabled, body input.typeButton:disabled, body button.typeButton:disabled{ opacity:.55; cursor:not-allowed; }

/* -- 16. Last clean-ups (Nov 1) ---------------------------------------- */
/* Upcoming Events: the events list repeats the page header's title right
   under it; keep it for screen readers, hide it on screen. */
body .isong-js-pagehead + .WaGadgetEvents h3.sectionTitle{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important; margin:0 !important; padding:0 !important;
}
/* Old event descriptions: inline logos with 20px margins ran past a
   375px screen (2018 World Congress sponsors). */
@media (max-width:767px){
  body .gadgetEventEditableArea img[style*="margin"]{ margin:8px !important; max-width:calc(100% - 16px) !important; height:auto !important; }
}

/* -- 17. UX review (Nov 1): event page headers, captions, small text ---
   Companion to the Global JavaScript block ISONG EVENT PAGES AND EMPTY
   HEADINGS (2026-11-01), which turns each event's title into the navy
   page header and adds a "Past event" Notice under it.
   a. The theme colours event titles #333 at 28px through
      .WaGadgetEventsStateDetails .pageTitleOuterContainer
      .eventsTitleContainer h1 (0,4,1), which beats the page header rule,
      so the title rendered dark on navy. Scoped to .isong-event-head.
   b. Captions: the design system's floor is 14px (isong-caption); the
      home feed's dates were 12.5px.
   c. The 2030 Plan banner on /bylaws-and-2030-plan (its own gadget CSS)
      set its label, "Our Vision" eyebrow and badge at 11-13px.
   d. Paragraphs saved with align="justify" read with rivers of space on
      a phone; body copy is left-aligned. ------------------------------ */
body .isong-event-head.isong-pagehead{ margin:0 0 8px; max-width:none; }
body .isong-event-head.isong-pagehead h1.isong-pagehead__title{
  color:#FFFFFF !important; font-family:var(--isong-font) !important;
  font-size:40px !important; line-height:1.15 !important; font-weight:700 !important;
  letter-spacing:-.01em; text-transform:none !important; margin:0 !important; padding:0 !important;
}
body .isong-event-head.isong-pagehead h1.isong-pagehead__title a{
  color:#FFFFFF !important; text-decoration:underline; text-underline-offset:.15em;
}
body .isong-event-past{ margin:16px 0 24px; max-width:none; }
@media (max-width:767px){
  body .isong-event-head.isong-pagehead h1.isong-pagehead__title{ font-size:32px !important; }
  body .isong-event-past{ margin:16px 0 20px; }
}
body .isong-latest-section p.isong-latest__meta{ font-size:14px; line-height:1.5; }
body .isong-page .hero-org, body .isong-page .badge{ font-size:14px; }
body .isong-page .hero-vision strong{ font-size:14px; }
body .gadgetContentEditableArea p[align="justify"],
body .gadgetContentEditableArea div[align="justify"]{ text-align:left; }

/* -- 17e. Home "ISONG at a Glance" band (StatBand): the title moves onto
   the h2 scale in white Title Case (28 / 24 / 22px), matching "Where Our
   Members Are" beside it, instead of a second uppercase mint eyebrow;
   figures at isong-stat 48px; labels isong-text-inverse-muted 16px (were
   #B8C6D8 at 15px, off-token). The globe's own styles are fixed in its
   gadget (id_orjOj3E). -------------------------------------------------- */
body .isong-stats h2, body .isong-home-map .isong-stats h2{
  font-size:28px; line-height:1.2; letter-spacing:-.0125em; text-transform:none; color:#FFFFFF;
}
@media (max-width:767px){ body .isong-stats h2, body .isong-home-map .isong-stats h2{ font-size:24px; } }
@media (max-width:479px){ body .isong-stats h2, body .isong-home-map .isong-stats h2{ font-size:22px; } }
body .isong-stats .isong-stats__num{ font-size:48px; line-height:1.05; letter-spacing:-.02em; }
body .isong-stats .isong-stats__label{ font-size:16px; line-height:1.5; color:#CDDCF2; }

/* -- 17f. Page header geometry and section hubs (Nov 1, UX review) ------
   a. One column for the page header and the text under it. The header was
      1170px wide and centred in the 1200px content column (inset 15px each
      side), so its left edge never lined up with the text below, and it sat
      20px under the menu. Section landing pages, which open straight into
      body text, showed this worst. Now it spans the content column with
      24px above it. Event-page headers keep their own spacing (17a).
   b. Card (design system component) for the "In This Section" grid that
      the Global JavaScript block ISONG SECTION HUBS adds to the top-level
      section pages: 4px mint top bar, surface-subtle, radius 16px, medium
      navy shadow, title isong-h3 in navy, body 16px secondary. The whole
      card is the link target (stretched link); focus ring on the card. -- */
body .isong-pagehead{ max-width:none; margin:24px 0 12px; }
body .isong-event-head.isong-pagehead{ margin:0 0 8px; }
body .isong-hub{ margin:48px 0 16px; }
body .isong-hub > h2.isong-hub__title{
  margin:0 0 24px; font-family:var(--isong-font); font-size:28px; line-height:1.2; font-weight:700;
  letter-spacing:-.0125em; color:#314D79; text-transform:none;
}
body ul.isong-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap:32px;
  margin:0; padding:0; list-style:none;
}
body ul.isong-cards > li.isong-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  margin:0; padding:32px; list-style:none; background:#F8FAFB;
  border-top:4px solid #59BAA1; border-radius:16px; box-shadow:0 8px 24px rgba(49,77,121,.12);
  transition:box-shadow .15s ease;
}
body ul.isong-cards > li.isong-card::before{ content:none; display:none; }
body ul.isong-cards > li.isong-card:hover{ box-shadow:0 12px 36px rgba(49,77,121,.18); }
body ul.isong-cards > li.isong-card:focus-within{ outline:3px solid #233A60; outline-offset:3px; }
body ul.isong-cards h3.isong-card__title{
  margin:0; font-family:var(--isong-font); font-size:22px; line-height:1.3; font-weight:700;
  letter-spacing:-.005em; color:#314D79; text-transform:none;
}
body ul.isong-cards h3.isong-card__title a.isong-card__link{
  color:#314D79 !important; text-decoration:none !important; outline:none;
}
body ul.isong-cards h3.isong-card__title a.isong-card__link::after{ content:""; position:absolute; inset:0; border-radius:16px; }
body ul.isong-cards > li.isong-card:hover h3.isong-card__title a.isong-card__link{ text-decoration:underline !important; text-underline-offset:.15em; }
body ul.isong-cards p.isong-card__body{ margin:0; font-size:16px; line-height:1.6; color:#3A4A62; }
@media (max-width:767px){
  body .isong-pagehead{ margin:16px 0 8px; }
  body .isong-hub{ margin:40px 0 8px; }
  body .isong-hub > h2.isong-hub__title{ font-size:24px; }
  body ul.isong-cards{ gap:20px; }
  body ul.isong-cards > li.isong-card{ padding:24px; }
}
@media (max-width:479px){ body .isong-hub > h2.isong-hub__title{ font-size:22px; } }
@media (prefers-reduced-motion:reduce){ body ul.isong-cards > li.isong-card{ transition:none; } }

/* -- 17j. Long titles break into even lines (Nov 1) -----------------------
   The President's message title "Our new name is ISONG: The International
   Society of Nursing Genomics and Precision Health" left "Health" alone on
   its second line at laptop widths. text-wrap: balance evens the lines
   (Safari 17.5+, Chrome 114+, Firefox 121+; older browsers wrap as before).
   Same for page-header titles and section headings. ----------------------- */
body .isong-welcome-section .isong-notice--president p.isong-notice__title,
body .isong-pagehead h1.isong-pagehead__title,
body .isong-pagehead div.isong-pagehead__title,
body .isong-hub > h2.isong-hub__title{ text-wrap:balance; }

/* -- 17i. Sticky bar on phones and tablets (Nov 1) --------------------
   The bar was desktop-only: the STICKY HEADER block hides it with
   display:none at max-width 960px, which covers every iPhone and every
   iPad held upright (744-834px), while the scroll script still flips
   .is-on underneath. It now shows at every width. The overflow guard
   already folds the menu into More as the row narrows, so no script
   change is needed for it to fit. Below 600px Contact Us leaves the
   bar (it stays in the page header) so Login and More keep
   room, and every panel opens full width under the bar. Panels scroll
   inside themselves when taller than the screen. On touch screens the
   controls meet the 44px target. Not printed (screen only); no slide under reduced motion.
   Rollback: delete this section. */
@media screen and (max-width:960px){
  body .isong-sticky-bar{ display:block; }
  body .isong-sticky-inner{
    gap:8px;
    padding:4px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left));
  }
  body .isong-sticky-bar nav > .isong-sticky-item > .isong-sticky-drop{
    max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  h1, h2, h3, h4, [id]{ scroll-margin-top:72px; }
}
@media (max-width:600px){
  body .isong-sticky-bar a.isong-sticky-cta{ display:none !important; }
  body .isong-sticky-bar nav .isong-sticky-item{ position:static; }
  body .isong-sticky-bar nav > .isong-sticky-item:nth-child(n) > .isong-sticky-drop{
    left:0; right:0; min-width:0; max-width:none; border-radius:0 0 8px 8px;
  }
}
@media (pointer:coarse){
  body .isong-sticky-mark{ width:44px; flex:0 0 44px; }
  body .isong-sticky-bar nav a,
  body .isong-sticky-bar nav .isong-sticky-more-btn{ min-height:44px; box-sizing:border-box; }
  body .isong-sticky-bar .isong-sticky-drop a{ display:flex; align-items:center; }
  body .isong-sticky-bar a.isong-sticky-cta,
  body .isong-sticky-bar a.isong-sticky-login{ height:44px; }
}
@media (prefers-reduced-motion:reduce){ body .isong-sticky-bar, body .isong-sticky-bar.is-on{ transition:none; } }

/* -- 17g. Phone gutter and small leftovers (2026-11-01, UX review) -------
   a. Page gutter. The theme pads every .zonePlace 0 15px, and 0 10px below
      480px, so body text sat 10px from the edge of a phone. The design
      system's page gutter is isong-space-6 (24px) at every width, and its
      components keep 24px on phones; 16px below 360px (see the rule). Only
      the two zones that hold page content change (.zoneHeader2 also
      carries content on the home page, the 2026 World Congress page and
      six others); the header, menu, mobile panel and footer zones keep
      their own spacing. Page headers and in-content cards sit inside these
      zones, so they line up with the text column without rules of their
      own. The home page's glance and members panels get a column that
      can shrink, so nothing pushes a 320px screen sideways.
   b. Body copy on phones. Below 480px the theme sets body to 14px
      (html:not([class*="WaPlaceHolder"]) body), so ordinary Content-gadget
      paragraphs read at caption size. isong-body is 18px at every width
      (only headings step down); this restores it inside page content only.
   c. Footnote markers. Browsers draw <sup> at "smaller" (0.83em), which
      was 11.7px in 14px text. max(14px, .85em) holds the caption floor in
      any text size; line-height 0 keeps the marker from opening the line.
   d. The 2030 Plan banner (/bylaws-and-2030-plan): its gadget style block
      sets .isong-page .plan-header .badge and .isong-page .footer at 13px,
      which out-rank 17c. Raised to isong-caption (14px).
   e. Menu overflow item (768-1024px). Wild Apricot's adaptive menu folds
      the items that do not fit into a "phantom" item. The theme draws its
      three dots in Ubuntu (span::before) but sets the link itself in
      Verdana and parks a menu-icon character off-screen with text-indent;
      that hidden glyph is what reads as Verdana. The link now takes the
      menu face. The dots, the 80px item width the menu script counts on,
      and the toggle itself are unchanged. The Global JavaScript block
      ISONG MENU PARENTS names it "More".
   f. Text fields on Wild Apricot forms (donation, membership application,
      event registration, password reset): 25px tall, 14px text, square,
      #B8C6CD border (1.7:1, under the 3:1 non-text floor). Now the Input
      look: at least 44px, 16px text (no zoom-on-focus on iPhone), radius-md
      8px, isong-control-border-width 2px in #768191 (4.0:1), the standard
      focus ring. Look only: no display, width, position or visibility, so
      Wild Apricot's field layout and validation are untouched. Sections 6
      and 7 cover the sign-in box, search and profile fields; section 15
      the buttons.
   Rollback: delete section 17g. ------------------------------------------ */

/* a. Page gutter */
@media (max-width:767px){
  body .zonePlace.zoneContent, body .zonePlace.zoneHeader2{ padding-left:24px; padding-right:24px; }
  /* Sponsor slots are fixed rem widths (Gold 17.5rem = 280px); in the
     narrower column the Gold logo ran 6px past its panel and was cut off.
     Each slot now stops at its column; the logo scales inside it. */
  body .isong-spon .isong-spon__link, body .isong-spon .isong-spon__plate{ max-width:100%; }
}
/* Under 360px (iPhone SE first generation, small Android) a 24px gutter
   leaves 272px, narrower than the 304px reCAPTCHA box on the donation and
   membership forms, which then pushed the page sideways. 16px there. */
@media (max-width:359px){
  body .zonePlace.zoneContent, body .zonePlace.zoneHeader2{ padding-left:16px; padding-right:16px; }
}
/* Home "ISONG at a Glance" and "Where Our Members Are": below 900px their
   grid has one 1fr column, which never shrinks below its content, so at
   320px the two panels stayed 321px wide and the page scrolled sideways
   (11px on the live site, 17px with the gutter above) until the figures
   animated. minmax(0, 1fr) keeps the column inside the text column. */
@media (max-width:900px){
  body .isong-home-map{ grid-template-columns:minmax(0, 1fr); }
}

/* b. Body copy on phones */
@media (max-width:479px){
  body .gadgetContentEditableArea, body .gadgetEventEditableArea{ font-size:18px; }
}

/* c. Footnote markers */
body .gadgetContentEditableArea sup, body .gadgetEventEditableArea sup{ font-size:max(14px, .85em); line-height:0; }

/* d. 2030 Plan banner small print */
body .isong-page .plan-header .badge, body .isong-page .footer{ font-size:14px; }

/* e. Menu overflow item: the link in the menu face, not Verdana */
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.phantom > .item > a{ font-family:var(--isong-font-menu); }

/* f. Text fields on Wild Apricot forms */
body .WaGadgetPublicWizard .fieldBody input[type="text"], body .WaGadgetPublicWizard .fieldBody input[type="email"],
body .WaGadgetPublicWizard .fieldBody input[type="tel"], body .WaGadgetPublicWizard .fieldBody input[type="number"],
body .WaGadgetPublicWizard .fieldBody input[type="password"], body .WaGadgetPublicWizard .fieldBody select,
body .WaGadgetPublicWizard .fieldBody textarea,
body .WaGadgetEventsStateRegistration .fieldBody input[type="text"], body .WaGadgetEventsStateRegistration .fieldBody input[type="email"],
body .WaGadgetEventsStateRegistration .fieldBody input[type="tel"], body .WaGadgetEventsStateRegistration .fieldBody input[type="number"],
body .WaGadgetEventsStateRegistration .fieldBody select, body .WaGadgetEventsStateRegistration .fieldBody textarea,
body .WaGadgetResetPasswordRequest .fieldBody input[type="text"], body .WaGadgetResetPasswordRequest .fieldBody input[type="email"]{
  box-sizing:border-box; min-height:44px; padding:8px 12px;
  font-family:var(--isong-font); font-size:16px; line-height:1.5; font-weight:400;
  color:var(--isong-text-primary); background-color:#FFFFFF;
  border:2px solid #768191 !important; border-radius:var(--isong-radius-md) !important;
}
body .WaGadgetPublicWizard .fieldBody input:focus-visible, body .WaGadgetPublicWizard .fieldBody select:focus-visible,
body .WaGadgetPublicWizard .fieldBody textarea:focus-visible,
body .WaGadgetEventsStateRegistration .fieldBody input:focus-visible, body .WaGadgetEventsStateRegistration .fieldBody select:focus-visible,
body .WaGadgetEventsStateRegistration .fieldBody textarea:focus-visible,
body .WaGadgetResetPasswordRequest .fieldBody input:focus-visible{
  outline:3px solid var(--isong-focus-ring); outline-offset:3px;
}

/* -- 17h. Menu parents open their submenus (Nov 1, round 3) ------------
   Pairs with the Global JavaScript block ISONG MENU PARENTS. A top-level
   item with sub-items is a button (no href), so: a pointer cursor; on the
   desktop menu and sticky bar its submenu opens on hover or when the
   button is opened (.isong-mp-open), no longer on focus alone, so Escape
   can close it with focus left on the parent (.isong-mp-suppress keeps it
   closed under a resting pointer); on the phone menu each section folds
   on its own, with a chevron. Every rule is scoped by the classes the
   script adds, so without the script nothing here applies.
   Rollback: delete section 17h together with the MENU PARENTS block. */
body .isong-mp-btn[role="button"]{ cursor:pointer; }
body .isong-mp-label{ cursor:default; }

/* Desktop menu */
body .WaGadgetMenuHorizontal .menuInner li.isong-mp:not(.isong-mp-open):not(:hover) > .item > ul.secondLevel,
body .WaGadgetMenuHorizontal .menuInner li.isong-mp.isong-mp-suppress:not(.isong-mp-open) > .item > ul.secondLevel{
  visibility:hidden !important; opacity:0 !important;
}
body .WaGadgetMenuHorizontal .menuInner li.isong-mp.isong-mp-open > .item > ul.secondLevel{
  visibility:visible !important; opacity:1 !important; transform:translateY(0);
  width:auto; min-width:200px; height:auto; overflow:visible;   /* the theme's own :hover reveal */
  transition:opacity var(--isong-dur-fast,150ms) var(--isong-ease,ease-out),
             transform var(--isong-dur-fast,150ms) var(--isong-ease,ease-out),
             visibility 0s linear 0s;
}
body .WaGadgetMenuHorizontal .menuInner li.isong-mp > .item > a.isong-mp-btn:focus-visible{
  outline:3px solid var(--isong-focus-ring,#233A60) !important; outline-offset:-3px !important;
}
/* section 1 rings every menu link on :focus; a button clicked with the
   mouse keeps focus, so ring it only for keyboard focus */
body .WaGadgetMenuHorizontal .menuInner li.isong-mp > .item > a.isong-mp-btn:focus:not(:focus-visible){
  outline:none !important;
}

/* Sticky bar (the More panel keeps its own static layout) */
body .isong-sticky-bar nav > .isong-sticky-item.isong-mp:not(.is-open):not(:hover) > .isong-sticky-drop,
body .isong-sticky-bar nav > .isong-sticky-item.isong-mp.isong-mp-suppress:not(.is-open) > .isong-sticky-drop{
  opacity:0; visibility:hidden; transform:translateY(6px);
}
/* Same colour as the bar's other items, which take the site link colour
   (a:link); without an href the parent would otherwise drop to navy. */
body .isong-sticky-bar nav .isong-sticky-item > a.isong-mp-btn:not(:hover){ color:var(--isong-text-link,#276A58); }
body .isong-sticky-bar nav .isong-sticky-item > a.isong-mp-btn:focus-visible{
  outline:3px solid var(--isong-focus-ring,#233A60); outline-offset:-3px;
}

/* Phone menu: each section folds on its own (accordion) */
body .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.isong-mp:not(.isong-mp-open) > .item > ul.secondLevel{
  display:none;
}
body .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.isong-mp > .item > a.isong-mp-btn::after{
  content:""; flex:0 0 auto; width:9px; height:9px; margin:0 8px 0 auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);
  transition:transform var(--isong-dur-fast,150ms) var(--isong-ease,ease-out);
}
body .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.isong-mp.isong-mp-open > .item > a.isong-mp-btn::after{
  transform:translateY(2px) rotate(-135deg);
}
body .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.isong-mp > .item > a.isong-mp-btn:focus-visible{
  outline:3px solid var(--isong-focus-ring,#233A60); outline-offset:-3px;
}
@media (prefers-reduced-motion:reduce){
  body .WaGadgetMenuHorizontal .menuInner li.isong-mp > .item > ul.secondLevel,
  body .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.isong-mp > .item > a.isong-mp-btn::after{ transition:none !important; }
}

/* -- 18. Keyboard pass (Nov 1): phone toggles, dropdowns, one ring --------
   Pairs with the Global JavaScript block ISONG KEYBOARD ACCESS. Scoped by
   class only. Menu parents that ISONG MENU PARENTS turns into buttons
   (li.isong-mp) are opened and closed by that block and section 17h; the
   dropdown rules here cover every item it does not convert, and all of
   them if it is ever removed.
   Rollback: delete section 18 together with the KEYBOARD ACCESS block. */
/* Phone Menu and Log in toggles are now focusable buttons: give them the ring */
body .WaGadgetMobilePanel .mobilePanelButton:focus-visible{
  outline:3px solid #233A60 !important; outline-offset:-3px !important;   /* inset: the toggles sit flush with the screen edge */
}
/* Keyboard focus opens the dropdown the same way hover does. The July 2026
   rule set only visibility and opacity; the theme's panel stays 0 x 0 with
   overflow hidden until .item:hover sets its size, so a keyboard user tabbed
   through invisible links (WCAG 2.4.7, 2.1.1). Mirror the theme's hover
   rule. Converted parents are left out: focus alone must not open them. */
body .WaGadgetMenuHorizontal .menuInner li:not(.isong-mp) > .item:focus-within > ul{
  display:block; visibility:visible; width:auto; min-width:200px; height:auto; overflow:visible; opacity:1;
}
/* Escape closed this dropdown: keep it shut until the next hover, focus or
   click. Specificity beats the July 2026 :focus-within !important reveal. */
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.isong-menu-dismissed > .item > ul.secondLevel,
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.isong-menu-dismissed ul.secondLevel,
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.isong-menu-dismissed ul.secondLevel li .item a,
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.isong-menu-dismissed ul.secondLevel li .item,
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.isong-menu-dismissed ul.secondLevel li{
  visibility:hidden !important; opacity:0 !important;
}
body .isong-sticky-bar .isong-sticky-item.isong-menu-dismissed .isong-sticky-drop{
  visibility:hidden !important; opacity:0 !important;
}
/* Sticky bar More panel: a disclosure like the menu parents (17h). It opens
   with its button (.is-open) or under a mouse pointer, no longer on focus
   alone or on the hover a touch screen leaves behind after a tap, which
   kept it on screen after a second tap or click had closed it. Its ring
   was #17685A; now the system navy. */
body .isong-sticky-bar nav > .isong-sticky-more:not(.is-open) > .isong-sticky-drop{
  opacity:0; visibility:hidden; transform:translateY(6px);
}
@media (hover:hover) and (pointer:fine){
  body .isong-sticky-bar nav > .isong-sticky-more:not(.is-open):hover > .isong-sticky-drop{
    opacity:1; visibility:visible; transform:translateY(0);
  }
}
body .isong-sticky-bar nav .isong-sticky-more-btn:focus-visible{ outline:3px solid #233A60; outline-offset:-3px; }
/* Main menu ring: the July 2026 rule drew #1A4E8A, off-system. Same 3px
   navy ring as every other control, drawn inside the item: an outset ring
   on a top-level item disappears under its own open dropdown. */
body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:focus-visible,
body .WaGadgetMenuHorizontal .menuInner ul.secondLevel a:focus-visible{
  outline:3px solid #233A60 !important; outline-offset:-3px !important;
}
/* Dropdown items were 35px tall; every menu item is at least 44px */
body .WaGadgetMenuHorizontal .menuInner ul.secondLevel > li > .item > a{
  display:flex; align-items:center; min-height:44px; box-sizing:border-box;
}
/* Skip link: 44px tall (section 2 keeps its pressed-teal fill); gold ring
   drawn inside, since it sits in the corner where an outset ring is cut off */
body a.isong-skip{ min-height:44px; display:inline-flex; align-items:center; padding:0 20px; }
body a.isong-skip:focus-visible{ outline:3px solid #E5B841 !important; outline-offset:-6px !important; }
/* Skip target: focus lands on the main region; no ring around the whole page body */
body .isong-skip-target:focus, body [role="main"][tabindex="-1"]:focus{ outline:none; }
/* Event "Add to my calendar": a ring on the dropdown, a visible highlight
   on the item the arrow keys reach (JS section 4) */
body .-wa-add-event-to-calendar-dropdown:focus-visible{ outline:3px solid #233A60 !important; outline-offset:3px; border-radius:8px; }
body .-wa-add-event-to-calendar-dropdown .menu > a.item.isong-cal-active{ background:#E6F2EE !important; color:#162232 !important; box-shadow:inset 4px 0 0 #276A58; }
/* Fixed sticky bar: keyboard focus lands clear of it (WCAG 2.4.11). The
   bar is about 62px tall on desktop and 56px at 960px and below, where
   section 17i now shows it too; each value leaves the ring and a margin
   visible. Headings keep their own scroll-margin for in-page jumps. */
@media (min-width:961px){ html{ scroll-padding-top:88px; } }
@media screen and (max-width:960px){ html{ scroll-padding-top:72px; } }
/* Section-hub cards: one ring, on the card, for keyboard focus only (the link
   ring inside it doubled up, and :focus-within also ringed a mouse click).
   Browsers without :has() keep the existing rings. */
@supports selector(li:has(a)){
  body ul.isong-cards > li.isong-card:focus-within{ outline:none; }
  body ul.isong-cards > li.isong-card:has(a.isong-card__link:focus-visible){ outline:3px solid #233A60; outline-offset:3px; }
  body ul.isong-cards h3.isong-card__title a.isong-card__link:focus-visible{ outline:none !important; text-decoration:underline !important; text-underline-offset:.15em; }
}

/* -- 18b. Screen reader audit (Nov 1): card text colours ------------------
   Pairs with the Global JavaScript block ISONG SCREEN READER REPAIRS (the
   other audit repairs are script only). A section hub that lands inside a
   legacy coloured callout picks up the callout rule that paints every
   descendant white with !important, which left the card descriptions
   white on a near-white card (1.04:1). The SECTION HUBS block now places
   the hub after the band; this keeps the card colours if one ever lands
   inside a band again. Restates the existing card colours, so cards
   elsewhere are unchanged.
   Rollback: delete section 18b. ---------------------------------------- */
body .isong-hub ul.isong-cards > li.isong-card p.isong-card__body{ color:#3A4A62 !important; }
body .isong-hub ul.isong-cards > li.isong-card h3.isong-card__title a.isong-card__link{ color:#314D79 !important; }

/* -- 17k. Button text keeps the button colour (Nov 2) ---------------------
   Wild Apricot's editor sometimes moves a <font color> wrapper from around
   a button link to inside it when a page is saved, which painted the
   "Purchase Tickets" button text on /2026-Social-Event dark on teal
   (2.5:1). Any font colour set inside a stylized button now follows the
   button's own text colour (white on the teal and navy fills, navy on the
   outline style), so the button always meets its tested contrast.
   Rollback: delete section 17k. */
body .gadgetContentEditableArea a.stylizedButton font[color],
body .gadgetEventEditableArea a.stylizedButton font[color]{ color:inherit !important; }

/* -- 17l. Header Login panel (Nov 2) --------------------------------------
   The desktop Login drop-down. The theme draws the single sign-on buttons
   as icon-only squares (provider name set to display:none), so our pill
   treatment left three empty-looking pills; the Apple mark is a white
   glyph made for a black button, so on our white pill it vanished. The
   theme also leaves a 24px gap for the person and lock icons that our
   field padding removed, and a customStyles.css rule paints typed text
   white. This shows the provider names, darkens the Apple mark, clears
   the icons, restores dark typed text and sets the panel on the system.
   The signed-in panel (.authenticated) is untouched. The phone panel
   (Wild Apricot's mobile panel) gets the same look at the end of 17l.
   Rollback: delete section 17l. */
body .WaGadgetLoginForm .loginContainer:not(.authenticated) .loginContainerInner{ display:inline-block; vertical-align:top; }
body .WaGadgetLoginForm .loginContainer:not(.authenticated) .loginPanel{
  box-sizing:border-box; width:300px; top:calc(100% + 8px); left:auto; right:0; margin:0; padding:20px;
  background:#FFFFFF; border:1px solid #A9BFE2; border-radius:var(--isong-radius-md);
  box-shadow:var(--isong-shadow-md); z-index:50; font-family:var(--isong-font); text-align:left;
}
body .WaGadgetLoginForm .loginContainer:not(.authenticated) .loginPanel::before,
body .WaGadgetLoginForm .loginContainer:not(.authenticated) .loginPanel::after{ content:none; }

/* Single sign-on: provider mark plus name, one outline pill each */
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer{ display:flex; flex-direction:column; gap:8px; }
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer a.wa-authenticateLoginLink{
  display:flex; align-items:center; gap:12px; box-sizing:border-box; width:100%; max-width:none;
  min-height:44px; margin:0; padding:8px 16px; opacity:1;
  background:#FFFFFF !important; border:1px solid #A9BFE2; border-radius:var(--isong-radius-pill);
  color:var(--isong-text-heading) !important; font-family:var(--isong-font); text-decoration:none; cursor:pointer;
}
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer a.wa-authenticateLoginLink:hover{
  background:var(--isong-info-surface) !important; border-color:var(--isong-text-heading); opacity:1;
}
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer a.wa-authenticateLoginLink:focus-visible{
  outline:3px solid var(--isong-focus-ring); outline-offset:3px;
}
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginIcon{
  flex:0 0 24px; width:24px; height:24px; background-size:24px 24px;
}
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink.googlePlus .authenticateLoginIcon{ background-size:28px 28px; }
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink.microsoft .authenticateLoginIcon{ background-size:18px 18px; }
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink.apple .authenticateLoginIcon{ background-size:20px 20px; filter:invert(1); }
body .WaGadgetLoginForm .loginPanel .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginText{
  display:inline; padding:0; font-family:var(--isong-font); font-size:16px; font-weight:500; line-height:1.25;
  color:var(--isong-text-heading) !important; white-space:nowrap;
}
/* "or" between the provider buttons and the email form (only when a provider shows) */
body .WaGadgetLoginForm .loginPanel .openAuthFormContainer:has(.wa-authenticateLoginLink)::after{
  content:"or"; display:block; margin:16px 0; text-align:center; font-size:14px; line-height:20px; color:var(--isong-text-muted);
  background:linear-gradient(#DAE0E8,#DAE0E8) left center / calc(50% - 24px) 1px no-repeat,
             linear-gradient(#DAE0E8,#DAE0E8) right center / calc(50% - 24px) 1px no-repeat;
}

/* Email and password: icon in a 40px gutter, text clear of it, dark ink */
body .WaGadgetLoginForm .loginPanel .loginUserName,
body .WaGadgetLoginForm .loginPanel .loginPassword{ margin:0 0 12px; }
body .WaGadgetLoginForm .loginPanel .loginContainerForm form [class$="TextBox"] input[class$="TextBoxControl"]{
  box-sizing:border-box; width:100%; min-height:44px; margin:0; padding:10px 12px 10px 40px;
  font-family:var(--isong-font); font-size:16px; line-height:1.4;
  color:var(--isong-text-primary) !important; background:#FFFFFF;
  border:1px solid #768191; border-radius:var(--isong-radius-md);
}
body .WaGadgetLoginForm .loginPanel .loginContainerForm form [class$="TextBox"] input.passwordTextBoxControl[class$="TextBoxControl"]{ padding-right:44px; }
body .WaGadgetLoginForm .loginPanel .loginContainerForm form input[class$="TextBoxControl"]::placeholder{ color:var(--isong-text-muted); opacity:1; }
body .WaGadgetLoginForm .loginPanel .loginContainerForm form input[class$="TextBoxControl"]:focus-visible{
  outline:3px solid var(--isong-focus-ring); outline-offset:3px;
}
body .WaGadgetLoginForm .loginPanel .loginUserNameTextBox::before,
body .WaGadgetLoginForm .loginPanel .loginPasswordTextBox::before,
body .WaGadgetLoginForm .loginPanel .password-wrapper::before{
  top:0; left:4px; width:32px; height:44px; line-height:44px; font-size:16px;
  color:var(--isong-text-muted); pointer-events:none; z-index:1;
}
body .WaGadgetLoginForm .loginPanel .loginPasswordTextBox:has(.password-wrapper)::before{ content:none; }
body .WaGadgetLoginForm .loginPanel .password-wrapper .toggle-password{ color:var(--isong-text-muted); }

/* Remember me, Log in, Forgot password */
body .WaGadgetLoginForm .loginPanel .loginActionRememberMe{ display:flex; align-items:center; gap:10px; min-height:44px; margin:0 0 12px; }
body .WaGadgetLoginForm .loginPanel .loginActionRememberMe input.rememberMeCheckboxControl{
  flex:none; width:20px; height:20px; margin:0; accent-color:var(--isong-navy); cursor:pointer;
}
body .WaGadgetLoginForm .loginPanel .loginContainerForm form .loginActionRememberMe label{
  margin:0; font-family:var(--isong-font); font-size:16px; line-height:1.4; color:var(--isong-text-primary); cursor:pointer;
}
body .WaGadgetLoginForm .loginPanel .loginAction{ margin:0 0 12px; }
body .WaGadgetLoginForm .loginPanel .loginContainerForm form .loginAction input.loginButton{
  display:block; box-sizing:border-box; width:100%; min-height:48px; margin:0; padding:12px 24px;
  background:var(--isong-action) !important; color:#FFFFFF !important; border:0; border-radius:var(--isong-radius-pill);
  box-shadow:var(--isong-shadow-action); font-family:var(--isong-font) !important; font-size:16px !important;
  font-weight:700; line-height:1.5; text-transform:none !important; letter-spacing:0 !important; cursor:pointer;
}
body .WaGadgetLoginForm .loginPanel .loginContainerForm form .loginAction input.loginButton:hover{ background:var(--isong-action-hover) !important; }
body .WaGadgetLoginForm .loginPanel .loginContainerForm form .loginAction input.loginButton:focus-visible{
  outline:3px solid var(--isong-focus-ring); outline-offset:3px;
}
body .WaGadgetLoginForm .loginPanel .loginPasswordForgot{ margin:0; text-align:center; }
body .WaGadgetLoginForm .loginPanel .loginContainerForm form .loginPasswordForgot a{
  display:inline-block; padding:10px 4px; font-family:var(--isong-font); font-size:16px; line-height:24px;
  color:var(--isong-text-link); text-decoration:underline;
}
body .WaGadgetLoginForm .loginPanel .loginContainerForm form .loginPasswordForgot a:hover{ color:var(--isong-text-link-hover); }

/* 17l, phone panel (767px and below; the header box above is hidden there).
   Wild Apricot's mobile-panel rules outrank section 6, so the provider
   buttons were borderless, the Google and Apple marks were white on white,
   the fields were 225px with #D6D6D6 borders and #AAA placeholders, the real
   Remember me checkbox was hidden, and Log in was #17685A. Same treatment as
   the desktop panel. The signed-in phone panel is not touched. */
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer{ display:flex; flex-direction:column; gap:8px; }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer a.wa-authenticateLoginLink{
  display:flex; align-items:center; gap:12px; box-sizing:border-box; width:100%; height:auto; min-height:44px; margin:0; padding:8px 16px;
  background:#FFFFFF !important; border:1px solid #A9BFE2; border-radius:var(--isong-radius-pill); opacity:1;
  color:var(--isong-text-heading) !important; text-decoration:none; cursor:pointer;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer a.wa-authenticateLoginLink:focus-visible{
  outline:3px solid var(--isong-focus-ring); outline-offset:3px;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginIcon{
  position:static; flex:0 0 24px; width:24px; height:24px; background-repeat:no-repeat; background-position:center;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginIcon::before,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginIcon::after,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink.googlePlus .authenticateLoginIcon::before,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink.facebook .authenticateLoginIcon::before{ content:none; }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink.googlePlus .authenticateLoginIcon{
  background-repeat:no-repeat; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 18 18'%3E%3Cpath fill='%234285F4' d='M22.64 14.205c0-.639-.057-1.252-.164-1.841H14v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z'/%3E%3Cpath fill='%2334A853' d='M14 23c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H5.957v2.332A8.997 8.997 0 0 0 14 23z'/%3E%3Cpath fill='%23FBBC05' d='M8.964 15.71A5.41 5.41 0 0 1 8.682 14c0-.593.102-1.17.282-1.71V9.958H5.957A8.996 8.996 0 0 0 5 14c0 1.452.348 2.827.957 4.042l3.007-2.332z'/%3E%3Cpath fill='%23EA4335' d='M14 8.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C18.463 5.891 16.426 5 14 5a8.997 8.997 0 0 0-8.043 4.958l3.007 2.332c.708-2.127 2.692-3.71 5.036-3.71z'/%3E%3C/svg%3E"); background-size:20px 20px;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink.microsoft .authenticateLoginIcon{ background-repeat:no-repeat; background-position:center; background-size:18px 18px; }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink.apple .authenticateLoginIcon{ background-repeat:no-repeat; background-position:center; background-size:20px 20px; filter:invert(1); }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .oAuthForm .oAuthButtonsContainer .wa-authenticateLoginLink .authenticateLoginText{
  padding:0; font-family:var(--isong-font); font-size:16px; font-weight:500; line-height:1.25; color:var(--isong-text-heading) !important; white-space:normal;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm.oAuthIstrue .openAuthFormContainer::after{
  content:"or"; display:block; margin:16px 0; text-align:center; font-size:14px; line-height:20px; color:var(--isong-text-muted);
  background:linear-gradient(#DAE0E8,#DAE0E8) left center / calc(50% - 24px) 1px no-repeat,
             linear-gradient(#DAE0E8,#DAE0E8) right center / calc(50% - 24px) 1px no-repeat;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm form .loginUserName,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm form .loginPassword{ margin:0 0 12px; }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$="TextBox"] input[class$="TextBoxControl"]{
  box-sizing:border-box; width:100%; height:auto; min-height:44px; padding:10px 12px;
  font-family:var(--isong-font); font-size:16px; line-height:1.4; color:var(--isong-text-primary);
  background:#FFFFFF; border:1px solid #768191; border-radius:var(--isong-radius-md);
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$="TextBox"] input[class$="TextBoxControl"]::placeholder{ color:var(--isong-text-muted); opacity:1; }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$="TextBox"] input[class$="TextBoxControl"]:focus-visible{
  outline:3px solid var(--isong-focus-ring); outline-offset:3px;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm form .loginActionRememberMe{
  float:none; display:flex; align-items:center; gap:10px; min-height:44px; margin:0 0 4px; white-space:normal;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginActionRememberMe input.rememberMeCheckboxControl{
  position:static; visibility:visible; flex:none; width:20px; height:20px; margin:0; accent-color:var(--isong-navy); cursor:pointer;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginActionRememberMe label{
  font-family:var(--isong-font); font-size:16px; line-height:1.4; color:var(--isong-text-primary);
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginActionRememberMe label::before{ content:none; display:none; }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm form .loginPasswordForgot{ float:none; margin:0 0 12px; }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .generalLoginBox .loginPasswordForgot a{
  display:inline-block; padding:10px 0; font-family:var(--isong-font); font-size:16px; line-height:24px;
  color:var(--isong-text-link); text-decoration:underline;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton{
  display:block; box-sizing:border-box; width:100%; max-width:none; height:auto; min-height:48px; margin:0; padding:12px 24px;
  background:var(--isong-action) !important; color:#FFFFFF !important; border:0; border-radius:var(--isong-radius-pill);
  box-shadow:var(--isong-shadow-action); font-family:var(--isong-font) !important; font-size:16px !important; font-weight:700;
  line-height:1.5; text-transform:none !important; letter-spacing:0 !important; cursor:pointer;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton:hover{ background:var(--isong-action-hover) !important; }
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginAction input.loginButton:focus-visible{
  outline:3px solid var(--isong-focus-ring); outline-offset:3px;
}

/* -- 17m. Signed-in Profile dropdown (Nov 2) --------------------------------
   The panel under the header Profile button showed a blank band (the member
   name is white in customStyles.css, on a white panel), then View profile and
   Change password at 14px in teal and Log out in the theme's light green (a
   submit input at 14px, 2.0:1 on white). Now: the name as a navy-ruled panel
   heading in ink, then the three actions as one list, all 16px in link teal,
   underlined, 44px rows, ring per the design system. The panel is anchored
   to the button's right edge so it stays on screen at tablet widths (it ran
   past the right edge at 768px). Scoped to the signed-in container only, so
   the anonymous Log in panel is unchanged. Hover colours beat the white
   hover in customStyles.css. No transitions are added.
   Rollback: delete section 17m. */
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner{ width:fit-content; }
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel{
  box-sizing:border-box; width:236px; left:auto; right:0; margin:0; padding:12px 10px 10px;
  border:1px solid #A9BFE2; border-radius:8px; background:#FFFFFF; box-shadow:0 8px 24px rgba(49,77,121,.12);
  text-align:left; font-family:var(--isong-font); font-size:16px; color:#162232;
}
/* Pointer under the button's centre: 68px (button 136 wide) from the panel's right edge */
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel::before,
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel::after{ left:auto; right:52px; margin-left:0; }
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel::before{ border-bottom-color:#A9BFE2; }
/* Member name: panel heading, ink on white (was white on white) */
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .loggedName{
  margin:0 0 6px; padding:2px 12px 12px; border-bottom:1px solid #A9BFE2;
  font-family:var(--isong-font); font-size:16px; font-weight:700; line-height:1.3; color:#162232;
  overflow-wrap:anywhere;
}
/* The three actions: one row style */
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .profileBox{ margin:0; padding:0; font-size:16px; }
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .profileBox form{ margin:0; padding:0; }
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .profileBox a,
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .profileBox input.loginBoxLogout{
  display:flex; align-items:center; box-sizing:border-box; width:100%; min-height:44px; margin:0; padding:0 12px;
  background:transparent; border:0; border-radius:8px; box-shadow:none;
  font-family:var(--isong-font); font-size:16px; font-weight:400; line-height:1.3; text-align:left;
  color:#276A58; text-decoration:underline; text-underline-offset:.15em; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .profileBox a:hover,
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .profileBox input.loginBoxLogout:hover{
  background:#F2F6FC; color:#1E5645; text-decoration:underline;
}
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .profileBox a:focus-visible,
body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel .profileBox input.loginBoxLogout:focus-visible{
  outline:3px solid #233A60; outline-offset:3px;
}
@media (max-width:900px){
  /* the button is 112px wide here: pointer 56px from the right edge */
  body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel::before,
  body .WaGadgetLoginForm .loginContainer.authenticated .loginContainerInner .loginPanel::after{ right:40px; }
}

/* -- 17n. President card: eyebrow and title centred (Nov 2, round 5) ------
   "A message from our President" and the two title lines ("Our new name is" /
   the full name) are centred. The body paragraph stays left-aligned: it is
   several lines of running text, and ragged-left centred prose reads poorly.
   Line breaks are unchanged (lead-in on its own line, name breaks only
   between phrases, text-wrap: balance from 17j). No size, colour or spacing
   change; only text-align on the label and the title.
   Rollback: delete section 17n. ---------------------------------------- */
body .isong-welcome-section .isong-notice--president span.isong-notice__label,
body .isong-welcome-section .isong-notice--president p.isong-notice__title{ text-align:center; }

/* -- 17o. Privacy Policy agreement: one link, not two (Nov 2) -------------
   Wild Apricot's terms-of-use field prints the policy link and then a second
   "Open link" to the same page. The second (only when it directly follows a
   policy link) is hidden from sight and screen readers; the first says it
   opens in a new tab. The checkbox and footer link are not touched.
   Rollback: delete section 17o. */
body .fieldBody a[href*="/Privacy-Policy"][target="_blank"] + a[href*="/Privacy-Policy"][rel~="noopener"]{ display:none !important; }
body .fieldBody a[href*="/Privacy-Policy"][target="_blank"]:has(+ a[href*="/Privacy-Policy"][rel~="noopener"])::after{ content:" (opens in a new tab)"; }

/* -- 17p. Tax notice on membership forms (Nov 2) --------------------------
   IRC 6113: the "not deductible" statement on the membership application
   and renewal donation field shows as body-size text under the choices, in
   the Notice look with a "Tax status" label (as on /build-the-helix), not
   as a tip. The box is added by Global JavaScript block ISONG FORM TAX
   NOTICE; Wild Apricot's own grey copy of the same text is hidden so it is
   not read twice.
   Rollback: delete section 17p. */
body .fieldContainer .isong-taxnote{
  display:block !important; position:static !important; visibility:visible !important;
  width:auto !important; max-width:40rem; margin:12px 0 4px; padding:14px 16px; box-sizing:border-box;
  border:1px solid #A9BFE2; border-radius:var(--isong-radius-md, 8px); background:#F2F6FC;
  font-family:var(--isong-font); font-size:16px !important; font-style:normal !important; line-height:1.6; text-align:left;
}
body .fieldContainer .isong-taxnote p{
  margin:0; padding:0; color:#162232 !important;
  font-family:var(--isong-font); font-size:16px !important; font-style:normal !important; font-weight:400; line-height:1.6;
}
body .fieldContainer .isong-taxnote p + p{ margin-top:8px; }
body .fieldContainer .isong-taxnote .isong-taxnote__label{
  display:inline; margin-right:4px; color:#314D79 !important;
  font-size:14px !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.4;
}
body .fieldContainer .isong-taxnote-src{ display:none !important; }
@media (max-width:767px){
  body .fieldContainer .isong-taxnote{ max-width:100%; }
}
@media print{
  body .fieldContainer .isong-taxnote{ background:none; border-color:#162232; }
}

/* -- 17q. Header login from the keyboard; signed-in phone panel (Nov 2, round 6)
   Two independent parts. Each can be removed on its own.
   Rollback: delete section 17q (both parts), or one part as noted below. */

/* 17q part A. Show-password eye in the header Login panel ------------------
   Pairs with the Global JavaScript block ISONG HEADER LOGIN ACCESS, which
   makes the header Login / Profile button, the single sign-on links and
   the show-password eye focusable buttons. The button, sign-on links and
   signed-in actions already take the system ring (sections 17l, 17m and
   the global a:focus-visible rule); the eye is an <i>, so it gets the same
   ring here, drawn inside the field. The eye was an 18 x 14px target
   nudged into place with relative offsets; it now fills the 44 x 44px
   space the field already reserves for it at its right end (17l gives the
   field 44px of right padding), so typed text is never under it. The
   glyph moves about 7px left, to the centre of that space. The phone
   panel is not touched.
   Rollback: delete part A together with the HEADER LOGIN ACCESS block. */
body .WaGadgetLoginForm .loginPanel .password-wrapper .toggle-password{
  position:absolute; top:0; right:0; bottom:auto; left:auto; z-index:2;
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; width:44px; height:44px; margin:0; padding:0;
  font-size:14px; line-height:1; border-radius:8px; cursor:pointer;
}
body .WaGadgetLoginForm .loginPanel .password-wrapper .toggle-password[role="button"]:focus-visible{
  outline:3px solid #233A60; outline-offset:-3px;
}

/* 17q part B. Signed-in phone login panel ----------------------------------
   The panel Wild Apricot opens under the phone header's name toggle (767px
   and below) showed the member name and the three actions as 14px #333 text
   in one run: the name, then View profile, Change password and Log out side
   by side as small inline links with 16px of tap height. Now the same
   treatment as the signed-in Profile dropdown on desktop (17m): the member
   name as a heading in ink, 16px bold, with a navy-tint rule beneath, then
   the three actions as one list, each a 44px row in 16px link teal,
   underlined, with the ring from the design system. Log out is styled the
   same as the other two. Rows are inset 12px so the hover wash has room
   while the text lines up with the heading and with the anonymous panel
   (17l). Scoped to the signed-in container, so the anonymous phone panel
   is unchanged. Hover colours beat the theme's. No transitions are added.
   Rollback: delete part B. */
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated{
  box-sizing:border-box; margin:0; padding:0;
  font-family:var(--isong-font); font-size:16px; line-height:1.3; color:#162232; text-align:left;
}
/* Member name: panel heading */
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.loggedName{
  display:block; margin:0 0 6px; padding:2px 0 12px; border-bottom:1px solid #A9BFE2;
  font-family:var(--isong-font); font-size:16px; font-weight:700; line-height:1.3; color:#162232;
  overflow-wrap:anywhere;
}
/* The three actions: one row style, one per line */
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.viewProfile,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.changePassword,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.loggedAction{
  display:block; float:none; margin:0 -12px; padding:0;
  font-family:var(--isong-font); font-size:16px; line-height:1.3;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.viewProfile a,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.changePassword a,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.loggedAction a.logout{
  display:flex; align-items:center; box-sizing:border-box; width:100%; min-height:44px; margin:0; padding:0 12px;
  background:transparent; border:0; border-radius:8px; box-shadow:none;
  font-family:var(--isong-font); font-size:16px; font-weight:400; line-height:1.3; text-align:left;
  color:#276A58; text-decoration:underline; text-underline-offset:.15em; cursor:pointer;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.viewProfile a:hover,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.changePassword a:hover,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.loggedAction a.logout:hover{
  background:#F2F6FC; color:#1E5645; text-decoration:underline;
}
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.viewProfile a:focus-visible,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.changePassword a:focus-visible,
body .WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerAuthenticated .labelBox.loggedAction a.logout:focus-visible{
  outline:3px solid #233A60; outline-offset:3px;
}

/* -- 17r. Event "Add to my calendar" as a disclosure (Nov 2, round 7) ---
   Pairs with the 2026-11-02 rewrite of ISONG KEYBOARD ACCESS section 4.
   The "Add to my calendar" text is now the focusable button (the wrapper
   no longer takes focus) and each calendar link takes real focus.
   - The navy ring is still drawn around the whole control, as before, now
     when the button inside it has keyboard focus. Browsers without :has()
     ring the button text instead.
   - The focused link gets the teal highlight the arrow keys used to give,
     plus an inset navy ring (the outset ring would be cut off by the panel).
   The two calendar rules in section 18 (wrapper ring, .isong-cal-active)
   no longer match anything; they stay so that the script can be rolled
   back on its own.
   Rollback: delete section 17r together with the script replacement. */
body .-wa-add-event-to-calendar-dropdown > .text[role="button"]:focus{ outline:none; }
body .-wa-add-event-to-calendar-dropdown > .text[role="button"]:focus-visible{
  outline:3px solid #233A60 !important; outline-offset:3px; border-radius:8px;
}
@supports selector(div:has(> .text)){
  body .-wa-add-event-to-calendar-dropdown > .text[role="button"]:focus-visible{ outline:none !important; }
  body .-wa-add-event-to-calendar-dropdown:has(> .text[role="button"]:focus-visible){
    outline:3px solid #233A60 !important; outline-offset:3px; border-radius:8px;
  }
}
body .-wa-add-event-to-calendar-dropdown .menu > a.item:focus-visible{
  background:#E6F2EE !important; color:#162232 !important; box-shadow:inset 4px 0 0 #276A58;
  outline:3px solid #233A60 !important; outline-offset:-3px !important;
}

/* -- 11. Motion -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body a.stylizedButton, body a.isong-btn, body .isong-footer .isong-social a{ transition:none !important; }
}
/* ===== END ISONG DESIGN SYSTEM 2026 PHASE 2 (2026-11-01) ===== */

/* ===== BEGIN ISONG DESIGN SYSTEM 2026 MOBILE PANEL (2026-11-01) ===== */
/* The theme's phone menu: orange menu icon (2.6:1, under the 3:1 a control
   needs), and #333333 uppercase items 30px tall. The MainMenu component:
   navy Ubuntu Condensed in title case, every item at least 44px tall; the
   current page keeps its teal from the MOBILE MENU CURRENT PAGE block and
   gains the 4px action bar, so position is not shown by colour alone.
   Rollback: delete this block. */
body .WaGadgetMobilePanel .mobilePanelButton.buttonMenu,
body .WaGadgetMobilePanel .mobilePanelButton.buttonMenu::before,
body .WaGadgetMobilePanel .mobilePanelButton.buttonLogin,
body .WaGadgetMobilePanel .mobilePanelButton.buttonLogin::before{ color:var(--isong-text-heading); }
body .WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li > .item > a{
  display:flex; align-items:center; min-height:44px; box-sizing:border-box;
  font-family:var(--isong-font-menu); font-size:18px; text-transform:none; color:var(--isong-text-heading);
}
body .WaGadgetMobilePanel .mobilePanel .menuInner ul ul li > .item > a{
  display:flex; align-items:center; min-height:44px; box-sizing:border-box;
  font-family:var(--isong-font-menu); font-size:17px; text-transform:none; color:var(--isong-text-heading);
}
body .WaGadgetMobilePanel .mobilePanel .menuInner li.sel > .item > a{ box-shadow:inset 4px 0 0 var(--isong-action); }
/* ===== END ISONG DESIGN SYSTEM 2026 MOBILE PANEL (2026-11-01) ===== */