/* trainer.css
   milagroeducationalconsulting.com (Mary E Condon). Loads last, after redesign.css and home.css or pages.css.
   Her gold Milagro logo on dark burgundy in the header, the menu panel and the footer (her request),
   cream pages, burgundy bands with gold buttons, hairlines instead of cards. */

/* ===== Header: dark burgundy, her gold logo ===== */
.utility-bar { background: #2C0B17; color: rgba(251, 247, 241, 0.86); border-bottom: 1px solid rgba(201, 164, 96, 0.2); }
.utility-bar a:hover, .utility-bar__left a:hover, .utility-bar__right a:hover { color: var(--c-warm); opacity: 1; }
.utility-bar__right a { color: inherit; }
.main-nav {
  background: var(--c-blue-900); border-bottom: 1px solid rgba(201, 164, 96, 0.26);
  backdrop-filter: none; -webkit-backdrop-filter: none; padding: 14px 0;
}
.logo--brand { gap: 18px; }
.logo__img { display: block; height: 56px; width: auto; }
.main-nav .logo--brand > .logo__person { display: none; }
.logo__person .logo__text { color: var(--c-paper); font-size: 16.5px; }
.logo__person .logo__tagline { color: rgba(251, 247, 241, 0.68); }
@media (min-width: 1360px) {
  .main-nav .logo--brand > .logo__person { display: flex; flex-direction: column; padding-left: 18px; border-left: 1px solid rgba(201, 164, 96, 0.42); }
}
.nav-links a { color: rgba(251, 247, 241, 0.86); white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.nav-links a::after { background: var(--c-warm); }
.main-nav .nav-cta { background: var(--c-warm); color: var(--c-ink); white-space: nowrap; }
.main-nav .nav-cta:hover { background: #D8B978; color: var(--c-ink); }
.mobile-menu-toggle svg { color: var(--c-paper); }
.cart-btn { color: var(--c-paper); }
@media (max-width: 1100px) { .nav-links { gap: 24px; } }
@media (max-width: 720px) { .logo__img { height: 46px; } .main-nav { padding: 12px 0; } }

/* Menu panel: same burgundy strip at the top so the logo keeps its gold-on-burgundy look */
.mobile-menu__header { background: var(--c-blue-900); border-bottom: 1px solid rgba(201, 164, 96, 0.26); padding: 14px 20px; }
.mobile-menu__header .logo__img { height: 46px; }
.mobile-menu__close { color: var(--c-paper); }
.mobile-menu__nav a[aria-current="page"] { color: var(--c-blue-700); }

/* ===== Footer ===== */
.footer { background: #2C0B17; }
.footer__brand .logo__img { height: 62px; }
.footer__who { margin: 20px 0 12px; font-size: 14.5px; color: rgba(251, 247, 241, 0.74); }
.footer__who strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--c-paper); }
.footer__col h4 { color: var(--c-warm); }
.footer__col a:hover { color: #fff; }

/* ===== Her portrait on a burgundy panel (home and About heroes) ===== */
.mc-hero-portrait {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 52px 20px 44px; margin: 0 -20px;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(201, 164, 96, 0.2), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(142, 58, 85, 0.35), transparent 60%),
    var(--c-blue-900);
}
.mc-portrait { margin: 0; text-align: center; }
.mc-portrait__frame { position: relative; display: block; width: min(100%, 320px); margin: 0 auto; }
.mc-portrait__frame::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--c-warm); border-radius: 4px; opacity: 0.85;
}
.mc-portrait img {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.mc-portrait figcaption { margin-top: 34px; font-size: 14.5px; line-height: 1.45; color: rgba(251, 247, 241, 0.74); }
.mc-portrait figcaption strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--c-paper); }
@media (min-width: 720px) {
  .mc-hero-portrait { margin: 0; border-radius: 6px; padding: 64px 48px 56px; }
  .mc-portrait__frame { width: 340px; }
}
@media (min-width: 1000px) {
  .h-hero__grid--portrait { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mc-hero-portrait {
    min-height: 620px; height: 100%;
    margin-right: calc(-1 * ((100vw - min(100vw, 1240px)) / 2 + 32px));
    border-radius: 6px 0 0 6px;
  }
  .mc-portrait__frame { width: 360px; }
  .ab-hero__grid .mc-hero-portrait { min-height: 640px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mc-portrait { opacity: 0; transform: translateY(10px); animation: mc-rise 0.9s ease 0.15s forwards; }
  @keyframes mc-rise { to { opacity: 1; transform: none; } }
}
.h-hero__proof cite, .mc-creds cite, .bio__credentials cite { font-style: italic; }
.h-hero__copy h1 { text-wrap: balance; }
@media (max-width: 400px) { .h-hero__copy h1 { font-size: 2.3rem; } }

/* ===== Home: three ways ===== */
.mc-who { display: block; font-size: 14.5px; font-weight: 500; color: var(--c-muted); margin: 0 0 10px; }
.h-program .mc-outcome { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.42; color: var(--c-ink); margin-bottom: 12px; }
@media (min-width: 720px) { .mc-three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mc-three { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* ===== Home bands ===== */
.mc-band--paper { background: var(--c-paper); }
.mc-band--white { background: var(--c-white); }
.mc-band .h-head { margin-bottom: 40px; }
.mc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 22px; }
.mc-more { margin-top: 34px; }
#services, #workshops, #book, #classroom-management, #consulting, .mc-ws { scroll-margin-top: 100px; }

/* Workshops at a glance: hairline items, each one a link to its sample schedule */
.mc-ws-list { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.mc-ws-item {
  display: block; padding: 26px 0 28px; border-bottom: 1px solid var(--c-line); color: inherit;
  transition: background-color var(--t-base);
}
.mc-ws-item h3 { font-size: 1.32rem; margin: 0 0 4px; transition: color var(--t-base); }
.mc-ws-item__sub { display: block; font-size: 14.5px; font-weight: 600; color: var(--c-gold-text); margin-bottom: 12px; }
.mc-ws-item p { color: var(--c-ink-2); margin: 0 0 14px; max-width: 34rem; }
.mc-ws-item__meta { font-size: 14px; color: var(--c-muted); }
.mc-ws-item:hover h3 { color: var(--c-blue-700); }
@media (min-width: 720px) {
  .mc-ws-list { grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
  .mc-ws-item { border-top: 1px solid var(--c-line); border-bottom: 0; }
}
@media (min-width: 1000px) { .mc-ws-list { grid-template-columns: repeat(3, 1fr); column-gap: 44px; } }

/* The book: a burgundy band */
.mc-book { background: var(--c-blue-900); color: var(--c-paper); position: relative; overflow: hidden; }
.mc-book::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 100% 0%, rgba(201, 164, 96, 0.16), transparent 60%);
}
.mc-book__grid { position: relative; display: grid; gap: 34px; align-items: center; }
.mc-book__by { font-size: 15px; font-weight: 500; color: rgba(251, 247, 241, 0.72); margin: 0 0 14px; }
.mc-book__title h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; color: var(--c-warm); margin: 0 0 16px; letter-spacing: -0.02em; }
.mc-book__title h2 cite { font-style: italic; }
.mc-book__sub { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.35; color: var(--c-paper); margin: 0; max-width: 24ch; }
.mc-book__copy p { color: rgba(251, 247, 241, 0.84); font-size: 1.08rem; max-width: 30rem; margin: 0 0 28px; }
.mc-book .btn { background: var(--c-warm); color: var(--c-ink); border-color: var(--c-warm); }
.mc-book .btn:hover { background: #D8B978; border-color: #D8B978; color: var(--c-ink); transform: none; box-shadow: none; }
@media (min-width: 1000px) { .mc-book__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; } .mc-book__copy { padding-left: 40px; border-left: 1px solid rgba(201, 164, 96, 0.35); } }

/* Time To Teach results under the classroom management band */
.mc-results-label { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.25; color: var(--c-ink); margin: 0 0 24px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.mc-results { display: grid; gap: 36px; }
.mc-quotes { display: grid; gap: 30px; align-content: start; }
@media (min-width: 1000px) { .mc-results { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; } }

/* Real Vimeo players in the redesign's frame */
.mc-videos { display: grid; gap: 36px; }
@media (min-width: 720px) { .mc-videos { grid-template-columns: 1fr 1fr; gap: 40px; } }
.mc-vid { margin: 0; }
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--c-blue-900); box-shadow: var(--sh-paper); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-cap { margin-top: 14px; font-size: 15px; color: var(--c-muted); line-height: 1.45; }
.vid-cap strong { display: block; color: var(--c-ink); font-weight: 600; font-size: 16px; }

/* About block on the home page */
.mc-about { background: var(--c-cream); }
.mc-about__grid { display: grid; gap: 44px; }
@media (min-width: 1000px) { .mc-about__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; } }
.mc-creds { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--c-blue-800); }
.mc-creds li { padding: 12px 0; border-bottom: 1px solid var(--c-line-strong); font-size: 15.5px; line-height: 1.45; color: var(--c-ink-2); }

