/* ===========================
   Contact page – layout helpers
   =========================== */

/* ===== PMHCA / Youth MOVE PA row ===== */

/* Flex layout for the two contact columns */
.pmhca-contact-row .WaLayoutTable {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Force the table structure into flex so cells line up correctly */
.pmhca-contact-row .WaLayoutTable > tbody {
  display: flex;
  width: 100%;
}

.pmhca-contact-row .WaLayoutTable > tbody > tr {
  display: flex;
  width: 100%;
}

/* Columns (TDs) share width evenly with no extra padding */
.pmhca-contact-row .WaLayoutTable > tbody > tr > td {
  flex: 1 1 0;
  min-width: 280px;
  padding: 0;
  box-sizing: border-box;
  display: flex;              /* lets the card stretch to equal height */
  align-items: stretch;
}

/* Card styling for each contact block */
.pmhca-contact-card {
  background-color: #f4f6fb;
  border-radius: 1.25rem;
  padding: 2rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  height: 100%;               /* equal height cards */
}

/* Optional image slot inside contact cards */
.pmhca-contact-card .pmhca-icon-slot {
  margin-bottom: 0.75rem;
}

.pmhca-contact-card .pmhca-heading-l {
  margin-bottom: 1rem;
}

/* Add space between the two cards */
.pmhca-contact-row .WaLayoutTable > tbody > tr > td + td .pmhca-contact-card {
  margin-left: 1.5rem;
}

/* ===== Address + crisis info row ===== */

.pmhca-contact-info-row .WaLayoutTable {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.pmhca-contact-info-row .WaLayoutTable > tbody {
  display: flex;
  width: 100%;
}

.pmhca-contact-info-row .WaLayoutTable > tbody > tr {
  display: flex;
  width: 100%;
}

.pmhca-contact-info-row .WaLayoutTable > tbody > tr > td {
  flex: 1 1 0;
  min-width: 260px;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

/* Light card for office info */
.pmhca-info-card,
.pmhca-crisis-card {
  border-radius: 1.25rem;
  padding: 2rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;               /* equal height for Office + 988 cards */
}

.pmhca-info-card {
  background-color: #f4f6fb;
}

/* Crisis card builds on existing pmhca-crisis colors */
.pmhca-crisis-card {
  /* pmhca-crisis already sets the navy background & white text */
}

/* Add horizontal space between Office and 988 cards */
.pmhca-contact-info-row .WaLayoutTable > tbody > tr > td + td .pmhca-info-card,
.pmhca-contact-info-row .WaLayoutTable > tbody > tr > td + td .pmhca-crisis-card {
  margin-left: 0.75rem;
}

/* ===== Responsive stacking for both rows ===== */

@media (max-width: 900px) {
  .pmhca-contact-row .WaLayoutTable,
  .pmhca-contact-row .WaLayoutTable > tbody,
  .pmhca-contact-row .WaLayoutTable > tbody > tr,
  .pmhca-contact-info-row .WaLayoutTable,
  .pmhca-contact-info-row .WaLayoutTable > tbody,
  .pmhca-contact-info-row .WaLayoutTable > tbody > tr {
    display: block;
  }

  .pmhca-contact-row .WaLayoutTable > tbody > tr > td,
  .pmhca-contact-info-row .WaLayoutTable > tbody > tr > td {
    width: 100% !important;
    margin-bottom: 1.5rem;
  }

  .pmhca-contact-row .WaLayoutTable > tbody > tr > td + td .pmhca-contact-card,
  .pmhca-contact-info-row .WaLayoutTable > tbody > tr > td + td .pmhca-info-card,
  .pmhca-contact-info-row .WaLayoutTable > tbody > tr > td + td .pmhca-crisis-card {
    margin-left: 0.75;          /* no left gap when stacked */
  }
}

/* Equal-ish heights for contact cards on desktop */
@media (min-width: 900px) {
  .pmhca-contact-card {
    min-height: 300px;     /* adjust up/down if needed */
  }

  .pmhca-info-card,
  .pmhca-crisis-card {
    min-height: 260px;     /* keeps Offices + 988 balanced */
  }
}



/* ===========================
   PMHCA Homepage – Main Body
   =========================== */

/* Base section layout */
.pmhca-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}

/* Typography */
.pmhca-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.pmhca-heading-xl {
  font-size: clamp(2.1rem, 3vw, 2.8rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}

.pmhca-heading-l {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  margin: 0 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pmhca-lede {
  font-size: 1.05rem;
  max-width: 680px;
  margin-bottom: 1.75rem;
}

/* Buttons */
.pmhca-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pmhca-btn-primary,
.pmhca-btn-secondary {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.pmhca-btn-primary {
  background-color: #0e2b5c;   /* navy */
  color: #ffffff;
}

.pmhca-btn-primary:hover,
.pmhca-btn-primary:focus {
  opacity: 0.9;
}

.pmhca-btn-secondary {
  border: 2px solid #0e2b5c;
  color: #0e2b5c;
  background: transparent;
}

.pmhca-btn-secondary:hover,
.pmhca-btn-secondary:focus {
  background-color: #0e2b5c;
  color: #ffffff;
}

/* “Our focus” grid */
.pmhca-focus-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
}

.pmhca-focus-item {
  flex: 1 1 0;
  min-width: 220px;
}

.pmhca-focus-item h3 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.pmhca-focus-item p {
  margin: 0;
}

/* Programs grid */
.pmhca-programs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 1.25rem;
}

.pmhca-program {
  flex: 1 1 0;
  min-width: 260px;
}

.pmhca-program h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.pmhca-program p {
  margin-bottom: 0.75rem;
}

/* Arrow-style text links */
.pmhca-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  text-decoration: none;
  color: #0e2b5c;
}

.pmhca-link-arrow::after {
  content: "→";
  font-size: 0.95em;
}

.pmhca-link-arrow:hover,
.pmhca-link-arrow:focus {
  text-decoration: underline;
}

/* Training section (text-only defaults) */
.pmhca-training p {
  max-width: 620px;
  margin-bottom: 1.25rem;
}

/* Stay connected basic card */
.pmhca-stay-connected {
  background-color: #f4f6fb;
  border-radius: 1.5rem;
}

/* Crisis support block */
.pmhca-crisis {
  background-color: #0e2b5c;
  color: #ffffff;
  text-align: left;
  border-radius: 1rem 1rem 0 0;
}

.pmhca-crisis-text {
  margin-bottom: 0.75rem;
}

.pmhca-crisis-callout {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.pmhca-crisis-callout span {
  font-size: 1.4rem;
}

.pmhca-crisis-links a {
  color: #ffffff;
  text-decoration: underline;
}

/* Link pill row (reused in Stay Connected) */
.pmhca-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.pmhca-link-pill {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  background-color: #ffffff;
  border: 1px solid #c3cbe0;
  color: #0e2b5c;
}

.pmhca-link-pill:hover,
.pmhca-link-pill:focus {
  border-color: #0e2b5c;
}

/* ===========================
   Icon / image slots (general)
   =========================== */

.pmhca-icon-slot {
  margin-bottom: 0.75rem;
}

.pmhca-icon-slot img {
  display: block;
  max-width: 64px;
  max-height: 64px;
}

/* Program logos override generic icon sizing */
.pmhca-program-icon-slot {
  margin-bottom: 1.25rem;
}

.pmhca-program-icon-slot img {
  display: block;
  max-width: 220px;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
}

.pmhca-program {
  text-align: left;
}

/* Mobile: scale down program logos slightly */
@media (max-width: 900px) {
  .pmhca-program-icon-slot img {
    max-width: 180px;
    max-height: 90px;
  }
}

/* ===========================
   Training section – image layout
   =========================== */

.pmhca-training-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
}

.pmhca-training-content p {
  max-width: 560px;
  margin-bottom: 1.25rem;
}

.pmhca-training-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  object-fit: cover;
  filter: saturate(0.95);
}

/* ===========================
   "Who we are" feature row
   =========================== */

.pmhca-orientation {
  padding-top: 2.75rem;
  padding-bottom: 3.25rem;
}

.pmhca-orientation-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.75rem;
  align-items: center;
}

