/**
 * Moon Society Brand Override — Wild Apricot
 * join.moonsociety.org
 *
 * Paste this entire file into:
 *   Wild Apricot Admin > Website > CSS Override
 *
 * Based on: Moon Society Brand Guide v1.0 / Design Spec v1.0 (March 2026)
 * Theme target: building_blocks_duotone v3.0
 */


/* ==============================================
   FONTS
   ============================================== */

/* Orbitron is the Moon Society web display face (documented divergence from the
   brand guide's Syne). Used on both WordPress and Wild Apricot so the link-out
   handoff matches. League Spartan = headings, Noto Sans = body, Inconsolata = code. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=League+Spartan:wght@400;500;600;700&family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Inconsolata:wght@400;700&display=swap');


/* ==============================================
   BRAND TOKENS
   ============================================== */

:root {
  /* Primary */
  --ms-space-cadet: #13294B;
  --ms-gold: #FFCD00;

  /* Secondary */
  --ms-cerulean: #00A3E0;
  --ms-blue: #006298;
  --ms-cyan: #6AD1E3;
  --ms-emerald: #009775;

  /* Neutrals */
  --ms-white: #FFFFFF;
  --ms-gray-100: #D0D0CE;
  --ms-gray-200: #B1B3B3;
  --ms-gray-300: #888B8D;
  --ms-gray-400: #53565A;
  --ms-near-black: #1D252D;

  /* Extended */
  --ms-gold-light: #FAE053;
  --ms-gold-dark: #D29F13;

  /* Semantic */
  --ms-bg-primary: var(--ms-space-cadet);
  --ms-bg-secondary: var(--ms-near-black);
  --ms-bg-surface: #1a3159;
  --ms-text-primary: var(--ms-white);
  --ms-text-secondary: var(--ms-gray-100);
  --ms-text-muted: var(--ms-gray-200);
  --ms-accent: var(--ms-gold);
  --ms-link: var(--ms-cerulean);
  --ms-link-hover: var(--ms-cyan);
  --ms-border: rgba(255, 255, 255, 0.12);
  --ms-border-strong: rgba(255, 255, 255, 0.24);

  /* Typography stacks */
  --ms-font-display: 'Orbitron', 'Syne', sans-serif;
  --ms-font-heading: 'League Spartan', 'Century Gothic', 'Futura', sans-serif;
  --ms-font-body: 'Noto Sans', 'Verdana', 'DejaVu Sans', sans-serif;
  --ms-font-mono: 'Inconsolata', 'Consolas', monospace;

  /* Spacing */
  --ms-space-1: 0.25rem;
  --ms-space-2: 0.5rem;
  --ms-space-3: 0.75rem;
  --ms-space-4: 1rem;
  --ms-space-5: 1.5rem;
  --ms-space-6: 2rem;
  --ms-space-7: 3rem;
  --ms-space-8: 4rem;
  --ms-space-9: 6rem;

  /* Radii */
  --ms-radius-sm: 4px;
  --ms-radius-md: 8px;
  --ms-radius-lg: 12px;
  --ms-radius-full: 9999px;

  /* Transitions */
  --ms-transition-fast: 150ms ease;
  --ms-transition-base: 250ms ease;

  /* Page width — change this one value to widen/narrow the content column.
     Use a px value (e.g. 1200px) for a centered column, or 100% for full width. */
  --ms-content-max: 1200px;
}


/* ==============================================
   GLOBAL / BODY
   ============================================== */

body {
  font-family: var(--ms-font-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--ms-text-primary) !important;
  background-color: var(--ms-bg-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==============================================
   TYPOGRAPHY
   ============================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ms-font-heading) !important;
  color: var(--ms-text-primary) !important;
  line-height: 1.2 !important;
}

h1 {
  font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem) !important;
  font-weight: 600 !important;
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem) !important;
  font-weight: 600 !important;
}

h4, h5, h6 {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

p, li, td, th, label, span, div {
  font-family: var(--ms-font-body) !important;
}

a {
  color: var(--ms-link) !important;
  transition: color var(--ms-transition-fast) !important;
}

a:hover,
a:focus {
  color: var(--ms-link-hover) !important;
}


/* ==============================================
   NAVIGATION BAR
   ============================================== */

/* Main nav container */
.menuInner,
.WaGadgetHorizontalMenu {
  background-color: var(--ms-bg-secondary) !important;
  font-family: var(--ms-font-heading) !important;
}

/* Nav links */
.menuInner ul.firstLevel > li > a,
.menuInner ul.firstLevel > li > span {
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ms-text-secondary) !important;
  transition: color var(--ms-transition-fast) !important;
}

.menuInner ul.firstLevel > li > a:hover,
.menuInner ul.firstLevel > li > a:focus {
  color: var(--ms-white) !important;
}

/* Active / current nav link */
.menuInner ul.firstLevel > li.current > a,
.menuInner ul.firstLevel > li.active > a {
  color: var(--ms-white) !important;
  border-bottom: 2px solid var(--ms-gold) !important;
  padding-bottom: 4px !important;
}

/* Dropdown menus */
.menuInner ul.secondLevel {
  background-color: var(--ms-bg-secondary) !important;
  border: 1px solid var(--ms-border-strong) !important;
  border-radius: var(--ms-radius-md) !important;
}

