/* ============================================================
   McAuliffe Charter — mobile navigation + accessibility
   Not in the original mockup: below 900px the static design hid
   the primary nav with no replacement, leaving phones with no way
   to navigate. This adds the missing panel using the same tokens.
   ============================================================ */

/* ---- Skip link ---- */
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
}
.skip-link.screen-reader-text:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* ---- Hamburger ---- */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}
.mobile-toggle:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.mobile-toggle .bar {
  display: block;
  height: 2px;
  width: 24px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.mobile-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Panel ---- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 24, 47, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .25s ease;
}
.mobile-nav.is-open .mobile-nav__scrim { opacity: 1; }

.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--paper);
  box-shadow: -12px 0 40px rgba(6, 24, 47, .18);
  padding: 22px 24px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  z-index: 1;
}
.mobile-nav.is-open .mobile-nav__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__panel,
  .mobile-nav__scrim { transition: none; }
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav__title {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.mobile-nav__close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.mobile-nav__close:hover { background: var(--cream); }
.mobile-nav__close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---- Menu items ---- */
.mobile-menu,
.mobile-utility,
.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-item > a {
  display: block;
  padding: 14px 4px;
  font-family: var(--mca-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.mobile-item > a:hover { color: var(--red); }
.mobile-item.is-current > a { color: var(--red); }

.mobile-item.is-cta > a {
  margin-top: 18px;
  background: var(--red);
  color: #fff;
  text-align: center;
  border-radius: 999px;
  border-bottom: none;
  padding: 15px 20px;
  font-size: 17px;
  box-shadow: var(--shadow);
}
.mobile-item.is-cta > a:hover { background: #962e3c; color: #fff; }

/* Submenus collapse behind a caret, so a nav with children does not turn the
   panel into a scroll. The caret is its own control beside the link, leaving
   the parent page reachable by tapping the label. */
.mobile-item.has-children { position: relative; }
.mobile-item.has-children > a { padding-right: 52px; }

.mobile-caret {
  position: absolute;
  top: 2px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
  border-radius: 8px;
}
.mobile-caret:hover { color: var(--red); }
.mobile-caret:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.mobile-caret .mca-icon { transition: transform .2s ease; }
.mobile-item.is-expanded > .mobile-caret .mca-icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .mobile-caret .mca-icon { transition: none; }
}

.mobile-submenu[hidden] { display: none; }
.mobile-submenu { padding-left: 14px; }
.mobile-submenu .mobile-item > a {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: 11px 4px;
  color: var(--muted);
}
/* Restated: the rule above is more specific than .is-current, so without this
   the current page loses its highlight once it sits inside a submenu. */
.mobile-submenu .mobile-item.is-current > a { color: var(--red); }

/* ---- Utility links inside the panel ---- */
.mobile-nav__utility { margin-top: 28px; }
.mobile-nav__label {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.mobile-utility li a {
  display: block;
  padding: 10px 4px;
  font-size: 15px;
  color: var(--navy);
}
.mobile-utility li a:hover { color: var(--red); }

/* ---- Breakpoint ---- */
@media (max-width: 900px) {
  .mobile-toggle { display: flex; }
}
@media (min-width: 901px) {
  .mobile-nav { display: none !important; }
}

/* Stop the page scrolling behind the open panel. */
body.mobile-nav-open { overflow: hidden; }

/* ============================================================
   Alert banner variants (driven by the Alert Banner admin screen)
   ============================================================ */
.alert--info { background: linear-gradient(90deg, var(--navy), var(--navy-deep)); }
.alert--good { background: linear-gradient(90deg, var(--gold), #d18f2a); color: var(--navy-deep); }
.alert--good .dot { background: var(--navy-deep); box-shadow: 0 0 0 0 rgba(6, 24, 47, .6); }
.alert--good a.more,
.alert--good .close { color: var(--navy-deep); }

@media (prefers-reduced-motion: reduce) {
  .alert .dot { animation: none; }
}

/* ============================================================
   Small additions the templates need
   ============================================================ */
.btn.cta-outline {
  background: transparent;
  color: var(--navy-deep);
  box-shadow: inset 0 0 0 1.5px var(--navy-deep);
}
.btn.cta-outline:hover { background: rgba(6, 24, 47, .06); color: var(--navy-deep); }

.life-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 20px;
}

.legal-menu {
  list-style: none;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.foot-grid ul { list-style: none; margin: 0; padding: 0; }

/* Interior page body copy
 *
 * Every rule below the wrapper itself is written as :where(.page-content
 * .prose), which is the whole point of this block and not a style choice.
 * :where() contributes nothing to specificity, so these land at the weight of a
 * bare element selector — defaults, which anything with a class beats.
 *
 * Without it they were (0,2,1) overrides reaching into every shortcode that
 * renders in this column. The staff directory is where that surfaced: its
 * headings took the prose h3's 1.6em top margin and floated away from the
 * portrait beside them, its job titles took the prose paragraph's 17px and
 * wrapped onto two lines, and no amount of styling .dir-role could win, because
 * a two-class selector cannot outrank a two-class-plus-element one. Chasing it
 * property by property would have meant a specificity war in every component
 * added from here on.
 *
 * A component that renders in this column now styles itself normally. Editor
 * copy is unaffected: nothing else competes for it.
 */
.page-content { padding: 80px 0; }
.page-content .prose { max-width: 780px; }
:where(.page-content .prose) > * + * { margin-top: 1.15em; }
:where(.page-content .prose) h2 {
  font-family: var(--mca-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--navy);
  margin-top: 1.8em;
  letter-spacing: -.01em;
}
:where(.page-content .prose) h3 {
  font-family: var(--mca-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--navy);
  margin-top: 1.6em;
}
:where(.page-content .prose) p { font-size: 17px; color: var(--ink); }
:where(.page-content .prose) li { font-size: 17px; }
/* Link colour, underline and list indent are not here: they belong to every
   editor-authored block, Elementor's included, and live in one place in
   design-system.css. Restating them at this weight, from a file that loads
   last, would quietly beat that block — the text-decoration shorthand alone
   would reset the underline's colour and offset back to the browser's. */
:where(.page-content .prose) img { border-radius: 12px; }
:where(.page-content .prose) blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 22px;
  font-family: var(--mca-display);
  font-style: italic;
  font-size: 22px;
  color: var(--navy);
}

/* Focus visibility across the site */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Inline SVG icons (replacing the mockup's emoji)
   ============================================================ */
.mca-icon { display: block; flex: none; }
/* Families only. Its quick-link icons sit on a cream square, so they need to
   be navy; the homepage's sit inside a navy circle and must stay gold. Left
   unscoped this painted the homepage icons navy on navy — they rendered
   perfectly and were simply invisible. */
.page-families .quicklinks .ico .mca-icon { color: var(--navy); }
.event .info .meta span { align-items: center; gap: 7px; }
.event .info .meta .mca-icon { color: var(--gold); opacity: .9; }