/* ===== Workshops page ===== */
.mc-jump { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 60rem; }
.mc-jump a {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--c-line-strong); border-radius: 6px;
  font-size: 14px; font-weight: 500; color: var(--c-ink-2); background: var(--c-white);
  transition: border-color var(--t-base), color var(--t-base);
}
.mc-jump a:hover { border-color: var(--c-warm-deep); color: var(--c-blue-800); }
.mc-ws__grid { display: grid; gap: 36px; }
@media (min-width: 1000px) { .mc-ws__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; } }
.mc-ws h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 8px; max-width: 22ch; }
.mc-ws__sub { font-size: 16px; font-weight: 600; color: var(--c-gold-text); margin: 0 0 22px; }
.mc-ws__q { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.35; color: var(--c-blue-800); margin: 0 0 18px; padding-left: 18px; border-left: 3px solid var(--c-warm); max-width: 34rem; }
.mc-ws__copy p { max-width: 38rem; }
.mc-ws__copy p + p { margin-top: 14px; }
.mc-ws__copy h2 + p:not(.mc-ws__sub) { margin-top: 20px; }
.mc-ws--short .mc-ws__grid { grid-template-columns: 1fr; }
.mc-ws--short .btn { margin-top: 22px; }
.mc-ws__copy p:not(.mc-ws__sub):not(.mc-ws__q):not(.mc-ws__note) { color: var(--c-ink-2); }
.mc-ws__note { font-size: 15px; font-weight: 500; color: var(--c-muted); margin-top: 20px; }
.mc-ws__schedule { background: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue-700); border-radius: 6px; padding: 26px 26px 18px; }
.pg-section--white .mc-ws__schedule { background: var(--c-paper); }
.mc-ws__schedule h3 { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-muted); margin: 0 0 8px; }
.mc-ws__schedule--cta { display: flex; align-items: center; justify-content: flex-start; background: transparent; border: 0; padding: 0; }
.mc-modules { list-style: none; padding: 0; margin: 0; }
.mc-modules li { padding: 12px 0; border-top: 1px solid var(--c-line); font-size: 16px; line-height: 1.4; color: var(--c-ink); }
.mc-modules li:first-child { border-top: 0; }
.mc-modules span { display: block; font-size: 13px; font-weight: 600; color: var(--c-gold-text); margin-bottom: 2px; }
.mc-ws--short { padding-top: 64px; padding-bottom: 64px; }

