/* ============================================================
   PHOTONICS INDUSTRIES AUSTRALIA - "Spectral Authority" theme
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');
:root {
  --pia-ink:      #0B1226;
  --pia-surface:  #101C3F;
  --pia-primary:  #1E4FD8;
  --pia-cyan:     #4FE3FF;
  --pia-gold:     #F5B82E;
  --pia-gold-deep:#D99410;
  --pia-violet:   #A78BFA;
  --pia-paper:    #FFFFFF;
  --pia-tint:     #F3F6FC;
  --pia-spectrum: linear-gradient(90deg, var(--pia-cyan), var(--pia-primary) 35%, var(--pia-violet) 65%, var(--pia-gold));
  --pia-border:   #E3E9F4;
  --pia-body-col: #44507A;
  --pia-muted:    #5A6786;
  --pia-radius:   12px;
  --pia-font-display: 'Space Grotesk', sans-serif;
  --pia-font-body: 'Inter', sans-serif;
}
/* ============ GLOBAL TYPE ============ */
body, .WaGadgetContentEditor, .WaGadgetContentEditor p {
  font-family: var(--pia-font-body) !important;
  color: var(--pia-body-col);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.WaGadgetHeadline .gadgetStyleTitle,
.WaGadgetContentEditor h1, .WaGadgetContentEditor h2, .WaGadgetContentEditor h3 {
  font-family: var(--pia-font-display) !important;
  color: var(--pia-ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.WaGadgetContentEditor h2::after,
.WaGadgetHeadline .gadgetStyleTitle::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--pia-gold);
}
a { color: var(--pia-primary); }
/* Base link colour already resolves to green via --pia-primary (redefined
   further down in the Deep Forest override block). Hover previously jumped
   to gold; now stays the same green with an underline added so there's
   still a visible state change on hover. */
a:hover { color: var(--pia-primary); text-decoration: underline; }
/* ============ PAGE BACKGROUND ============ */
#mLayout, .mLayout, body { background: var(--pia-paper); }
/* ============ BUTTONS ============ */
.stylizedButton, .typeButton, input.typeButton,
.WaGadgetLoginButton .loginButton,
.functionalButton {
  font-family: var(--pia-font-display) !important;
  font-weight: 600;
  background: var(--pia-gold) !important;
  color: var(--pia-ink) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 26px !important;
  transition: background .2s ease, transform .15s ease;
}
.stylizedButton:hover, .typeButton:hover, .functionalButton:hover {
  background: var(--pia-gold-deep) !important;
  transform: translateY(-1px);
}
.WaGadgetLoginButton .loginButton {
  background: var(--pia-ink) !important;
  color: #fff !important;
}
/* PIA custom buttons - available site-wide */
.pia-btn-gold, .pia-btn-outline {
  font-family: var(--pia-font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background .2s ease, transform .15s ease;
}
.pia-btn-gold { background: var(--pia-gold); color: var(--pia-ink) !important; }
.pia-btn-gold:hover { background: var(--pia-gold-deep) !important; transform: translateY(-1px); color: var(--pia-ink) !important; }
.pia-btn-outline { border: 1px solid rgba(255,255,255,.35); color: #fff !important; }
.pia-btn-outline:hover { background: rgba(255,255,255,.08); }
/* PIA - News page blog "Read more" links (WA outputs a bare <a>, no class, so styled via structure) */
.postBottom .boxFooterPrimaryContainer .inner a:first-of-type {
  font-family: var(--pia-font-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 30px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  display: inline-block !important;
  background: var(--pia-gold) !important;
  color: var(--pia-ink) !important;
  transition: background .2s ease, transform .15s ease;
}
.postBottom .boxFooterPrimaryContainer .inner a:first-of-type:hover {
  background: var(--pia-gold-deep) !important;
  transform: translateY(-1px);
  color: var(--pia-ink) !important;
}
.pia-btn-profile {
  font-family: var(--pia-font-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 30px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--pia-primary) !important;
  border: 2px solid var(--pia-primary) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  transition: background .2s ease !important;
}
.pia-btn-profile:hover { background: rgba(30,79,216,0.06) !important; }
.pia-cog { font-size: 18px !important; line-height: 1 !important; }
/* ============ PIA HEADER ============ */
#idHeaderContentHolder {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}
#id_mU5tEsu {
  width: 100vw !important;
  position: relative !important;
  left: calc(50% - 50vw) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  border-bottom: 1px solid #eaeaea !important;
  box-sizing: border-box !important;
}
/* ============ WA PLACEHOLDER PADDING OVERRIDES ============ */
#id_mU5tEsu .WaCustomLayoutPlaceHolder > div,
#id_mU5tEsu .WaLayoutPlaceHolder > div {
  padding: 0 !important;
}
#id_Header2 > div {
  padding: 0 !important;
}
#id_8PGpdNj > div {
  padding: 0 !important;
}
#idHeaderContentHolder { box-shadow: none !important; }
.zoneHeader1,
.zoneHeader3 { margin-top: 0 !important; padding-top: 0 !important; }
.zoneHeader1 .WaPlaceHolder > div {
  padding: 0 !important;
}
#id_mU5tEsu .WaLayoutTable {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  table-layout: auto !important;
}
#id_mU5tEsu .WaLayoutSeparator { width: 0 !important; padding: 0 !important; }
#id_rdwJ1qM {
  width: 1% !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  padding: 0 24px 0 28px !important;
}
#id_v1vW39L { vertical-align: middle !important; }
#id_HHgnNmr {
  width: 1% !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  text-align: right !important;
  padding: 0 28px 0 24px !important;
  position: relative !important;
  z-index: 200 !important;
}
#id_H5sDtkg { display: none !important; }
#id_b7E38S1 { margin-bottom: 0 !important; }
.pia-auth-link {
  color: #1E4FD8 !important;
  font-size: 16px !important;
  line-height: 26px !important;
  font-weight: 500 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  padding: 30px 18px !important;
  text-decoration: none !important;
  border-bottom: 2px solid #1E4FD8 !important;
  display: inline-block !important;
  white-space: nowrap !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.pia-auth-link:hover {
  color: #1A8C6A !important;
  border-bottom-color: #1A8C6A !important;
}
.pia-auth-link > span {
  display: inline-block !important;
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 !important;
  position: relative !important;
}
/* ---- Nav menu ---- */
#id_EDnGrxR .menuBackground { display: none !important; }
#id_EDnGrxR .menuInner { display: flex !important; justify-content: center !important; }
#id_EDnGrxR .menuInner ul.firstLevel {
  display: flex !important;
  align-items: flex-start !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#id_EDnGrxR .menuInner ul.firstLevel > li > .item > a {
  color: #0B1226 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  padding: 30px 18px !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  display: block !important;
  white-space: nowrap !important;
  transition: color 0.2s, border-color 0.2s !important;
}
/* Current-page indicator stays gold, this is a different signal than hover
   so it's been split out from the hover rule below. */
