/* ==========================================================================
   Center for Cooperative Parenting
   Static rebuild of the Thrive/WordPress site — values taken from the
   original theme CSS so the rendering matches 1:1.

   Breakpoints (as per original):
     desktop  >= 1024px
     tablet    768px - 1023px
     mobile   <= 767px
   ========================================================================== */

:root {
  --green:        rgb(50, 64, 42);        /* brand green: headings, buttons, borders */
  --green-hover:  rgba(50, 64, 42, 0.91);
  --ink:          rgb(12, 17, 21);        /* default heading colour */
  --body:         rgb(106, 107, 108);     /* default body copy */
  --link:         hsl(210, 77%, 54%);
  --link-hover:   hsl(240, 85%, 13%);
  --rule:         hsla(212, 79%, 54%, 0.5);
  --offwhite:     rgb(248, 248, 248);
  --max:          1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: Muli, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

img { max-width: 100%; height: auto; border: 0; }

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: Literata, Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  padding: 0 0 24px;
}

h1 { font-size: 40px; line-height: 1.3em; }
h2 { font-size: 34px; line-height: 1.4em; }
h3 { font-size: 24px; line-height: 1.4em; }
h4 { font-size: 20px; line-height: 1.4em; }
h5 { line-height: 1.4em; }
h6 { line-height: 1.6em; }

p {
  margin: 0;
  padding: 0 0 24px;
}

ul, ol {
  margin: 0;
  padding: 0 0 12px 0;
  list-style-position: outside;
}

/* the original indents list markers via padding on the list items' container */
ul, ol { padding-left: 1.15em; }

li {
  font-size: 18px;
  line-height: 1.4em;
  padding-bottom: 16px;
  margin-bottom: 0;
}

blockquote {
  margin: 0 0 24px;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--rule);
  font-size: 18px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

hr.rule {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0;
  width: 100%;
}

@media (max-width: 1023px) {
  h1 { font-size: 36px; padding-bottom: 22px; }
  h2 { font-size: 28px; padding-bottom: 22px; }
  h3 { font-size: 22px; padding-bottom: 22px; }
  h4, h5, h6 { padding-bottom: 22px; }
  p  { padding-bottom: 22px; }
  ul, ol { padding-top: 0; padding-bottom: 4px; }
  li { line-height: 1.75em; padding-bottom: 14px; }
  blockquote { margin-bottom: 22px; }
}

@media (max-width: 767px) {
  h1 { font-size: 28px; padding-bottom: 20px; }
  h2 { font-size: 24px; padding-bottom: 20px; }
  h3 { font-size: 22px; padding-bottom: 20px; }
  h4 { font-size: 20px; padding-bottom: 20px; }
  h5, h6 { padding-bottom: 20px; }
  p  { padding-bottom: 20px; }
  ul, ol { padding-bottom: 4px; padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--max); margin-left: auto; margin-right: auto; }

.section { position: relative; padding: 56px 7px; }
.section > .wrap { position: relative; z-index: 1; }

@media (max-width: 1023px) { .section { padding-top: 40px; padding-bottom: 40px; } }
@media (max-width: 767px)  { .section { padding: 20px; } }

.section--tight { padding: 40px; }
@media (max-width: 767px) { .section--tight { padding-left: 20px; padding-right: 20px; } }

.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  background: #fff;
  position: relative;
  z-index: 10;
}

.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 15px 20px 8px;
}

/* Desktop: rule — logo — rule */
.logo-row {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}

.logo-row__rule  { flex: 0 0 36.5%; max-width: 36.5%; }
.logo-row__brand { flex: 0 0 27%;   max-width: 27%; }

.site-logo { display: block; width: 220px; margin: 0 auto; }
.site-logo img { display: block; width: 100%; height: auto; }

/* Mobile/tablet logo (shown in place of the ruled row) */
.logo-row--compact { display: none; }

@media (max-width: 1023px) {
  .site-header__inner { padding-left: 40px; padding-right: 40px; padding-bottom: 4px; }
  .logo-row { display: none; }
  .logo-row--compact { display: block; margin-bottom: 0; }
}