.menuInner ul.secondLevel li a {
  color: var(--ms-text-secondary) !important;
  font-family: var(--ms-font-heading) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

.menuInner ul.secondLevel li a:hover {
  color: var(--ms-white) !important;
  background-color: var(--ms-bg-surface) !important;
}

/* Mobile panel */
.WaGadgetMobilePanel {
  background-color: var(--ms-bg-secondary) !important;
}

.WaGadgetMobilePanel a {
  font-family: var(--ms-font-heading) !important;
  color: var(--ms-text-secondary) !important;
}

.WaGadgetMobilePanel a:hover {
  color: var(--ms-white) !important;
}


/* ==============================================
   BUTTONS — PRIMARY (Gold on Space Cadet)
   ============================================== */

input[type="submit"],
input[type="button"],
button,
.buttonLogin,
.primaryButton,
a.primaryButton {
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  background-color: var(--ms-gold) !important;
  color: var(--ms-space-cadet) !important;
  border: none !important;
  border-radius: var(--ms-radius-full) !important;
  padding: 0.75rem 2rem !important;
  cursor: pointer !important;
  transition: background-color var(--ms-transition-fast) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.buttonLogin:hover,
.primaryButton:hover,
a.primaryButton:hover {
  background-color: var(--ms-gold-light) !important;
  color: var(--ms-space-cadet) !important;
}

input[type="submit"]:focus,
input[type="button"]:focus,
button:focus,
.primaryButton:focus {
  outline: 2px solid var(--ms-gold) !important;
  outline-offset: 2px !important;
}

/* Secondary / cancel buttons */
.secondaryButton,
a.secondaryButton,
input[type="button"][name*="cancel"],
input[value="Cancel"],
input[value="Previous"] {
  background-color: transparent !important;
  color: var(--ms-gold) !important;
  border: 2px solid var(--ms-gold) !important;
  border-radius: var(--ms-radius-full) !important;
}

.secondaryButton:hover,
a.secondaryButton:hover,
input[type="button"][name*="cancel"]:hover,
input[value="Cancel"]:hover,
input[value="Previous"]:hover {
  background-color: rgba(255, 205, 0, 0.1) !important;
  color: var(--ms-gold) !important;
}


/* ==============================================
   LOGIN GADGET
   ============================================== */

.loginInner,
.loginPanel {
  background-color: var(--ms-bg-surface) !important;
  border-radius: var(--ms-radius-lg) !important;
  border: 1px solid var(--ms-border) !important;
}

.loginInner label,
.loginPanel label {
  color: var(--ms-text-secondary) !important;
  font-family: var(--ms-font-body) !important;
  font-size: 0.875rem !important;
}

.loginInner input[type="text"],
.loginInner input[type="password"],
.loginInner input[type="email"],
.loginPanel input[type="text"],
.loginPanel input[type="password"],
.loginPanel input[type="email"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--ms-border-strong) !important;
  border-radius: var(--ms-radius-sm) !important;
  color: var(--ms-white) !important;
  font-family: var(--ms-font-body) !important;
  padding: 0.5rem 0.75rem !important;
  transition: border-color var(--ms-transition-fast) !important;
}

.loginInner input[type="text"]:focus,
.loginInner input[type="password"]:focus,
.loginInner input[type="email"]:focus,
.loginPanel input[type="text"]:focus,
.loginPanel input[type="password"]:focus,
.loginPanel input[type="email"]:focus {
  border-color: var(--ms-cerulean) !important;
  outline: none !important;
}

/* OAuth / social login buttons */
.oAuthForm input,
.oAuthForm button,
[id*="oAuthForm"] input,
[id*="oAuthForm"] button {
  border-radius: var(--ms-radius-md) !important;
  font-family: var(--ms-font-body) !important;
}


/* ==============================================
   HEADER ACCOUNT / LOGIN WIDGET
   Keep the header account icon a plain icon (not a solid
   gold blob), and keep the logged-in dropdown on-brand.
   The LOG OUT button stays a Gold pill (safeguard below).
   ============================================== */

/* Account / login icon link in the header (logged-out link + avatar) */
.loginLink,
.loginStatusLink,
a.loginStatusLink,
[class*="accountLink"],
[class*="AccountLink"],
[class*="loginIcon"],
[class*="LoginIcon"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--ms-radius-full) !important;
  padding: 0 !important;
  color: var(--ms-text-secondary) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Logged-in dropdown popup container */
.WaGadgetLoginCommon [class*="popup"],
.WaGadgetLoginCommon [class*="Popup"],
.loginInner,
.loginPanel {
  background-color: var(--ms-bg-surface) !important;
  border: 1px solid var(--ms-border-strong) !important;
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  color: var(--ms-text-primary) !important;
}

/* Member name / labels inside the popup */
.WaGadgetLoginCommon [class*="popup"] *,
.loginInner label,
.loginInner span {
  color: var(--ms-text-primary) !important;
}

/* Profile / change-password links in the popup: Cerulean, Gold on hover */
.WaGadgetLoginCommon a:not(.ms-wa-cta) {
  color: var(--ms-link) !important;
}
.WaGadgetLoginCommon a:not(.ms-wa-cta):hover {
  color: var(--ms-gold) !important;
}

/* Safeguard: the LOG OUT button stays a Gold pill */
.WaGadgetLoginCommon input[type="submit"],
.WaGadgetLoginCommon input[type="button"],
.WaGadgetLoginCommon button,
.WaGadgetLoginCommon .loginButton,
.WaGadgetLoginCommon [value*="Log out" i],
.WaGadgetLoginCommon [value*="Logout" i] {
  background-color: var(--ms-gold) !important;
  color: var(--ms-space-cadet) !important;
  border: none !important;
  border-radius: var(--ms-radius-full) !important;
  padding: 0.5rem 1.5rem !important;
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}


/* ==============================================
   MEMBERSHIP FORM
   ============================================== */

/* Form container */
.FormValidate,
[id*="memberApplicationMain"] {
  color: var(--ms-text-primary) !important;
}

/* Form field labels */
.FormValidate label,
[id*="memberApplicationMain"] label {
  font-family: var(--ms-font-body) !important;
  font-weight: 600 !important;
  color: var(--ms-text-secondary) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em !important;
}

/* Text inputs, selects, textareas */
.FormValidate input[type="text"],
.FormValidate input[type="email"],
.FormValidate input[type="tel"],
.FormValidate input[type="password"],
.FormValidate select,
.FormValidate textarea,
[id*="memberApplicationMain"] input[type="text"],
[id*="memberApplicationMain"] input[type="email"],
[id*="memberApplicationMain"] input[type="tel"],
[id*="memberApplicationMain"] select,
[id*="memberApplicationMain"] textarea {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--ms-border-strong) !important;
  border-radius: var(--ms-radius-sm) !important;
  color: var(--ms-white) !important;
  font-family: var(--ms-font-body) !important;
  font-size: 1rem !important;
  padding: 0.625rem 0.75rem !important;
  transition: border-color var(--ms-transition-fast) !important;
}