.pmhca-orientation-content {
  max-width: 640px;
}

.pmhca-orientation-image img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-left: auto;
  border-radius: 1.25rem;
  object-fit: cover;
  filter: saturate(0.95);
}

/* ===========================
   Stay connected – visual + blob
   =========================== */

.pmhca-stay-connected {
  position: relative;
  overflow: hidden; /* keeps blob clipped to rounded card */
}

/* Inner grid: left visual, right copy */
.pmhca-stay-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr); /* wider visual column */
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 3rem;
}

/* Dark blue blob behind left column */
.pmhca-stay-connected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-30%, -50%);
  width: 520px;
  height: 520px;
  background-color: #0e3a66;
  border-radius: 60% 40% 60% 40%;
  z-index: 0;
}

/* Visual slot */
.pmhca-stay-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* BIGGER image on top of blob */
.pmhca-stay-visual img {
  display: block;
  max-width: 260px;
  height: auto;
}

/* Content column */
.pmhca-stay-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.pmhca-stay-content p {
  margin-bottom: 1.4rem;
}

/* ===========================
   Responsive tweaks
   =========================== */

@media (max-width: 900px) {
  .pmhca-section {
    padding: 2.5rem 1.25rem;
  }

  .pmhca-programs-grid,
  .pmhca-focus-grid,
  .pmhca-link-row,
  .pmhca-button-row {
    flex-direction: column;
  }

  .pmhca-crisis {
    border-radius: 0;
  }

  .pmhca-training-grid {
    grid-template-columns: 1fr;
  }

  .pmhca-training-image {
    order: -1;
  }

  .pmhca-orientation-grid {
    grid-template-columns: 1fr;
  }

  .pmhca-orientation-image {
    order: -1;
    margin-bottom: 1.5rem;
  }

  .pmhca-orientation-image img {
    max-width: 100%;
    margin: 0 auto;
  }

  .pmhca-stay-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
  }

  .pmhca-stay-visual {
    justify-content: flex-start;
    margin-bottom: 0.75rem;
  }

  .pmhca-stay-connected::before {
    display: none; /* hide blob on small screens */
  }
}




/* Contact page: tighter vertical padding on the two main rows */
.pmhca-section.pmhca-contact-row,
.pmhca-section.pmhca-contact-info-row {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}





/* ================================
   Event Registration – global wrapper
   ================================ */

#event_registration {
  max-width: 900px;
  margin: 0 auto;
}

/* ================================
   Page title
   ================================ */

#event_registration h1.contStyleHeading1 {
  font-size: 2.1rem;
  font-weight: 700;
  color: #004b7c;          /* brand navy */
  margin: 0 0 1.5rem;
}

/* ================================
   Event info (blue bar)
   ================================ */

#event_registration .infoOuterContainer {
  background: #e4f0fb;     /* light blue */
  border-radius: 10px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

#event_registration .infoTitle {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #004b7c;
  font-weight: 700;
}

#event_registration .infoText {
  font-size: 1rem;
  color: #123047;
}

/* ================================
   Registration form block
   ================================ */

#event_registration #idGeneralFormContainer.generalFormOuterContainer {
  background: #f7f8fa;
  border-radius: 10px;
  padding: 2rem 2.5rem 2.25rem;
  margin-bottom: 3rem;
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}

#event_registration .fieldLabel {
  font-weight: 600;
  color: #123047;
  margin-bottom: 0.35rem;
}

#event_registration .fieldLabel .mandatory {
  color: #c0372b;
}

#event_registration .fieldBody input[type="text"],
#event_registration .fieldBody input[type="email"] {
  width: 100% !important;
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid #c9d3e3;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}

/* reCAPTCHA spacing */
#event_registration .fieldBody .g-recaptcha {
  margin-top: 1.25rem;
}

/* ================================
   Navigation buttons (Cancel / Next)
   ================================ */

#event_registration .navigationOuterContainer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

#event_registration .navigationOuterContainer input[type="submit"],
#event_registration .navigationOuterContainer input[type="button"] {
  min-width: 140px;
  padding: 0.7rem 1.5rem;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

/* Primary – Next */
#event_registration .navigationOuterContainer input[type="submit"] {
  background: #00527e;
  color: #ffffff;
}

/* Secondary – Cancel */
#event_registration .navigationOuterContainer input[type="button"] {
  background: transparent;
  border: 1px solid #c9d3e3;
  color: #123047;
}

/* Simple hover states */
#event_registration .navigationOuterContainer input[type="submit"]:hover {
  background: #003f61;
}

#event_registration .navigationOuterContainer input[type="button"]:hover {
  background: #e6edf7;
}

/* ================================
   Mobile tweaks
   ================================ */

@media (max-width: 599px) {
  #event_registration {
    padding: 0 1rem;
  }

  #event_registration #idGeneralFormContainer.generalFormOuterContainer {
    padding: 1.5rem 1.25rem 1.75rem;
  }

  #event_registration .navigationOuterContainer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  #event_registration .navigationOuterContainer input[type="submit"],
  #event_registration .navigationOuterContainer input[type="button"] {
    width: 100%;
  }
}





/* =========================================
   PMHCA – Events List Card Style
   Scope: calendar list gadget (#id_Ld8e7FG)
   ========================================= */

/* Base list */
#id_Ld8e7FG.WaGadgetEventsStateList .boxesList {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

#id_Ld8e7FG.WaGadgetEventsStateList .boxesListItem {
  margin-bottom: 2.5rem;
}

/* Main card container */
#id_Ld8e7FG.WaGadgetEventsStateList .boxOuterContainer.boxViewOutline {
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(135deg, #151f46, #273a71);
  border-radius: 40px;
  padding: 2.3rem 2.8rem;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* Kill old inner "corner" chrome so it doesn't fight us */
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyContainer > .d1,
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyContainer .cornersContainer,
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyContainer .topCorners,
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyContainer .bottomCorners {
  background: transparent;
}

/* Hide the old gray info box / bullets by default as a backup */
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyInfoOuterContainer,
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyInfoContainer,
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyInfoOuterContainer .boxInfo {
  display: none;
}

/* Layout row created by JS */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-row {
  display: flex;
  align-items: center;
  gap: 3rem;
}

/* Left date column */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-date-col {
  flex: 0 0 210px;
  display: flex;
  justify-content: flex-start;
}

#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-date {
  text-align: left;
}

#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-month {
  font-size: 1.1rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  opacity: 0.9;
}

#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-day {
  font-size: 5rem;
  line-height: 1;
  font-weight: 700;
}

/* Right column: title + meta + actions */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-main {
  flex: 1 1 0%;
}

/* Title inside the card */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.2;
  color: #ffffff;
}