@media (max-width: 767px) {
  .site-header__inner { padding: 10px 20px 2px; }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav { position: relative; z-index: 3; margin: 7px auto 0; }

.nav__toggle,
.nav__close { display: none; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.nav__list li { padding: 0; margin: 0 5px; position: relative; }

.nav__list > li > a {
  display: block;
  font-family: Forum, Georgia, serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.28em;
  text-transform: uppercase;
  color: var(--green);
  padding: 6px 2px;
}

.nav__list > li:hover > a { color: var(--green-hover); }

/* dropdown arrow */
.nav__caret {
  display: inline-block;
  width: 0.6em;
  margin-left: 4px;
  vertical-align: middle;
}
.nav__caret svg { width: 100%; height: auto; fill: currentColor; display: block; }

/* Sub-menus */
.nav__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; }

.nav__list .sub-menu li { margin: 0; padding-top: 6px; }

.nav__list .sub-menu a {
  display: block;
  padding: 6px 18px;
  font-family: Forum, Georgia, serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--green);
  white-space: nowrap;
}

.nav__list .sub-menu a:hover { color: var(--green-hover); }

/* ---- Tablet + mobile: hamburger ---- */
@media (max-width: 1023px) {
  .nav { margin-left: auto; margin-right: auto; text-align: center; }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 3px;
    background: none;
    border: 0;
    color: var(--green);
    cursor: pointer;
  }
  .nav__toggle svg { width: 100%; height: 100%; fill: currentColor; display: block; }

  .nav__list {
    display: none;
    flex-direction: column;
    padding: 20px 40px;
    background: #fff;
  }

  .nav.is-open .nav__list { display: flex; }

  .nav__list li { margin: 0; }
  .nav__list > li > a { line-height: 1.65em; padding: 8px 0; }

  /* sub-menus become inline blocks on touch layouts */
  .nav__list .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 6px;
  }
  .nav__list .sub-menu a { padding: 6px 0; white-space: normal; }
  .nav__caret { display: none; }
}

@media (max-width: 767px) {
  .nav__list { padding: 10px 20px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: table;
  max-width: 100%;
  margin: 11px auto 7px;
}

.btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  padding: 17px 28px;
  background-color: var(--green);
  color: #fff;
  font-family: Forum, Georgia, serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2em;
  letter-spacing: 3px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn a:hover {
  background-color: var(--green-hover);
  background-image: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06));
  color: #fff;
}