#id_EDnGrxR .menuInner ul.firstLevel > li.sel > .item > a {
  color: #F5B82E !important;
  border-bottom-color: #F5B82E !important;
}
#id_EDnGrxR .menuInner ul.firstLevel > li > .item > a:hover {
  color: #1A8C6A !important;
  border-bottom-color: #1A8C6A !important;
}
/* ---- Shared dropdown ---- */
#id_EDnGrxR ul.secondLevel,
#id_b7E38S1 ul.secondLevel {
  background: #ffffff !important;
  border: 1px solid #eaeaea !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  padding: 6px 0 !important;
  list-style: none !important;
  margin: 0 !important;
}
#id_EDnGrxR ul.secondLevel .item a,
#id_b7E38S1 ul.secondLevel .item a {
  color: #0B1226 !important;
  font-size: 14px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  padding: 9px 18px !important;
  display: block !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s, color 0.15s !important;
}
#id_EDnGrxR ul.secondLevel .item a:hover,
#id_b7E38S1 ul.secondLevel .item a:hover {
  color: #1A8C6A !important;
  background: #F4F9F6 !important;
}
/* ---- Profile dropdown positioning ---- */
.pia-profile-wrap {
  position: relative !important;
  display: inline-block !important;
}
#id_b7E38S1 ul.secondLevel {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  min-width: 180px !important;
  z-index: 1001 !important;
  padding-top: 14px !important;
}
#id_b7E38S1 .pia-profile-wrap:hover ul.secondLevel { display: block !important; }
.pia-burger-btn { display: none !important; }
#pia-mobile-menu { display: none; }
@media (max-width: 768px) {
  #pia-auth-desktop { display: none !important; }
  .pia-burger-btn { display: flex !important; }
}
/* ============ CONTENT CARDS ============ */
.pia-card {
  background: #fff;
  border: 1px solid var(--pia-border);
  border-radius: var(--pia-radius);
  padding: 26px !important;
}
.pia-tint { background: var(--pia-tint) !important; }
.WaGadgetBlog .blogPostItem, .WaGadgetRecentBlogPosts li {
  background: #fff;
  border: 1px solid var(--pia-border);
  border-radius: var(--pia-radius);
  padding: 22px;
  margin-bottom: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.WaGadgetBlog .blogPostItem:hover, .WaGadgetRecentBlogPosts li:hover {
  border-color: var(--pia-primary);
  box-shadow: 0 12px 36px -20px rgba(11, 18, 38, 0.3);
}
.WaGadgetEventsList .eventListItem {
  border-radius: var(--pia-radius);
  border: 1px solid var(--pia-border);
  background: #fff;
}
/* ============ FORMS ============ */
.fieldContainer input[type=text], .fieldContainer input[type=password],
.fieldContainer textarea, .fieldContainer select {
  border: 1px solid rgba(13, 27, 62, 0.20) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  background: #fff !important;
  font-family: var(--pia-font-body) !important;
  transition: border-color .2s, box-shadow .2s;
}
.fieldContainer input:focus, .fieldContainer textarea:focus {
  border-color: var(--pia-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.15);
  outline: none;
}
/* ============ FOOTER ============ */
.zoneFooter1, .zoneFooter2, .zoneFooter3 {
  background: var(--pia-ink) !important;
  color: rgba(255, 255, 255, 0.72);
}
.zoneFooter1 {
  border-top: 3px solid transparent;
  border-image: var(--pia-spectrum) 1;
}
.zoneFooter1 a, .zoneFooter2 a, .zoneFooter3 a { color: var(--pia-gold); }
.zoneFooter1 p, .zoneFooter2 p, .zoneFooter3 p { color: rgba(255,255,255,0.72) !important; }
/* ============ ACCESSIBILITY ============ */
a:focus-visible, button:focus-visible, .stylizedButton:focus-visible {
  outline: 3px solid var(--pia-primary);
  outline-offset: 2px;
}
/* ============================================================
   WILDAPRICOT MODULE CSS OVERRIDES
   ============================================================ */
/* ---- 1. EVENTS CALENDAR ---- */
.WaGadgetEventCalendar { font-family: var(--pia-font-body) !important; }
.WaGadgetEventCalendar .calendarHeader,
.WaGadgetEventCalendar .calendarNavigation {
  font-family: var(--pia-font-display) !important;
  font-weight: 600;
  color: var(--pia-ink) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--pia-border);
  padding: 14px 0;
}
.WaGadgetEventCalendar .calendarNavigation a {
  color: var(--pia-primary) !important;
  font-weight: 600;
  text-decoration: none;
  background: var(--pia-tint);
  border: 1px solid var(--pia-border);
  border-radius: 6px;
  padding: 4px 12px;
  transition: background .2s ease;
}
.WaGadgetEventCalendar .calendarNavigation a:hover {
  background: var(--pia-primary) !important;
  color: #fff !important;
  border-color: var(--pia-primary);
}
.WaGadgetEventCalendar .calendarDayHeader th,
.WaGadgetEventCalendar table th {
  font-family: var(--pia-font-display) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--pia-muted) !important;
  background: var(--pia-tint) !important;
  padding: 10px 6px;
  border: none !important;
}
.WaGadgetEventCalendar td.calendarDay,
.WaGadgetEventCalendar td {
  background: #fff !important;
  border: 1px solid var(--pia-border) !important;
  vertical-align: top;
  padding: 8px 10px !important;
  min-height: 80px;
  font-size: 13px;
  color: var(--pia-body-col);
  transition: background .15s ease;
}
.WaGadgetEventCalendar td.calendarDay:hover { background: var(--pia-tint) !important; }
.WaGadgetEventCalendar td.calendarDay .dayNumber,
.WaGadgetEventCalendar .dayNumber {
  font-family: var(--pia-font-display) !important;
  font-size: 14px; font-weight: 600; color: var(--pia-ink);
}
.WaGadgetEventCalendar td.calendarToday,
.WaGadgetEventCalendar .calendarToday {
  background: rgba(30, 79, 216, 0.06) !important;
  border-color: var(--pia-primary) !important;
}
.WaGadgetEventCalendar td.calendarToday .dayNumber { color: var(--pia-primary); }
.WaGadgetEventCalendar td.calendarOtherMonth {
  background: var(--pia-tint) !important;
  opacity: .55;
}
.WaGadgetEventCalendar .eventCalendarEvent,
.WaGadgetEventCalendar .calendarEvent {
  display: block; font-size: 11.5px; font-weight: 500;
  color: var(--pia-paper) !important;
  background: var(--pia-primary) !important;
  border-radius: 4px; padding: 2px 6px; margin: 3px 0;
  text-decoration: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s ease;
}
.WaGadgetEventCalendar .eventCalendarEvent:hover { background: var(--pia-ink) !important; }
.WaGadgetEventCalendar .calendarMoreEvents a {
  font-size: 11px; color: var(--pia-primary) !important; font-weight: 600;
}
/* ---- 2. EVENTS LIST ---- */
.WaGadgetEventsList { font-family: var(--pia-font-body) !important; }
.WaGadgetEventsList .gadgetTitle,
.WaGadgetEventsList h2 { font-family: var(--pia-font-display) !important; color: var(--pia-ink) !important; }
.WaGadgetEventsList .eventListItem {
  display: flex; align-items: flex-start; gap: 20px;
  border-radius: var(--pia-radius) !important;
  border: 1px solid var(--pia-border) !important;
  background: #fff !important;
  padding: 20px 24px !important; margin-bottom: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.WaGadgetEventsList .eventListItem:hover {
  border-color: var(--pia-primary) !important;
  box-shadow: 0 12px 36px -20px rgba(11, 18, 38, 0.28);
  transform: translateY(-2px);
}
.WaGadgetEventsList .eventListDate,
.WaGadgetEventsList .dateBox {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 58px; min-height: 64px;
  background: var(--pia-surface) !important;
  border-radius: 8px; color: #fff !important;
  font-family: var(--pia-font-display) !important;
  text-align: center; padding: 8px 6px;
}
.WaGadgetEventsList .eventListDate .day,
.WaGadgetEventsList .dateBox .day,
.WaGadgetEventsList .eventListDate strong {
  display: block; font-size: 22px; font-weight: 700;
  line-height: 1; color: var(--pia-gold) !important;
}
.WaGadgetEventsList .eventListDate .month,
.WaGadgetEventsList .dateBox .month {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.75) !important; margin-top: 3px;
}
.WaGadgetEventsList .eventListDetails,
.WaGadgetEventsList .eventDetails { flex: 1; min-width: 0; }
.WaGadgetEventsList .eventListTitle a,
.WaGadgetEventsList .eventName a {
  font-family: var(--pia-font-display) !important;
  font-size: 16.5px; font-weight: 600;
  color: var(--pia-ink) !important;
  text-decoration: none; display: block; margin-bottom: 5px;
  transition: color .15s ease;
}
.WaGadgetEventsList .eventListTitle a:hover,
.WaGadgetEventsList .eventName a:hover { color: var(--pia-primary) !important; }
.WaGadgetEventsList .eventListLocation,
.WaGadgetEventsList .eventLocation,
.WaGadgetEventsList .eventListTime { font-size: 13px; color: var(--pia-muted) !important; margin: 2px 0; }
.WaGadgetEventsList .eventListDescription,
.WaGadgetEventsList .eventDescription {
  font-size: 14px; color: var(--pia-body-col) !important; line-height: 1.6; margin-top: 8px;
}
.WaGadgetEventsList .eventListRegistration a,
.WaGadgetEventsList .registerLink a {
  display: inline-block;
  font-family: var(--pia-font-display) !important;
  font-size: 13px; font-weight: 600;
  background: var(--pia-gold); color: var(--pia-ink) !important;
  text-decoration: none; padding: 7px 16px; border-radius: 6px;
  margin-top: 10px; transition: background .2s ease;
}
.WaGadgetEventsList .eventListRegistration a:hover { background: var(--pia-gold-deep); }
.WaGadgetEventsList .eventFilter,
.WaGadgetEventsList .filterBar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px; padding: 14px 0;
  border-bottom: 1px solid var(--pia-border);
}
.WaGadgetEventsList .eventFilter select,
.WaGadgetEventsList .filterBar select {
  font-family: var(--pia-font-body) !important; font-size: 13px;
  border: 1px solid var(--pia-border) !important; border-radius: 8px;
  padding: 8px 14px !important; background: #fff !important;
  color: var(--pia-ink) !important; cursor: pointer;
}
/* ---- 3. MEMBER DIRECTORY ---- */
.WaGadgetMemberDirectory { font-family: var(--pia-font-body) !important; }
.pia-directory-header {
  background: var(--pia-surface);
  padding: clamp(32px, 5vw, 48px) 28px;
  border-top: 3px solid transparent;
  border-image: var(--pia-spectrum) 1;
  margin-bottom: 32px;
}
.pia-directory-header h2 { font-family: var(--pia-font-display) !important; color: #fff !important; margin: 0 0 8px; }
.pia-directory-header h2::after { display: none !important; }
.pia-directory-header p { color: rgba(255,255,255,.72) !important; font-size: 15px; margin: 0; }
.WaGadgetMemberDirectory .memberSearch,
.WaGadgetMemberDirectory .directorySearch,
.WaGadgetMemberDirectory .searchPanel {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 16px 0; margin-bottom: 24px;
  border-bottom: 1px solid var(--pia-border);
}
.WaGadgetMemberDirectory .memberSearch input[type=text],
.WaGadgetMemberDirectory .directorySearch input[type=text],
.WaGadgetMemberDirectory input.searchField {
  font-family: var(--pia-font-body) !important; font-size: 14px;
  border: 1px solid var(--pia-border) !important; border-radius: 8px !important;
  padding: 10px 16px !important; background: #fff !important;
  color: var(--pia-ink) !important; flex: 1; min-width: 220px;
  transition: border-color .2s, box-shadow .2s;
}
.WaGadgetMemberDirectory input.searchField:focus {
  border-color: var(--pia-primary) !important;
  box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.12); outline: none;
}
.WaGadgetMemberDirectory .searchButton,
.WaGadgetMemberDirectory .memberSearch input[type=submit] {
  font-family: var(--pia-font-display) !important; font-weight: 600;
  background: var(--pia-gold) !important; color: var(--pia-ink) !important;
  border: none !important; border-radius: 8px !important;
  padding: 10px 22px !important; cursor: pointer; transition: background .2s ease;
}
.WaGadgetMemberDirectory .searchButton:hover { background: var(--pia-gold-deep) !important; }
.WaGadgetMemberDirectory .filterChips,
.WaGadgetMemberDirectory .categoryFilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.WaGadgetMemberDirectory .filterChip,
.WaGadgetMemberDirectory .categoryFilter a {
  font-family: var(--pia-font-display) !important; font-size: 12.5px; font-weight: 500;
  background: var(--pia-tint); color: var(--pia-body-col) !important;
  border: 1px solid var(--pia-border); border-radius: 100px;
  padding: 5px 14px; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.WaGadgetMemberDirectory .filterChip:hover,
.WaGadgetMemberDirectory .categoryFilter a:hover,
.WaGadgetMemberDirectory .filterChip.active,
.WaGadgetMemberDirectory .categoryFilter a.active {
  background: var(--pia-primary) !important; border-color: var(--pia-primary); color: #fff !important;
}
.WaGadgetMemberDirectory .memberList,
.WaGadgetMemberDirectory .directoryList {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.WaGadgetMemberDirectory .memberListItem,
.WaGadgetMemberDirectory .directoryItem {
  background: #fff !important; border: 1px solid var(--pia-border) !important;
  border-radius: var(--pia-radius) !important; padding: 24px !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.WaGadgetMemberDirectory .memberListItem:hover,
.WaGadgetMemberDirectory .directoryItem:hover {
  border-color: var(--pia-primary) !important;
  box-shadow: 0 14px 40px -22px rgba(11, 18, 38, 0.32);
  transform: translateY(-2px);
}
.WaGadgetMemberDirectory .memberListItem::before,
.WaGadgetMemberDirectory .directoryItem::before {
  content: ""; display: block; width: 34px; height: 3px;
  border-radius: 2px; background: var(--pia-cyan); margin-bottom: 16px;
}
.WaGadgetMemberDirectory .memberName,
.WaGadgetMemberDirectory .memberOrg,
.WaGadgetMemberDirectory .directoryItem .orgName {
  font-family: var(--pia-font-display) !important; font-size: 16px; font-weight: 600;
  color: var(--pia-ink) !important; margin: 0 0 6px;
}
.WaGadgetMemberDirectory .memberName a,
.WaGadgetMemberDirectory .directoryItem .orgName a { color: var(--pia-ink) !important; text-decoration: none; }
.WaGadgetMemberDirectory .memberName a:hover { color: var(--pia-primary) !important; }
.WaGadgetMemberDirectory .memberType,
.WaGadgetMemberDirectory .memberLevel {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--pia-primary) !important; background: rgba(30, 79, 216, 0.08);
  border-radius: 4px; padding: 2px 8px; margin-bottom: 10px;
}
.WaGadgetMemberDirectory .memberInfo,
.WaGadgetMemberDirectory .memberDetails,
.WaGadgetMemberDirectory .directoryItem .contactInfo {
  font-size: 13.5px; color: var(--pia-body-col) !important; line-height: 1.6;
}
.WaGadgetMemberDirectory .memberInfo a { color: var(--pia-primary) !important; }
.WaGadgetMemberDirectory .memberPhoto img,
.WaGadgetMemberDirectory .memberLogo img {
  border-radius: 6px; border: 1px solid var(--pia-border);
  max-width: 100%; height: auto; margin-bottom: 12px;
}
.WaGadgetMemberDirectory .alphabetFilter,
.WaGadgetMemberDirectory .alphaNav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; }
.WaGadgetMemberDirectory .alphabetFilter a,
.WaGadgetMemberDirectory .alphaNav a {
  font-family: var(--pia-font-display) !important; font-size: 13px; font-weight: 600;
  color: var(--pia-body-col) !important; background: var(--pia-tint);
  border: 1px solid var(--pia-border); border-radius: 5px;
  padding: 4px 9px; text-decoration: none; transition: all .15s ease;
}
.WaGadgetMemberDirectory .alphabetFilter a:hover,
.WaGadgetMemberDirectory .alphaNav a:hover {
  background: var(--pia-primary); border-color: var(--pia-primary); color: #fff !important;
}
/* ---- 4. BLOG / NEWS ---- */
.WaGadgetBlog { font-family: var(--pia-font-body) !important; }
.WaGadgetBlog .blogPostItem:first-child { border-left: 3px solid var(--pia-cyan) !important; }
.WaGadgetBlog .blogPostItem { position: relative; overflow: hidden; }
.WaGadgetBlog .blogPostTag,
.WaGadgetBlog .blogCategory,
.WaGadgetBlog .postCategory {
  display: inline-block;
  font-family: var(--pia-font-display) !important; font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--pia-primary) !important; background: rgba(30, 79, 216, 0.08);
  border-radius: 4px; padding: 2px 8px; margin-bottom: 10px;
}
.WaGadgetBlog .blogPostTitle,
.WaGadgetBlog .blogPostItem h2,
.WaGadgetBlog .blogPostItem h3 {
  font-family: var(--pia-font-display) !important;
  font-size: clamp(17px, 2vw, 20px); font-weight: 600;
  color: var(--pia-ink) !important; margin: 0 0 8px; line-height: 1.25;
}
.WaGadgetBlog .blogPostTitle a { color: var(--pia-ink) !important; text-decoration: none; transition: color .15s ease; }
.WaGadgetBlog .blogPostTitle a:hover { color: var(--pia-primary) !important; }
.WaGadgetBlog .blogPostMeta,
.WaGadgetBlog .blogPostDate,
.WaGadgetBlog .blogPostAuthor { font-size: 12.5px; color: var(--pia-muted) !important; margin-bottom: 10px; }
.WaGadgetBlog .blogPostExcerpt,
.WaGadgetBlog .blogPostBody { font-size: 14.5px; line-height: 1.7; color: var(--pia-body-col) !important; }
.WaGadgetBlog .blogPostReadMore a,
.WaGadgetBlog .readMore a {
  font-family: var(--pia-font-display) !important; font-size: 13.5px; font-weight: 600;
  color: var(--pia-primary) !important; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 12px; transition: color .15s ease;
}
/* Base colour is already forced to green further down (Deep Forest
   override), so hover keeps the same green and adds an underline for
   feedback instead of a colour jump that wouldn't be visible. */
