/* ============================================================
   PDC — SHARED SITE CHROME
   Loaded before each page's inline <style>, so any page-specific
   rule of equal specificity still wins.

   Layer 1: NAVIGATION
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.4s ease, background 0.4s ease;
}

.nav.scrolled {
  padding: 0.6rem 3rem;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: 0.03em;
  transition: font-size 0.4s ease;
}

.nav-wordmark .word-dance { color: var(--red); }
.nav.scrolled .nav-wordmark { font-size: 1.1rem; }

.nav-logo-mobile {
  display: none;
  height: 36px;
  width: auto;
}

/* Shrink the monogram on scroll, matching the wordmark's scrolled tier. */
.nav.scrolled .nav-logo-mobile { height: 30px; }

.nav-links {
  list-style: none;
  display: flex;
  gap: 2.25rem;
  align-items: center;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.3s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--red);
  /* Literal curve, not var(--ease-out) — that token exists only on the homepage. */
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover,
.nav-links a.active { color: var(--white); }

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  padding: 0.6rem 1.6rem !important;
  margin-left: 0.85rem;
  background: var(--red) !important;
  color: var(--white) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  border: none;
}

.nav-cta:hover {
  background: var(--red-dark) !important;
  transform: translateY(-1px);
}

.nav-cta::after { display: none !important; }

/* Reserve a fixed slot for the final CTA so its label length can't move the rest
   of the nav. Virtual Training says "Inquire" (8.5px narrower than "Register"),
   and because .nav is space-between, that pushed every link right by 8.5px when
   moving between pages.

   The min-width sits on the <li>, not the .nav-cta itself: the anchor is
   display:inline, so min-width would be ignored, and making it inline-block would
   let its 0.6rem vertical padding into the line box and grow the whole nav ~15px. */
.nav-links li:has(.nav-cta) {
  /* 131.8px is the natural width of the widest label ("Register") plus the CTA's
     0.85rem left margin; 136 leaves slack for font-rendering variance. */
  min-width: 136px;
  /* Right, not center: .nav is space-between, so this <li> ends at the nav's right
     padding. Centering would inset the shorter "Inquire" pill and leave a ragged
     right edge; aligning right keeps the pill flush and puts the slack in the gap. */
  text-align: right;
}

.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  z-index: 1001;
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--white);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.nav-wordmark,
.nav-links a { white-space: nowrap; }

/* Compact desktop: the full link row needs ~1092px, so tighten before collapsing. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .nav { padding: 1.25rem 2rem; }
  .nav.scrolled { padding: 0.6rem 2rem; }
  .nav-links { gap: 1.5rem; }
}

/* Collapse to hamburger. Must be 1024, not 768 — every iPad lands in between. */
@media (max-width: 1024px) {
  .nav { padding: 1rem 2rem; }
  .nav.scrolled { padding: 0.6rem 2rem; }
  .nav-wordmark { display: none; }
  .nav-logo-mobile { display: block; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    transition: right 0.5s ease-out;
    z-index: 999;
  }

  .nav-links.open { right: 0; }
  .nav-links a { font-size: 0.9rem; color: var(--white); }
  .nav-links a.active { padding-bottom: 6px; }

  .nav-links .nav-cta {
    margin-left: 0;
    margin-top: 1.25rem;
    padding: 0.85rem 2.2rem !important;
    font-size: 0.8rem !important;
  }

  .nav-cta-mobile {
    display: inline-block;
    margin-left: auto;
    margin-right: 1.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--red);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 1px;
    z-index: 1001;
  }

  .nav.scrolled .nav-cta-mobile { background: var(--red); }

  /* Keyed off .nav, not a sibling selector: the homepage orders the nav
     links -> cta-mobile -> toggle, sub-pages order it cta-mobile -> toggle
     -> links, so "~" can only ever match one of the two. */
  .nav.menu-open .nav-cta-mobile { display: none; }
}

@media (max-width: 768px) {
  .nav { padding: 0.75rem 1.5rem; }
  .nav.scrolled { padding: 0.6rem 1.5rem; }
  .nav-cta-mobile { margin-right: 1rem; }
  .nav-logo-mobile { height: 30px; }
  .nav.scrolled .nav-logo-mobile { height: 26px; }
}

/* ============================================================
   Layer 2: BUTTONS, FOOTER, BACK-TO-TOP, SOCIAL
   ============================================================ */