.FormValidate input:focus,
.FormValidate select:focus,
.FormValidate textarea:focus,
[id*="memberApplicationMain"] input:focus,
[id*="memberApplicationMain"] select:focus,
[id*="memberApplicationMain"] textarea:focus {
  border-color: var(--ms-cerulean) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 163, 224, 0.25) !important;
}

/* Membership-level radios: size, brand color, and nudge them down so they
   line up with the large level title instead of floating above it. */
.FormValidate input[type="radio"],
[id*="memberApplicationMain"] input[type="radio"],
[class*="membershipLevel"] input[type="radio"],
[class*="MembershipLevel"] input[type="radio"] {
  width: 1.1em !important;
  height: 1.1em !important;
  margin: 0.3em 0.6em 0 0 !important;
  vertical-align: top !important;
  accent-color: var(--ms-gold) !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

/* If WA lays each option out as a flex row, top-align the row so the radio
   sits next to the title's first line, not centered on the whole block. */
.membershipLevelOption,
[class*="membershipLevel"] {
  align-items: flex-start !important;
}

/* Radio buttons and checkboxes — label text */
.FormValidate input[type="radio"] + label,
.FormValidate input[type="checkbox"] + label,
[id*="memberApplicationMain"] input[type="radio"] + label,
[id*="memberApplicationMain"] input[type="checkbox"] + label {
  color: var(--ms-text-primary) !important;
  font-weight: 400 !important;
}

/* Membership level cards / options */
.membershipLevelOption,
[class*="membershipLevel"],
[class*="MembershipLevel"] {
  background-color: var(--ms-bg-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  padding: 1.5rem !important;
  transition: border-color var(--ms-transition-base) !important;
}

.membershipLevelOption:hover,
[class*="membershipLevel"]:hover,
[class*="MembershipLevel"]:hover {
  border-color: var(--ms-border-strong) !important;
}

/* Selected membership level */
.membershipLevelOption.selected,
.membershipLevelOption input[type="radio"]:checked ~ * {
  border-color: var(--ms-gold) !important;
  box-shadow: 0 0 0 1px var(--ms-gold) !important;
}

/* Membership level name */
.membershipLevelName,
[class*="levelName"] {
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: var(--ms-white) !important;
}

/* Membership price */
.membershipLevelPrice,
[class*="levelPrice"],
[class*="Price"] {
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
  color: var(--ms-gold) !important;
}

/* Help text / descriptions under fields */
.fieldNote,
.helpText,
[class*="helpText"],
[class*="description"] {
  color: var(--ms-text-muted) !important;
  font-size: 0.8125rem !important;
}

/* Error / validation messages */
.validationError,
.error,
[class*="Error"] {
  color: #E84855 !important;
  font-size: 0.8125rem !important;
}


/* ==============================================
   MEMBERSHIP LEVEL SELECTOR (real WA DOM)
   Scoped to #idMembershipLevelRadioGroupContainer. Each option is a
   .fieldItem = .typeRadioContainer > input.typeRadio  +  .label > label
   (.labelTitle, .levelPrice, .typeInstruction, .levelDescription).
   ============================================== */

#idMembershipLevelRadioGroupContainer .groupBodyVertical {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ms-space-4) !important;
}

/* Each option becomes a card */
#idMembershipLevelRadioGroupContainer .fieldItem {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--ms-space-3) !important;
  background-color: var(--ms-bg-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  padding: var(--ms-space-5) !important;
  margin: 0 !important;
  transition: border-color var(--ms-transition-base) !important;
}

#idMembershipLevelRadioGroupContainer .fieldItem:hover {
  border-color: var(--ms-border-strong) !important;
}

/* Highlight the selected option */
#idMembershipLevelRadioGroupContainer .fieldItem:has(.typeRadio:checked) {
  border-color: var(--ms-gold) !important;
  box-shadow: 0 0 0 1px var(--ms-gold) !important;
}

/* Radio aligned to the title's first line (this is the alignment fix) */
#idMembershipLevelRadioGroupContainer .typeRadioContainer {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding-top: 0.3em !important;
}

#idMembershipLevelRadioGroupContainer .typeRadio {
  width: 1.15em !important;
  height: 1.15em !important;
  margin: 0 !important;
  accent-color: var(--ms-gold) !important;
  vertical-align: top !important;
  cursor: pointer !important;
}

#idMembershipLevelRadioGroupContainer .label {
  flex: 1 1 auto !important;
}

#idMembershipLevelRadioGroupContainer .levelProperties {
  display: block !important;
  cursor: pointer !important;
  font-weight: 400 !important;
}

/* Each text line on its own row; title + price stay inline together */
#idMembershipLevelRadioGroupContainer .textLine {
  display: block !important;
}

#idMembershipLevelRadioGroupContainer .labelTitle,
#idMembershipLevelRadioGroupContainer .labelSubTitle,
#idMembershipLevelRadioGroupContainer .levelPrice {
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
}

#idMembershipLevelRadioGroupContainer .labelTitle {
  color: var(--ms-white) !important;
}