.WaGadgetBlog .blogPostReadMore a:hover { color: var(--pia-primary) !important; text-decoration: underline !important; }
.WaGadgetBlog .blogPostReadMore a::after { content: "→"; }
.WaGadgetBlog .blogPagination,
.WaGadgetBlog .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.WaGadgetBlog .blogPagination a,
.WaGadgetBlog .pagination a,
.WaGadgetBlog .pagination span {
  font-family: var(--pia-font-display) !important; font-size: 13px; font-weight: 600;
  border: 1px solid var(--pia-border); border-radius: 6px; padding: 6px 12px;
  text-decoration: none; color: var(--pia-body-col) !important;
  background: #fff; transition: all .15s ease;
}
.WaGadgetBlog .blogPagination a:hover,
.WaGadgetBlog .pagination a:hover {
  background: var(--pia-primary); border-color: var(--pia-primary); color: #fff !important;
}
.WaGadgetBlog .blogPagination .current,
.WaGadgetBlog .pagination .currentPage {
  background: var(--pia-ink) !important; border-color: var(--pia-ink) !important; color: #fff !important;
}
.WaGadgetRecentBlogPosts { font-family: var(--pia-font-body) !important; }
.WaGadgetRecentBlogPosts ul { list-style: none; padding: 0; margin: 0; }
.WaGadgetRecentBlogPosts li {
  border-radius: var(--pia-radius); border: 1px solid var(--pia-border);
  background: #fff; padding: 16px 18px; margin-bottom: 12px;
  transition: border-color .2s ease;
}
.WaGadgetRecentBlogPosts li:hover { border-color: var(--pia-primary); }
.WaGadgetRecentBlogPosts li a {
  font-family: var(--pia-font-display) !important; font-size: 14px; font-weight: 500;
  color: var(--pia-ink) !important; text-decoration: none;
}
.WaGadgetRecentBlogPosts li a:hover { color: var(--pia-primary) !important; }
.WaGadgetRecentBlogPosts .postDate { display: block; font-size: 12px; color: var(--pia-muted) !important; margin-top: 3px; }
/* ---- 5. MEMBERSHIP APPLICATION ---- */
.WaGadgetMembershipApplication { font-family: var(--pia-font-body) !important; max-width: 860px; margin: 0 auto; }
.WaGadgetMembershipApplication h1,
.WaGadgetMembershipApplication h2 { font-family: var(--pia-font-display) !important; color: var(--pia-ink) !important; }
.WaGadgetMembershipApplication .membershipSteps,
.WaGadgetMembershipApplication .wizardSteps,
.WaGadgetMembershipApplication .progressBar {
  display: flex; gap: 0; margin-bottom: 36px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--pia-border);
}
.WaGadgetMembershipApplication .membershipStep,
.WaGadgetMembershipApplication .wizardStep {
  flex: 1; text-align: center; padding: 12px 8px;
  font-family: var(--pia-font-display) !important; font-size: 13px; font-weight: 500;
  background: var(--pia-tint); color: var(--pia-muted) !important;
  border-right: 1px solid var(--pia-border);
}
.WaGadgetMembershipApplication .membershipStep:last-child,
.WaGadgetMembershipApplication .wizardStep:last-child { border-right: none; }
.WaGadgetMembershipApplication .membershipStep.active,
.WaGadgetMembershipApplication .wizardStep.current {
  background: var(--pia-ink) !important; color: var(--pia-gold) !important;
}
.WaGadgetMembershipApplication .membershipStep.completed,
.WaGadgetMembershipApplication .wizardStep.done {
  background: var(--pia-primary) !important; color: #fff !important;
}
.WaGadgetMembershipApplication .membershipLevelList {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px;
}
.WaGadgetMembershipApplication .membershipLevelItem {
  background: #fff !important; border: 2px solid var(--pia-border) !important;
  border-radius: var(--pia-radius) !important; padding: 22px 20px !important;
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.WaGadgetMembershipApplication .membershipLevelItem:hover { border-color: var(--pia-primary) !important; }
.WaGadgetMembershipApplication .membershipLevelItem.selected,
.WaGadgetMembershipApplication .membershipLevelItem input[type=radio]:checked + label {
  border-color: var(--pia-primary) !important; box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.15);
}
.WaGadgetMembershipApplication .membershipLevelItem::before {
  content: ""; display: block; width: 34px; height: 3px;
  border-radius: 2px; background: var(--pia-spectrum); margin-bottom: 14px;
}
.WaGadgetMembershipApplication .membershipLevelHeader,
.WaGadgetMembershipApplication .levelName {
  font-family: var(--pia-font-display) !important; font-size: 16px; font-weight: 600;
  color: var(--pia-ink) !important; margin: 0 0 6px;
}
.WaGadgetMembershipApplication .membershipLevelPrice,
.WaGadgetMembershipApplication .levelPrice {
  font-family: var(--pia-font-display) !important; font-size: 20px; font-weight: 700;
  color: var(--pia-primary) !important; margin-bottom: 8px;
}
.WaGadgetMembershipApplication .membershipLevelDescription,
.WaGadgetMembershipApplication .levelDescription {
  font-size: 13.5px; color: var(--pia-body-col) !important; line-height: 1.55;
}
.WaGadgetMembershipApplication .formSection,
.WaGadgetMembershipApplication .fieldSection {
  background: var(--pia-tint); border: 1px solid var(--pia-border);
  border-radius: var(--pia-radius); padding: 24px; margin-bottom: 20px;
}
.WaGadgetMembershipApplication .formSection h3,
.WaGadgetMembershipApplication .sectionTitle {
  font-family: var(--pia-font-display) !important; font-size: 15px; font-weight: 600;
  color: var(--pia-ink) !important; margin: 0 0 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--pia-border);
}
.WaGadgetMembershipApplication label,
.WaGadgetMembershipApplication .fieldLabel {
  font-family: var(--pia-font-body) !important; font-size: 13.5px; font-weight: 500;
  color: var(--pia-ink) !important; display: block; margin-bottom: 5px;
}
.WaGadgetMembershipApplication .required,
.WaGadgetMembershipApplication .fieldRequired { color: #E03E3E !important; margin-left: 2px; }
.WaGadgetMembershipApplication .formNavigation,
.WaGadgetMembershipApplication .wizardNavigation {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--pia-border);
}
.WaGadgetMembershipApplication .prevButton,
.WaGadgetMembershipApplication .backButton {
  font-family: var(--pia-font-display) !important; font-size: 14px; font-weight: 600;
  background: var(--pia-tint) !important; color: var(--pia-ink) !important;
  border: 1px solid var(--pia-border) !important; border-radius: 8px !important;
  padding: 11px 22px !important; cursor: pointer; transition: background .2s ease;
}
.WaGadgetMembershipApplication .prevButton:hover { background: var(--pia-border) !important; }
.WaGadgetMembershipApplication .nextButton,
.WaGadgetMembershipApplication .submitButton {
  font-family: var(--pia-font-display) !important; font-size: 14px; font-weight: 600;
  background: var(--pia-gold) !important; color: var(--pia-ink) !important;
  border: none !important; border-radius: 8px !important; padding: 11px 28px !important;
  cursor: pointer; transition: background .2s ease, transform .15s ease;
}
.WaGadgetMembershipApplication .nextButton:hover,
.WaGadgetMembershipApplication .submitButton:hover {
  background: var(--pia-gold-deep) !important; transform: translateY(-1px);
}
.WaGadgetMembershipApplication .confirmationMessage,
.WaGadgetMembershipApplication .successMessage {
  background: rgba(30, 79, 216, 0.06);
  border: 1px solid rgba(30, 79, 216, 0.20);
  border-left: 4px solid var(--pia-primary);
  border-radius: var(--pia-radius); padding: 24px 28px;
  font-size: 15px; color: var(--pia-ink) !important; line-height: 1.6;
}
/* ============================================================
   HERO GADGET
   ============================================================ */
