/* trainer.css
   kfteach.com (Karissa Flieth). Loads last, after redesign.css and home.css or pages.css.
   Charcoal & Coral (her intake): charcoal utility bar, bands and footer, warm off-white pages, the kit's light header
   with her KF mark, coral for small accents. Her own headshot is the home hero and the About portrait. 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 her charcoal here ===== */
.footer { background: var(--c-blue-900); }
.footer__col h4 { color: var(--c-warm); }
.footer__col a:hover, .footer__legal-links a:hover { color: #fff; }

/* ===== Home ===== */
/* the hero photo is her headshot; keep her face in frame at every width (the kit's home hero fix crops it with cover) */
.h-hero__photo img { object-position: 50% 18%; }
/* a portrait in the kit's wide boxes: a taller box on tablets, and on wide screens the hero grows with the window so
   the photo is never cropped tighter than her head and shoulders */
@media (min-width: 720px) and (max-width: 999px) { .h-hero__photo img { aspect-ratio: 4 / 3; } }
@media (min-width: 1000px) { .h-hero__grid { min-height: clamp(600px, 37.5vw, 960px); } }
.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 five parts of the training, a numbered list with a coral number above each heading */
.kf-train { border-top: 1px solid var(--c-line); }
.kf-train__grid { display: grid; gap: 36px; }
@media (min-width: 1000px) { .kf-train__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; } }
.kf-train .h-head { margin-bottom: 0; }
.kf-train .h-head .textlink { display: inline-block; margin-top: 22px; }
.kf-five { list-style: none; margin: 0; padding: 0; counter-reset: five; }
.kf-five li { padding: 22px 0 24px; border-top: 1px solid var(--c-line-strong); counter-increment: five; }
.kf-five li:last-child { border-bottom: 1px solid var(--c-line-strong); }
.kf-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; }
.kf-five h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; margin: 0 0 8px; }
.kf-five p { color: var(--c-ink-2); margin: 0; max-width: 40rem; }

/* home About block: her photo is already the hero, so her credentials sit where the kit's second photo would */
.kf-about__grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .kf-about__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; } }
.kf-creds { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--c-warm); }
.kf-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) ===== */
.kf-videos { display: grid; gap: 32px; }
@media (min-width: 720px) { .kf-videos { grid-template-columns: 1fr 1fr; gap: 36px; } }
.kf-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.kf-voices--two { grid-template-columns: 1fr 1fr; } }
.kf-more { margin-top: 30px; }
.kf-note { margin: 34px 0 0; font-size: 15px; color: var(--c-muted); max-width: 46rem; }
.kf-note .textlink { margin-left: 6px; }

/* ===== About: her portrait on a charcoal panel, framed with a coral line ===== */
@media (min-width: 720px) { .ab-hero__copy h1 { max-width: 18ch; } }
@media (max-width: 420px) { .ab-hero__copy h1 { font-size: 1.95rem; } }
.kf-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(249, 97, 103, 0.16), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(91, 88, 82, 0.35), transparent 60%),
    var(--c-blue-900);
}
.kf-portrait { margin: 0; text-align: center; }
.kf-portrait__frame { position: relative; display: block; width: min(100%, 320px); margin: 0 auto; }
.kf-portrait__frame::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--c-warm); border-radius: 4px; opacity: 0.85;
}
.kf-portrait img {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.kf-portrait figcaption { margin-top: 34px; font-size: 14.5px; line-height: 1.45; color: rgba(246, 244, 241, 0.74); }
.kf-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) {
  .kf-hero-portrait { margin: 0; border-radius: 6px; padding: 64px 48px 56px; }
  .kf-portrait__frame { width: 340px; }
}
@media (min-width: 1000px) {
  .ab-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .kf-hero-portrait {
    min-height: 640px; height: 100%;
    margin-right: calc(-1 * ((100vw - min(100vw, 1240px)) / 2 + 32px));
    border-radius: 6px 0 0 6px;
  }
  .kf-portrait__frame { width: 360px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kf-portrait { opacity: 0; transform: translateY(10px); animation: kf-rise 0.9s ease 0.15s forwards; }
  @keyframes kf-rise { to { opacity: 1; transform: none; } }
}

/* her bio in her own words, with her credentials beside it */
.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; } }

/* her path in education: the roles from her intake in two columns of hairlines */
.kf-path { background: var(--c-paper-warm); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 72px 0; }
.kf-path__grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .kf-path__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; } .kf-path { padding: 96px 0; } }
.kf-path h2 { margin: 0 0 18px; }
.kf-path p { color: var(--c-ink-2); font-size: 1.05rem; line-height: 1.65; margin: 0 0 16px; max-width: 38rem; }
.kf-roles { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 40px; border-top: 2px solid var(--c-warm); }
@media (min-width: 720px) { .kf-roles { grid-template-columns: 1fr 1fr; } }
.kf-roles 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); }

/* the wide band is a CTE standard photo of a training audience from behind */
.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; }

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

/* Small coral text on paper and white uses a deeper coral 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 charcoal 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 her coral and an underline */
.legal-body__container a { color: var(--c-gold-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-body__container a:hover { color: var(--c-ink); }

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