/* Title link (or cloned link) */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-title a,
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-title-link {
  color: #ffffff !important;
  text-decoration: none;
}

#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-title a:hover,
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-title-link:hover {
  text-decoration: underline;
}

/* Meta block */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-meta {
  margin: 0.15rem 0 1.5rem;
  font-size: 1.05rem;
}

#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-time,
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-location,
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-spaces {
  line-height: 1.5;
}

#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-time {
  font-weight: 600;
}

/* Action buttons row */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Shared button style */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-details,
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Details pill (white) */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-details {
  background: #ffffff;
  color: #081339;
  border: 2px solid #ffffff;
}

#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-details:hover {
  background: transparent;
  color: #ffffff;
}

/* Register pill (yellow) */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-register {
  background: #ffe700;
  color: #081339 !important;
  border: none;
  text-decoration: none !important;
}

/* Remove native input styling if it's a button */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-register[type="submit"],
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-register[type="button"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
}

/* Hide the original "Show details" text/nav, but NOT the title link */
#id_Ld8e7FG.WaGadgetEventsStateList .eventListNavigation,
#id_Ld8e7FG.WaGadgetEventsStateList .eventListShowDetailsLinkContainer {
  display: none;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  #id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.8rem;
  }

  #id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-date-col {
    flex: 0 0 auto;
  }

  #id_Ld8e7FG.WaGadgetEventsStateList .boxOuterContainer.boxViewOutline {
    padding: 1.7rem 1.8rem;
    border-radius: 24px;
  }

  #id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-day {
    font-size: 3.4rem;
  }
}

/* =========================================
   Fix left-side spacing on event cards
   Remove WildApricot's default two-column panel
   ========================================= */

/* Kill the decorative left panel (::before) */
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyOuterContainer::before {
  content: none !important;
  display: none !important;
}

/* Make the content container span full width (no "info" column) */
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyInfoOuterContainer,
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyContentOuterContainer {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* In case WA adds a left offset for the content, reset it */
#id_Ld8e7FG.WaGadgetEventsStateList .boxBodyContentOuterContainer .inner {
  margin-left: 0 !important;
}

#id_Ld8e7FG.WaGadgetEventsStateList .eventListShowDetailsLinkContainer,
#id_Ld8e7FG.WaGadgetEventsStateList a.eventListShowDetailsLink {
  display: none !important;
}

/* Remove footer area (e.g., "Show details") from event list cards */
#id_Ld8e7FG.WaGadgetEventsStateList .boxFooterOuterContainer {
  display: none !important;
}

#id_Ld8e7FG.WaGadgetEventsStateList .boxHeaderOuterContainer {
  display: none !important;
}

/* Normalize REGISTER button to match DETAILS size */
#id_Ld8e7FG.WaGadgetEventsStateList .pmhca-event-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* Shared sizing for both buttons */
#id_Ld8e7FG.WaGadgetEventsStateList
.pmhca-event-details,
#id_Ld8e7FG.WaGadgetEventsStateList
.pmhca-event-register {
  height: 44px;                 /* force same height */
  padding: 0 2.2rem;            /* same horizontal padding */
  min-width: 150px;             /* optional, keeps them visually balanced */
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Remove native button weirdness on REGISTER */
#id_Ld8e7FG.WaGadgetEventsStateList
input.pmhca-event-register {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 900px) {
  #id_Ld8e7FG.WaGadgetEventsStateList
  .boxBodyContentContainer.fixedHeight,
  #id_Ld8e7FG.WaGadgetEventsStateList
  .boxBodyContentContainer.is-truncated {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}









/* ================================
   PMHCA EVENT DETAIL HERO CARD
   Target: Event details (System) gadget
   HTML ID: event-detail-card
   ================================ */

/* Outer card */
#event-detail-card {
  max-width: 1100px;
  margin: 2.5rem auto;
  padding: 2.5rem 2.25rem;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(135deg, #151f46, #273a71);
  border-radius: 24px;
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
}

/* “Training” label */
#event-detail-card::before {
  content: "Training";
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.4rem;
}

/* Keep site font inside hero card */
#event-detail-card,
#event-detail-card * {
  font-family: inherit;
}

/* Headings inside card */
#event-detail-card h1,
#event-detail-card h2,
#event-detail-card h3,
#event-detail-card h4,
#event-detail-card h5,
#event-detail-card h6 {
  color: #ffffff !important;
  font-weight: 800;
  margin-top: 0;
}

/* Main event title */
#event-detail-card h1,
#event-detail-card h2 {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}

/* First description paragraph under the title, if present */
#event-detail-card > p:first-of-type {
  margin-top: 0.4rem;
  margin-bottom: 1.7rem;
  font-size: 1.05rem;
  max-width: 32rem;
}

/* General text in the main content area */
#event-detail-card p,
#event-detail-card li,
#event-detail-card span {
  color: rgba(255,255,255,0.92) !important;
}

/* Links in description area */
#event-detail-card a {
  color: #e7f041 !important;
  text-decoration: underline;
  font-weight: 600;
}
#event-detail-card a:hover {
  color: #ffffff !important;
}

/* Neutralize old <font> tags / inline colors */
#event-detail-card font {
  color: inherit !important;
}

/* Pill-style buttons (e.g., Register) */
#event-detail-card input[type="button"],
#event-detail-card input[type="submit"],
#event-detail-card button {
  display: inline-block;
  background: #ffffff;
  color: #0d1b3d !important;
  padding: 0.75rem 1.9rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-right: 0.75rem;
  margin-top: 0.25rem;
}
#event-detail-card input[type="button"]:hover,
#event-detail-card input[type="submit"]:hover,
#event-detail-card button:hover {
  background: #e7f041;
  color: #0d1b3d !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* Space below card */
#event-detail-card + * {
  margin-top: 2.5rem;
}

/* ================================
   OVERRIDE WILDAPRICOT STRUCTURE
   ================================ */

/* Get rid of default background on WA outer box */
#event-detail-card .boxOuterContainer.boxBaseView {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* LEFT PANEL: timing / location / registration box */
#event-detail-card .boxBodyInfoContainer {
  background: #ffffff !important;
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  color: #0d1b3d !important;
}

/* Make ALL text in the left panel navy and readable */
#event-detail-card .boxBodyInfoContainer,
#event-detail-card .boxBodyInfoContainer * {
  color: #0d1b3d !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* “When / Location / Spaces left” labels and headings */
#event-detail-card .boxBodyInfoContainer .eventInfoBoxLabel,
#event-detail-card .boxBodyInfoContainer .infoTitle,
#event-detail-card .boxBodyInfoContainer strong {
  display: inline-block;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(13,27,61,0.7) !important;
}

/* UL that holds When/Location/Spaces rows */
#event-detail-card .boxBodyInfoContainer ul.boxInfo {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
#event-detail-card .boxBodyInfoContainer ul.boxInfo li {
  margin-bottom: 0.45rem;
}

/* Registration section text + list */
#event-detail-card .registrationInfoContainer ul,
#event-detail-card .registrationInfoContainer li {
  list-style: none;
  padding-left: 0;
  margin: 0.2rem 0;
  font-weight: 600 !important;
}

/* Payment logos */
#event-detail-card .boxBodyInfoContainer img {
  max-width: 100%;
}

/* Register button inside left panel */
#event-detail-card .boxBodyInfoContainer input[type="submit"],
#event-detail-card .boxBodyInfoContainer input[type="button"] {
  background: #ffffff !important;
  color: #0d1b3d !important;
  border: 2px solid #0d1b3d !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.5rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
