/* trainer.css
   mcleancte.com (Mr. Deonte McLean). Loads last, after redesign.css and home.css or pages.css.
   Burgundy and cream (his intake): burgundy utility bar, bands and footer, cream pages, the kit's light header
   with his DM mark, gold for small accents. CTE standard photos (his intake). Same vocabulary as the October
   2026 kit: hairlines instead of cards, one primary button and a text link per section. */

/* ===== Header: five menu items ===== */
.nav-links { gap: 26px; }
.nav-links a, .nav-cta, .logo__text, .logo__tagline { white-space: nowrap; }
@media (max-width: 1320px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 14.5px; }
  .nav-cta { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 1199px) {
  .nav-links, .main-nav .nav-cta { display: none; }
  .mobile-menu-toggle { display: flex; }
  .sticky-mobile-cta { display: inline-flex; }
}
.utility-bar__right a { color: inherit; }
.nowrap, .js-school-year, .js-booking-year { white-space: nowrap; }

/* ===== Footer: main.css hard-codes a navy footer, so it gets his burgundy here ===== */
.footer { background: #35121F; }
.footer__col h4 { color: var(--c-warm); }
.footer__col a:hover, .footer__legal-links a:hover { color: #fff; }

/* ===== Home ===== */
/* the hero photo is a CTE standard shot of a training session from the back of the room; keep the presenter in frame */
.h-hero__photo img { object-position: 50% 40%; }
.h-hero__copy h1 { text-wrap: balance; }
@media (max-width: 400px) { .h-hero__copy h1 { font-size: 2.3rem; } }

/* the research figures: "10 days" in Fraunces is wider than the kit's 9.5rem number column, so it broke onto two lines */
.h-fig__n { white-space: nowrap; }
@media (min-width: 720px) { .h-fig { grid-template-columns: 11rem 1fr; } }

/* the two programs, a numbered list with a gold number above each heading */
.dm-train { border-top: 1px solid var(--c-line); }
.dm-train__grid { display: grid; gap: 36px; }
@media (min-width: 1000px) { .dm-train__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; } }
.dm-train .h-head { margin-bottom: 0; }
.dm-train .h-head .textlink { display: inline-block; margin-top: 22px; }
.dm-five { list-style: none; margin: 0; padding: 0; counter-reset: five; }
.dm-five li { padding: 22px 0 24px; border-top: 1px solid var(--c-line-strong); counter-increment: five; }
.dm-five li:last-child { border-bottom: 1px solid var(--c-line-strong); }
.dm-five li::before { content: counter(five); display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--c-gold-text); margin-bottom: 8px; }
.dm-five h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; margin: 0 0 8px; }
.dm-five p { color: var(--c-ink-2); margin: 0; max-width: 40rem; }

.dm-five p.dm-five__link { margin-top: 12px; }

/* home About block: no headshot, so his credentials sit where the photo would */
.dm-about__grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .dm-about__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; } }
.dm-creds { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--c-warm); }
.dm-creds li { padding: 13px 0; border-bottom: 1px solid var(--c-line-strong); font-size: 15.5px; line-height: 1.45; color: var(--c-ink-2); }

/* ===== Results videos (real Vimeo players) ===== */
.dm-videos { display: grid; gap: 32px; }
@media (min-width: 720px) { .dm-videos { grid-template-columns: 1fr 1fr; gap: 36px; } }
.dm-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; }

/* Two quotes on the Classroom Management page */
@media (min-width: 720px) { .h-voices__grid.dm-voices--two { grid-template-columns: 1fr 1fr; } }
.dm-more { margin-top: 30px; }
.dm-note { margin: 34px 0 0; font-size: 15px; color: var(--c-muted); max-width: 46rem; }
.dm-note .textlink { margin-left: 6px; }

/* ===== About hero: the photo fix the kit already gives the home hero (end of home.css) =====
   pages.css keeps margin-right: calc(50% - 50vw) on the About photo. That takes 50% of the grid column, not of the page,
   so on desktop the photo ran about 470px past the right edge and the browser hid a third of it, and a portrait photo
   would stretch the row to the photo's own height. These are the home hero's rules: the photo ends at the screen edge,
   the row keeps the kit's 600px, and object-position decides the crop. */
@media (min-width: 1000px) {
  .ab-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ab-hero__photo { position: relative; min-width: 0; min-height: 560px; margin-right: calc(-1 * ((100vw - min(100vw, 1240px)) / 2 + 32px)); }
  .ab-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
}

/* ===== About ===== */
@media (min-width: 720px) { .ab-hero__copy h1 { max-width: 18ch; } }
@media (max-width: 420px) { .ab-hero__copy h1 { font-size: 1.95rem; } }
/* the About photo is a CTE standard shot of a brass key held in an open hand, with no face in frame */
.ab-hero__photo img { object-position: 50% 50%; }
.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; } }
/* the wide band is a CTE standard drawing of a light bulb, set on a wider sheet of its own cream background */
.ab-photo img { object-position: 50% 50%; }

/* 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; }

/* Dark bands keep their links readable */
.research-strip .textlink, .h-final .textlink { color: #fff; text-decoration-color: rgba(246, 244, 241, 0.45); }

/* Small gold text on cream and white uses a deeper gold that is dark enough to read */
.strategy h3::before, .step::before, .product-card__unavailable-label { color: var(--c-gold-text); }

@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }

/* 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; }

/* Store: the kit's free-shipping bar is a bright green gradient; here it is burgundy like the rest of the dark bars */
.ship-banner { background: var(--c-blue-800); color: var(--c-paper); }

/* Links inside the legal pages: the kit styles them exactly like the body text, so they get his burgundy and an underline */
.legal-body__container a { color: var(--c-blue-700); text-decoration: underline; text-underline-offset: 2px; }
.legal-body__container a:hover { color: var(--c-blue-900); }

/* Short headings that would otherwise leave one word on the last line */
.ab-photo figcaption p, .h-mini h3 { text-wrap: balance; }