@media (max-width: 767px) {
  .btn a { padding: 22px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; padding: 40px; overflow: hidden; }

.hero__bg {
  position: absolute;
  inset: 0;
  background-color: rgb(12, 17, 21);
  background-image: url('/wp-content/uploads/2024/05/PATH2.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 750px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.hero__card {
  background-color: rgba(248, 248, 248, 0.84);
  padding: 21px 35px;
  margin-bottom: 0;
}

.hero__card h1 {
  font-family: Forum, Georgia, serif;
  font-weight: 400;
  font-size: 49px;
  line-height: 1.2em;
  color: var(--green);
  padding-bottom: 0;
  margin-bottom: 14px;
}

.hero__card p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
  margin: 0;
}

.hero__lead { font-size: 19px; }

@media (max-width: 1023px) {
  .hero__inner { min-height: 480px; }
  .hero__card h1 { font-size: 50px; }
}

@media (max-width: 767px) {
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero__bg { background-attachment: scroll; }
  .hero__card { padding: 7px; }
  .hero__card h1 { font-size: 28px; }
  .hero__card p { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Home: promo cards
   -------------------------------------------------------------------------- */

.promo-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -13px;
  padding: 3px 0;
}

.promo-grid > .promo {
  flex: 1 1 50%;
  max-width: 50%;
  padding-left: 13px;
  display: flex;
}

.promo__inner {
  flex: 1 1 auto;
  padding: 14px;
  border: 1px solid var(--green);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.promo h2 {
  font-family: Forum, Georgia, serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2em;
  color: var(--green);
  text-align: center;
  text-transform: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.promo p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.4em;
  color: var(--ink);
  text-align: center;
  padding: 0;
  margin: 8px 0 0;
}

/* .n drops runs back to normal inside 500-weight paragraphs; the promo copy
   is already regular, so keep it consistent */
.promo p .n { font-weight: 400; }

.contact-heading {
  font-family: Forum, Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2em;
  color: var(--green);
  text-align: center;
  padding-bottom: 0;
  margin-top: 42px;
  margin-bottom: 7px;
}

.contact-email {
  text-align: center;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--ink);
  padding: 0;
}

.contact-email a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.contact-email a:hover { color: var(--green); }

/* Tablet + mobile: single column, no card borders (matches the original's
   separate mobile layout) */
@media (max-width: 1023px) {
  .promo-grid { display: block; margin-left: 0; padding: 0; }
  .promo-grid > .promo { max-width: none; padding-left: 0; display: block; }
  .promo__inner { border: 0; padding: 0; display: block; }
  .promo h2 { font-size: 35px; margin-top: 20px; }
  .contact-heading { font-size: 35px; }
}

@media (max-width: 767px) {
  .promo h2 { font-size: 24px; }
  .contact-heading { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   Interior page content
   -------------------------------------------------------------------------- */

.page-hero { position: relative; padding: 40px; overflow: hidden; }

.page-hero__bg {
  position: absolute;
  inset: 0;
  background-color: rgb(12, 17, 21);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.page-hero__card {
  background-color: rgba(248, 248, 248, 0.84);
  padding: 21px 35px;
  margin-bottom: 0;
}

.page-hero__card h1 {
  font-family: Forum, Georgia, serif;
  font-weight: 400;
  font-size: 49px;
  line-height: 1.2em;
  color: var(--green);
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Copy inside the banner card sits on the light panel, so it takes the dark
   ink colour — not the white used against the photo behind it. */
.page-hero__card p {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  padding-bottom: 0;
  margin-top: 14px;
}

.page-hero__card p + p { margin-top: 8px; }

@media (max-width: 1023px) {
  .page-hero__inner { min-height: 480px; }
  .page-hero__card h1 { font-size: 50px; }
}

@media (max-width: 767px)  {
  .page-hero { padding-left: 20px; padding-right: 20px; }
  .page-hero__bg { background-attachment: scroll; }
  .page-hero__card { padding: 14px; }
  .page-hero__card h1 { font-size: 34px; }
}

/* Section headings on interior pages */
.section-heading {
  font-family: Forum, Georgia, serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 1.2em;
  color: var(--green);
  text-align: center;
  text-transform: none;
  padding-bottom: 0;
  margin-top: 3px;
  margin-bottom: 7px;
}

@media (max-width: 767px) { .section-heading { font-size: 34px; } }

.prose { max-width: var(--max); margin: 0 auto; }
.prose img { display: block; max-width: 100%; height: auto; }

/* Body copy inside interior sections matches the original's Inter treatment.
   Descendant (not child) selector so paragraphs nested inside .callout and
   .cols-2 get the same treatment as top-level ones — the original centres
   every content paragraph on these pages. */
.prose p,
.lede {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}

.prose a { text-decoration: underline; }

/* the original sets the paragraph itself to the Inter "bold" weight (500) and
   drops individual runs back to normal, which is how the lead-in labels
   ("Training:", "Professional Development:") read heavier than the copy */
.prose p .n { font-weight: 400; }

/* Generic two-column row used on interior pages (no card border) */
.cols-2 {
  display: flex;
  flex-wrap: wrap;
  margin-left: -13px;
  padding: 3px 0;
}

.cols-2 > * {
  flex: 1 1 50%;
  max-width: 50%;
  padding-left: 13px;
}

@media (max-width: 1023px) {
  .cols-2 { display: block; margin-left: 0; }
  .cols-2 > * { max-width: none; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background-color: rgba(50, 64, 42, 0.35); }

.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 20px 20px;
  text-align: left;
}

.footer-logo { display: block; width: 281px; max-width: 100%; margin: 14px auto 21px; }
.footer-logo img { display: block; width: 100%; height: auto; }

.footer-nav .nav__list > li > a,
.footer-nav .nav__list .sub-menu a { color: var(--green); }

.footer-nav .nav__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  background: none;
}

.footer-nav .nav__list li { margin: 0 5px; }

.footer-nav .nav__list .sub-menu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  box-shadow: none;
  background: none;
  min-width: 0;
  padding: 0;
  display: none;
}

.footer-copy {
  text-align: center;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.7em;
  letter-spacing: 2px;
  color: var(--green);
  padding: 0;
  margin: 0;
}

.footer-copy a { color: var(--green); }
.footer-copy a:hover { text-decoration: underline; }

@media (max-width: 1023px) {
  .site-footer__inner { padding: 40px 40px 20px; }
}

@media (max-width: 767px) {
  .site-footer__inner { padding: 30px 20px 20px; }
  .footer-copy { font-size: 10px; letter-spacing: 0; }
}

/* --------------------------------------------------------------------------
   Styled list (chevron bullets)
   -------------------------------------------------------------------------- */

.styled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The original sets these items in Inter regular, coloured brand green —
   not the grey Muli used for ordinary list items. */
.styled-list > li {
  position: relative;
  padding: 0 0 0 34px;
  line-height: 2.3em;
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--green);
  text-align: left;
}

.styled-list > li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0.85em;
  width: 9px;
  height: 16px;
  background-color: var(--green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'><path d='M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'><path d='M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z'/></svg>") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Callout box (the off-white panel used on PC Training, forms, etc.)
   -------------------------------------------------------------------------- */

.callout {
  background-color: rgba(248, 248, 248, 0.84);
  padding: 21px 35px;
  margin-bottom: 24px;
}

@media (max-width: 767px) { .callout { padding: 14px; } }

.callout h2 {
  font-family: Forum, Georgia, serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 1.2em;
  color: var(--green);
  text-align: center;
  padding-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */

.divider {
  padding: 20px 0;
  margin: 0;
}

.divider hr {
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  width: 100%;
}

/* --------------------------------------------------------------------------
   Long-form document pages (Local Rules)
   -------------------------------------------------------------------------- */

.prose--doc p,
.prose--doc li {
  font-family: Muli, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--body);
  text-align: left;
}

.prose--doc h3 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--green);
  padding-top: 4px;
  padding-bottom: 0;
  margin: 24px 0 12px;
  text-align: left;
}

.prose--doc ul { padding-left: 1.4em; margin-bottom: 18px; }
.prose--doc li { padding-bottom: 10px; line-height: 1.6em; }

.page-hero__card--lg h1 { font-size: 56px; }
@media (max-width: 1023px) { .page-hero__card--lg h1 { font-size: 50px; } }
@media (max-width: 767px)  { .page-hero__card--lg h1 { font-size: 34px; } }

/* --------------------------------------------------------------------------
   Embedded map
   -------------------------------------------------------------------------- */

.map-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 0 0 24px;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { max-width: 720px; margin: 0 auto; text-align: left; }

.form__field { margin-bottom: 22px; }

.form__label {
  display: block;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 8px;
}

.form__req { color: #a33; margin-left: 2px; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea,
.form input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(50, 64, 42, 0.35);
  background: #fff;
  font-family: Muli, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  border-radius: 0;
}

.form textarea { min-height: 120px; resize: vertical; }

.form input:focus,
.form textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}

.form__options { display: flex; flex-direction: column; gap: 10px; }

.form__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: Muli, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  cursor: pointer;
}