#idMembershipLevelRadioGroupContainer .labelSubTitle,
#idMembershipLevelRadioGroupContainer .levelPrice {
  color: var(--ms-gold) !important;
}

#idMembershipLevelRadioGroupContainer .typeInstruction {
  color: var(--ms-text-secondary) !important;
  font-size: 0.95rem !important;
  margin-top: var(--ms-space-1) !important;
}

#idMembershipLevelRadioGroupContainer .levelDescription {
  color: var(--ms-text-muted) !important;
  margin-top: var(--ms-space-3) !important;
}


/* ==============================================
   PUBLIC WIZARDS (membership Join + event registration + donation)
   Scoped to .WaGadgetPublicWizard — the shared class on all three multi-step
   WA gadgets (.WaGadgetMembershipApplication, .WaGadgetEventRegistration,
   donation), captured from the live Join + LDC pages. The flow is built from
   WA's nested rounded-box markup: each panel is a *Container wrapped in
   decorative .cornersContainer (.c1–.c5 / .r1–.r5) spacer divs, and the THEME
   paints those panels — the level/summary box WHITE, the form panel GRAY. None
   of it uses inline styles, so the earlier [style*=] / [class*=summary] guesses
   didn't bite. We override the real container classes: hide the corner
   decorations, strip the themed backgrounds, then re-add one brand surface card
   for the summary. Text colors come from the real classes (.infoTitle,
   .levelPrice, .formTitle, .fieldLabel…). Membership-only bits (the gray intro
   panel, level radio group) stay scoped to .WaGadgetMembershipApplication.
   ============================================== */

/* Gadget sits directly on the page bg (space cadet); drop its own panel fill */
.WaGadgetPublicWizard {
  background-color: transparent !important;
  color: var(--ms-text-primary) !important;
}

/* The wizard already leads with the summary card, so it doesn't need the tall
   system-page top gutter (--ms-space-9, added for error/system pages) — pull the
   form up on any page that hosts a wizard gadget. Scoped via :has() so error
   pages keep their generous whitespace. */
[id^="idPrimaryContentBlock"]:has(.WaGadgetPublicWizard) {
  padding-top: var(--ms-space-5) !important;
}

/* Hide the page's gray intro/content panel ("We are going back…" + pay-by-mail
   address) once the user is PAST level selection, so steps 2+ lead with the
   form instead of a tall block of intro copy. Signal: the level radio group
   (#idMembershipLevelRadioGroupContainer) exists ONLY on step 1 — if the wizard
   is present but that group is gone, we're on a later step. Step 1 still shows
   the intro. (.WaGadgetContent[#B3B3B3] is the same gray Join intro panel
   styled in the content-gadget section above.) */