#event-detail-card .boxBodyInfoContainer input[type="submit"]:hover,
#event-detail-card .boxBodyInfoContainer input[type="button"]:hover {
  background: #e7f041 !important;
  color: #0d1b3d !important;
  transform: translateY(-2px);
}

/* RIGHT SIDE: event content area */
#event-detail-card .boxBodyContentOuterContainer {
  background: transparent !important;
  color: rgba(255,255,255,0.92) !important;
}
#event-detail-card .boxBodyContentOuterContainer p,
#event-detail-card .boxBodyContentOuterContainer li,
#event-detail-card .boxBodyContentOuterContainer span {
  color: rgba(255,255,255,0.92) !important;
}

/* ================================
   LAYOUT FIX – DESKTOP
   Keep left registration card + right content side-by-side
   ================================ */

/* Large desktops: 1100px and up */
@media (min-width: 1100px) {

  /* Make sure WA keeps the two columns left/right */
  #event-detail-card .boxBodyInfoOuterContainer {
    float: left !important;
  }

  #event-detail-card .boxBodyInfoContainer {
    width: 300px !important;       /* card width */
    margin-bottom: 0 !important;
  }

  #event-detail-card .boxBodyContentOuterContainer {
    float: right !important;
    margin-left: 4rem !important;  /* gap between card + text */
    width: calc(100% - 300px - 4rem) !important;
    max-width: 650px !important;   /* keeps text column readable */
  }
}

/* ============================================
   TABLET RANGE: 900px–1099px
   Center the white card, stack content underneath,
   kill the overlap caused by floats.
   ============================================ */
@media (min-width: 900px) and (max-width: 1099px) {

  /* Use normal block flow, keep original text alignment */
  #event-detail-card {
    display: block !important;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: left !important;
  }

  /* Don't force flex here; let children stack */
  #event-detail-card .boxOuterContainer.boxBaseView {
    display: block !important;
  }

  /* Turn OFF floats on the two siblings that were causing overlap */
  #event-detail-card .boxBodyInfoOuterContainer.boxBodyInfoViewFill,
  #event-detail-card .boxBodyContentOuterContainer {
    float: none !important;
    clear: none !important;
    position: static !important;
  }

  /* White registration card wrapper – centered on the page */
  #event-detail-card .boxBodyInfoOuterContainer.boxBodyInfoViewFill {
    width: 360px !important;               /* tweak 320–380 as desired */
    max-width: 100%;
    margin: 0 auto 2.5rem !important;      /* center + space below */
    display: block !important;
  }

  /* Inner card fills its wrapper normally */
  #event-detail-card .boxBodyInfoContainer {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Blue content column – full width under the card, centered */
  #event-detail-card .boxBodyContentOuterContainer {
    width: 100% !important;
    max-width: 900px !important;           /* keep line length comfy */
    margin: 0 auto !important;             /* center in the blue area */
    padding-left: 0 !important;            /* cancels desktop nudge */
    /* no text-align so headings/body stay left-aligned */
  }
}

/* ================================
   MOBILE / SMALLER VIEWPORT TWEAKS
   Stack card on top of content
   ================================ */

@media (max-width: 899px) {
  #event-detail-card {
    padding: 1.75rem 1.25rem;
    border-radius: 18px;
  }

  #event-detail-card h1,
  #event-detail-card h2 {
    font-size: 1.8rem;
  }

  #event-detail-card .boxBodyInfoOuterContainer,
  #event-detail-card .boxBodyContentOuterContainer {
    float: none !important;
    width: 100% !important;
  }

  #event-detail-card .boxBodyInfoContainer {
    margin-bottom: 1.75rem;
  }
}









/* ===========================
   Page header – image w/ overlay
   =========================== */

.pmhca-page-header {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}

/* Background image */
.pmhca-staff-header {
  background-image: url("https://pmhca.wildapricot.org/resources/Pictures/teambio.png");
  background-size: cover;
  background-position: center;
}

/* Dark overlay for busy images */
.pmhca-staff-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(14, 43, 92, 0.75); /* PMHCA navy overlay */
  z-index: 0;
}

/* Text container */
.pmhca-page-header-inner {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  max-width: 800px;
}

/* Headline */
.pmhca-page-header h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
  color: #ffffff;
}

/* Subhead */
.pmhca-page-header p {
  font-size: 1.05rem;
  font-weight: 500;
  opacity: 0.95;
  margin: 0;
}
.pmhca-page-header {
  border-radius: 0 0 2rem 2rem;
}

#staff-title {
  text-align: center;
  padding: 2rem 1rem 0.75rem;  /* reduced bottom padding */
  margin-bottom: 0.5rem;       /* prevents extra gap */
}

#staff-title h2 {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0d4f7a;
}

#staff-title p {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
  color: #0d4f7a;
  font-weight: 600;
}

/* Decorative line below text */
#staff-title::after {
  content: "";
  width: 80%;
  max-width: 600px;
  height: 2px;
  background: #d1d1d1;
  display: block;
  margin: 1.5rem auto 0;
}

/* ===== STAFF GRID LAYOUT ===== */

#staff-grid {
  padding: 1rem 1.5rem 4rem;   /* much less space above cards */
}

/* Table as grid */
#staff-grid table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

#staff-grid td {
  width: 33.333%;
  padding: 1.5rem;
  vertical-align: top;
  border: none;
  outline: none;
}

/* Remove any default borders/outlines WA might inject */
#staff-grid table,
#staff-grid table * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Each cell becomes a card with 3D perspective */
#staff-grid td.staff-card {
  perspective: 1200px;
}

/* Inner flipping element */
#staff-grid .staff-card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;            /* card proportion similar to your screenshot */
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  cursor: pointer;
}

/* Front + back faces */
#staff-grid .staff-card-front,
#staff-grid .staff-card-back {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  backface-visibility: hidden;
}

/* FRONT: photo + name pill */
#staff-grid .staff-card-front {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Portrait image */
#staff-grid .staff-card-front img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name/title pill at bottom */
#staff-grid .staff-name-pill {
  margin: 1.25rem auto 1.5rem;
  padding: 0.7rem 1.75rem;
  max-width: 90%;
  background: #e3e3e3;
  border-radius: 999px;
  font-size: 0.95rem;
  text-align: center;
}

/* BACK: bio side */
#staff-grid .staff-card-back {
  background: #f5f5f5;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: left;
}

#staff-grid .staff-card-back p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Flip state */
#staff-grid .staff-card-inner.flipped {
  transform: rotateY(180deg);
}

/* RESPONSIVE: stack cards on small screens */
@media (max-width: 767px) {
  #staff-grid table,
  #staff-grid tbody,
  #staff-grid tr,
  #staff-grid td {
    display: block;
    width: 100% !important;
  }

  #staff-grid td {
    padding: 1rem 0;
  }
}


/* MAIN SECTION WRAPPER */
#event-main {
  padding: 4rem 1.5rem 3rem;
  text-align: center;
}

/* ---- TOP TEXT BLOCKS ---- */

/* FIRST LINE = small label (Celebrating Culture) */
#event-main p:first-of-type {
  margin: 0 0 0.5rem;
  color: #00878c;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  font-weight: 600;
}

/* SECOND LINE = big main title */
#event-main p:nth-of-type(2) {
  margin: 0 0 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  font-size: 2rem;
  font-weight: 700;
}

