.program-detail-page main { background: #f7f9fb; color: #4e6372; font: 400 14px/1.75 "DM Sans", Arial, sans-serif; }
.program-detail-page main * { box-sizing: border-box; letter-spacing: 0 !important; }
.program-detail-page main :is(h1,h2,h3,p,li,a,.program-prose,.program-chip,.section-label) { font-family: "Inter", "Segoe UI", Arial, sans-serif !important; }
.program-detail-page main .shell { width: calc(100% - 48px); max-width: 1200px; margin-inline: auto; }
.program-detail-page .program-detail-hero { position: relative; isolation: isolate; overflow: hidden; padding: 32px 0; background: #eaf2f8; }
.program-detail-page .program-detail-hero .shell { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.program-detail-page .detail-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.program-detail-page .program-detail-hero:has(.detail-cover)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12,32,48,.7); }
.program-detail-page .program-detail-hero:has(.detail-cover) :is(h1,p,.program-back) { color: #fff; }
.program-detail-page .detail-symbol { position: absolute; right: max(32px, calc((100% - 1100px)/2)); top: 50%; transform: translateY(-50%); }
.program-detail-page .detail-symbol svg { width: 100px; height: 100px; }
.program-detail-page .program-back { font-size: 12px; color: #395c76; margin-bottom: 18px; }
.program-detail-page .program-chip { margin-bottom: 10px; padding: 4px 9px; font-size: 11px; font-weight: 600; border-radius: 4px; background: #dce9f3; color: #395c76; }
.program-detail-page .program-detail-hero h1 { font: 700 36px/1.2 "Inter", "Segoe UI", Arial, sans-serif !important; color: #213f56; margin: 0; max-width: 80%; overflow-wrap: anywhere; }
.program-detail-page .program-detail-hero p { max-width: min(660px, 80%); margin: 12px 0 0; font-size: 14px; color: #516877; }
.program-detail-page .program-detail-layout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 36px; padding-block: 28px 48px; }
.program-detail-page aside { min-width: 0; }
.program-detail-page aside nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid #dfe7ed; border-radius: 6px; background: #edf3f7; box-shadow: 0 2px 8px rgba(34,55,73,.035); }
.program-detail-page aside a { padding: 10px 12px; font: 500 12px/1.5 "DM Sans", Arial, sans-serif; color: #39566b; overflow-wrap: anywhere; }
.program-detail-page aside a:hover { background: #e2edf5; }
.program-detail-page .program-detail-content { min-width: 0; }
.program-detail-page .program-detail-content > section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #dfe7ed; scroll-margin-top: 30px; }
.program-detail-page .program-detail-content h2 { font: 700 20px/1.4 "Manrope", Arial, sans-serif; color: #28465c; margin: 0 0 14px; }
.program-detail-page .program-detail-content .section-label { display: block; font: 600 11px/1.5 "DM Sans", Arial, sans-serif; color: #687f8e; margin-bottom: 8px; }
.program-detail-page .program-detail-content :is(p,.program-prose,li) { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.program-detail-page .program-detail-content ul { padding-left: 20px; margin: 0; }
.program-detail-page .program-detail-content li { padding-bottom: 7px; }
.program-detail-page .program-audience { padding: 16px 18px; margin-top: 18px; border-left: 3px solid #b7cedf; background: #edf3f7; }
.program-detail-page .program-audience h3 { font: 600 13px/1.5 "DM Sans", Arial, sans-serif; margin: 0 0 5px; }
.program-detail-page .program-audience p { margin: 0; }
.program-detail-page .program-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.program-detail-page .program-gallery figure { margin: 0; min-width: 0; }
.program-detail-page .program-gallery img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.program-detail-page .program-gallery figcaption { font-size: 12px; margin-top: 6px; overflow-wrap: anywhere; }
.program-detail-page .contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
.program-detail-page .program-downloads { list-style: none; padding: 0 !important; }
.program-detail-page .program-downloads a { display: flex; flex-direction: column; padding: 12px 16px; border: 1px solid #dae5ed; border-radius: 4px; background: #edf4f9; color: #315670; }
.program-detail-page .program-downloads small { font-size: 11px; color: #617785; }
.program-detail-page main a:focus-visible { outline: 2px solid #467b9e; outline-offset: 3px; }
/* Keep shared municipal theme rules from changing the detail reading layout. */
html body.program-detail-page main {
  background: #f6f8fa !important;
  color: #53616e;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}
html body.program-detail-page main .shell {
  width: calc(100% - 48px) !important;
  max-width: 1120px !important;
}
html body.program-detail-page .program-detail-hero {
  background: #edf3f7 !important;
  padding: 28px 0 30px !important;
  border-bottom: 1px solid #e1e8ee;
  box-shadow: none !important;
}
html body.program-detail-page .program-detail-hero h1 {
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #30485b;
}
html body.program-detail-page .program-detail-hero p {
  font-size: 13px !important;
  line-height: 1.75 !important;
  max-width: min(62ch, 80%);
  color: #617181;
}
html body.program-detail-page .program-chip {
  background: #e3ebf2 !important;
  color: #4d6477 !important;
  font-size: 10px !important;
  font-weight: 500;
  padding: 4px 8px;
}
html body.program-detail-page .detail-symbol svg {
  width: 76px;
  height: 76px;
  stroke: none;
}
html body.program-detail-page .program-detail-layout {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 40px;
  padding-block: 32px 44px;
}
html body.program-detail-page .program-detail-layout aside nav {
  background: #eef2f5 !important;
  border: 1px solid #e0e6eb !important;
  box-shadow: 0 2px 7px rgba(38,55,70,.035) !important;
}
html body.program-detail-page .program-detail-layout aside a {
  font-size: 11px;
  font-weight: 500;
  border-radius: 3px;
}
html body.program-detail-page .program-detail-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
html body.program-detail-page .program-detail-content > section {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e0e6eb !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 24px !important;
  margin: 0 0 24px !important;
}
html body.program-detail-page .program-detail-content h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  margin: 0 0 12px;
  color: #354e61;
}
html body.program-detail-page .program-detail-content .section-label {
  color: #728392 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: none;
  margin-bottom: 6px;
}
html body.program-detail-page .program-detail-content :is(p, .program-prose, li) {
  font-size: 13px !important;
  line-height: 1.8 !important;
  max-width: 72ch;
}
html body.program-detail-page .program-detail-content li::marker { color: #8ca6b9; }
html body.program-detail-page .program-audience {
  background: #eaf1f6 !important;
  border-left: 2px solid #c1d3e0;
  padding: 14px 18px;
}
html body.program-detail-page .program-audience h3 { font-size: 12px; font-weight: 600; color: #476175; }
html body.program-detail-page .contact-details a {
  color: #476b87 !important;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: #bfceda;
  text-underline-offset: 4px;
}
html body.program-detail-page .program-detail-content > section:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; }
html body.program-detail-page main :is(.program-back, .program-contact-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid #d3dfe8 !important;
  border-radius: 4px;
  background: #e7eef4 !important;
  color: #486276 !important;
  -webkit-text-fill-color: #486276 !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(38,55,70,.035) !important;
  transform: none !important;
  transition: background-color 150ms ease;
}
html body.program-detail-page main :is(.program-back, .program-contact-button):hover {
  background: #dfe9f1 !important;
  box-shadow: 0 1px 3px rgba(38,55,70,.035) !important;
  transform: none !important;
}
html body.program-detail-page main :is(.program-back, .program-contact-button)::before,
html body.program-detail-page main :is(.program-back, .program-contact-button)::after { content: none !important; }
@media(max-width: 767.98px) {
  html body.program-detail-page main :is(.program-back, .program-contact-button) { min-height: 44px; }
  html body.program-detail-page main .shell { width: calc(100% - 32px) !important; }
  html body.program-detail-page .program-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 20px; }
  html body.program-detail-page .program-detail-hero h1 { font-size: 26px !important; }
  html body.program-detail-page .program-detail-hero p { max-width: 100%; }
  html body.program-detail-page .program-detail-content h2 { font-size: 17px !important; }
  .program-detail-page main .shell { width: calc(100% - 32px); }
  .program-detail-page .program-detail-hero { padding: 26px 0; }
  .program-detail-page .detail-symbol { display: none; }
  .program-detail-page .program-detail-hero h1 { font-size: 28px !important; max-width: 100%; }
  .program-detail-page .program-detail-hero p { max-width: 100%; }
  .program-detail-page .program-detail-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .program-detail-page aside nav { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .program-detail-page aside a { min-height: 44px; display: flex; align-items: center; }
  .program-detail-page .program-detail-content h2 { font-size: 18px; }
  .program-detail-page .program-gallery { grid-template-columns: minmax(0,1fr); }
}