/* Allum Education — shared dropdown nav (an-* prefix)
   Self-contained styles. Uses CSS variables defined on each page,
   with safe fallbacks so it also renders on pages without them. */

.an-nav,
.an-nav *,
.an-nav *::before,
.an-nav *::after,
.an-mobile,
.an-mobile *,
.an-mobile *::before,
.an-mobile *::after { box-sizing: border-box; }

.an-nav {
  --an-cream: var(--cream, #FAF7F2);
  --an-white: var(--white, #FFFDF9);
  --an-clay:  var(--clay,  #D4C5B0);
  --an-sage:  var(--sage,  #8A9A7B);
  --an-sage-lt: var(--sage-lt, #C5D4B8);
  --an-sage-dk: var(--sage-dk, #6B7D5E);
  --an-mid:   var(--mid,   #2C2C2E);
  --an-gray:  var(--gray,  #6B6B6D);
  --an-gold:  var(--gold,  #C9A96E);
  --an-char:  var(--char,  #3D3D3F);
  --an-serif: var(--serif, 'Cormorant Garamond', Georgia, serif);
  --an-sans:  var(--sans,  'Nunito Sans', -apple-system, sans-serif);

  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(250,247,242,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212,197,176,.2);
  transition: box-shadow .4s;
  font-family: var(--an-sans);
}
.an-nav.scrolled { box-shadow: 0 2px 28px rgba(0,0,0,.06); }
.an-nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 2rem;
}

.an-logo {
  font-family: var(--an-serif); font-size: 1.5rem; font-weight: 600;
  color: var(--an-mid); text-decoration: none; letter-spacing: -.02em;
  flex-shrink: 0;
}
.an-logo b { color: var(--an-sage); }

.an-links {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0; padding: 0;
}
.an-links > li { position: relative; }

.an-link,
.an-trigger {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .85rem; border-radius: 8px;
  font-size: .82rem; font-weight: 500; color: var(--an-gray);
  text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
  transition: color .25s, background .25s;
  cursor: pointer; background: none; border: none;
  font-family: var(--an-sans);
}
.an-link:hover, .an-trigger:hover,
.an-link:focus-visible, .an-trigger:focus-visible {
  color: var(--an-sage-dk); background: rgba(138,154,123,.06);
}
.an-trigger:focus-visible, .an-link:focus-visible {
  outline: 2px solid var(--an-sage-lt); outline-offset: 2px;
}

.an-chev {
  width: 10px; height: 10px; flex-shrink: 0;
  transition: transform .3s cubic-bezier(.23,1,.32,1);
}
.an-chev path {
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.an-links li.open > .an-trigger .an-chev { transform: rotate(180deg); }

.an-cta {
  margin-left: .5rem; padding: .55rem 1.4rem;
  background: var(--an-sage); color: #fff !important;
  border-radius: 100px; font-size: .8rem; font-weight: 600;
  text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
  transition: all .3s;
}
.an-cta:hover { background: var(--an-sage-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(138,154,123,.2); }
.an-cta:focus-visible { outline: 2px solid var(--an-sage-lt); outline-offset: 3px; }

.an-dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%;
  min-width: 240px;
  background: var(--an-white);
  border: 1px solid rgba(212,197,176,.25);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.03);
  padding: .5rem;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.23,1,.32,1), visibility .25s;
  pointer-events: none;
  margin: 0;
}
.an-links li.open > .an-dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.an-drop-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .85rem; border-radius: 9px;
  text-decoration: none; color: var(--an-char);
  font-size: .85rem; font-weight: 400;
  transition: background .2s, color .2s, transform .2s;
  line-height: 1.4;
}
.an-drop-link:hover {
  background: rgba(138,154,123,.07); color: var(--an-sage-dk);
  transform: translateX(3px);
}
.an-drop-link:focus-visible {
  outline: 2px solid var(--an-sage-lt); outline-offset: 1px; border-radius: 9px;
}
.an-drop-dot {
  width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%;
  transition: transform .25s;
}
.an-drop-link:hover .an-drop-dot { transform: scale(1.4); }
.an-drop-dot.family-dot { background: var(--an-sage); }
.an-drop-dot.school-dot { background: var(--an-gold); }
.an-drop-sub {
  display: block; font-size: .72rem; color: var(--an-clay); font-weight: 400;
  margin-top: .1rem; letter-spacing: 0; text-transform: none;
}

.an-ham {
  display: none; background: none; border: none; cursor: pointer;
  padding: 6px; position: relative; width: 32px; height: 32px;
  flex-shrink: 0;
}
.an-ham:focus-visible { outline: 2px solid var(--an-sage-lt); outline-offset: 3px; border-radius: 6px; }
.an-ham span {
  display: block; width: 20px; height: 2px; background: var(--an-mid);
  border-radius: 2px; position: absolute; left: 6px;
  transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .2s;
}
.an-ham span:nth-child(1) { top: 8px; }
.an-ham span:nth-child(2) { top: 15px; }
.an-ham span:nth-child(3) { top: 22px; }
.an-ham.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.an-ham.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.an-ham.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.an-mobile {
  --an-cream: var(--cream, #FAF7F2);
  --an-clay:  var(--clay,  #D4C5B0);
  --an-sage:  var(--sage,  #8A9A7B);
  --an-sage-lt: var(--sage-lt, #C5D4B8);
  --an-sage-dk: var(--sage-dk, #6B7D5E);
  --an-mid:   var(--mid,   #2C2C2E);
  --an-gray:  var(--gray,  #6B6B6D);
  --an-gold:  var(--gold,  #C9A96E);
  --an-sans:  var(--sans,  'Nunito Sans', -apple-system, sans-serif);

  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
  background: rgba(250,247,242,.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 5rem 2rem 2rem;
  overflow-y: auto;
  flex-direction: column;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.23,1,.32,1);
  font-family: var(--an-sans);
}
.an-mobile.open { display: flex; opacity: 1; transform: translateY(0); }

.an-mobile-links { list-style: none; flex: 1; margin: 0; padding: 0; }
.an-mobile-links > li { border-bottom: 1px solid rgba(212,197,176,.2); }
.an-mobile-links > li:last-child { border-bottom: none; }

.an-m-link {
  display: block; padding: 1rem 0;
  font-size: 1rem; font-weight: 500; color: var(--an-mid);
  text-decoration: none; transition: color .2s;
}
.an-m-link:hover { color: var(--an-sage-dk); }

.an-m-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem 0;
  font-size: 1rem; font-weight: 500; color: var(--an-mid);
  background: none; border: none; cursor: pointer;
  font-family: var(--an-sans); text-align: left;
  transition: color .2s;
}
.an-m-trigger:hover { color: var(--an-sage-dk); }
.an-m-trigger .an-chev-m {
  width: 12px; height: 12px; flex-shrink: 0;
  transition: transform .3s cubic-bezier(.23,1,.32,1);
}
.an-m-trigger .an-chev-m path {
  stroke: var(--an-clay); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.an-m-trigger.expanded .an-chev-m { transform: rotate(180deg); }
.an-m-trigger.expanded { color: var(--an-sage-dk); }

.an-m-sub {
  list-style: none; overflow: hidden;
  max-height: 0; opacity: 0; margin: 0; padding-left: .75rem;
  transition: max-height .35s cubic-bezier(.23,1,.32,1), opacity .25s ease .05s;
}
.an-m-sub.expanded { max-height: 320px; opacity: 1; padding-bottom: .5rem; }
.an-m-sub a {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .5rem; border-radius: 8px;
  font-size: .9rem; color: var(--an-gray); text-decoration: none;
  transition: background .2s, color .2s;
}
.an-m-sub a:hover { background: rgba(138,154,123,.06); color: var(--an-sage-dk); }
.an-m-sub .m-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.an-m-cta {
  display: block; text-align: center;
  margin-top: 1.5rem; padding: 1rem;
  background: var(--an-sage); color: #fff;
  border-radius: 100px; font-size: .9rem; font-weight: 600;
  text-decoration: none; letter-spacing: .03em;
  transition: background .3s;
}
.an-m-cta:hover { background: var(--an-sage-dk); }

@media (max-width: 900px) {
  .an-links { display: none; }
  .an-ham { display: block; }
}
@media (min-width: 901px) {
  .an-mobile { display: none !important; }
}

/* Push page content below the fixed nav. Pages that already manage
   their own top spacing can override .an-nav-spacer. */
.an-nav-spacer { height: 64px; }