/* ---- GRID TABLE ---- */


#event-main table,
#event-main table * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#event-main td {
  padding: 1.5rem;
  vertical-align: top;
  text-align: center;
}

/* IMAGE at top of each card */
#event-main td img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0 auto 1rem;
  border-radius: 6px;
}

/* TEXT inside each card */
/* FIRST paragraph inside a cell = label ("Events") */
#event-main td p:nth-of-type(1) {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 600;
}

/* SECOND paragraph inside a cell = title */
#event-main td p:nth-of-type(2) {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
}

/* THIRD paragraph inside a cell = description */
#event-main td p:nth-of-type(3) {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* RESPONSIVE STACKING */
@media (max-width: 767px) {
  #event-main table,
  #event-main tbody,
  #event-main tr,
  #event-main td {
    display: block;
    width: 100% !important;
  }

  #event-main td {
    padding: 1rem 0;
  }
}

/* BUTTON LINKS inside event-main */
#event-main a {
  display: inline-block;
  background: #0d1b3d;            /* DARK BLUE default */
  color: #ffffff;                 /* white text default */
  padding: 0.75rem 1.75rem;
  border-radius: 999px;           /* pill shape */
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  font-size: 0.95rem;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

/* HOVER: Lime-yellow background + navy text */
#event-main a:hover {
  background: #e7f041;            /* lime yellow */
  color: #0d1b3d;                 /* dark navy text */
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Click/active state */
#event-main a:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* HERO WRAPPER */
#event-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  padding: 5rem 1.5rem 4rem; /* top, sides, bottom */

  /* Make the gadget background behave like a hero image */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

/* Teal overlay on top of the background image */
#event-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 135, 140, 0.55);  /* adjust opacity as needed */
  z-index: 0;
}

/* Make sure all inner content is above the overlay */
#event-hero > * {
  position: relative;
  z-index: 1;
}

/* Logo image */
#event-hero img {
  max-width: 220px;
  height: auto;
  margin-bottom: 1.5rem;
}

/* TYPOGRAPHY */
#event-hero h1,
#event-hero h2 {
  margin: 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
}

/* Optional highlight span (e.g. "THE PALM BEACHES") */
#event-hero h1 span,
#event-hero h2 span {
  color: #ffd34a;
}

/* Body text */
#event-hero p {
  margin: 0.4rem auto;
  max-width: 42rem;
  font-size: 1.2rem !important;
}

/* Last paragraph, treat as description */
#event-hero p:last-of-type {
  margin-top: 1.5rem;
  font-size: 1.05rem !important;
}

/* Larger screens */
@media (min-width: 768px) {
  #event-hero {
    padding: 6rem 2rem 5rem;
  }

  #event-hero h1,
  #event-hero h2 {
    font-size: 2.6rem !important;
  }
}

@media (min-width: 1024px) {
  #event-hero h1,
  #event-hero h2 {
    font-size: 2.9rem !important;
  }

  #event-hero img {
    max-width: 260px;
  }
}

/* Wrapper for the entire 3-column section */
.program-features {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 60px auto;
    max-width: 1200px;
}

/* Individual feature columns */
.program-feature-item {
    flex: 1;
}

/* Headings inside each column */
.program-feature-item h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #1a1a1a;
}

/* Body text inside each column */
.program-feature-item p {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

/* Program / campaign hero */
#program-hero {
  /* make the background behave like a real hero image */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Text inside the hero */
#program-hero p {
  margin: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  max-width: 60rem;

  /* translucent box behind the text */
  background: rgba(0, 0, 0, 0.35);
  padding: 18px 24px;
  border-radius: 10px;
  display: inline-block;

  /* optional: a tiny glow to separate from the image */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
/* ==========================
   TRAINING HERO LEFT COLUMN
   Gadget ID: training-hero
   ========================== */

#training-hero {
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 32px 24px;
  border-radius: 16px;
  background: linear-gradient(
      120deg,
      rgba(32, 44, 86, 0.92),
      rgba(77, 86, 120, 0.92)
    ),
    url("https://pmhca.wildapricot.org/resources/Pictures/Training%20Header.png") center/cover no-repeat;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Top label: EVENT / VIRTUAL TRAINING / etc. */
#training-hero .hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 8px;
}

/* Big title line */
#training-hero .hero-title {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 12px;
}

/* Subtitle sentence */
#training-hero .hero-subtitle {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 18px;
}

/* Meta block (Date / Time / Format) */
#training-hero .hero-meta p {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.6;
}

#training-hero .hero-meta strong {
  color: #ffffff;
}

/* CTA buttons container */
#training-hero .hero-ctas {
  margin-top: 18px;
}

/* Buttons */
#training-hero .hero-ctas a {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: 12px;
  margin-top: 8px;
  border: 2px solid #ffffff;
}

/* First button = solid */
#training-hero .hero-ctas a:first-child {
  background: #ffffff;
  color: #202c56;
}

/* Second button = outline */
#training-hero .hero-ctas a:nth-child(2) {
  background: transparent;
  color: #ffffff;
}

/* Hover states */
#training-hero .hero-ctas a:first-child:hover {
  background-color: #e8eb68;
  border-color: #e8eb68;
  color: #202c56;
}

#training-hero .hero-ctas a:nth-child(2):hover {
  background-color: rgba(255,255,255,0.15);
}

/* ==================================
   TRAINING HERO RIGHT COLUMN CARD
   Gadget ID: event-hero-right
   ================================== */

#training-hero-right {
  background: #f5f7fb;
  border-radius: 20px;
  padding: 24px 28px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #333333;
}

/* Each section (What you'll learn / Who should attend) */
#training-hero-right .hero-card-section {
  margin-bottom: 24px;
}

/* Section titles */
#training-hero-right .hero-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #202c56;
  margin-bottom: 8px;
}

/* Lists */
#training-hero-right ul {
  margin: 0 0 4px 20px;
  padding: 0;
}

#training-hero-right li {
  margin-bottom: 4px;
}

/* Responsive – add a bit of spacing when stacked */
@media (max-width: 800px) {
  #training-hero-right {
    margin-top: 16px;
  }
}

/* ===========================
   Site ticker (always text, no gaps)
   =========================== */

#site-ticker {
  background-color: #ffff66;   /* yellow bar */
  color: #111111;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* The moving track: 2 copies of the message, side by side */
#site-ticker .site-ticker-track {
  display: flex;
  width: 200%;                 /* two full-width panels */
  animation: siteTickerScroll 35s linear infinite; /* slower, smooth */
}

/* Each copy fills half the track (i.e., one full bar width) */
#site-ticker .site-ticker-item {
  flex: 0 0 50%;
  min-width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
}

/* Animation: move the double-width track left by 50%,
   so the second copy takes the place of the first */
@keyframes siteTickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Small-screen tweaks */
@media (max-width: 600px) {
  #site-ticker {
    font-size: 0.75rem;
  }

  #site-ticker .site-ticker-item {
    padding: 0.4rem 1rem;
  }
}

/* Wrapper to keep the video clean and full-width */
#video-header {
  width: 100%;
  overflow: hidden;
  background: #000; /* fallback before video loads */
}

/* The responsive video */
#header-video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* fills width without distortion */
  max-height: 70vh;  /* prevents the video from being too tall */
}