body:has(.WaGadgetMembershipApplication):not(:has(#idMembershipLevelRadioGroupContainer)) .WaGadgetContent[style*="#B3B3B3"],
body:has(.WaGadgetMembershipApplication):not(:has(#idMembershipLevelRadioGroupContainer)) .WaGadgetContent[style*="#b3b3b3"] {
  display: none !important;
}

/* Remove the decorative rounded-corner spacer divs — these carry the white/gray
   corner images that build WA's boxy frames. */
.WaGadgetPublicWizard .cornersContainer {
  display: none !important;
}

/* Strip the theme's white/gray backgrounds + borders from every wizard panel */
.WaGadgetPublicWizard .infoOuterContainer,
.WaGadgetPublicWizard .infoContainer,
.WaGadgetPublicWizard .generalFormOuterContainer,
.WaGadgetPublicWizard .generalFormContainer,
.WaGadgetPublicWizard .formOuterContainer,
.WaGadgetPublicWizard .formContainer,
.WaGadgetPublicWizard .formTitleOuterContainer,
.WaGadgetPublicWizard .formTitleContainer,
.WaGadgetPublicWizard .generalFieldsOuterContainer,
.WaGadgetPublicWizard .generalFieldsContainer,
.WaGadgetPublicWizard .sectionOuterContainer,
.WaGadgetPublicWizard .sectionContainer,
.WaGadgetPublicWizard .navigationOuterContainer,
.WaGadgetPublicWizard .navigationContainer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Field-layout tables inside the wizard must NOT inherit the comparison-table
   borders/hover from the global table rules. */
.WaGadgetPublicWizard table,
.WaGadgetPublicWizard td,
.WaGadgetPublicWizard th {
  border: none !important;
  background: transparent !important;
}

/* Selected-level summary ("Regular membership – $35.00") → compact brand card.
   Paint the outer wrapper; the inner d1–d9 wrappers stay transparent. */
.WaGadgetPublicWizard .infoOuterContainer {
  background-color: var(--ms-bg-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  padding: var(--ms-space-4) var(--ms-space-5) !important;
  margin-bottom: var(--ms-space-5) !important;
}

/* Summary text: "Level" caption secondary, level name white, price gold,
   renewal/recurring lines muted. */
.WaGadgetPublicWizard .infoText,
.WaGadgetPublicWizard .infoText .textLine,
.WaGadgetPublicWizard [id*="levelLabel"] {
  color: var(--ms-text-primary) !important;
}

.WaGadgetPublicWizard .infoTitle {
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
  color: var(--ms-text-secondary) !important;
}

.WaGadgetPublicWizard .levelPrice {
  color: var(--ms-gold) !important;
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
}

.WaGadgetPublicWizard .levelRenewal,
.WaGadgetPublicWizard .levelRecurring {
  color: var(--ms-text-muted) !important;
}

/* Step heading ("Enter your email") + "Mandatory fields" note */
.WaGadgetPublicWizard .formTitle {
  color: var(--ms-white) !important;
  font-family: var(--ms-font-heading) !important;
}

.WaGadgetPublicWizard .mandatoryFieldsTitle,
.WaGadgetPublicWizard .mandatoryFieldsTitle strong {
  color: var(--ms-text-secondary) !important;
}

/* Field labels (e.g. "Primary Email") */
.WaGadgetPublicWizard .fieldLabel,
.WaGadgetPublicWizard .mandatoryLabel {
  color: var(--ms-text-secondary) !important;
  font-family: var(--ms-font-body) !important;
  font-weight: 600 !important;
}

/* Required-field asterisk → Gold (brand) */
.WaGadgetPublicWizard .mandatorySymbol {
  color: var(--ms-gold) !important;
}

/* Email input (its id contains memberApplicationMain, so the form-input rules
   already catch it; .typeText is a belt-and-suspenders match). */
.WaGadgetPublicWizard input.typeText {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--ms-border-strong) !important;
  border-radius: var(--ms-radius-sm) !important;
  color: var(--ms-white) !important;
  font-family: var(--ms-font-body) !important;
  font-size: 1rem !important;
  padding: 0.625rem 0.75rem !important;
}


/* ==============================================
   CONTENT AREA / LAYOUT PLACEHOLDERS
   ============================================== */

.WaLayoutPlaceHolder {
  background-color: var(--ms-bg-primary) !important;
}

/* Content resizer / gadget containers — width controlled by --ms-content-max */
.WaContentGadgetResizer {
  max-width: var(--ms-content-max) !important;
  margin-inline: auto !important;
  padding: var(--ms-space-5) !important;
}

/* Header content area — hero-like treatment */
.WaLayoutPlaceHolder[id*="header"],
.WaLayoutPlaceHolder:first-child {
  background-color: var(--ms-bg-primary) !important;
  padding: var(--ms-space-7) var(--ms-space-5) !important;
  text-align: center !important;
}

/* Hero headline (if injected via content gadget) */
.WaLayoutPlaceHolder:first-child h1,
.WaLayoutPlaceHolder:first-child h2 {
  font-family: var(--ms-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem) !important;
  letter-spacing: -0.02em !important;
  color: var(--ms-white) !important;
}

/* Subheadline / introductory paragraph */
.WaLayoutPlaceHolder:first-child p {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem) !important;
  color: var(--ms-text-secondary) !important;
  max-width: 65ch !important;
  margin-inline: auto !important;
  line-height: 1.6 !important;
}


/* ==============================================
   FOOTER
   ============================================== */

footer,
.WaLayoutPlaceHolder[id*="footer"],
.WaLayoutPlaceHolder:last-child {
  background-color: var(--ms-bg-secondary) !important;
  color: var(--ms-text-muted) !important;
  font-size: 0.8125rem !important;
  padding: var(--ms-space-7) var(--ms-space-5) !important;
}

footer a,
.WaLayoutPlaceHolder[id*="footer"] a,
.WaLayoutPlaceHolder:last-child a {
  color: var(--ms-text-secondary) !important;
}

footer a:hover,
.WaLayoutPlaceHolder[id*="footer"] a:hover,
.WaLayoutPlaceHolder:last-child a:hover {
  color: var(--ms-gold) !important;
}


/* ==============================================
   TABLES (membership comparison, etc.)
   ============================================== */

table {
  border-collapse: collapse !important;
  width: 100% !important;
}

th {
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ms-text-secondary) !important;
  border-bottom: 2px solid var(--ms-border-strong) !important;
  padding: 0.75rem !important;
  text-align: left !important;
}

td {
  color: var(--ms-text-primary) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  padding: 0.75rem !important;
}

tr:hover td {
  background-color: rgba(255, 255, 255, 0.03) !important;
}


/* ==============================================
   COOKIE WARNING / ALERT BOXES
   ============================================== */

[id*="cookieWarning"],
[id*="messageBox"] {
  background-color: var(--ms-bg-surface) !important;
  border: 1px solid var(--ms-gold-dark) !important;
  border-radius: var(--ms-radius-md) !important;
  color: var(--ms-text-primary) !important;
  padding: var(--ms-space-4) !important;
}


/* ==============================================
   ACCESSIBILITY: FOCUS STATES
   ============================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ms-gold) !important;
  outline-offset: 2px !important;
}

/* Skip-to-content (if Wild Apricot provides one) */
.skipNav,
.skip-to-content,
[class*="skipNav"] {
  background-color: var(--ms-gold) !important;
  color: var(--ms-space-cadet) !important;
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
}


/* ==============================================
   WILD APRICOT BRANDING FOOTER
   ============================================== */

/* Hide the "Powered by Wild Apricot" badge entirely.
   (The earlier rule used lowercase "poweredBy"; WA's element is
   #idPoweredByContainer with a capital P, so it didn't match.
   Matching the case-agnostic substring "oweredBy" catches both.)
   NOTE: confirm your Wild Apricot plan permits removing this badge. */
#idPoweredByContainer,
[id*="oweredBy"],
[class*="oweredBy"],
a[href*="wildapricot.com"] {
  display: none !important;
}


/* ==============================================
   NATIVE GADGET CLEANUP (system pages, e.g. Sys/Login)
   We supply the header/footer/nav via custom HTML (.ms-wa-*). System pages
   still inject WA's stock Logo banner + menus, which appear as duplicates
   BELOW the content. Hide the native ones. (Proper fix: put system pages on
   the Plain-layout template with only our custom chrome — see
   WILD-APRICOT-ADMIN-CHANGES.md §23.)
   ============================================== */
.WaGadgetLogo,
[class*="GadgetLogo"],
.WaGadgetMenuHorizontal,
.WaGadgetMenuVertical,
.WaGadgetSiteMenu,
[class*="GadgetMenu"] {
  display: none !important;
}

/* Page / system title band ("JOIN US", "Please login to continue", etc.).
   WA renders it on a light-gray bar, so the heading must be DARK to be legible
   (white was unreadable). Per request: black H1 on the light title bar. */
.WaGadgetTitle h1,
.WaGadgetTitle *,
[class*="GadgetTitle"] h1,
[class*="GadgetTitle"] * {
  color: var(--ms-near-black) !important;
}

/* ==============================================
   PAGE CONTENT COLUMN (Plain layout has no content gutter)
   Give the primary page content a centered, padded reading column so it isn't
   flush to the edge. Does NOT touch the full-width header/footer chrome (those
   are separate custom-HTML gadgets with random ids). Real id from the live DOM:
   #idPrimaryContentBlock…Content inside .zoneContent / .WaPlaceHolderContent.
   ============================================== */
[id^="idPrimaryContentBlock"] {
  max-width: var(--ms-content-max) !important;
  margin-inline: auto !important;
  /* Vertical: extra breathing room below the header / above the footer.
     Left: deeper than the header/footer gutter (--ms-space-6) so body copy is
     visibly indented past the chrome; right keeps the normal gutter. */
  padding: var(--ms-space-9) var(--ms-space-5) var(--ms-space-9) var(--ms-space-8) !important;
  box-sizing: border-box !important;
}

/* System error / message pages (404, 403, login-required…): center the text and
   add extra whitespace. WA gives no error-specific class, so target the system
   pages by their body PAGEID (from view-source: <body id="PAGEID_…">).
   Known: 404 = PAGEID_18015. Add more ids here as you hit other error pages. */
body#PAGEID_18015 [id^="idPrimaryContentBlock"] {
  text-align: center !important;
  padding-block: var(--ms-space-9) !important;
}

