/* WildApricot Theme Overrides: Google Fonts (Noto Serif for headings, Nunito Sans for body) */

/* 1) Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&family=Noto+Serif:wght@400;600;700&display=swap');

/* 2) Base body typography: Nunito Sans */
html, body, .WA-theme, .Normal, .GadgetText {
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3) Headings: Noto Serif */
h1, h2, h3, h4, h5, h6,
.Heading1, .Heading2, .Heading3, .Heading4, .Heading5, .Heading6 {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400; /* Adjust per heading below */
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-top: 0;
}

/* Remove theme uppercase */
.no-uppercase,
.no-uppercase * {
  text-transform: none !important;
}

/* Target common headings */
h1.no-uppercase,
h2.no-uppercase,
h3.no-uppercase,
h4.no-uppercase,
h5.no-uppercase,
h6.no-uppercase,
p.no-uppercase,
span.no-uppercase {
  text-transform: none !important;
}

/* Optional: tune per level */
h1, .Heading1 { font-weight: 400; }
h2, .Heading2 { font-weight: 400; }
h3, .Heading3 { font-weight: 400; }
h4, .Heading4 { font-weight: 500; }
h5, .Heading5 { font-weight: 500; }
h6, .Heading6 { font-weight: 500; }

/* 4) Navigation, buttons, forms: keep Nunito Sans for UI */
.WA-navigationMenu,
.WA-button, .Button, button,
input, select, textarea,
.WA-formLabel, .WA-formField,
.WA-gadget, .GadgetHeader, .GadgetText {
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.WaGadgetMenuHorizontal,
.WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal .menuItem a,
.WaGadgetMenuHorizontal .submenu .menuItem a {
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.2;
}

/* 5) Page title gadget: ensure serif headings if it renders with custom class */
.WA-pageTitle, .PageTitle, .GadgetHeader h1, .GadgetHeader h2 {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

/* 6) Edge cases: override theme-specific heading wrappers */
.WA-theme h1, .WA-theme h2, .WA-theme h3, .WA-theme h4, .WA-theme h5, .WA-theme h6 {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
}

/* 7) Ensure event titles/blog titles use Noto Serif, descriptions keep Nunito Sans */
.WA-eventTitle, .WA-blogPostTitle {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
.WA-eventDescription, .WA-blogPostBody {
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 8) Accessibility: ensure sufficient weight on bold text */
strong, b { font-weight: 400; }

/* 9) Fallback: if Google Fonts fails, system stacks apply above */


/* ===========================
   BUTTON SYSTEM (Refactored)
   =========================== */

/* Base button */

/* Inside any .btn, anchor text uses the button’s foreground */
.btn a,
a.btn {
  color: #ffffff !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;                 /* default = Small */
  border-radius: 0;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 60ms ease;
  /* Beat theme font shorthand with our own shorthand */
  font: 600 1rem/1.2 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Primary variant */
.btn-primary {
  background-color: #FF5F5F;
  color: #ffffff;
  border-color: #FF5F5F;
  text-transform: none;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: #EB4B4B;
  border-color: #EB4B4B;
  color: #ffffff;
}
.btn-primary:active {
  transform: translateY(1px);
  background-color: #EB4B4B;
  border-color: #EB4B4B;
}
.btn-primary[disabled],
.btn-primary.disabled,
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Alignment helper */
.btn-center { text-align: center; }
.btn-center .btn { display: inline-flex; }

/* Size variants — use full font shorthand to override theme reliably */
.btn-xs { padding: 0.375rem 0.625rem;  font: 600 0.8125rem/1.25 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important; }
.btn-sm { padding: 0.625rem 1rem;      font: 600 0.9375rem/1.4  'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important; }
.btn-md { padding: 0.75rem 1.25rem;    font: 600 1rem/1.5        'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important; }
.btn-lg { padding: 0.875rem 1.5rem;    font: 600 1.125rem/1.6    'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important; }
.btn-xl { padding: 1rem 1.75rem;       font: 600 1.25rem/1.7     'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important; }

/* Block width helper */
.btn-block { width: 100%; }

/* APPLY PRIMARY STYLE TO WA ACTION BUTTONS (single consolidated selector) */
.navigationOuterContainer input.nextButton,
.navigationOuterContainer input.typeButton,
.navigationOuterContainer input[type="submit"] {
  /* Match .btn + .btn-primary look */
  background-color: #FF5F5F;
  color: #ffffff;
  border: 1px solid #FF5F5F;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 60ms ease;
  /* Use full font to beat theme shorthand */
  font: 600 1rem/1.2 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.navigationOuterContainer input.nextButton:hover,
.navigationOuterContainer input.typeButton:hover,
.navigationOuterContainer input[type="submit"]:hover,
.navigationOuterContainer input.nextButton:focus-visible,
.navigationOuterContainer input.typeButton:focus-visible,
.navigationOuterContainer input[type="submit"]:focus-visible {
  background-color: #0a4fa3;
  border-color: #0a4fa3;
  color: #ffffff;
}
.navigationOuterContainer input.nextButton:active,
.navigationOuterContainer input.typeButton:active,
.navigationOuterContainer input[type="submit"]:active {
  transform: translateY(1px);
  background-color: #083776;
  border-color: #083776;
}
.navigationOuterContainer input.nextButton[disabled],
.navigationOuterContainer input.typeButton[disabled],
.navigationOuterContainer input[type="submit"][disabled],
.navigationOuterContainer input.nextButton.disabled,
.navigationOuterContainer input.typeButton.disabled,
.navigationOuterContainer input[type="submit"].disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* LOGIN BUTTON (minimal; avoid duplication) */
.WaGadgetLoginButton.login-btn a {
  display: inline-block;
  padding: 10px 16px;
  background: #0a4fa3;
  color: #fff;
  text-decoration: none;
  font: 600 1rem/1.25 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.WaGadgetLoginButton.login-btn a:hover,
.WaGadgetLoginButton.login-btn a:focus {
  background: #F2F1ED;
  border-color: #083776;
  color: #083776;
}
.WaGadgetLoginButton.login-btn { text-align: right; }

/* Icon-only login (from your earlier snippet) */
.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink {
  width: 40px;
  height: 40px;
  color: #083776;
}


/* ===========================
   MENU OVERRIDES (kept)
   =========================== */

.WaGadgetMenuHorizontal.menu-center .menuInner,
.WaGadgetMenuHorizontal.menu-center ul {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.WaGadgetMenuHorizontal.menu-center ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.WaGadgetMenuHorizontal.menu-center li { flex: 0 0 auto; }

/* Base: target the exact skin + center class */
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.firstLevel > li > .item > a {
  font-size: 18px !important;
  line-height: 1.35 !important;
  padding: 12px 16px !important;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Visible text lives in the inner span — force inherit */
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.firstLevel > li > .item > a > span {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* Selected/active item */
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.firstLevel > li.sel > .item > a,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.firstLevel > li.sel > .item > a > span {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

/* Sticky variant wrapper sometimes re-scopes rules */
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .stickyMenu .menuInner ul.firstLevel > li > .item > a,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .stickyMenu .menuInner ul.firstLevel > li > .item > a > span {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

/* Gadget ID scoped override to beat load order, if needed */
#id_6NfRKGL.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.firstLevel > li > .item > a,
#id_6NfRKGL.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.firstLevel > li > .item > a > span {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

/* Dropdown items hierarchy (optional) */
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.secondLevel li > .item > a,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.secondLevel li > .item > a > span {
  font-size: 16px !important;
  line-height: 1.3 !important;
  padding: 10px 12px !important;
}

/* Ensure sticky bar height accommodates larger text */
.WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center.stickymenu .stickyMenu { min-height: 56px; }

/* Responsive guard */
@media (max-width: 980px) {
  .WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.firstLevel > li > .item > a,
  .WaGadgetMenuHorizontal.HorizontalMenuStyle001.menu-center .menuInner ul.firstLevel > li > .item > a > span {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
}


/* ===========================
   TESTIMONIAL SLIDER (kept)
   =========================== */

.testimonial-slider.v2 { max-width: 1200px; margin: 0 auto; padding: 16px; background: #fff; border: 1px solid rgba(0,0,0,0.08); }

.tsv2-viewport { width: 100%; overflow: hidden; }
.tsv2-track { display: flex; transition: transform 360ms ease; will-change: transform; }
.tsv2-slide { flex: 0 0 100%; box-sizing: border-box; }

.tsv2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}
@media (max-width: 768px) { .tsv2-grid { grid-template-columns: 1fr; } }

.tsv2-media-aspect { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #f4f5f7; }
.tsv2-media-aspect img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

.tsv2-prev, .tsv2-next {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12);
  background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer;
}
.tsv2-prev::before, .tsv2-next::before { content: "‹"; font-size: 22px; color: #111; line-height: 1; display: inline-block; }
.tsv2-next::before { content: "›"; }
.tsv2-prev.has-custom-icon::before, .tsv2-next.has-custom-icon::before { content: none !important; }

.tsv2-controls { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; }

.tsv2-dots { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; }
.tsv2-dots button { width: 8px; height: 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.25); background: #fff; }
.tsv2-dots button[aria-selected="true"] { background: #FF5F5F; border-color: #FF5F5F; }

/* Dots perfect circles */
#id_1y8bDne .tsv2-dots button {
  width: 10px; height: 10px; padding: 0; display: inline-block; box-sizing: border-box;
  border-radius: 50% !important; border: 1px solid rgba(0,0,0,0.25); background: #fff; vertical-align: middle;
}
#id_1y8bDne .tsv2-dots button[aria-selected="true"] { background: #FF5F5F; border-color: #FF5F5F; }
#id_1y8bDne .tsv2-dots button:focus-visible { outline: 3px solid rgba(255,95,95,0.35); outline-offset: 2px; }


/* ===========================
   HERO CAROUSEL (kept)
   =========================== */

.hero-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  overflow: hidden;
}
.hero-carousel.is-fullbleed {
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  right: 50%;
  margin-right: -50vw;
}
.hero-carousel .slides { position: absolute; inset: 0; }
.hero-carousel .slide {
  position: absolute; inset: 0; margin: 0 !important;
  opacity: 0; transition: opacity 400ms ease;
}
.hero-carousel .slide.is-active { opacity: 1; }
.hero-carousel .slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}

.hero-carousel .slide-caption {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  color: #fff; background: rgba(0,0,0,0.35); padding: .75rem 1rem; border-radius: .5rem;
  max-width: min(90%, 60ch); text-align: center; z-index: 2;
}

.hero-carousel .tsv2-dots {
  position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
}
.hero-carousel .tsv2-dots button {
  width: 10px; height: 10px; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 2px solid #fff; background: transparent; opacity: .85;
  padding: 0; box-sizing: border-box; transform: none !important; line-height: 0; display: inline-block;
}

.hero-carousel .tsv2-controls { pointer-events: none; }
.hero-carousel .tsv2-controls .tsv2-prev,
.hero-carousel .tsv2-controls .tsv2-next {
  pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(2px);
  cursor: pointer; display: grid; place-items: center; z-index: 2;
}
.hero-carousel .tsv2-controls .tsv2-prev { left: .75rem; }
.hero-carousel .tsv2-controls .tsv2-next { right: .75rem; }
.hero-carousel .tsv2-controls .tsv2-prev::before,
.hero-carousel .tsv2-controls .tsv2-next::before {
  content: ""; width: 20px; height: 20px; display: block; mask-size: cover; -webkit-mask-size: cover; background-color: #fff;
}
.hero-carousel .tsv2-controls .tsv2-prev::before {
  mask-image: url("/resources/Pictures/chevron_backward.svg");
  -webkit-mask-image: url("/resources/Pictures/chevron_backward.svg");
}
.hero-carousel .tsv2-controls .tsv2-next::before {
  mask-image: url("/resources/Pictures/chevron_forward.svg");
  -webkit-mask-image: url("/resources/Pictures/chevron_forward.svg");
}

@media (max-width: 768px) {
  .hero-carousel { aspect-ratio: 4 / 3; max-height: 60vh; }
  .hero-carousel .slide-caption { font-size: .95rem; bottom: 1rem; }
  .hero-carousel .tsv2-dots { bottom: .5rem; }
}
@media (max-width: 768px) {
  .hero-carousel .tsv2-dots button { width: 12px; height: 12px; border-width: 2px; }
}


/* ===========================
   EVENTS/GRIDS/MISC (kept)
   =========================== */

.events-hero {
  display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; padding-left: 24px; object-fit: cover;
}

.WaGadgetUpcomingEvents.events-2col ul { display: block; }
.WaGadgetUpcomingEvents.events-2col ul li {
  padding-top: 24px !important; border-top: 1px solid #083776; position: relative; padding-bottom: 24px;
}

.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.page-about-us #id_Header {
  background: none !important; background-image: none !important;
  min-height: 0 !important; height: auto !important;
  padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
}

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 16px;
}
.team-photo { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #f4f5f7; flex: 0 0 auto; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; width: 100%; }
.team-name { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.team-role { margin: 0; color: #6b7280; font-weight: 600; }
.team-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.team-modal[hidden] { display: none; }
.team-modal { position: fixed; inset: 0; z-index: 1000; }
.team-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.team-modal__dialog {
  position: relative; width: min(640px, 90vw); margin: 10vh auto; background: #fff; color: #111;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.team-modal__header, .team-modal__footer { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.team-modal__footer { border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 0; }
.team-modal__body { padding: 16px; }
.team-modal__close {
  border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #111; width: 32px; height: 32px; border-radius: 999px;
  cursor: pointer; font-size: 20px; line-height: 1; float: right;
}
.team-modal__close:hover { background: #f6f7f9; }
.team-profile-btn { font-weight: 600; }

.contact-row { display: flex; gap: 16px; align-items: stretch; }
.contact-col { flex: 1 1 0; display: flex; flex-direction: column; }
.contact-col--left h2 { margin-top: 0; }
.contact-col--left p { margin: 6px 0; }
.map-embed.fill-height { position: relative; flex: 1 1 auto; min-height: 320px; border: 1px solid rgba(0,0,0,0.08); background: #fff; }
.map-embed.fill-height iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 768px) {
  .contact-row { flex-direction: column; }
  .map-embed.fill-height { min-height: 300px; }
}

.events-types { margin: 16px 0; }
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .events-grid { grid-template-columns: 1fr; } }
.event-card {
  background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; min-height: 100%;
}
.event-card__image { position: relative; padding-bottom: 56.25%; background: #f4f5f7; overflow: hidden; }
.event-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-card__body {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;
  gap: 8px; padding: 16px; flex: 1 1 auto;
}
.event-card__title { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.event-card__desc  { margin: 0; color: #374151; }
.event-card__body::after { content: ""; display: block; margin-top: auto; }

/* Make the "Past events" title visually match the event titles above */
#id_yMMm1hy .pastEventsContainer .sectionTitle {
  /* Match the heading level styles of boxHeaderTitle */
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 0.5em 0;
  padding: 0;
  text-transform: uppercase;           /* change if your headers are uppercase */
  color: inherit;                 /* or the same color as .eventDetailsLink */
  border: none;
}

/* Optionally, make the text color exactly like the clickable event titles */
#id_yMMm1hy .pastEventsContainer .sectionTitle {
  color: #083776; /* replace with the actual color used by .eventDetailsLink */
}

#id_yMMm1hy .pastEventsContainer .pastEventsList td.left {
  color: #083776;
}

/* Calendar view: make the Month h3 header dark blue */
#id_yMMm1hy #idUpcomingEventsContainer h3.sectionTitle {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-size: 48px !important; 
  font-weight: 400 !important; 
  line-height: 72px !important;
  color: #083776;
}

#id_yMMm1hy #idEventListCalendar h3.sectionTitle {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-size: 48px !important; 
  font-weight: 400 !important; 
  line-height: 72px !important;
  color: #083776;
}

#idUpcomingEventsContainer .sectionTitle {
  color: #083776;
}

/* Make the Powered by Wild Apricot strip blue with white text */
.zonePlace.zoneWAbranding {
  background-color: #083776 !important; /* your blue */
  color: #ffffff !important;
}

/* Ensure the inner text and link inherit/keep white */
.zonePlace.zoneWAbranding #idFooterPoweredByWA,
.zonePlace.zoneWAbranding #idFooterPoweredByWA a {
  color: #ffffff !important;
}

/* Optional: remove default margins/padding to make it flush */
.zonePlace.zoneWAbranding {
  margin: 0 !important;
  padding: 8px 16px; /* adjust to taste */
}

#id_TubVCEn .formTitleContainer .formTitle {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-size: 24px;
  color: #083776;
}

/* Logged-in: icon only, hide text, use blue */

/* 1. Treat the logged-in link as a fixed icon button */
.WaGadgetLoginForm .loginContainer.authenticated .loginLink,
.WaGadgetLoginButton .loginContainer.authenticated .loginLink {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  overflow: hidden;             /* hide the text node */
  background: transparent !important;
  color: transparent !important; /* hide text color */
  line-height: 50px;            /* for the icon */
  text-indent: -9999px;         /* push text out of view */
  text-decoration: none;
}

/* 2. Draw the user icon via ::before in your blue */
.WaGadgetLoginForm .loginContainer.authenticated .loginLink::before,
.WaGadgetLoginButton .loginContainer.authenticated .loginLink::before {
  content: "\e613";             /* WA theme user icon glyph */
  font-family: "WA-theme-icons";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #083776;               /* your blue */
}

/* 3. Kill the green hover when logged in */
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.authenticated .loginLink:hover,
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.authenticated .loginLink.hover,
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated .loginLink:hover,
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated .loginLink.hover,
.WaGadgetLoginButton .loginContainer.authenticated .loginLink:hover,
.WaGadgetLoginButton .loginContainer.authenticated .loginLink.hover {
  background: transparent !important;
  color: transparent !important; /* still hide text */
}

/* 4. If you see any extra margin/padding from theme, zero it out */
.WaGadgetLoginForm .loginContainer.authenticated .loginLink,
.WaGadgetLoginButton .loginContainer.authenticated .loginLink {
  margin: 0;
  padding: 0;
}

/* Login tooltip panel: clean vertical list */

/* 1. Target the class instead of the dynamic ID */
.loginPanel {
    /* Overrides the 'display: block' inline style */
    display: flex !important;
    
    /* Sets the flow to downward */
    flex-direction: column !important;
    
    /* Sets the gap between items */
    gap: 12px !important;

    /* Optional: Ensure items align to the start/left */
    align-items: flex-start !important;
    
    /* Optional: Add padding so items aren't touching the edges */
    padding: 15px !important;
}

/* Target the parent container to stop it from acting like a block/box */
/* Target the shared .profileBox class to affect both links */
.loginPanel .profileBox {
    display: inline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.loginPanel .profileBox a {
    display: inline !important;
    color: #083776 !important; /* Standard blue link */
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-weight: normal !important;
}

.loginPanel .profileBox a:hover {
    text-decoration: none !important;
    color: #FF5F5F !important;
}

.loginPanel .loggedName {
  font-weight: normal;
}

.loggedName {
    border-bottom: 1px solid #e0e0e0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 5px !important;
    display: block !important;
    font-weight: bold;
    text-align: left !important;
    width: 100% !important;
}

/* target the specific layout container by ID */
/* Target any container that contains your specific gadget */
.WaCustomLayoutContainerOnly:has(#id_uCCfFHB),
.WaLayoutContainerOnly:has(#id_uCCfFHB),
.WaPlaceHolder:has(#id_uCCfFHB) {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Ensure the gadget wrapper itself doesn't clip */
#id_uCCfFHB {
    overflow: visible !important;
}

@media (max-width: 767px) {
  /* Target the specific container and row to increase specificity */
  #id_Stg2xns tr.WaLayoutRow[data-componentid="Stg2xns_row"] {
    display: flex !important;
    width: 100% !important;
  }

  /* Force the columns (td) inside to occupy the full width */
  #id_Stg2xns tr.WaLayoutRow[data-componentid="Stg2xns_row"] > td.WaLayoutItem {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important; /* Adds breathing room between stacked items */
    box-sizing: border-box !important;
  }

  /* Completely remove the separator columns so they don't create gaps */
  #id_Stg2xns tr.WaLayoutRow[data-componentid="Stg2xns_row"] > td.WaLayoutSeparator {
    display: none !important;
  }
}

/* Target the row specifically to hide side columns and center the logo */
@media (max-width: 767px) {
  
  /* 1. Reset the Row to Flex for centering */
  #id_Stg2xns tr.WaLayoutRow[data-componentid="Stg2xns_row"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* 2. Hide everything EXCEPT the logo column */
  /* Targets the menu column and the login column */
  #id_Stg2xns tr[data-componentid="Stg2xns_row"] > td#id_iTXAgH4, 
  #id_Stg2xns tr[data-componentid="Stg2xns_row"] > td#id_TncEugg,
  #id_Stg2xns tr[data-componentid="Stg2xns_row"] > td.WaLayoutSeparator {
    display: none !important;
  }

  /* 3. Force the logo column to center */
  #id_Stg2xns tr[data-componentid="Stg2xns_row"] > td#id_mPEUNrm {
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  /* 4. Kill the 40px inline padding specifically */
  #id_9ReAsLk > div[style*="padding-left:40px"] {
    padding-left: 0 !important;
    text-align: center !important;
  }

  /* 5. Center the image itself */
  #id_QDvBS3S a {
    display: inline-block !important;
    margin: 0 auto !important;
  }
}

/* Removes padding/margins from empty placeholders and gadget containers */
.WaPlaceHolder, 
.WaGadget, 
.WaLayoutContainerOnly, 
.WaCustomLayoutContainerOnly {
    min-height: 0 !important;
}

/* Specifically targets the bottom padding often found in zones */
.WaComponentClearFix:after {
    display: none !important;
}

/* Mobile: hide last image in 3rd column */
@media (max-width: 899px) {
  .grid-col--right .image-card.last-image {
    display: none !important;
  }
}

/* --- HEADER COLUMNS LAYOUT --- */

/* Desktop / large screens: enforce comfortable widths */
@media (min-width: 1025px) {
  /* Row containing logo, menu, login */
  #id_Stg2xns {
    height: auto !important;
  }

  /* Left logo column */
  #id_mPEUNrm {
    width: 15% !important;   /* more room for the logo */
    vertical-align: middle;
  }

  /* Center nav column */
  #id_iTXAgH4 {
    width: 50% !important;   /* not overly wide */
  }

  /* Right login column */
  #id_TncEugg {
    width: 15% !important;
  }
}

/* Tablet & mobile: let widths be automatic so mobile nav can do its thing */
@media (max-width: 1024px) {
  #id_Stg2xns,
  #id_Stg2xns .WaLayoutItem {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

/* Center nav column */
  #id_iTXAgH4 {
    width: auto !important; 
  }
}

/* Remove extra bottom margin from OUR EVENTS custom HTML gadget */
#id_vg3Qp4j {
  margin-bottom: 0 !important;
}

#id_vg3Qp4j .gadgetStyleBody {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide the original big heading text entirely */
#id_TubVCEn h3.formTitle {
  display: none !important;
}

/* Insert a single, custom heading above the membership gadget */
#id_TubVCEn::before {
  content: "Select membership type";
  display: block;

  /* Match original heading style */
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  font-size: 24px;         /* or whatever the original was */
  font-weight: 600;
  color: #083776;          /* or inherit; use your theme color */

  /* Tighten the gap to the label below */
  margin-bottom: -10px;      /* try 0–6px until it looks right */
}

/* Replace the small label text style */
#idMembershipLevelRadioGroupContainer .fieldLabel .mandatoryLabel {
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  font-size: 14px;
  color: #083776;
  margin-bottom: -10px; /* optional tweak for spacing */
}

#id_TubVCEn strong.mandatoryLabel::after {
  font-size: 14px;    /* match your form labels */
  font-weight: 600;
  color: #083776;
}

/* Hide the original "Log in" text */
.alignRight.unauthorized .loginContainer .loginLink {
  font-size: 0 !important;         /* hide text inside the link */
}

/* Inject new label */
.alignRight.unauthorized .loginContainer .loginLink::after {
  content: "Member Login";         /* new text */
  font-size: 14px;                 /* match your nav font size */
  text-transform: uppercase;       /* optional */
}

#idAfterTitle {
  padding-top: 30px;  /* adjust value as needed */
}