.btn-membership {
  display: inline-block;
  padding: 10px 22px;
  background-color: #202c56;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px; /* slightly rounded corners */
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-membership:hover,
.btn-membership:focus {
  background-color: #4d5678;
  color: #ffffff;
  text-decoration: none;
}

/* Container */
#nav {
  background: #ffffff !important;
  padding: 10px 40px 10px 0;
  text-align: right;
}

/* Reset WA overrides */
#nav * {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* NAV BAR CONTAINER */
#nav {
  background: #ffffff;
  padding: 10px 40px 10px 0;
  text-align: right;                 /* aligns the menu block to the right */
}

/* The actual menu container inside the gadget */
#nav .menuInner {
  display: inline-block;             /* so it can be right-aligned by #nav */
}

/* TOP-LEVEL MENU ROW */
#nav .menuInner ul.firstLevel {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top-level items (horizontal) */
#nav .menuInner ul.firstLevel > li {
  display: inline-block;
  margin: 0 0 0 40px;               /* space between items */
}

#nav .menuInner ul.firstLevel > li:first-child {
  margin-left: 0;
}

/* ALL MENU LINKS */
#nav .menuInner a {
  color: #000000 !important;         /* black text */
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  padding: 5px 0;
}

/* Hover */
#nav .menuInner a:hover {
  text-decoration: underline;
}

/* DROPDOWN BACKGROUND + READABILITY FIX */
#nav .menuInner ul.secondLevel,
#nav .menuInner ul.level2,
#nav .menuInner ul ul {
  background: #ffffff !important;       /* solid white background */
  padding: 10px 0;                      /* spacing inside dropdown */
  min-width: 200px;                     /* consistent width */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);  /* subtle shadow */
  z-index: 9999;                        /* ensures dropdown sits on top */
}

/* Dropdown items */
#nav .menuInner ul.secondLevel li,
#nav .menuInner ul.level2 li,
#nav .menuInner ul ul li {
  white-space: nowrap;                  /* prevent awkward wrapping */
}

/* Dropdown links */
#nav .menuInner ul.secondLevel li a,
#nav .menuInner ul.level2 li a,
#nav .menuInner ul ul li a {
  display: block;
  padding: 8px 20px;
  font-size: 16px;
  color: #000000 !important;
  background: #ffffff !important;
  text-decoration: none;
}

/* Hover on dropdown items */
#nav .menuInner ul.secondLevel li a:hover,
#nav .menuInner ul.level2 li a:hover,
#nav .menuInner ul ul li a:hover {
  background: #f2f2f2 !important;
}

/* Hide default WildApricot footer */
#idFooterPoweredByWA {
  display: none !important;
}

/* ===========================
   PMHCA FOOTER BASE
   =========================== */

#pmhca-footer {
  background-color: #202c56;          /* deep blue */
  color: #ffffff;
  padding: 48px 20px 32px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#pmhca-footer a {
  color: #9fdcff;                     /* light blue links */
  text-decoration: underline;
}

#pmhca-footer a:hover {
  text-decoration: none;
}

/* 3-column layout: LEFT (logos/text), MIDDLE (contact), RIGHT (988 + mailing) */
#pmhca-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 1.2fr;
  gap: 40px;
  align-items: flex-start;
}

/* Generic column text */
#pmhca-footer .footer-col p {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ===========================
   LEFT COLUMN
   =========================== */

/* Logos row */
#pmhca-footer .footer-logo-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

#pmhca-footer .footer-logo-img {
  max-height: 80px;
  width: auto;
}

#pmhca-footer .footer-logo-divider {
  width: 1px;
  height: 70px;
  background-color: rgba(255,255,255,0.5);
}

/* Social icons under logos */
#pmhca-footer .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

#pmhca-footer .footer-social a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

#pmhca-footer .footer-social a:hover {
  background-color: rgba(255,255,255,0.12);
}

/* Youth MOVE text */
#pmhca-footer .footer-small {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 360px;
}

#pmhca-footer .footer-link {
  margin-top: 0.6rem;
  font-weight: 600;
}

/* ===========================
   MIDDLE COLUMN
   =========================== */

#pmhca-footer .footer-email {
  margin-bottom: 0.8rem;
  font-weight: 600;
}

#pmhca-footer .footer-label {
  font-weight: 600;
  margin-top: 0.8rem;
}

/* ===========================
   RIGHT COLUMN (988 + mailing)
   =========================== */

#pmhca-footer .footer-988-heading {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

#pmhca-footer .footer-988-sub {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}

#pmhca-footer .footer-links {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

#pmhca-footer .footer-copy {
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.85;
}

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

@media (max-width: 900px) {
  /* Stack columns but keep order: left, middle, right */
  #pmhca-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  #pmhca-footer .footer-small {
    max-width: none;
  }
}

@media (max-width: 600px) {
  #pmhca-footer {
    padding: 32px 16px 24px;
  }

  #pmhca-footer .footer-logo-row {
    flex-direction: column;
    align-items: flex-start;
  }

  #pmhca-footer .footer-social {
    justify-content: flex-start;
  }
}





/* ===========================
   Job Opportunities layout
   =========================== */

.pmhca-jobs-intro {
  max-width: 720px;
  margin-bottom: 2.5rem;
}

/* Small heading variant for card titles */
.pmhca-heading-s {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

/* Grid of job cards */
.pmhca-jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

/* Job card */
.pmhca-job-card {
  background-color: #f7f8fc;
  border-radius: 1.25rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid #dde2f1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Program eyebrow tweak */
.pmhca-job-program {
  margin-bottom: 0.25rem;
}

/* Meta line: compact + inline */
.pmhca-job-meta {
  font-size: 0.9rem;
  color: #44506a;
  margin: 0;
}

.pmhca-job-dot {
  margin: 0 0.35rem;
}

/* Short teaser */
.pmhca-job-teaser {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}

/* Ensure button row stays tidy in cards */
.pmhca-job-card .pmhca-button-row {
  margin-top: 0.5rem;
}

/* Footer note */
.pmhca-jobs-footer {
  margin-top: 2.25rem;
  font-size: 0.95rem;
  color: #44506a;
}

/* ===========================
   Job grid – responsive
   =========================== */

@media (max-width: 1024px) {
  .pmhca-jobs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .pmhca-jobs-grid {
    grid-template-columns: 1fr;
  }

  .pmhca-job-card {
    padding: 1.35rem 1.3rem;
  }
}

/* ===========================
   Job Opportunities Hero
   =========================== */

.pmhca-hero--jobs {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  border-radius: 0 0 2rem 2rem;
  overflow: hidden;

  /* Background image */
  background-image: url("https://pmhca.wildapricot.org/resources/Pictures/jobopp_header.png");
  background-size: cover;
  background-position: center;
}

/* Dark overlay for readability */
.pmhca-hero--jobs .pmhca-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(15, 20, 45, 0.65),
    rgba(15, 20, 45, 0.45)
  );
}

/* Inner content */
.pmhca-hero--jobs .pmhca-hero-inner {
  position: relative;
  max-width: 720px;
  padding: 3rem 2rem;
  color: #ffffff;
}

.pmhca-hero--jobs .pmhca-eyebrow {
  color: #d7dcff;
}

.pmhca-hero--jobs .pmhca-heading-xl {
  margin-bottom: 0.75rem;
}

.pmhca-hero-subhead {
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 520px;
}

/* ===========================
   Hero responsiveness
   =========================== */