/* 404 hero — mirror the WordPress "Page Not Found" treatment: big Orbitron
   display heading, a muted one-line subtitle, and a Gold pill "Return home"
   link. The COPY itself ("Page Not Found", the subtitle, the link) is page
   content — set it in the WA 404 system-page editor (see
   WILD-APRICOT-ADMIN-CHANGES.md). These rules only style whatever is there. */
body#PAGEID_18015 [id^="idPrimaryContentBlock"] h1,
body#PAGEID_18015 [id^="idPrimaryContentBlock"] h2 {
  font-family: var(--ms-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem) !important;
  letter-spacing: -0.02em !important;
  color: var(--ms-white) !important;
  margin-bottom: var(--ms-space-5) !important;
}

body#PAGEID_18015 [id^="idPrimaryContentBlock"] p {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem) !important;
  color: var(--ms-text-secondary) !important;
  max-width: 55ch !important;
  margin-inline: auto !important;
  margin-bottom: var(--ms-space-7) !important;
}

/* The home-return link rendered as a Gold pill (matches the JOIN US CTA) */
body#PAGEID_18015 [id^="idPrimaryContentBlock"] a {
  display: inline-block !important;
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background-color: var(--ms-gold) !important;
  color: var(--ms-space-cadet) !important;
  border-radius: var(--ms-radius-full) !important;
  padding: 0.75rem 2rem !important;
  text-decoration: none !important;
  transition: background-color var(--ms-transition-fast) !important;
}

body#PAGEID_18015 [id^="idPrimaryContentBlock"] a:hover {
  background-color: var(--ms-gold-light) !important;
  color: var(--ms-space-cadet) !important;
}

/* Legacy pasted formatting inside content gadgets — old <font face="Ubuntu"
   color="#000000"> tags and white-highlight spans render black-on-dark or as
   white boxes. Neutralize so content inherits the brand theme. (Best practice:
   clean the gadget HTML in the editor; this is the safety net.) */
.gadgetStyleBody font,
.gadgetContentEditableArea font,
[class*="GadgetContent"] font {
  color: inherit !important;
  font-family: var(--ms-font-body) !important;
  font-size: inherit !important;
}

.gadgetStyleBody [style*="background-color"],
.gadgetContentEditableArea [style*="background-color"],
[class*="GadgetContent"] [style*="background-color"] {
  background-color: transparent !important;
  color: inherit !important;
}

/* Content gadgets the editor paints with a light GRAY inline background — the
   Join-page intro panel (#B3B3B3) AND the Sys/Login title band (#CCCCCC, holds
   <h1>Please login to continue</h1>). Without this the global white <h1> rule
   wins and the heading is white-on-gray (unreadable). Force dark text on any
   such panel; scoped to the gray hexes so dark content gadgets keep white text.
   NOTE: the cleaner alternative is to remove the gray background on these
   gadgets in the editor, letting the dark theme + white text show as elsewhere. */
.WaGadgetContent[style*="#B3B3B3"],
.WaGadgetContent[style*="#b3b3b3"],
.WaGadgetContent[style*="#CCCCCC"],
.WaGadgetContent[style*="#cccccc"] {
  color: var(--ms-near-black) !important;
}

.WaGadgetContent[style*="#B3B3B3"] h1,
.WaGadgetContent[style*="#B3B3B3"] h2,
.WaGadgetContent[style*="#B3B3B3"] h3,
.WaGadgetContent[style*="#B3B3B3"] h4,
.WaGadgetContent[style*="#B3B3B3"] p,
.WaGadgetContent[style*="#B3B3B3"] li,
.WaGadgetContent[style*="#B3B3B3"] span,
.WaGadgetContent[style*="#B3B3B3"] strong,
.WaGadgetContent[style*="#B3B3B3"] font,
.WaGadgetContent[style*="#b3b3b3"] h1,
.WaGadgetContent[style*="#b3b3b3"] p,
.WaGadgetContent[style*="#b3b3b3"] font,
.WaGadgetContent[style*="#CCCCCC"] h1,
.WaGadgetContent[style*="#CCCCCC"] h2,
.WaGadgetContent[style*="#CCCCCC"] h3,
.WaGadgetContent[style*="#CCCCCC"] h4,
.WaGadgetContent[style*="#CCCCCC"] p,
.WaGadgetContent[style*="#CCCCCC"] li,
.WaGadgetContent[style*="#CCCCCC"] span,
.WaGadgetContent[style*="#CCCCCC"] strong,
.WaGadgetContent[style*="#CCCCCC"] font,
.WaGadgetContent[style*="#cccccc"] h1,
.WaGadgetContent[style*="#cccccc"] p,
.WaGadgetContent[style*="#cccccc"] font {
  color: var(--ms-near-black) !important;
}

