/* ==============================================================================
   The header, the utility navigation and the menu drawer.

   Everything here is the chrome that wraps every page, so it is kept apart
   from the page stylesheets. Three later layers also touch the header and the
   drawer, and they live in css/pages/index.css because moving them here would
   change the order the browser reads them in. See "Worth knowing" in the
   README.
   ============================================================================== */

/* ==========================================================
   LCA-INSPIRED HEADER SYSTEM
   Compact institutional branding + utilities + menu control.
   ========================================================== */
.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  min-height: 124px;
  align-items: stretch;
}

.brand-lockup {
  display: flex;
  align-items: center;
  width: fit-content;
  padding-right: 42px;
}


.brand-name {
  padding-left: 25px;
  max-width: 290px;
}
.brand-name strong {
  display: block;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
}
.brand-name span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.header-right {
  min-width: 610px;
  display: grid;
  grid-template-rows: 45px 1fr;
  border-left: 1px solid var(--line);
}

.utility-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  padding: 0 4px 0 28px;
  border-bottom: 1px solid var(--line);
  color: #525056;
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.utility-nav a:hover { color: var(--purple); }

.primary-actions {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.header-cta {
  min-width: 108px;
  display: grid;
  place-items: center;
  padding: 0 18px;
  border-left: 1px solid var(--line);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.header-cta:hover { background: var(--lavender-soft); color: var(--purple); }
.header-cta.apply { background: var(--purple); color: #fff; border-left: 0; }
.header-cta.apply:hover { background: var(--purple-dark); color: #fff; }

.search-button,
.menu-button {
  width: 76px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
}
.search-button:hover,
.menu-button:hover { background: var(--lavender-soft); }

.search-icon {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  position: relative;
}
.search-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  right: -6px;
  bottom: -3px;
  background: var(--ink);
  transform: rotate(45deg);
  transform-origin: left center;
}

.menu-lines {
  width: 29px;
  display: grid;
  gap: 6px;
}
.menu-lines span { display: block; height: 2px; background: var(--ink); }
.menu-lines span:nth-child(2) { width: 21px; justify-self: end; }

/* Full menu drawer — closer to an established school site than a tiny dropdown. */
.menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: var(--purple-black);
  color: #fff;
  overflow-y: auto;
}
.menu-drawer.open { display: block; }
.drawer-shell {
  width: min(calc(100% - 64px), var(--max));
  margin: 0 auto;
  padding: 31px 0 70px;
}
.drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.drawer-brand { display: flex; align-items: baseline; gap: 16px; }
.drawer-brand strong {
  color: #d9cbea;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.4rem;
  letter-spacing: -.04em;
}
.drawer-brand span { font-family: "Libre Baskerville", Georgia, serif; font-size: 1.05rem; }
.drawer-close {
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff;
  position: relative;
}
.drawer-close::before,
.drawer-close::after { content:""; position:absolute; top:23px; left:12px; right:12px; height:1px; background:#fff; }
.drawer-close::before { transform: rotate(45deg); }
.drawer-close::after { transform: rotate(-45deg); }

.drawer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-top: 60px;
}
.drawer-main { display: grid; gap: 10px; }
.drawer-main a {
  width: fit-content;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.22;
  border-bottom: 1px solid transparent;
}
.drawer-main a:hover { color: #d8c5e9; border-bottom-color: currentColor; }
.drawer-column h3 {
  margin: 3px 0 22px;
  color: #bda7d2;
  font-family: "Barlow Condensed", sans-serif;
  font-size: .9rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.drawer-column nav { display: grid; gap: 13px; color: rgba(255,255,255,.8); font-size: .91rem; }
.drawer-column a:hover { color: #fff; text-decoration: underline; }


/* The design credit, on the last strip of the footer: a slanted purple band
   with two lavender sleeve stripes, like a jersey. Pointed at, a lavender
   sweep crosses it like the helmet's plume and leaves the Maximin Design
   lockup behind. The kit's own stylesheet loads last, so these rules carry
   the footer's id to win. */
#site-footer .footer-end-right { display: flex; }
#site-footer .hdc-credit {
  position: relative;
  isolation: isolate;
  padding: 8px 18px 8px 40px;
}
#site-footer .hdc-credit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 8px, #c9b3ec 8px 13px, transparent 13px 18px, #c9b3ec 18px 23px, transparent 23px),
    var(--purple);
  transform: skewX(-14deg);
}
#site-footer .hdc-credit__copy { position: relative; overflow: hidden; }
#site-footer .hdc-credit__copy > span:first-child { color: #c9b3ec; }
#site-footer .hdc-credit__copy > * { transition: transform .5s cubic-bezier(.65, 0, .35, 1), opacity .4s ease; }
#site-footer .hdc-credit .mx-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(-8px);
}
#site-footer .hdc-credit .mx-mark { display: block; line-height: 0; }
#site-footer .hdc-credit .mx-mark svg { display: block; width: auto; height: 17px; }
#site-footer .hdc-credit__copy::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -40%;
  z-index: 2;
  width: 40%;
  background: linear-gradient(90deg, transparent, #c9b3ec 45%, #fff 55%, transparent);
  transform: skewX(-20deg);
  opacity: 0;
}
#site-footer .hdc-credit:is(:hover, :focus-visible) .hdc-credit__copy::after { animation: credit-plume .7s cubic-bezier(.65, 0, .35, 1) forwards; }
#site-footer .hdc-credit:is(:hover, :focus-visible) .hdc-credit__copy > :not(.mx-in) { opacity: 0; transform: translateX(8px); transition-delay: .05s; }
#site-footer .hdc-credit:is(:hover, :focus-visible) .mx-in { opacity: 1; transform: none; transition-delay: .28s; }
@keyframes credit-plume {
  0% { left: -40%; opacity: .9; }
  100% { left: 110%; opacity: 0; }
}
/* The accessibility button stays in the bottom-right corner, so the credit
   stops short of it; on a phone the credit takes a row of its own on the left. */
@media (min-width: 600px) {
  #site-footer .hdc-credit { margin-right: 44px; }
}
@media (max-width: 599px) {
  #site-footer .footer-end { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  #site-footer .footer-end-right { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #site-footer .hdc-credit__copy > * { transition: none; }
  #site-footer .hdc-credit__copy::after { display: none; }
}