@charset "UTF-8";
/* ==========================================================================
   WordPress-specific adjustments.
   Kept separate from style.css so the prototype CSS can be regenerated
   without losing these tweaks.
   ========================================================================== */

/* wp_nav_menu outputs a <ul>; make it behave like the prototype's flat nav. */
.nav .nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav .nav-list li { margin: 0; padding: 0; list-style: none; }
.nav .nav-list a { font-weight: 500; font-size: .95rem; transition: color .2s; }
.nav .nav-list a:hover { color: var(--blue-600); }
.site-header.at-top .nav .nav-list a { color: rgba(255, 255, 255, .92); }
.site-header.scrolled .nav .nav-list a { color: var(--gray-900); }

/* Current page indicator */
.nav .nav-list .current-menu-item > a,
.nav .nav-list .current_page_item > a { color: var(--blue-400); }
.site-header.scrolled .nav .nav-list .current-menu-item > a,
.site-header.scrolled .nav .nav-list .current_page_item > a { color: var(--blue-600); }

/* Footer menus rendered by wp_nav_menu */
.site-footer .footer-grid ul { list-style: none; margin: 0; padding: 0; }

/* Breadcrumbs, sitting just under the hero. */
.crumbs {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 11px 0;
  font-size: .82rem;
}
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
}
.crumbs li { display: flex; align-items: center; color: var(--gray-500); }
.crumbs li + li::before {
  content: "\203A";          /* › */
  margin: 0 10px;
  color: var(--gray-400);
}
.crumbs a { color: var(--gray-500); transition: color .2s; }
.crumbs a:hover { color: var(--blue-600); text-decoration: underline; }
.crumbs [aria-current="page"] {
  color: var(--gray-800); font-weight: 600;
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 767px) {
  .crumbs { font-size: .78rem; padding: 9px 0; }
  .crumbs [aria-current="page"] { max-width: 24ch; }
}

/* -------------------------------------------------------------------------
   Sub-page hero artwork
   -------------------------------------------------------------------------
   The banner is roughly 4:1 while the photos are 16:9. Stretching a 16:9 image
   across the full width with `cover` crops it to a narrow band (on the
   instructors photo that left only the faces); fitting the whole frame in
   leaves dead space and makes the picture look pasted on.

   Instead the image sits in the right-hand portion — a much closer aspect
   ratio, so little is cropped — and its left edge is faded out so it melts
   into the navy where the heading sits, with no visible seam.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .page-hero .page-hero-bg,
  .course-hero-compact .page-hero-bg {
    left: auto;
    right: 0;
    /* Capped in pixels as well as percent so the box stays close to the photo's
       own 16:9 shape on very wide monitors instead of stretching flatter. */
    width: min(58%, 720px);
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 28%, #000 60%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 28%, #000 60%);
  }

  /* Hold the scrim dark across the whole text column so white type always has
     a solid backing, then let it fall away over the picture. */
  .page-hero .page-hero-overlay,
  .course-hero-compact .page-hero-overlay {
    background: linear-gradient(90deg,
      rgba(6,14,27,.95) 0%,
      rgba(6,14,27,.90) 42%,
      rgba(6,14,27,.52) 64%,
      rgba(6,14,27,.16) 100%);
  }

  /* Keep the heading inside that dark column — a slightly smaller cap lets it
     stay on one line without running out over the bright part of the photo. */
  .page-hero-sm h1 { font-size: clamp(1.8rem, 3.3vw, 2.45rem); max-width: 30ch; }
  .page-hero-sm .lead { max-width: 40rem; }
}

/* Narrow screens: the banner is nearly square, so a plain full-bleed cover
   crops very little — keep it simple and let the scrim carry the contrast. */
@media (max-width: 767px) {
  .post-type-archive-instructor .page-hero-bg,
  .single-instructor .page-hero-bg { background-position: center 30%; }
}


/* Instagram: give the brand icon more presence than the plain outline icons. */
.icon-btn-ig svg { width: 26px; height: 26px; stroke-width: 2.4; }
.icon-btn-ig { width: 42px; height: 42px; }
.site-header.at-top .icon-btn-ig:hover,
.site-header.scrolled .icon-btn-ig:hover { background: rgba(214, 41, 118, .12); }

/* The admin bar is fixed at the top for logged-in users — push the header down. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* SWELL wraps content in its own containers on some templates; make sure our
   full-bleed sections are never constrained by an inherited max-width. */
main > .hero,
main > .page-hero,
main > .section,
main > .cta-band { width: 100%; }