/* Links on the gray panel: use Blue (Cerulean is too light on gray) */
.WaGadgetContent[style*="#B3B3B3"] a,
.WaGadgetContent[style*="#B3B3B3"] a font,
.WaGadgetContent[style*="#b3b3b3"] a,
.WaGadgetContent[style*="#CCCCCC"] a,
.WaGadgetContent[style*="#CCCCCC"] a font,
.WaGadgetContent[style*="#cccccc"] a {
  color: var(--ms-blue) !important;
}


/* ==============================================
   SYS/LOGIN PAGE (body#PAGEID_17996, LayoutPlain)
   Real DOM: a #CCCCCC content gadget holds the title band ("Please login to
   continue" — dark text handled by the gray-panel rules above). The form is
   .loginPageTable (email/password + Remember me + Log in) alongside an
   .oAuthButtonsContainer of provider buttons (.wa-authenticateLoginLink
   .googlePlus / .microsoft / .apple). Tidy the fields and provider buttons; the
   Log in button + Forgot-password link inherit the global button/link styles.
   ============================================== */

/* Email + password fields → brand dark inputs */
.loginPageTable input[type="text"],
.loginPageTable input[type="password"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--ms-border-strong) !important;
  border-radius: var(--ms-radius-sm) !important;
  color: var(--ms-white) !important;
  font-family: var(--ms-font-body) !important;
  font-size: 1rem !important;
  padding: 0.625rem 0.75rem !important;
  min-width: 260px !important;
}

.loginPageTable input[type="text"]:focus,
.loginPageTable input[type="password"]:focus {
  border-color: var(--ms-cerulean) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 163, 224, 0.25) !important;
}

/* "Remember me" label legible on the dark form */
.loginPageTable label {
  color: var(--ms-text-secondary) !important;
}

/* OAuth provider buttons → consistent rounded, evenly spaced rows. Each keeps
   its provider brand color (set by the theme); we normalize shape/rhythm and
   force white label text so it's legible (the theme's blue-on-blue wasn't). */
.oAuthButtonsContainer .wa-authenticateLoginLink {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ms-space-2) !important;
  border-radius: var(--ms-radius-md) !important;
  padding: 0.5rem 1rem !important;
  margin-bottom: var(--ms-space-3) !important;
  min-height: 42px !important;
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
}

.oAuthButtonsContainer .wa-authenticateLoginLink,
.oAuthButtonsContainer .wa-authenticateLoginLink * {
  color: var(--ms-white) !important;
}


/* ==============================================
   BRANDED HEADER / FOOTER (custom HTML gadget)
   Styles the markup pasted from wa-header.html / wa-footer.html so the
   Wild Apricot chrome mirrors the WordPress theme for a seamless handoff.
   ============================================== */

.ms-wa-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--ms-space-5) !important;
  min-height: 72px !important;
  background-color: var(--ms-bg-secondary) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  padding: var(--ms-space-3) var(--ms-space-6) !important;
}

.ms-wa-header .ms-wa-logo {
  display: inline-flex !important;
  align-items: center !important;
}

.ms-wa-header .ms-wa-logo img {
  height: 44px !important;
  width: auto !important;
  display: block !important;
}

/* Primary nav (mirrors the WordPress header) */
.ms-wa-nav,
.ms-wa-header nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--ms-space-6) !important;
}

.ms-wa-nav a,
.ms-wa-header nav a {
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ms-text-secondary) !important;
  text-decoration: none !important;
  transition: color var(--ms-transition-fast) !important;
}

.ms-wa-nav a:hover,
.ms-wa-header nav a:hover {
  color: var(--ms-white) !important;
}

/* Right-side actions: Member Login + Join Us */
.ms-wa-actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--ms-space-5) !important;
}

/* Member Login — cerulean text link (matches WP header) */
.ms-wa-login {
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ms-cerulean) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color var(--ms-transition-fast) !important;
}

.ms-wa-login:hover {
  color: var(--ms-cyan) !important;
}

/* Gold pill CTA (Join Us) */
.ms-wa-cta {
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background-color: var(--ms-gold) !important;
  color: var(--ms-space-cadet) !important;
  border-radius: var(--ms-radius-full) !important;
  padding: 0.625rem 1.75rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  transition: background-color var(--ms-transition-fast) !important;
}

.ms-wa-cta:hover {
  background-color: var(--ms-gold-light) !important;
  color: var(--ms-space-cadet) !important;
}

.ms-wa-footer {
  background-color: var(--ms-bg-secondary) !important; /* Near-Black */
  color: var(--ms-text-muted) !important;
  border-top: 1px solid var(--ms-border) !important;
  /* Horizontal gutter matches the header (--ms-space-6) so the footer logo
     lines up with the header logo. */
  padding: var(--ms-space-8) var(--ms-space-6) !important;
  line-height: 1.6 !important;
}

/* Full-width footer content: the columns span the whole bar (capped only by the
   page padding) instead of sitting in a centered 1200px column. */
.ms-wa-footer .ms-wa-footer-inner {
  max-width: none !important;
  margin-inline: 0 !important;
}

/* 4-column grid: logo+tagline / MISSION / GET INVOLVED / CONNECT */
.ms-wa-footer .ms-wa-footer-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: var(--ms-space-7) !important;
  margin-bottom: var(--ms-space-7) !important;
}