/* Sub-pages previously split these across a grouped ".btn-primary, .btn-secondary"
   rule plus a specific one; the homepage kept them in a single block. The resolved
   values were already identical on all six pages, so this is one canonical form. */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 1.1rem 2.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1px;
  color: var(--white);
  transition: all 0.3s;
}

.btn-primary {
  background: var(--red);
  border: 2px solid var(--red);
}

.btn-secondary {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

/* The homepage's richer treatment, adopted site-wide. Note :focus-visible —
   sub-pages previously styled :hover only, so keyboard users got no button
   feedback at all beyond the global focus ring. */
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200, 16, 46, 0.3);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* NB: the phone-width full-width overrides stay in each page's inline CSS —
   the homepage goes full-width at 480px, sub-pages at 768px with a 280px cap.
   That is a real layout difference, not drift, and the hero is sensitive to it. */

.footer-logo img { height: 50px; width: auto; opacity: 0.75; }

.footer-nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-nav a {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-nav a:hover { color: var(--red); }

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  text-align: right;
}

.footer-meta-link,
.footer-email-link {
  text-decoration: none;
  transition: color 0.3s;
}

.footer-meta-link { color: rgba(255, 255, 255, 0.6); }
.footer-email-link { color: rgba(255, 255, 255, 0.65); }
.footer-meta-link:hover,
.footer-email-link:hover { color: var(--red); }

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s;
}

.social-icon:hover {
  color: var(--white);
  border-color: var(--red);
  background: var(--red);
}

/* Homepage-only variant for the lighter footer band; harmless where unused. */
.social-icon-dark {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  width: 44px;
  height: 44px;
}

.social-icon-dark:hover {
  color: var(--white);
  border-color: var(--red);
  background: var(--red);
}

.back-to-top {
  position: fixed;
  bottom: max(2rem, env(safe-area-inset-bottom));
  right: max(2rem, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
  z-index: 90;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--red-dark); }
.back-to-top svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  .back-to-top {
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    right: max(1.25rem, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   Layer 3: ACCESSIBILITY — EYEBROWS ON DARK
   ============================================================ */

/* #c8102e has a relative luminance of 0.1285, which caps it at 3.57:1 against
   pure black. Small red text on a dark section therefore cannot reach the
   4.5:1 that WCAG AA requires — measured at 3.37:1 before this change. Red on
   WHITE is 5.88:1 and passes, so light-background eyebrows are left alone.

   Same treatment already used on the homepage hero: the text goes white and
   the red survives as a rule above it, so the accent is kept without carrying
   the legibility burden. */
/* !important is deliberate here and below. Several pages target these elements
   with descendant selectors of EQUAL specificity (e.g. ".premier-band
   .section-eyebrow") that load after site.css and therefore win the tie, and a
   few instances carry inline colours. Verified in the browser: without it, the
   eyebrow-left instances stayed red. This layer exists solely to guarantee the
   accessible value wins — it is not a general-purpose override. */
.section-eyebrow.on-dark,
.hero-eyebrow.on-dark {
  color: rgba(255, 255, 255, 0.92) !important;
}

.section-eyebrow.on-dark::before,
.hero-eyebrow.on-dark::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--red);
  margin: 0 auto 1.1rem;
}

/* Some eyebrows are left-aligned rather than centred; the auto margins above
   would float the rule away from the text it belongs to. */
.section-eyebrow.on-dark.eyebrow-left::before,
.hero-eyebrow.on-dark.eyebrow-left::before {
  margin-left: 0;
}

/* ---- Small red text on dark ------------------------------------------------
   #c8102e tops out at 3.57:1 on near-black, so it cannot reach 4.5:1 at small
   sizes. #D9586D measures 5.25:1 on #0a0a0a. Used ONLY where red sits on a dark
   surface; #c8102e remains the brand red for fills, large display type, and
   every light background (where it measures 5.88:1 and passes comfortably).

   The five classes below were verified to appear ONLY on dark surfaces across
   all six pages, so they are safe to target by class. Classes that appear on
   BOTH dark and light — .featured-tag, .dates-heading, .btn-outline-red — are
   NOT listed: they get the .red-on-dark utility per instance instead, because
   lightening the red on a light background would make contrast worse. */
:root { --red-on-dark: #D9586D; }

.best-for,
.date-card-month,
.date-card-status.open,
.scholarship-eyebrow,
.workshop-tag,
.red-on-dark {
  color: var(--red-on-dark) !important;
}