.pia-hero { position: relative; overflow: hidden; background: #0B1226; font-family: 'Inter', sans-serif; }
.pia-orb-layer { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.pia-orb {
  position: absolute; border-radius: 50%; filter: blur(60px);
  animation: piaDrift 16s ease-in-out infinite alternate;
}
@keyframes piaDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-34px,24px) scale(1.1); }
}
.pia-photon {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; opacity: 0;
  box-shadow: 0 0 18px 6px rgba(79,227,255,.85), 0 0 50px 22px rgba(45,91,255,.45);
  pointer-events: none; will-change: transform, opacity; transition: opacity .4s ease;
}
.pia-beam-in {
  position: absolute; top: 64%; left: 0; width: 46%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55));
  transform: rotate(2deg); transform-origin: right center; pointer-events: none;
}
.pia-beam-out {
  position: absolute; top: 64%; left: 46%; width: 54%; height: 2px;
  transform-origin: left center; opacity: .8; pointer-events: none;
}
.pia-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0B1226 30%, rgba(11,18,38,.42) 52%, rgba(11,18,38,0) 75%);
}
.pia-spectrum-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #4FE3FF, #2D5BFF 35%, #A78BFA 65%, #F5B82E);
}
.pia-hero-inner {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: clamp(64px, 9vw, 96px) 28px clamp(60px, 8vw, 88px);
}
.pia-gold-rule { width: 56px; height: 3px; background: #F5B82E; border-radius: 2px; margin-bottom: 26px; }
.pia-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 4.6vw, 46px); font-weight: 700;
  line-height: 1.12; color: #fff !important; letter-spacing: -0.02em; margin: 0 0 20px;
}
.pia-hero-sub { color: rgba(255,255,255,.74) !important; font-size: 17px; line-height: 1.65; max-width: 58ch; margin: 0 0 32px; }
.pia-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.pia-stats { background: #F3F6FC; border-bottom: 1px solid #E3E9F4; }
.pia-stats-inner {
  max-width: 1180px; margin: 0 auto; padding: 26px 28px;
  display: flex; gap: clamp(28px, 6vw, 70px); flex-wrap: wrap;
}
.pia-stats strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 26px; color: #0B1226; }
.pia-stats span { font-size: 13px; color: #5A6786; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  #id_mU5tEsu .WaLayoutTable,
  #id_mU5tEsu .WaLayoutTable tbody,
  #id_mU5tEsu .WaLayoutTable tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }
  #id_rdwJ1qM {
    flex: 1 !important;
    width: auto !important;
    padding: 12px 0 12px 20px !important;
  }
  #id_v1vW39L,
  #id_mU5tEsu .WaLayoutSeparator { display: none !important; }
  #id_HHgnNmr {
    flex-shrink: 0 !important;
    width: auto !important;
    padding: 12px 20px 12px 0 !important;
    margin-top: 0 !important;
  }
  #id_b7E38S1 .pia-profile-wrap,
  #id_b7E38S1 > a.pia-btn-gold { display: none !important; }
  .pia-burger-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
  }
  .pia-burger-btn span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #0B1226 !important;
    border-radius: 2px !important;
  }
  #pia-mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    background: #0B1226 !important;
    z-index: 9999 !important;
    padding: 80px 32px 40px !important;
    overflow-y: auto !important;
    display: none;
  }
  #pia-mobile-menu.pia-open { display: block !important; }
  .pia-mobile-close {
    position: absolute !important;
    top: 20px !important; right: 20px !important;
    background: none !important; border: none !important;
    color: #ffffff !important; font-size: 32px !important;
    line-height: 1 !important; cursor: pointer !important; padding: 4px !important;
  }
  #pia-mobile-nav a {
    display: block !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important; font-weight: 600 !important;
    color: #ffffff !important; text-decoration: none !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  #pia-mobile-nav a.pia-sub {
    font-size: 15px !important; font-weight: 400 !important;
    padding-left: 20px !important; color: rgba(255,255,255,0.7) !important;
  }
  /* Left gold here on purpose: mobile menu background is the same dark
     green, so a green hover would barely be visible against it. */
  #pia-mobile-nav a:hover,
  #pia-mobile-nav a.pia-sub:hover { color: #F5B82E !important; }
  #pia-mobile-auth {
    margin-top: 32px !important;
    padding-top: 32px !important;
  }
  #pia-mobile-auth a {
    display: block !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #4FE3FF !important;
    text-decoration: none !important;
    padding: 14px 0 !important;
  }
  #pia-mobile-auth a:last-child { border-bottom: none !important; }
  #pia-mobile-auth a:hover { color: #F5B82E !important; }
}
#pia-mobile-auth .pia-mobile-name {
  display: block !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #F5B82E !important;
  padding: 0 0 16px !important;
  letter-spacing: 0.01em !important;
}
@media (max-width: 640px) {
  .WaGadgetEventsList .eventListItem { flex-direction: column; gap: 12px; }
  .WaGadgetEventsList .eventListDate,
  .WaGadgetEventsList .dateBox {
    width: 100%; flex-direction: row; min-height: auto; gap: 8px; padding: 10px 14px;
  }
  .WaGadgetMemberDirectory .memberList,
  .WaGadgetMemberDirectory .directoryList { grid-template-columns: 1fr; }
  .WaGadgetMembershipApplication .membershipLevelList { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .pia-orb { animation: none; }
  .pia-photon { display: none; }
  .WaGadgetEventsList .eventListItem,
  .WaGadgetMemberDirectory .memberListItem,
  .WaGadgetBlog .blogPostItem,
  .WaGadgetMembershipApplication .membershipLevelItem {
    transition: none !important; transform: none !important;
  }
}
#id_z6amMgK img {
  height: 68px !important;
  width: auto !important;
  max-width: none !important;
}
/* ============ INNER PAGE HERO ============ */
.pia-ph-wrap {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pia-ink);
  font-family: var(--pia-font-body);
  box-sizing: border-box;
}
.pia-ph-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 28px 48px;
}
.pia-ph-rule {
  width: 56px;
  height: 3px;
  background: var(--pia-gold);
  border-radius: 2px;
  margin-bottom: 0px;
}
.pia-ph-title {
  font-family: var(--pia-font-display) !important;
  font-size: clamp(28px, 3.8vw, 38px);
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 14px !important;
}
.pia-ph-title::after { display: none !important; }
.pia-ph-sub {
  color: rgba(255,255,255,0.70) !important;
  font-size: 16px;
  line-height: 1.7;
  max-width: 76ch;
  margin: 0 !important;
}
.pia-ph-edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--pia-spectrum);
}
/* ============ BOARD OF DIRECTORS ============ */
.pia-bod-section {
  background: var(--pia-tint);
  font-family: var(--pia-font-body);
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}
.pia-bod-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 28px 60px;
}
.pia-bod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.pia-bod-card {
  background: var(--pia-paper);
  border-radius: var(--pia-radius);
  border: 1px solid var(--pia-border);
  border-top: 3px solid var(--pia-cyan);
  box-shadow: 0 2px 12px rgba(11,18,38,0.06);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}