@media (max-width: 768px) {
  .pmhca-hero--jobs {
    min-height: 260px;
  }

  .pmhca-hero--jobs .pmhca-hero-inner {
    padding: 2.25rem 1.5rem;
  }
}





/* =========================================
   Youth MOVE PA – Full Image Hero (Clean)
   ========================================= */

#youthmove-hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 3rem;
  border-radius: 2rem;
  overflow: hidden;
}

/* Background image + dark blue overlay */
#youthmove-hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      90deg,
      rgba(14, 43, 92, 0.85) 0%,
      rgba(14, 43, 92, 0.70) 32%,
      rgba(14, 43, 92, 0.45) 55%,
      rgba(14, 43, 92, 0.20) 70%,
      rgba(14, 43, 92, 0.0) 85%
    ),
    url("https://pmhca.wildapricot.org/resources/Pictures/youthmovepa_header2.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Flatten WA table layout */
#youthmove-hero .WaLayoutTable,
#youthmove-hero .WaLayoutTable > tbody,
#youthmove-hero .WaLayoutTable > tbody > tr,
#youthmove-hero .WaLayoutTable > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
}

/* Content container */
.youthmove-hero-content {
  position: relative;
  z-index: 1;
  padding: 3.75rem 3.25rem;
  max-width: 520px;
  color: #ffffff;
}

/* Eyebrow */
.youthmove-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0e2b5c;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Logo with shadow */
.youthmove-hero-logo {
  display: block;
  width: 100%;
  max-width: 220px; /* desktop default */
  height: auto;
  margin-bottom: 1.25rem;

  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
}

/* Body copy */
.youthmove-hero-text {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 34rem;
  margin-bottom: 2rem;
  color: #f2f5fb;
}

/* Buttons */
.youthmove-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.youthmove-btn {
  display: inline-block;
  padding: 0.8rem 1.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.youthmove-btn-primary {
  background-color: #ffffff;
  color: #0e2b5c;
}

.youthmove-btn-primary:hover {
  opacity: 0.9;
}

.youthmove-btn-secondary {
  border: 2px solid #ffffff;
  color: #ffffff;
}

.youthmove-btn-secondary:hover {
  background-color: #ffffff;
  color: #0e2b5c;
}

/* Accessibility: visually hidden H1 */
.youthmove-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 900px) {
  #youthmove-hero {
    margin: 0 1rem 2.5rem;
    border-radius: 1.5rem;
  }

  .youthmove-hero-content {
    padding: 2.75rem 2rem;
    max-width: 100%;
  }

  .youthmove-hero-logo {
    max-width: 200px;
  }

  .youthmove-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 900px) {
  .youthmove-hero-logo {
    max-width: 200px;
  }
}



/* =========================================
   Youth MOVE PA – Section 2: Intro (2-column)
   ========================================= */

#youthmove-intro {
  background: #f7f8fc;
  margin: 0 auto 3rem;
}

/* Let WA handle the columns, just clean padding */
#youthmove-intro td.WaLayoutItem {
  padding: 2.75rem 2rem;
  vertical-align: middle;
}

/* LEFT: text */
.youthmove-intro-text {
  max-width: 520px;
}

.youthmove-section-heading {
  font-size: clamp(1.7rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
  color: #0e2b5c;
}

.youthmove-intro-lede {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.youthmove-intro-text p {
  line-height: 1.65;
  margin-bottom: 1rem;
  color: #1a2640;
}

/* RIGHT: image */
.youthmove-intro-image img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 1.5rem;
  object-fit: cover;
  box-shadow: 0 14px 32px rgba(6, 22, 54, 0.18);
}

/* Keep image visually right-aligned */
.youthmove-intro-image {
  display: flex;
  justify-content: flex-end;
}

/* =========================
   Mobile: stack image first
   ========================= */
@media (max-width: 900px) {
  #youthmove-intro .WaLayoutTable,
  #youthmove-intro .WaLayoutTable > tbody,
  #youthmove-intro .WaLayoutTable > tbody > tr,
  #youthmove-intro td.WaLayoutItem {
    display: block;
    width: 100%;
  }

  #youthmove-intro td.WaLayoutItem {
    padding: 2rem 1.5rem;
  }

  .youthmove-intro-image {
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .youthmove-intro-image img {
    max-width: 100%;
  }
}





/* =========================================
   Youth MOVE PA – Section 3: Values grid
   ========================================= */

#youthmove-values {
  background: #ffffff;
  margin: 0 auto 3.25rem;
}

/* Flatten WA table for easier control */
#youthmove-values .WaLayoutTable,
#youthmove-values .WaLayoutTable > tbody,
#youthmove-values .WaLayoutTable > tbody > tr,
#youthmove-values .WaLayoutTable > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}

/* Inner wrapper */
.youthmove-values-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.75rem 3rem 3.25rem;
}

/* Reuse heading style but slightly smaller than intro H2 if you want */
.youthmove-values-inner .youthmove-section-heading {
  margin-bottom: 2rem;
}

/* Grid layout */
.youthmove-values-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

/* Individual cards */
.youthmove-value-card {
  flex: 1 1 0;
  min-width: 240px;
  background: #e8f0ff;               /* soft blue card */
  border-radius: 1.5rem;
  padding: 1.6rem 1.6rem 1.8rem;
  box-shadow: 0 10px 24px rgba(6, 22, 54, 0.12);
  box-sizing: border-box;
}

/* Icon “chip” at top of card */
/* Icon container (the white circle) */
.youthmove-value-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 10px rgba(6, 22, 54, 0.16);
}

/* Icon image – keep it smaller than the circle */
.youthmove-value-icon img {
  max-width: 26px;
  max-height: 26px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Card titles */
.youthmove-value-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e2b5c;
}

/* Card body text */
.youthmove-value-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #1b2740;
}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 900px) {
  .youthmove-values-inner {
    padding: 2.25rem 1.5rem 2.75rem;
  }

  .youthmove-values-grid {
    flex-direction: column;
  }

  .youthmove-value-card {
    min-width: 0;
  }
}



/* =========================================
   Youth MOVE PA – Section 4: Video feature
   ========================================= */

#youthmove-video {
  max-width: 1100px;
  margin: 0 auto 3.25rem;
}

/* Use WA's table layout, just clean it up */
#youthmove-video .WaLayoutTable {
  width: 100%;
  border-collapse: collapse;
}

/* Left + right columns */
#youthmove-video .WaLayoutTable > tbody > tr > td.WaLayoutItem {
  padding: 2.5rem 1.5rem;
  vertical-align: middle;
}

/* Separator between columns – keep small but not huge */
#youthmove-video .WaLayoutSeparator {
  width: 32px;        /* adjust if you want more/less gap */
  padding: 0;
}

/* Left side – video frame */
.youthmove-video-frame {
  width: 100%;
}

.youthmove-video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  border: none;
  box-shadow: 0 14px 28px rgba(6, 22, 54, 0.25);
  overflow: hidden;
}

/* Right side – text */
.youthmove-video-copy {
  width: 100%;
}

.youthmove-video-copy .youthmove-section-heading {
  margin-bottom: 1rem;
}

.youthmove-video-lede {
  font-size: 1.02rem;
  margin-bottom: 0.9rem;
}