.form__option input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--green); }

.form__submit {
  display: inline-block;
  padding: 17px 28px;
  background-color: var(--green);
  color: #fff;
  border: 0;
  font-family: Forum, Georgia, serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.form__submit:hover { background-color: var(--green-hover); }

.form__note {
  font-family: Muli, 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--body);
  padding-top: 6px;
}

/* Utility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Text-only page head + "action required" notice.

   Used only by /pc-training-thank-you/. That page deliberately has NO hero
   photo: a big banner image after checkout made the page read as "you are
   finished", and registrants were liable to click away before filling in the
   form that follows. The head is plain type so the notice below it is the
   first thing with any visual weight on the page.
   -------------------------------------------------------------------------- */

.page-head {
  padding: 52px 20px 0;
  text-align: center;
}

.page-head__eyebrow {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 12px;
  padding: 0;
}

.page-head h1 {
  font-family: Forum, Georgia, serif;
  font-weight: 400;
  font-size: 49px;
  line-height: 1.2em;
  color: var(--green);
  margin: 0;
  padding: 0;
}

.page-head__sub {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 760px;
  margin: 16px auto 0;
  padding: 0;
}

@media (max-width: 767px) {
  .page-head { padding: 30px 20px 0; }
  .page-head h1 { font-size: 34px; }
  .page-head__sub { font-size: 18px; margin-top: 12px; }
}

/* Attention block. Same shape as .callout so it sits in the page's visual
   system, but in the brick red already used for required-field markers. */
.notice {
  background-color: rgba(163, 51, 51, 0.06);
  border: 2px solid rgba(163, 51, 51, 0.55);
  padding: 24px 35px;
  margin-bottom: 28px;
}

.notice h2 {
  font-family: Forum, Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2em;
  color: #a33;
  text-align: center;
  margin: 0 0 10px;
}

.prose .notice p { margin: 0; }
.prose .notice p + p { margin-top: 10px; }

@media (max-width: 767px) {
  .notice { padding: 16px; }
  .notice h2 { font-size: 26px; }
}

/* Shown by nav.js when an attachment is too large to send. Uses the same
   brick red as the required-field markers. */
.form__note--error {
  color: #a33;
  font-weight: 600;
  margin: 14px 0 0;
  padding-top: 0;
}