.ms-wa-footer .ms-wa-footer-logo {
  height: 56px !important;
  width: auto !important;
  display: block !important;
  margin-bottom: var(--ms-space-4) !important;
}

.ms-wa-footer .ms-wa-tagline {
  font-size: 0.875rem !important;
  color: var(--ms-text-secondary) !important;
  max-width: 28ch !important;
}

.ms-wa-footer .ms-wa-col-title {
  font-family: var(--ms-font-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ms-white) !important;
  margin: 0 0 var(--ms-space-5) !important;
}

.ms-wa-footer .ms-wa-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ms-wa-footer .ms-wa-col li {
  margin-bottom: var(--ms-space-3) !important;
}

.ms-wa-footer .ms-wa-col a {
  color: var(--ms-text-secondary) !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
}

.ms-wa-footer .ms-wa-col a:hover {
  color: var(--ms-white) !important;
}

/* Social row */
.ms-wa-footer .ms-wa-social {
  display: flex !important;
  gap: var(--ms-space-4) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ms-wa-footer .ms-wa-social a {
  color: var(--ms-text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.ms-wa-footer .ms-wa-social a:hover {
  color: var(--ms-gold) !important;
}

.ms-wa-footer .ms-wa-social svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

/* Legal bottom bar */
.ms-wa-footer .ms-wa-footer-bottom {
  border-top: 1px solid var(--ms-border) !important;
  padding-top: var(--ms-space-5) !important;
  font-size: 0.75rem !important;
  color: var(--ms-text-muted) !important;
}

.ms-wa-footer .ms-wa-footer-bottom p {
  margin: 0 0 var(--ms-space-2) !important;
  max-width: none !important;
}

.ms-wa-footer .ms-wa-trademark {
  max-width: 60ch !important;
  color: var(--ms-text-muted) !important;
}

/* The footer simply fills its content wrapper. We intentionally do NOT
   use a 100vw full-bleed hack: WA's content column is not centered to the
   viewport, so negative-margin full-bleed clips the left edge. Instead we
   unconstrain the WA wrappers around the footer (rule below) so the column
   itself is full width. The inner .ms-wa-footer-inner now spans full width too
   (max-width:none), so the columns fill the bar edge to edge. */
.ms-wa-footer {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Neutralize the WA wrappers around our header/footer chrome so the dark bar
   fills the column with no light-gray frame. Real classes from the rendered
   DOM: .WaPlaceHolderFooter1 carries an inline #E6E6E6 background and wraps an
   UNCLASSED <div> with 40px/20px inline padding, then
   .WaGadgetCustomHTML > .gadgetStyleBody holds our markup. */
.WaPlaceHolder:has(.ms-wa-footer),
.WaPlaceHolder:has(.ms-wa-header),
.WaPlaceHolderFooter1,
.WaPlaceHolderFooter2 {
  background-color: var(--ms-bg-secondary) !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* The unclassed padded inner div + the gadget wrappers around the chrome */
.WaPlaceHolder:has(.ms-wa-footer) > div,
.WaPlaceHolder:has(.ms-wa-header) > div,
.WaGadgetCustomHTML:has(.ms-wa-footer),
.WaGadgetCustomHTML:has(.ms-wa-header),
.gadgetStyleBody:has(.ms-wa-footer),
.gadgetStyleBody:has(.ms-wa-header) {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  border: none !important;
}

/* General: WA assigns some content placeholders an inline light-gray
   background (#E6E6E6). Force any such zone to the dark brand background so
   there are no gray gutters/boxes anywhere on the page. */
.WaPlaceHolder[style*="#E6E6E6"],
.WaPlaceHolder[style*="#e6e6e6"],
.WaPlaceHolder[style*="rgb(230, 230, 230)"] {
  background-color: var(--ms-bg-primary) !important;
}


/* ==============================================
   EVENT REGISTRATION (LDC event-6653970)
   ============================================== */

.WaGadgetEventRegistration,
.WaGadgetEventDetails,
[class*="eventRegistration"],
[class*="EventRegistration"] {
  color: var(--ms-text-primary) !important;
}

.WaGadgetEventRegistration label,
.WaGadgetEventDetails label,
[class*="eventRegistration"] label {
  color: var(--ms-text-secondary) !important;
  font-family: var(--ms-font-body) !important;
  font-weight: 600 !important;
}

/* Event title / heading */
[class*="eventTitle"],
[class*="EventTitle"] {
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
  color: var(--ms-white) !important;
}

/* Registration type / price rows */
[class*="registrationType"],
[class*="RegistrationType"] {
  background-color: var(--ms-bg-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  padding: 1.25rem !important;
}

[class*="registrationType"] [class*="price"],
[class*="RegistrationType"] [class*="Price"] {
  font-family: var(--ms-font-heading) !important;
  font-weight: 700 !important;
  color: var(--ms-gold) !important;
}


/* ==============================================
   READABILITY SAFETY NET
   ============================================== */

/* Body/reading text floor — keeps WA's small defaults legible. */
p, li, td, label {
  font-size: 1rem !important;        /* 16px */
  line-height: 1.6 !important;
}

/* Non-essential helper text may be smaller, but not below the 13px floor. */
small,
.fieldNote,
.helpText,
[class*="fieldNote"],
[class*="helpText"] {
  font-size: 0.8125rem !important;   /* 13px */
}


/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
  .WaContentGadgetResizer {
    padding: var(--ms-space-4) !important;
  }

  .WaLayoutPlaceHolder:first-child {
    padding: var(--ms-space-6) var(--ms-space-4) !important;
  }

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

@media (max-width: 480px) {
  body {
    font-size: 15px !important;
  }

  .WaLayoutPlaceHolder:first-child h1,
  .WaLayoutPlaceHolder:first-child h2 {
    font-size: 1.75rem !important;
  }
}