.pia-bod-card:hover { box-shadow: 0 8px 28px rgba(11,18,38,0.12); }
.pia-bod-card-top {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}
.pia-bod-photo {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; border: none;
  flex-shrink: 0; background: #FFFFFF; display: block;
}
.pia-bod-initials {
  width: 96px; height: 96px; border-radius: 50%;
  border: none;
  background: var(--pia-ink); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pia-font-display); font-size: 26px; font-weight: 700;
  color: var(--pia-cyan);
}
.pia-bod-meta { flex: 1; min-width: 0; }
.pia-bod-name {
  font-family: var(--pia-font-display); font-size: 17px; font-weight: 700;
  color: var(--pia-ink); line-height: 1.2; margin: 0 0 3px !important;
}
.pia-bod-name::after { display: none !important; }
.pia-bod-phonetic { font-size: 12px; color: var(--pia-muted); font-style: italic; margin: 0 0 7px !important; }
.pia-bod-title {
  font-family: var(--pia-font-display); font-size: 12.5px;
  color: var(--pia-primary); font-weight: 500; line-height: 1.45; margin: 0 !important;
}
.pia-bod-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pia-bod-pronounce {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--pia-gold); border: none; border-radius: 8px;
  color: var(--pia-ink); font-family: var(--pia-font-display);
  font-size: 11.5px; font-weight: 600; padding: 6px 14px;
  cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
}
.pia-bod-pronounce:hover { background: var(--pia-gold-deep); transform: translateY(-1px); }
.pia-bod-pronounce svg { width: 11px; height: 11px; flex-shrink: 0; }
.pia-bod-linkedin {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--pia-ink); border-radius: 8px;
  color: var(--pia-ink); font-family: var(--pia-font-display);
  font-size: 11.5px; font-weight: 500; padding: 6px 14px;
  text-decoration: none; transition: background 0.15s ease;
}
.pia-bod-linkedin:hover { background: rgba(11,18,38,0.06); }
.pia-bod-linkedin svg { width: 11px; height: 11px; flex-shrink: 0; }
.pia-bod-bio {
  font-size: 13.5px; color: var(--pia-body-col); line-height: 1.75;
  border-top: 1px solid var(--pia-border); padding-top: 18px;
  margin: 0 !important; flex: 1;
}
@media (max-width: 700px) {
  .pia-bod-grid { grid-template-columns: 1fr; }
}
/* ============ CONTENT COLUMN WIDTH ============ */
.WaGadgetContentEditor,
.WaGadgetContentEditor > div,
.zoneContent .WaPlaceHolder > div {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ============ PIA FOOTER ============ */
.pia-footer *,
.pia-footer *::before,
.pia-footer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.pia-footer {
  position: relative;
  background: #0B1226;
  overflow: hidden;
  font-family: 'Space Grotesk', sans-serif;
  width: 100%;
}
.pia-footer__orb-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.pia-footer__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: piaOrbDrift 14s ease-in-out infinite alternate;
}
@keyframes piaOrbDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-22px, 14px) scale(1.07); }
}
.pia-footer__photon {
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; opacity: 0;
  pointer-events: none; will-change: transform, opacity;
  transition: opacity 0.3s ease;
  box-shadow: 0 0 18px 6px rgba(79, 227, 255, 0.85), 0 0 50px 22px rgba(45, 91, 255, 0.45);
  z-index: 1;
}
.pia-footer__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #0B1226 28%, rgba(11, 18, 38, 0.55) 50%, rgba(11, 18, 38, 0) 74%);
  z-index: 2;
}
.pia-footer__beam {
  position: absolute; height: 2px; pointer-events: none; bottom: 100px; z-index: 1;
}
.pia-footer__beam--in {
  left: 0; width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35));
  transform: rotate(-1deg); transform-origin: right center;
}
.pia-footer__beam--cyan,
.pia-footer__beam--blue,
.pia-footer__beam--purple,
.pia-footer__beam--gold {
  left: 28%; width: 72%; opacity: 0.7; transform-origin: left center;
}
.pia-footer__beam--cyan   { background: linear-gradient(90deg, #4FE3FF, transparent 85%); transform: rotate(-9deg); }
.pia-footer__beam--blue   { background: linear-gradient(90deg, #2D5BFF, transparent 85%); transform: rotate(-3deg); }
.pia-footer__beam--purple { background: linear-gradient(90deg, #A78BFA, transparent 85%); transform: rotate(4deg); }
.pia-footer__beam--gold   { background: linear-gradient(90deg, #F5B82E, transparent 85%); transform: rotate(11deg); }
.pia-footer__inner {
  position: relative; z-index: 3;
  padding: 52px 48px 28px;
  max-width: 1180px; margin-left: auto; margin-right: auto;
}
.pia-footer__grid {
  display: grid; grid-template-columns: 5fr 4fr;
  gap: 36px; margin-bottom: 32px;
}
.pia-footer__brand { margin-bottom: 26px; }
.pia-footer__brand-label {
  display: block; font-size: 15px; letter-spacing: 0.12em;
  color: #F5B82E; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;
}
.pia-footer__brand-rule {
  width: 28px; height: 1.5px;
  background: rgba(245, 184, 46, 0.35); margin-bottom: 12px;
}
.pia-footer__brand-tagline { font-size: 16px; color: rgba(255, 255, 255, 0.78); line-height: 1.65; }
.pia-spectrum {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px; padding: 18px;
}
.pia-spectrum__header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pia-spectrum__bar {
  display: flex; width: 22px; height: 3px;
  border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.pia-spectrum__bar span { flex: 1; }
.pia-spectrum__bar span:nth-child(1) { background: #4FE3FF; }
.pia-spectrum__bar span:nth-child(2) { background: #2D5BFF; }
.pia-spectrum__bar span:nth-child(3) { background: #A78BFA; }
.pia-spectrum__bar span:nth-child(4) { background: #F5B82E; }
.pia-spectrum__name { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: 0.08em; }
.pia-spectrum__free {
  font-size: 10px; font-weight: 600; color: #4FE3FF;
  background: rgba(79, 227, 255, 0.12); border: 0.5px solid rgba(79, 227, 255, 0.25);
  padding: 2px 7px; border-radius: 20px; letter-spacing: 0.04em; margin-left: auto;
}
.pia-spectrum__desc { font-size: 14px; color: rgba(255, 255, 255, 0.72); line-height: 1.6; margin-bottom: 16px; }
.pia-spectrum__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.pia-spectrum__pill { font-size: 12px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.pia-spectrum__pill--cyan   { color: #4FE3FF; background: rgba(79,  227, 255, 0.08); border: 0.5px solid rgba(79,  227, 255, 0.2); }
.pia-spectrum__pill--purple { color: #A78BFA; background: rgba(167, 139, 250, 0.08); border: 0.5px solid rgba(167, 139, 250, 0.2); }
.pia-spectrum__pill--gold   { color: #F5B82E; background: rgba(245, 184,  46, 0.08); border: 0.5px solid rgba(245, 184,  46, 0.2); }
.pia-spectrum__pill--muted  { color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.18); }
.pia-spectrum__form { display: flex; flex-direction: column; gap: 8px; }
.pia-spectrum__inputs { display: flex; gap: 8px; }
.pia-spectrum__input {
  background: rgba(255, 255, 255, 0.07); border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px; padding: 10px 12px; font-size: 15px; color: #fff;
  font-family: 'Space Grotesk', sans-serif; min-width: 0; outline: none;
}
.pia-spectrum__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.pia-spectrum__input:focus { border-color: rgba(79, 227, 255, 0.4); }
.pia-spectrum__input--name  { flex: 1; }
.pia-spectrum__input--email { flex: 1.7; }
.pia-spectrum__success { font-size: 14px; color: #4FE3FF; padding: 10px 0 8px; letter-spacing: 0.02em; }
.pia-spectrum__btn {
  width: 100%; background: #F5B82E; border: none; border-radius: 8px;
  padding: 14px 30px; font-size: 15px; font-weight: 600; color: #0B1226;
  cursor: pointer; font-family: 'Space Grotesk', sans-serif;
  transition: background 0.2s ease, transform 0.15s ease;
}
.pia-spectrum__btn:hover { background: #D99410; transform: translateY(-1px); }
.pia-spectrum__btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.pia-footer__nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px 12px; align-content: start; text-align: right;
}
.pia-footer__nav-heading {
  font-size: 13px; font-weight: 700; color: #fff !important;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; text-align: right;
}
.zoneFooter1 .pia-footer__nav-heading,
.WaPlaceHolderFooter1 .pia-footer__nav-heading { color: #fff !important; }
.pia-footer__nav a {
  font-size: 15px; color: rgba(255, 255, 255, 0.75);
  text-decoration: none; display: block; margin-bottom: 9px;
  transition: color 0.15s; text-align: right;
}
.pia-footer__nav a:last-child { margin-bottom: 0; }
/* Left white here too: dark green footer, same contrast reasoning as the
   mobile nav above. */
.pia-footer__nav a:hover { color: rgba(255, 255, 255, 0.98); }
.pia-footer__legal {
  position: relative; z-index: 3; padding: 0 48px 22px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 1180px; margin-left: auto; margin-right: auto;
}
.pia-footer__copyright { font-size: 13px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; }
.pia-footer__legal-links { display: flex; gap: 20px; list-style: none; }
.pia-footer__legal-links a { font-size: 13px; color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color 0.15s; }
.pia-footer__legal-links a:hover { color: rgba(255, 255, 255, 0.9); }
@media (max-width: 768px) {
  .pia-footer__orb-layer, .pia-footer__photon, .pia-footer__vignette { display: none; }
  .pia-footer__beam { bottom: 80px; }
  .pia-footer__inner { padding: 36px 24px 24px; }
  .pia-footer__grid { grid-template-columns: 1fr; margin-bottom: 0; }
  .pia-footer__brand { margin-bottom: 0; }
  .pia-spectrum { margin-top: 28px; margin-bottom: 32px; }
  .pia-spectrum__inputs { flex-direction: column; }
  .pia-spectrum__input--email { flex: unset; }
  .pia-footer__nav { gap: 24px 16px; margin-bottom: 40px; text-align: left; }
  .pia-footer__nav-heading { text-align: left; }
  .pia-footer__nav a { text-align: left; }
  .pia-footer__legal { padding: 0 24px 24px; gap: 10px; }
  .pia-footer__legal-links { gap: 16px; flex-wrap: wrap; }
}
/* Wild Apricot branding hide */
.WaFooterMessage, #WaPoweredByMessage,
[class*="WaPowered"], [id*="WaPowered"] { display: none !important; }
#idFooterPoweredByContainer { display: none !important; }
/* Full-width fix */
.zoneFooter1 .container_12 {
  max-width: none !important; width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
.zoneFooter1 .s1_grid_12, .zoneFooter1 .s2_grid_12, .zoneFooter1 .s3_grid_12 {
  width: 100% !important; margin: 0 !important;
}
.zoneFooter1 .gadgetStyleBody, .zoneFooter1 #idFooterContentHolder { padding: 0 !important; margin: 0 !important; }
.zoneFooter1 .gadgetStyleTitle { display: none !important; }
.WaPlaceHolderFooter > div { padding: 0 !important; }
/* ============================================================
   PIA - Deep Forest palette override
   Drop at the END of the existing theme CSS to activate.
   Reverts cleanly by removing this block.
   ============================================================ */
:root {
  /* Base darks: navy to Deep Forest */
  --pia-ink:      #0C1E12;
  --pia-surface:  #132818;
  /* Interactive: Authority Blue to Emerald */
  --pia-primary:  #1A8C6A;
  /* Surfaces: faint green tint instead of blue-tint */
  --pia-tint:     #F4F9F6;
  --pia-border:   #DFF0E6;
  /* Everything below is UNCHANGED, listed for clarity */
  --pia-gold:     #F5B82E;
  --pia-gold-deep:#D99410;
  --pia-cyan:     #4FE3FF;
  --pia-violet:   #A78BFA;
  --pia-body-col: #44507A;
  --pia-muted:    #5A6786;
}
/* Hardcoded #0B1226 references that don't use var(--pia-ink) */
.pia-hero              { background: #0C1E12; }
#pia-mobile-menu       { background: #0C1E12 !important; }
.pia-footer            { background: #0C1E12; }
.pia-hero-title        { color: #fff !important; }
/* Auth link - was blue underline, now emerald */
.pia-auth-link {
  color: #1A8C6A !important;
  border-bottom-color: #1A8C6A !important;
}
.pia-auth-link:hover {
  color: #126B50 !important;
  border-bottom-color: #126B50 !important;
}
/* Form focus ring */
.fieldContainer input:focus,
.fieldContainer textarea:focus {
  border-color: #1A8C6A !important;
  box-shadow: 0 0 0 3px rgba(26,140,106,0.15) !important;
}
/* Directory search focus */
.WaGadgetMemberDirectory input.searchField:focus {
  border-color: #1A8C6A !important;
  box-shadow: 0 0 0 3px rgba(26,140,106,0.12) !important;
}
/* Calendar today highlight */
.WaGadgetEventCalendar td.calendarToday,
.WaGadgetEventCalendar .calendarToday {
  background: rgba(26,140,106,0.06) !important;
  border-color: #1A8C6A !important;
}
.WaGadgetEventCalendar td.calendarToday .dayNumber { color: #1A8C6A; }
/* Calendar nav buttons hover */
.WaGadgetEventCalendar .calendarNavigation a:hover {
  background: #1A8C6A !important;
  border-color: #1A8C6A;
}
/* Calendar event chips */
.WaGadgetEventCalendar .eventCalendarEvent,
.WaGadgetEventCalendar .calendarEvent { background: #1A8C6A !important; }
/* Member type badge */
.WaGadgetMemberDirectory .memberType,
.WaGadgetMemberDirectory .memberLevel {
  color: #1A8C6A !important;
  background: rgba(26,140,106,0.08);
}
/* Blog category chip */
.WaGadgetBlog .blogPostTag,
.WaGadgetBlog .blogCategory,
.WaGadgetBlog .postCategory {
  color: #1A8C6A !important;
  background: rgba(26,140,106,0.08);
}
/* Blog read more */
.WaGadgetBlog .blogPostReadMore a,
.WaGadgetBlog .readMore a { color: #1A8C6A !important; }
/* Membership step completed */
.WaGadgetMembershipApplication .membershipStep.completed,
.WaGadgetMembershipApplication .wizardStep.done { background: #1A8C6A !important; }
/* Membership level selected ring */
.WaGadgetMembershipApplication .membershipLevelItem.selected,
.WaGadgetMembershipApplication .membershipLevelItem input[type=radio]:checked + label {
  border-color: #1A8C6A !important;
  box-shadow: 0 0 0 3px rgba(26,140,106,0.15);
}
/* Membership level price */
.WaGadgetMembershipApplication .membershipLevelPrice,
.WaGadgetMembershipApplication .levelPrice { color: #1A8C6A !important; }
/* Filter chips active */
.WaGadgetMemberDirectory .filterChip:hover,
.WaGadgetMemberDirectory .categoryFilter a:hover,
.WaGadgetMemberDirectory .filterChip.active,
.WaGadgetMemberDirectory .categoryFilter a.active {
  background: #1A8C6A !important;
  border-color: #1A8C6A;
}
/* Pagination hover */
.WaGadgetBlog .blogPagination a:hover,
.WaGadgetBlog .pagination a:hover,
.WaGadgetEventCalendar .calendarNavigation a {
  background: #1A8C6A;
  border-color: #1A8C6A;
}
/* Profile button border */
.pia-btn-profile {
  color: #1A8C6A !important;
  border-color: #1A8C6A !important;
}
.pia-btn-profile:hover { background: rgba(26,140,106,0.06) !important; }
/* Footer vignette - update hardcoded navy to deep forest */
.pia-footer__vignette {
  background: linear-gradient(
    90deg,
    #0C1E12 28%,
    rgba(12, 30, 18, 0.55) 50%,
    rgba(12, 30, 18, 0) 74%
  );
}
/* Footer orbs - shift cyan/blue to green-adjacent tones */
/* (orb colours are inline styles; these rules handle the photon glow) */
.pia-footer__photon {
  box-shadow:
    0 0 18px 6px rgba(79, 227, 255, 0.85),
    0 0 50px 22px rgba(26, 140, 106, 0.5);
}
/* Stats bar - update hardcoded navy text */
.pia-stats strong { color: #0C1E12; }
/* Footer zone - strip WA gadget padding and force full width */
#id_Footer1,
#id_Footer1 > div,
.WaPlaceHolderFooter1,
.WaPlaceHolderFooter1 > div,
.WaPlaceHolderFooter1 .WaGadgetCustomHTML,
.WaPlaceHolderFooter1 .WaGadgetOnly,
.WaPlaceHolderFooter1 .gadgetStyleBody {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
#id_Footer1 .container_12,
.WaPlaceHolderFooter1 .container_12 {
  max-width: none !important; width: 100% !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
#id_Footer1 .s1_grid_12,
#id_Footer1 .s2_grid_12,
#id_Footer1 .s3_grid_12,
.WaPlaceHolderFooter1 .s1_grid_12,
.WaPlaceHolderFooter1 .s2_grid_12,
.WaPlaceHolderFooter1 .s3_grid_12 { width: 100% !important; margin: 0 !important; }
/* Footer beams - reordered for Deep Forest palette */
.pia-footer__beam--cyan   { background: linear-gradient(90deg, #F5B82E, transparent 85%) !important; transform: rotate(-9deg) !important; }
.pia-footer__beam--blue   { background: linear-gradient(90deg, #1A8C6A, transparent 85%) !important; transform: rotate(-3deg) !important; }
.pia-footer__beam--purple { background: linear-gradient(90deg, #4FE3FF, transparent 85%) !important; transform: rotate(4deg) !important; }
.pia-footer__beam--gold   { background: linear-gradient(90deg, #A78BFA, transparent 85%) !important; transform: rotate(11deg) !important; }
/* Hero - Deep Forest overrides */
/* Background */
.pia-hero { background: #0C1E12 !important; }
/* Vignette - navy to deep forest */
.pia-vignette {
  background: linear-gradient(
    90deg,
    #0C1E12 30%,
    rgba(12, 30, 18, 0.42) 52%,
    rgba(12, 30, 18, 0) 75%
  ) !important;
}
/* Spectrum edge gradient - blue segment to emerald */
.pia-spectrum-edge {
  background: linear-gradient(
    90deg,
    #4FE3FF,
    #1A8C6A 35%,
    #A78BFA 65%,
    #F5B82E
  ) !important;
}
/* Photon glow - blue halo to emerald */
.pia-photon {
  box-shadow:
    0 0 18px 6px rgba(79, 227, 255, 0.85),
    0 0 50px 22px rgba(26, 140, 106, 0.5) !important;
}
/* Stats bar background */
.pia-stats { background: #F4F9F6 !important; border-bottom-color: #DFF0E6 !important; }
/* COURSE LANDING PAGE CSS */
.pia-unit-cyan {
  border: 2px solid rgba(14, 116, 144, 0.35) !important;
  background: rgba(14, 116, 144, 0.04) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.pia-unit-green {
  border: 2px solid rgba(26, 140, 106, 0.35) !important;
  background: rgba(26, 140, 106, 0.04) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.pia-unit-gold {
  border: 3px solid #F5B82E !important;
  background: rgba(245, 184, 46, 0.06) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.pia-unit-violet {
  border: 2px solid rgba(167, 139, 250, 0.35) !important;
  background: rgba(167, 139, 250, 0.04) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
/* PIA - Board of Directors two-column layout rows (Website ->
   two-column layout, photo in column 1, content gadget in column
   2). Add the SAME class, pia-bod-row, to every row's "Additional
   CSS class" field in the WA layout editor, in board order. The
   border colour then rotates automatically, cyan/green/gold/
   violet/cyan/green, so nothing to pick per row. White background
   (not the tinted .pia-unit-* fill), solid 2px border on every
   colour (the gold .pia-unit-gold above is 3px elsewhere, these
   are all 2px so the rows read consistently).
   Uses :nth-child(...of .pia-bod-row) so it only counts rows that
   carry this class, ignoring any other rows/sections on the page
   that might share the same underlying tag. */
.pia-bod-row {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.pia-bod-row:nth-child(4n+1 of .pia-bod-row) { border: 2px solid #0E7490 !important; }
.pia-bod-row:nth-child(4n+2 of .pia-bod-row) { border: 2px solid #1A8C6A !important; }
.pia-bod-row:nth-child(4n+3 of .pia-bod-row) { border: 2px solid #F5B82E !important; }
.pia-bod-row:nth-child(4n+4 of .pia-bod-row) { border: 2px solid #7C5CFC !important; }
/* ============================================================
   PIA - Hide "Homepage" from desktop nav
   Append to the END of the main theme CSS sheet (Website ->
   Design -> Custom CSS), same as the Deep Forest palette block.
   Reverts cleanly by removing this block.
   Logo (.WaGadgetAccountLogo, id_z6amMgK) now links to "/" via
   the wrapLogo() script added to the header Custom HTML gadget
   (id_b7E38S1) - see PIA_Header_Gadget_Updated.html - so this
   nav entry is redundant on desktop. Left untouched on mobile,
   it's tucked behind a tap so it isn't worth the complexity of
   also editing the buildMobileNav() JS.
   Targeted by href rather than position or the "sel" class
   (which marks whichever page is currently active, not
   "Homepage" specifically) so this keeps working if the menu
   gets reordered or the homepage's Wild Apricot page title
   changes later.
   ============================================================ */
#id_EDnGrxR ul.firstLevel > li:has(> div.item > a[href="https://photonics.org.au/"]) {
  display: none !important;
}
/* ============================================================
   PIA HOMEPAGE - News & Events section, Recent News card styling
   REPLACES the existing "RECENT NEWS GADGET DESIGN" block in the
   theme sheet (the green left-border li style). Delete that old
   block and paste this in its place.
   Same border/background formula as .pia-unit-cyan and
   .pia-unit-green (2px tinted border, faint tint fill, 8px
   radius), cycled through the same four colours already used for
   the "who is this for" role pills on the course page: cyan
   (#0E7490), green (#1A8C6A), gold (#F5B82E), purple (#6D28D9).
   Uses :nth-child so it keeps rotating automatically as new blog
   posts get added, no manual per-item styling needed.
   Note: this purple (#6D28D9) is a different, deeper shade than
   --pia-violet (#A78BFA) used for the Industry Reports card and
   the footer/spectrum pills. Both now exist on the site for
   different components, worth knowing if you want to consolidate
   later.
   Update: publication date/time bumped to 14px and de-italicised
   to match the event location text exactly (font, size, colour),
   same italic-by-default issue as the events date, just never
   explicitly overridden here before.
   Update: date now right-aligned within the card, and trimmed to
   date-only (time dropped) via stripBlogPostTime() in
   PIA_Header_Gadget_Updated.html, same reasoning as
   formatEventDates: it's one plain text string, CSS can't cut
   part of it out.
   ============================================================ */
.WaGadgetRecentBlogPosts ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.WaGadgetRecentBlogPosts li {
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
}
.WaGadgetRecentBlogPosts li:nth-child(4n+1) {
  border: 2px solid rgba(14, 116, 144, 0.35) !important;
  background: rgba(14, 116, 144, 0.04) !important;
}
.WaGadgetRecentBlogPosts li:nth-child(4n+2) {
  border: 2px solid rgba(26, 140, 106, 0.35) !important;
  background: rgba(26, 140, 106, 0.04) !important;
}
.WaGadgetRecentBlogPosts li:nth-child(4n+3) {
  border: 2px solid rgba(245, 184, 46, 0.35) !important;
  background: rgba(245, 184, 46, 0.06) !important;
}
.WaGadgetRecentBlogPosts li:nth-child(4n) {
  border: 2px solid rgba(109, 40, 217, 0.35) !important;
  background: rgba(109, 40, 217, 0.04) !important;
}
.WaGadgetRecentBlogPosts .title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
  color: #0C1E12 !important;
}
.WaGadgetRecentBlogPosts .title a {
  color: inherit !important;
  text-decoration: none !important;
}
.WaGadgetRecentBlogPosts .title a:hover {
  color: #1A8C6A !important;
}
.WaGadgetRecentBlogPosts .date {
  text-align: right !important;
}
.WaGadgetRecentBlogPosts .date span {
  font-size: 14px !important;
  font-style: normal !important;
  color: #5A6786 !important;
  font-family: 'Inter', sans-serif !important;
}
.WaGadgetRecentBlogPosts .author {
  display: none !important;
}
.WaGadgetRecentBlogPosts .date::after {
  content: none !important;
}
/* ============================================================
   PIA HOMEPAGE - Upcoming Events styling
   Targets the VERIFIED live class .WaGadgetUpcomingEvents.
   Your existing "EVENTS LIST" CSS block targets
   .WaGadgetEventsList, which doesn't exist on this gadget, that
   whole block has never actually been applying. Leave it in
   place (harmless dead weight) or remove it, up to you, but
   don't expect it to do anything.
   Fixes: title and date/location font sizes bumped up, the
   italic on .dateonly removed, font-family made explicit (Inter
   was already technically applying, the italic was just making
   it read as a different font).
   Time removal: not done here, .dateonly is one text string
   ("13 Aug 2026 4:30 PM"), CSS can't cut part of it out. Check
   the gadget's own edit panel for a "show time" style setting
   first. If there isn't one, let me know and I'll write a small
   script to strip it instead.
   ============================================================ */
.WaGadgetUpcomingEvents li .title {
  font-size: 17px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #0C1E12 !important;
}
.WaGadgetUpcomingEvents li .title a {
  color: inherit !important;
  text-decoration: none !important;
}
.WaGadgetUpcomingEvents li .title a:hover {
  color: #1A8C6A !important;
}
.WaGadgetUpcomingEvents li .date {
  font-size: 15px !important;
  font-family: 'Inter', sans-serif !important;
}
.WaGadgetUpcomingEvents li .date .dateonly {
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #44507A !important;
}
.WaGadgetUpcomingEvents li .date .location {
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #5A6786 !important;
}
/* ============================================================
   PIA HOMEPAGE - Upcoming Events, two-column card design
   Targets the VERIFIED live class .WaGadgetUpcomingEvents.
   Layout: black date box spans both rows on the left (day big,
   month/year, time), title top-right, location bottom-right
   underneath it. Uses CSS Grid with display:contents on .date
   to "unwrap" it so dateonly/separator/location can be placed
   independently in the grid alongside .title (same trick as
   discussed for the earlier stacked version, now with a grid
   instead of flex order since it's a 2D layout this time).
   Colour rotation is REVERSED from the news column (purple,
   gold, green, cyan instead of cyan, green, gold, purple) so
   items sitting side by side in the two columns don't match.
   Requires the companion script in PIA_Header_Gadget_Updated.html
   (formatEventDates) to split "13 Aug 2026 4:30 PM" into the
   three separate lines shown in the date box, CSS alone can't
   parse a plain text string.
   Update: day and time bolded for visibility, month/year stays
   lighter weight as a label. Added !important + explicit
   font-family to the three inner spans directly rather than
   relying on inheritance from .dateonly, that's likely why the
   font wasn't taking before. Event title switched to Space
   Grotesk at 14px to match the news column's post titles exactly.
   ============================================================ */
.WaGadgetUpcomingEvents ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.WaGadgetUpcomingEvents li {
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  column-gap: 16px !important;
  row-gap: 4px !important;
  align-items: start !important;
  border-radius: 8px !important;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
}
.WaGadgetUpcomingEvents li:nth-child(4n+1) {
  border: 2px solid rgba(109, 40, 217, 0.35) !important;
  background: rgba(109, 40, 217, 0.04) !important;
}
.WaGadgetUpcomingEvents li:nth-child(4n+2) {
  border: 2px solid rgba(245, 184, 46, 0.35) !important;
  background: rgba(245, 184, 46, 0.06) !important;
}
.WaGadgetUpcomingEvents li:nth-child(4n+3) {
  border: 2px solid rgba(26, 140, 106, 0.35) !important;
  background: rgba(26, 140, 106, 0.04) !important;
}
.WaGadgetUpcomingEvents li:nth-child(4n) {
  border: 2px solid rgba(14, 116, 144, 0.35) !important;
  background: rgba(14, 116, 144, 0.04) !important;
}
.WaGadgetUpcomingEvents li .date {
  display: contents !important;
}
.WaGadgetUpcomingEvents li .date .separator {
  display: none !important;
}
.WaGadgetUpcomingEvents li .date .dateonly {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0C1E12 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 6px !important;
  font-style: normal !important;
  font-family: 'Space Grotesk', sans-serif !important;
  text-align: center !important;
}
.WaGadgetUpcomingEvents li .date .dateonly .pia-day {
  display: block !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}
.WaGadgetUpcomingEvents li .date .dateonly .pia-monthyear {
  display: block !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  opacity: 0.85 !important;
}
.WaGadgetUpcomingEvents li .date .dateonly .pia-time {
  display: block !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
  opacity: 0.95 !important;
}
.WaGadgetUpcomingEvents li .title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #0C1E12 !important;
  margin: 0 !important;
}
.WaGadgetUpcomingEvents li .title a {
  color: inherit !important;
  text-decoration: none !important;
}
.WaGadgetUpcomingEvents li .title a:hover {
  color: #1A8C6A !important;
}
.WaGadgetUpcomingEvents li .date .location {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #5A6786 !important;
  font-style: normal !important;
}
/* ============================================================
   PIA NEWS PAGE - Blog link colours, matched to the real markup
   The .blogPostTitle / .blogPostReadMore selectors used earlier
   in this sheet don't exist in Wild Apricot's actual blog list
   HTML (confirmed from the live DOM) - real classes are
   .boxHeaderTitle (post title link) and .boxFooterPrimaryContainer
   (the "Read more" link). Since nothing matched, the built-in
   Wild Apricot theme's own blue hover styles kept winning by
   selector specificity regardless of stylesheet load order.
   Same story on the pager: .near/.bound (Next/Last, Prev/First)
   beat the generic a:hover rule, which is why only the plain,
   class-less page-number link was already going green.
   Scoped to #idBlogPostListContainer and !important'd so these
   reliably outrank the built-in theme no matter its specificity.
   ============================================================ */
#idBlogPostListContainer .boxHeaderTitle a {
  color: var(--pia-ink) !important;
  text-decoration: none !important;
}
#idBlogPostListContainer .boxHeaderTitle a:hover {
  color: var(--pia-primary) !important;
  text-decoration: underline !important;
}
#idBlogPostListContainer .boxFooterPrimaryContainer a {
  color: var(--pia-primary) !important;
  text-decoration: none !important;
}
#idBlogPostListContainer .boxFooterPrimaryContainer a:hover {
  color: var(--pia-primary) !important;
  text-decoration: underline !important;
}
.blogPagerContainer a,
.blogPagerContainer a.near,
.blogPagerContainer a.bound {
  color: var(--pia-primary) !important;
}
.blogPagerContainer a:hover,
.blogPagerContainer a.near:hover,
.blogPagerContainer a.bound:hover {
  color: var(--pia-primary) !important;
  text-decoration: underline !important;
}
.blogPagerContainer .linkCurrent {
  color: var(--pia-ink) !important;
  font-weight: 600;
}
/* ============================================================
   PIA — Wild Apricot icon set, hidden site-wide
   The "Back to list" arrow, the post-title arrow, and the "Read
   more" dots are all the same built-in sprite image
   (icon_set.png) rendered via background-image on a ::before/
   ::after pseudo-element. Simplest fix: hide the pseudo-element
   entirely rather than recolour it, so no icon renders at all,
   just the plain text link.
   If another one of these WA icons turns up elsewhere on the
   site still showing, inspect it to confirm it's the same
   background-image (icon_set.png) on a ::before/::after, then
   add its selector to the list below.
   ============================================================ */
#idBlogPostListContainer .boxHeaderTitle a::after,
#idBlogPostListContainer .boxFooterPrimaryContainer a::before,
.pageBackContainer a::before {
  content: none !important;
  display: none !important;
}
/* ============================================================
   PIA — Wild Apricot Subscription/General form, restyled
   Scoped to .generalFormOuterContainer so it applies to any
   native WA form using this wrapper (the Spectrum subscription
   form and similar), matching the rest of the site instead of
   WA's default table layout, generic grey inputs, and stock
   button styling.
   Field rows are switched from WA's default label-left/input-
   right table cells to label-above-input, full width, since
   that's a cleaner match for a short signup form than a cramped
   two-column table.
   Input styling itself (border, radius, green focus ring) is
   already inherited from the generic .fieldContainer rule near
   the top of this sheet, this block only adds what's missing:
   the card wrapper, title, mandatory-field note, and buttons.
   ============================================================ */
.generalFormOuterContainer {
  max-width: 480px;
  margin: 0 auto;
  font-family: var(--pia-font-body);
  background: #fff;
  border: 1px solid var(--pia-border);
  border-radius: var(--pia-radius);
  padding: 32px;
}
.generalFormOuterContainer .cornersContainer { display: none !important; }
.generalFormOuterContainer .inner { padding: 0 !important; }
/* WA's rounded-corner technique wraps every section in 9 nested divs
   (d1 through d9) that carry their own padding in the base theme, on
   top of the .inner padding already zeroed above. That's what was
   showing up as extra empty space below the button row, zeroing all
   of them out here. */
.generalFormOuterContainer .d1,
.generalFormOuterContainer .d2,
.generalFormOuterContainer .d3,
.generalFormOuterContainer .d4,
.generalFormOuterContainer .d5,
.generalFormOuterContainer .d6,
.generalFormOuterContainer .d7,
.generalFormOuterContainer .d8,
.generalFormOuterContainer .d9 {
  padding: 0 !important;
  margin: 0 !important;
}
.generalFormOuterContainer .navigationOuterContainer,
.generalFormOuterContainer .navigationContainer,
.generalFormOuterContainer .formOuterContainer,
.generalFormOuterContainer .formContainer {
  padding: 0 !important;
  margin: 0 !important;
}
.generalFormOuterContainer .formTitle {
  font-family: var(--pia-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--pia-ink) !important;
  margin: 0 0 20px !important;
}
.generalFormOuterContainer .formTitle::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--pia-gold);
  border-radius: 2px;
  margin-top: 10px;
}
.generalFormOuterContainer .mandatoryFieldsTitle {
  font-size: 12.5px;
  color: var(--pia-muted);
  font-family: var(--pia-font-body);
  margin-bottom: 20px;
}
.generalFormOuterContainer .mandatoryFieldsTitle .mandatorySymbol {
  color: var(--pia-gold-deep) !important;
  font-weight: 700;
}
.generalFormOuterContainer .mandatoryFieldsTitle strong { font-weight: 500; }
.generalFormOuterContainer .fieldContainer table,
.generalFormOuterContainer .fieldContainer tbody,
.generalFormOuterContainer .fieldContainer tr,
.generalFormOuterContainer .fieldContainer td.left,
.generalFormOuterContainer .fieldContainer td.right {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}
.generalFormOuterContainer .fieldContainer { margin-bottom: 18px !important; }
.generalFormOuterContainer .fieldLabel {
  font-family: var(--pia-font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pia-ink) !important;
  margin-bottom: 6px !important;
  text-align: left !important;
}
.generalFormOuterContainer .fieldLabel .mandatorySymbol {
  color: var(--pia-gold-deep) !important;
  margin-right: 2px;
}
.generalFormOuterContainer .fieldBody input.typeText {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.generalFormOuterContainer #idReCaptchaContainer .fieldLabel { display: none !important; }
.generalFormOuterContainer #idReCaptchaContainer { margin-bottom: 20px !important; }
.generalFormOuterContainer .navigationContainer .right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
}
.generalFormOuterContainer .backLink {
  font-family: var(--pia-font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pia-muted) !important;
  text-decoration: none !important;
}
.generalFormOuterContainer .backLink:hover {
  color: var(--pia-primary) !important;
  text-decoration: underline !important;
}
.generalFormOuterContainer input.nextButton {
  font-family: var(--pia-font-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  background: var(--pia-gold) !important;
  color: var(--pia-ink) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .15s ease !important;
}
.generalFormOuterContainer input.nextButton:hover {
  background: var(--pia-gold-deep) !important;
  transform: translateY(-1px);
}
/* ============================================================
   PIA — Responsive square map embed (Contact page)
   Wraps the Google Maps iframe so it fills its container's full
   width and stays a perfect square at any screen size, instead
   of the hardcoded 600x450 attributes on the iframe itself.
   Put the class on a wrapper div around the iframe in the
   Content/Custom HTML gadget rather than relying on inline
   styles on the iframe surviving the gadget's own save/sanitise
   pass.
   ============================================================ */
.pia-map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--pia-radius);
  overflow: hidden;
}
.pia-map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
/* ============================================================
   PIA - Quote banner over a photo (IPAS quote, reusable for
   others). Only the background-image URL and position live
   inline on the outer div (per-quote content), everything else
   including the mobile breakpoint lives here so it survives
   Content gadget sanitising and works at any screen width.
   Gradient runs dark top-left to lighter bottom-right so text
   sitting top-left stays readable while a bottom-right-weighted
   photo focal point stays visible.
   ============================================================ */
.pia-quote-banner {
  position: relative;
  width: 100%;
  min-height: 500px;
  border-radius: var(--pia-radius);
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
}
.pia-quote-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12,30,18,0.85) 0%, rgba(12,30,18,0.55) 45%, rgba(12,30,18,0.15) 100%);
}
.pia-quote-banner__inner {
  position: relative;
  min-height: 500px;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
@media (max-width: 680px) {
  .pia-quote-banner,
  .pia-quote-banner__inner { min-height: 320px; }
  .pia-quote-banner__inner { padding: 24px; }
}
/* ============================================================
   PIA - Event detail page title bar, styled to match the inner
   page hero (dark green banner, gold rule, gradient edge).
   #idEventsTitleMainContainer is WA's own system-generated markup
   for every event's detail page, we can't replace it with the
   pia-ph-wrap/pia-ph-inner hero template's HTML like on normal
   content pages, so this reskins the real WA elements directly
   with CSS instead. Applies automatically to every event, current
   and future, no per-event setup needed.
   The back link's icon is already hidden by the sitewide
   .pageBackContainer a::before rule earlier in this sheet, no
   need to repeat it here.
   Three direct children (back link, add-to-calendar dropdown,
   title) are placed with CSS Grid instead of each centering
   itself separately - back and the calendar dropdown share row 1
   (one justified left, one right, within the same 1084px column),
   title takes row 2 full-width. This is what puts them on the
   same line while keeping everything aligned to the identical
   1084px column at any screen size, mobile included - no separate
   mobile padding rules needed for alignment any more.
   ============================================================ */
#idEventsTitleMainContainer {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background: #0C1E12;
  box-sizing: border-box;
  overflow: visible;
  margin-bottom: 50px !important;
  display: grid !important;
  grid-template-columns: 1fr min(1084px, calc(100% - 40px)) 1fr !important;
}
#idEventsTitleMainContainer::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #4FE3FF, #1A8C6A 35%, #A78BFA 65%, #F5B82E) !important;
  z-index: 2;
  display: block !important;
}
/* Zero out WA's default gadget spacing above the hero. Two separate
   sources of the same-looking 20px gap: the gadget wrapper itself
   (class starts with WaGadgetEventsState - WA swaps the suffix per
   page type: Details on the event page, Registration on the
   registration flow, and presumably others - matched with a
   [class*=] attribute selector so every variant is covered, not
   just the one seen so far), and its own plain, class-less parent
   div one level further out - that outer div has no id or class to
   hook, so it's targeted via :has() from its known child instead.
   Both need zeroing or the gap just moves up a level. */
div[class*="WaGadgetEventsState"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
div:has(> div[class*="WaGadgetEventsState"]) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#idEventsTitleMainContainer .pageBackContainer,
#idEventBackContainer {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}
#idEventsTitleMainContainer .eventBackLink {
  font-family: 'Inter', sans-serif !important;
  color: #ffffff !important;
  font-size: 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#idEventsTitleMainContainer .eventBackLink:hover {
  color: #F5B82E !important;
  text-decoration: underline !important;
}
#idEventsTitleMainContainer .pageViewSwitcherOuterContainer,
#idEventViewSwitcher {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  text-align: right !important;
}
#idEventsTitleMainContainer .cornersContainer { display: none !important; }
#idEventsTitleMainContainer .pageViewSwitcherContainer .inner { padding: 0 !important; }
#idEventsTitleMainContainer .d1, #idEventsTitleMainContainer .d2, #idEventsTitleMainContainer .d3,
#idEventsTitleMainContainer .d4, #idEventsTitleMainContainer .d5, #idEventsTitleMainContainer .d6,
#idEventsTitleMainContainer .d7, #idEventsTitleMainContainer .d8, #idEventsTitleMainContainer .d9 {
  padding: 0 !important; margin: 0 !important;
}
#idEventsTitleMainContainer .ui.dropdown.-wa-add-event-to-calendar-dropdown {
  /* Semantic UI's dropdown JS sets position:absolute on this
     element itself and computes its own left offset, which is
     what was sending it off-screen regardless of how well the
     parent chain lines up - force it back into normal flow so it
     sits where the markup actually places it. */
  position: static !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
}
#idEventsTitleMainContainer .ui.dropdown.-wa-add-event-to-calendar-dropdown .text {
  color: #ffffff !important;
}
#idEventsTitleMainContainer .ui.dropdown.-wa-add-event-to-calendar-dropdown .icon {
  color: #F5B82E !important;
}
#idEventsTitleMainContainer .pageTitleContainer.eventsTitleContainer {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 0 48px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
#idEventsTitleMainContainer .pageTitleContainer.eventsTitleContainer::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: #F5B82E;
  border-radius: 2px;
  margin-bottom: 20px;
}
#idEventsTitleMainContainer .pageTitle.SystemPageTitle {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(28px, 3.8vw, 38px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}
/* No mobile-specific side padding needed any more - the grid's
   min(1084px, calc(100% - 40px)) middle column already gives all
   three rows the same 20px margins once the viewport goes below
   1084px, so back/calendar/title stay aligned to each other at
   every width automatically. Kept only a smaller top gap on the
   back/calendar row so it doesn't look oversized next to the
   smaller mobile heading. */
@media (max-width: 680px) {
  #idEventsTitleMainContainer .pageBackContainer,
  #idEventBackContainer,
  #idEventsTitleMainContainer .pageViewSwitcherOuterContainer,
  #idEventViewSwitcher {
    padding-top: 16px !important;
  }
}
/* ============================================================
   PIA - Event registration wizard nav (Cancel / Back / Next /
   Confirm), appears on every step of WA's Advanced Event
   registration flow - both the bottom nav (plain "cancel"/"prev"/
   "next" IDs, used on the email + registration-info steps) and
   the top nav on the final review step ("cancelTop"/"prevTop"/
   "nextTop" IDs, where "next" is relabelled "Confirm"). WA reuses
   the same "nextButton" class for every one of these regardless
   of label, so class name alone can't tell them apart - matching
   on the ID substring instead ("cancel"/"prev"/"next" catches
   both the plain and *Top variants at once), which WA generates
   consistently on every event's flow, current and future.
   There's an older, broader rule earlier in this file
   (.generalFormOuterContainer input.nextButton) that golds every
   nav button indiscriminately - this block is intentionally
   placed after it and wins on cascade order for the ones it
   targets, so Cancel/Back get the secondary tint-outline treatment
   (same idea as the membership wizard's prevButton) while Next/
   Confirm keep the gold primary-action colour everywhere, both
   nav positions, all three steps. Confirmed live 2026-07-09.
   ============================================================ */
.navigationContainer input[id*="cancel"],
.navigationContainer input[id*="prev"] {
  font-family: var(--pia-font-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: var(--pia-tint) !important;
  color: var(--pia-ink) !important;
  border: 1px solid var(--pia-border) !important;
  border-radius: 8px !important;
  padding: 11px 22px !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
}
.navigationContainer input[id*="cancel"]:hover,
.navigationContainer input[id*="prev"]:hover {
  background: var(--pia-border) !important;
}
.navigationContainer input[id*="next"] {
  font-family: var(--pia-font-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: var(--pia-gold) !important;
  color: var(--pia-ink) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 28px !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .15s ease !important;
}
.navigationContainer input[id*="next"]:hover {
  background: var(--pia-gold-deep) !important;
  transform: translateY(-1px);
}
/* Force a real gap between the Cancel group (.left) and the
   Back/Confirm group (.right) regardless of WA's underlying float
   or flex layout, and stack them with a consistent gap on small
   screens instead of relying on the container to wrap cleanly on
   its own - this is what was causing Cancel and Back to touch on
   mobile. */
.navigationContainer .inner {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}
.navigationContainer .left,
.navigationContainer .right {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
/* Stacked, full-width, one button per line on mobile - Cancel,
   then Back, then Next/Confirm, in that DOM order - rather than
   grouping Cancel alone on one row and Back+Next together on the
   next, which looked cramped/uneven at narrow widths. */
@media (max-width: 480px) {
  .navigationContainer .inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .navigationContainer .left,
  .navigationContainer .right {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
  }
  /* Every real button here has a disabled, inline-hidden NoScript
     twin with the exact same class (WA's no-JS fallback). Forcing
     display:block !important on the class alone was reaching that
     hidden twin too - since !important beats its non-important
     inline display:none - and showing it as a duplicate button.
     :not([disabled]) excludes it, leaving only the live button. */
  .navigationContainer input.nextButton:not([disabled]),
  .navigationContainer input.nextButtonAutoWidth:not([disabled]) {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================
   PIA - Event registration flow title (.titleContainer), styled
   to match the inner page hero / event detail hero (dark green
   banner, gold rule, gradient edge). WA's own markup for the
   registration wizard - scoped with .WaGadgetEventsStateRegistration
   so the generic .titleContainer class can't leak onto some other
   unrelated system page that happens to reuse the same name.
   Unlike the event detail page there's no separate back link and
   no extra wrapper div around the title/calendar row - just the
   h1 and #idTitleRight side by side - so the 100vw bleed uses side
   padding directly on .titleContainer (clamped to a 20px minimum
   via max(), same idea as the breakout-grid trick used on the
   event detail hero, just simpler since there's only one row here)
   rather than a separate max-width+margin:auto inner box.
   ============================================================ */
.WaGadgetEventsStateRegistration .titleContainer {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #0C1E12 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 52px max(20px, calc((100vw - 1084px) / 2)) 48px !important;
  margin: 0 0 50px !important;
  overflow: visible !important;
}
.WaGadgetEventsStateRegistration .titleContainer::after {
  /* WA has its own clearfix on this exact pseudo-element
     (display:table; clear:both;), left over from .titleContainer's
     original floated layout - now that it's flex, that clearfix
     just collapses this bar instead of clearing anything, so
     display/clear both need an explicit override here. */
  content: '';
  display: block !important;
  clear: none !important;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  width: auto !important;
  background: linear-gradient(90deg, #4FE3FF, #1A8C6A 35%, #A78BFA 65%, #F5B82E) !important;
  z-index: 2;
}
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(26px, 3.4vw, 34px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  flex: 1 1 320px !important;
}
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: #F5B82E;
  border-radius: 2px;
  margin-bottom: 18px;
}
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle a {
  color: #ffffff !important;
  text-decoration: none !important;
}
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle a:hover {
  color: #F5B82E !important;
  text-decoration: underline !important;
}
/* WA injects a default "external link" glyph on this title link -
   a 35x35px circle-arrow via ::after (confirmed live: content:"",
   display:inline-block, width/height:35px) - removed the same way
   the sitewide .pageBackContainer a::before icon is suppressed
   elsewhere in this file. */
.WaGadgetEventsStateRegistration .titleContainer h1.pageTitle.SystemPageTitle a::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.WaGadgetEventsStateRegistration #idTitleRight {
  flex: 0 0 auto !important;
}
.WaGadgetEventsStateRegistration #idTitleRight .cornersContainer { display: none !important; }
.WaGadgetEventsStateRegistration #idTitleRight .pageViewSwitcherContainer .inner { padding: 0 !important; }
.WaGadgetEventsStateRegistration #idTitleRight .d1, .WaGadgetEventsStateRegistration #idTitleRight .d2,
.WaGadgetEventsStateRegistration #idTitleRight .d3, .WaGadgetEventsStateRegistration #idTitleRight .d4,
.WaGadgetEventsStateRegistration #idTitleRight .d5, .WaGadgetEventsStateRegistration #idTitleRight .d6,
.WaGadgetEventsStateRegistration #idTitleRight .d7, .WaGadgetEventsStateRegistration #idTitleRight .d8,
.WaGadgetEventsStateRegistration #idTitleRight .d9 {
  padding: 0 !important; margin: 0 !important;
}
/* Same fix as the event detail page's calendar dropdown -
   Semantic UI's JS sets position:absolute on the dropdown itself
   and computes its own left offset independent of the surrounding
   layout, so it needs forcing back into normal flow here too. */
.WaGadgetEventsStateRegistration #idTitleRight .ui.dropdown.-wa-add-event-to-calendar-dropdown {
  position: static !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
}
.WaGadgetEventsStateRegistration #idTitleRight .ui.dropdown.-wa-add-event-to-calendar-dropdown .text {
  color: #ffffff !important;
}
.WaGadgetEventsStateRegistration #idTitleRight .ui.dropdown.-wa-add-event-to-calendar-dropdown .icon {
  color: #F5B82E !important;
}
@media (max-width: 680px) {
  .WaGadgetEventsStateRegistration .titleContainer {
    padding-top: 36px !important;
    padding-bottom: 32px !important;
    align-items: flex-start !important;
  }
}