.youthmove-video-copy p {
  line-height: 1.6;
  max-width: 32rem;
}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 900px) {
  /* Stack the two columns on mobile */
  #youthmove-video .WaLayoutTable,
  #youthmove-video .WaLayoutTable > tbody,
  #youthmove-video .WaLayoutTable > tbody > tr,
  #youthmove-video .WaLayoutTable > tbody > tr > td.WaLayoutItem {
    display: block;
    width: 100% !important;
  }

  /* Hide separator on mobile */
  #youthmove-video .WaLayoutSeparator {
    display: none;
    width: 0;
  }

  #youthmove-video .WaLayoutTable > tbody > tr > td.WaLayoutItem {
    padding: 2rem 1.5rem 1.75rem;
  }

  #youthmove-video .WaLayoutTable > tbody > tr > td.WaLayoutItem:last-child {
    padding-bottom: 0;
  }
}





/* =========================================
   Youth MOVE PA – Section 5: Programs grid
   ========================================= */

#youthmove-programs {
  background: #ffffff;
  margin: 0 auto 3.25rem;
}

/* Flatten WA table */
#youthmove-programs .WaLayoutTable,
#youthmove-programs .WaLayoutTable > tbody,
#youthmove-programs .WaLayoutTable > tbody > tr,
#youthmove-programs .WaLayoutTable > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}

/* Inner wrapper */
.youthmove-programs-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.75rem 3rem 3.25rem;
  box-sizing: border-box;
}

.youthmove-programs-inner .youthmove-section-heading {
  margin-bottom: 1.75rem;
}

/* Grid */
.youthmove-programs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Card */
.youthmove-program-card {
  flex: 1 1 0;
  min-width: 260px;
  background: #f3f6ff;
  border-radius: 1.5rem;
  padding: 0 0 1.9rem;
  box-shadow: 0 12px 30px rgba(6, 22, 54, 0.12);
  box-sizing: border-box;
  overflow: hidden;
}

/* New: card image at top */
.youthmove-program-image {
  width: 100%;
  overflow: hidden;
}

.youthmove-program-image img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

/* Card content */
.youthmove-program-card h3 {
  font-size: 1.15rem;
  margin: 1.4rem 1.75rem 0.75rem;
  color: #0e2b5c;
}

.youthmove-program-card p {
  margin: 0 1.75rem 1.1rem;
  line-height: 1.6;
  color: #1b2740;
}

.youthmove-program-card .pmhca-link-arrow {
  display: inline-block;
  margin: 0 1.75rem;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 900px) {
  .youthmove-programs-inner {
    padding: 2.25rem 1.5rem 2.75rem;
  }

  .youthmove-programs-grid {
    flex-direction: column;
  }

  .youthmove-program-card {
    min-width: 0;
  }

  .youthmove-program-image img {
    height: 180px;
  }
}





/* =========================================
   Youth MOVE PA – Section 7: Memorial
   ========================================= */

#youthmove-memorial {
  background: #f7f8fc;
  margin: 0 auto 3.25rem;
}

/* Flatten WA table */
#youthmove-memorial .WaLayoutTable,
#youthmove-memorial .WaLayoutTable > tbody,
#youthmove-memorial .WaLayoutTable > tbody > tr,
#youthmove-memorial .WaLayoutTable > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}

/* Card wrapper */
.youthmove-memorial-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.75rem 3rem 3rem;
  background: #ffffff;
  border-radius: 1.75rem;
  box-shadow: 0 18px 40px rgba(6, 22, 54, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  box-sizing: border-box;
}

/* Text */
.youthmove-memorial-content {
  flex: 1 1 320px;
  min-width: 0;
}

.youthmove-memorial-heading {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 2.1vw, 1.8rem);
  font-weight: 800;
  color: #0e2b5c;
}

.youthmove-memorial-body {
  margin: 0 0 0.75rem;
  line-height: 1.7;
  color: #2a3145;
}

/* Photo */
.youthmove-memorial-photo {
  flex: 0 0 280px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.youthmove-memorial-photo img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 1.4rem;
  object-fit: cover;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px) {
  .youthmove-memorial-inner {
    padding: 2.25rem 1.5rem 2.5rem;
    flex-direction: column;
  }

  .youthmove-memorial-photo {
    justify-content: center;
    order: -1; /* show photo first on mobile if you prefer */
    margin-bottom: 1.25rem;
  }

  .youthmove-memorial-photo img {
    max-width: 100%;
  }

  .youthmove-memorial-heading {
    font-size: 1.4rem;
  }

  .youthmove-memorial-body {
    font-size: 0.98rem;
  }
}





/* =========================================
   Youth MOVE PA – Section 8: Store / Bonfire
   ========================================= */

#youthmove-store {
  background: #ffffff;
  margin: 0 auto 3.5rem;
}

/* Flatten WA table */
#youthmove-store .WaLayoutTable,
#youthmove-store .WaLayoutTable > tbody,
#youthmove-store .WaLayoutTable > tbody > tr,
#youthmove-store .WaLayoutTable > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}

/* Inner layout */
.youthmove-store-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.75rem 3rem 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
  align-items: flex-start;
  box-sizing: border-box;
  border-top: 1px solid #dde2f2;
}

/* Text column */
.youthmove-store-text {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
}

.youthmove-store-heading {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 2.1vw, 1.8rem);
  font-weight: 800;
  color: #0e2b5c;
}

.youthmove-store-body {
  margin: 0 0 1.25rem;
  line-height: 1.7;
  color: #2a3145;
}

/* Button */
.youthmove-store-btn {
  border-radius: 999px;
  padding-inline: 1.8rem;
  font-weight: 700;
}

/* Products column */
.youthmove-store-products {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-end;
}

/* Product card */
.youthmove-store-product-card {
  width: 150px;
  text-align: center;
}

.youthmove-store-product-image {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  background: #f3f6ff;
  box-shadow: 0 10px 24px rgba(6, 22, 54, 0.14);
}

.youthmove-store-product-image img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.youthmove-store-product-name {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: #1b2740;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px) {
  .youthmove-store-inner {
    padding: 2.25rem 1.5rem 1rem;
    flex-direction: column;
  }

  .youthmove-store-products {
    justify-content: flex-start;
  }

  .youthmove-store-product-card {
    width: 46%;
    max-width: 180px;
  }

  .youthmove-store-product-image img {
    height: 140px;
  }

  .youthmove-store-heading {
    font-size: 1.4rem;
  }

  .youthmove-store-body {
    font-size: 0.97rem;
  }
}


/* =========================================
   Youth MOVE PA – Follow Us strip
   ========================================= */

#youthmove-social {
  background: #f7f8fc;
  margin: 0 auto 3rem;
}

/* Flatten WA layout */
#youthmove-social .WaLayoutTable,
#youthmove-social .WaLayoutTable > tbody,
#youthmove-social .WaLayoutTable > tbody > tr,
#youthmove-social .WaLayoutTable > tbody > tr > td {
  width: 100%;
  padding: 0;
  border: 0;
}

#youthmove-social td.WaLayoutItem {
  padding: 1.75rem 2rem;
}

/* Inner layout */
.youthmove-social-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Label */
.youthmove-social-label {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #0e2b5c;
}

/* Icon row */
.youthmove-social-icons {
  display: flex;
  gap: 0.75rem;
}

/* Individual icon */
.youthmove-social-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffffff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(6, 22, 54, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.youthmove-social-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.youthmove-social-icon:hover,
.youthmove-social-icon:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(6, 22, 54, 0.25);
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 900px) {
  #youthmove-social td.WaLayoutItem {
    padding: 1.5rem 1.5rem;
  }

  .youthmove-social-inner {
    justify-content: center;
  }
}