.mc-consult { display: grid; gap: 34px; }
@media (min-width: 900px) { .mc-consult { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.mc-consult h3 { font-size: 1.3rem; margin: 0 0 12px; }
.mc-list { list-style: none; padding: 0; margin: 0; }
.mc-list li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--c-line-strong); color: var(--c-ink-2); font-size: 16px; }
.mc-list li:last-child { border-bottom: 1px solid var(--c-line-strong); }
.mc-list li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 7px; height: 7px; background: var(--c-warm-deep); border-radius: 1px; }

/* ===== Interior pages ===== */
.pg-section { padding: 72px 0; }
.pg-section--white { background: var(--c-white); }
.pg-section--paper { background: var(--c-paper); }
.pg-section--cream { background: var(--c-cream); }
@media (min-width: 720px) { .pg-section { padding: 96px 0; } }

/* About page */
@media (min-width: 720px) { .ab-hero__copy h1 { max-width: 26ch; } }
@media (max-width: 420px) { .ab-hero__copy h1 { font-size: 1.8rem; } }
@media (max-width: 719px) { .ab-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ab-facts dd { font-size: 13px; line-height: 1.35; } }
@media (min-width: 1000px) { .ab-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.bio--nophoto .bio__container { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .bio--nophoto .bio__container { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 72px; } .bio--nophoto .bio__sidebar { grid-column: auto; } }
@media (min-width: 720px) and (max-width: 999px) { .bio--nophoto .bio__sidebar { grid-column: 1 / -1; } }
.ab-photo img { object-position: 50% 40%; }

/* FAQ groups */
.faq-group-head { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 56px 0 8px; }
.faq-group-head:first-child { margin-top: 0; }

/* Resources: three cards in the closing row */
@media (min-width: 900px) { .store-promo__grid--three { grid-template-columns: repeat(3, 1fr); max-width: 1180px; } }

/* Dark bands keep their links readable; gold hovers stay in the logo's family */
.research-strip .textlink, .h-final .textlink { color: #fff; text-decoration-color: rgba(251, 247, 241, 0.45); }
.research-strip .textlink:hover, .h-final .textlink:hover { color: #fff; text-decoration-color: var(--c-warm); }
.outcomes-side .btn:hover, .resource-cta-strip .btn:hover, .both-cta__btn:hover, .takeaways-side .btn:hover, .store-help__btn--solid:hover { background: var(--c-warm-deep); }

@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }
.js-school-year, .js-booking-year, .nowrap { white-space: nowrap; }

/* 404: the kit's ".error h1" and ".error p" rules never match this page's markup, so the heading gets its spacing here */
body:has(> .error-main) { min-height: 100vh; display: flex; flex-direction: column; }
.error__container h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 12px 0 18px; max-width: 22ch; }
.error__container > p { font-size: 18px; line-height: 1.55; color: var(--c-muted); max-width: 40rem; margin-bottom: 32px; }
.error__links { margin-bottom: 44px; }

/* Gold text on the cream and white pages uses her logo's own gold (#886834), which is dark enough to read */
.strategy h3::before, .step::before, .product-card__unavailable-label { color: var(--c-gold-text); }