/* ao-polish.css — additive enhancements for the college's original layout.
   It does not restyle anything: every rule below decorates classes the pages already use.
   Load after the page's own stylesheet. All motion is dropped under prefers-reduced-motion. */

/* sections rise into view as you scroll. Nothing is hidden by default — an element only gains the
   animation when the observer reaches it, so a missed intersection can never leave content invisible. */
@keyframes aoRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-ao-reveal].ao-in { animation: aoRise .7s cubic-bezier(.22,.61,.36,1) both; }

/* an in-page jump (#news, #gallery) must not bury the heading it lands on under the fixed navbar */
[id] { scroll-margin-top: 132px; }
@media (max-width: 768px) { [id] { scroll-margin-top: 168px; } }

/* section headings: a gold rule that draws itself in when the heading arrives */
.section-title { position: relative; }.section-title::after { content: ""; display: block; width: 0; height: 3px; margin-top: 14px; border-radius: 3px;
  background: linear-gradient(90deg, #b0812f, #e7cf9f); transition: width 1s cubic-bezier(.22,.61,.36,1); }
.ao-in .section-title::after, .section-title.ao-in::after { width: 92px; }
.section-title.ao-rule::after { width: 92px; }

/* eyebrow tick blinks once when it lands, so the eye is led to the section label */
.eyebrow-line, .eyebrow { position: relative; }
@keyframes aoEyebrow { from { opacity: .35; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.ao-in .eyebrow, .ao-in .eyebrow-line { animation: aoEyebrow .6s cubic-bezier(.22,.61,.36,1) both; }

/* cards: lift, warm edge and a shadow that grows with it */
.news-card, .value-card, .feature-card, .subject-item, .testi-card, .prog-card, .card-hover,
.gallery-card, .staff-card, .dept-card {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.news-card:hover, .value-card:hover, .feature-card:hover, .prog-card:hover, .staff-card:hover,
.dept-card:hover, .card-hover:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14,24,40,.18); border-color: rgba(176,129,47,.55); }
.subject-item:hover { transform: translateY(-2px); border-color: rgba(176,129,47,.6); }

/* card pictures breathe in on hover */
.news-card img, .gallery-card img, .staff-card img, .feature-card img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.news-card:hover img, .gallery-card:hover img, .staff-card:hover img, .feature-card:hover img { transform: scale(1.06); }
.news-card, .gallery-card { overflow: hidden; }

/* the section number ghost behind a heading gains a slow gold wash */
@keyframes aoGhost { 0%,100% { opacity: .10 } 50% { opacity: .22 } }
.section-number { animation: aoGhost 7s ease-in-out infinite; }

/* stat numbers count up; hide the target until the counter touches it */
[data-ao-count] { font-variant-numeric: tabular-nums; }

/* a slim gold progress line under the fixed navbar so a visitor sees how far they have read */
#aoProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10001; pointer-events: none;
  background: linear-gradient(90deg, #b0812f, #e7cf9f); box-shadow: 0 0 10px rgba(176,129,47,.55); }

/* every primary button gets a warmer press */
.nb-apply, .btn, .cta-btn, .ao-cta { position: relative; }
@keyframes aoNudge { from { transform: translateY(0) } 50% { transform: translateY(-3px) } to { transform: translateY(0) } }
.nb-apply:hover, .cta-btn:hover { animation: aoNudge .5s ease both; }

/* a small secondary nav strip for the pages that never had a navbar (apply, circular, uniform store) */
.ao-navlinks { display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:center; align-items:center;
  padding:12px 18px; background:linear-gradient(135deg,#0f2038,#1c3557); border-bottom:1px solid rgba(176,129,47,.28); }
.ao-navlinks a { color:rgba(255,255,255,.78); font-size:.82em; font-weight:600; letter-spacing:.05em;
  min-height:40px; display:inline-flex; align-items:center; padding:8px 14px; border-radius:30px;
  text-decoration:none; transition:color .25s ease, background .25s ease; white-space:nowrap; }
.ao-navlinks a:hover { color:#e7cf9f; background:rgba(201,151,26,.12); }
.ao-navlinks a.ao-here { color:#e7cf9f; background:rgba(201,151,26,.16); }
@media (max-width:640px){ .ao-navlinks{gap:2px 4px; padding:10px 10px;} .ao-navlinks a{font-size:.78em; padding:8px 11px;} }

/* Phone-width guard: a grid track defaults to minmax(auto,1fr), so one long label ("Years of
   excellence") can push the whole page sideways. Re-declaring the tracks as minmax(0,1fr) lets the
   columns shrink instead of the document. Only the mobile breakpoint is touched. */
@media (max-width: 768px) {
  .page-hero-bar, .stats-row, .values-grid, .pm-stats, .pm-list, .stats-ribbon { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .story-grid, .leadership-grid, .footer-top, .depts-grid, .cards-grid { grid-template-columns: minmax(0,1fr); }
  .phb-item, .stat-item, .value-card, .dept-card, .story-img-wrap { min-width: 0; }
  .phb-item { padding: 14px 10px; }
  /* no overflow-wrap here: minmax(0,1fr) already stops the page scrolling, and breaking
     "100%" across two lines is worse than the column it was meant to protect */
  .page-hero-bar { width: 100%; }
}

/* Several content sections carry an inline two-column grid with a 60-80px gutter; that arithmetic
   cannot fit a phone. [data-*] selectors cannot beat an inline style, so these need !important. */
@media (max-width: 768px) {
  .ao-stack, div[style*="grid-template-columns:1fr 1fr;"], div[style*="grid-template-columns:1fr 1.1fr;"] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important;
  }
}

/* the footer the apply page and the uniform store never had, in the site's navy/gold language */
.ao-foot { background: linear-gradient(160deg, #0a1628, #142843); color: rgba(255,255,255,.72);
  border-top: 3px solid #b0812f; padding: 46px 24px 0; font-family: 'Montserrat', system-ui, sans-serif; }
.ao-foot-inner { max-width: 1080px; margin: 0 auto; display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.ao-foot-brand { display: flex; gap: 14px; align-items: center; }
.ao-foot-brand img { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(201,151,26,.5); object-fit: cover; }
.ao-foot-brand strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.15em; color: #fff; letter-spacing: .02em; }
.ao-foot-brand span { display: block; font-size: .78em; letter-spacing: .06em; color: rgba(255,255,255,.55); margin-top: 3px; }
.ao-foot-brand em { color: #e7cf9f; font-style: italic; }
.ao-foot-links { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.ao-foot-links a { color: rgba(255,255,255,.74); font-size: .82em; font-weight: 500; letter-spacing: .04em;
  text-decoration: none; padding: 8px 13px; border-radius: 30px; transition: color .28s ease, background .28s ease; }
.ao-foot-links a:hover { color: #e7cf9f; background: rgba(201,151,26,.12); }
.ao-foot-contact { font-size: .82em; line-height: 1.9; color: rgba(255,255,255,.6); text-align: right; }
.ao-foot-contact a { color: #e7cf9f; text-decoration: none; }
.ao-foot-contact a:hover { text-decoration: underline; }
.ao-foot-bar { max-width: 1080px; margin: 30px auto 0; padding: 18px 0 26px; text-align: center;
  font-size: .76em; letter-spacing: .08em; color: rgba(255,255,255,.42); border-top: 1px solid rgba(255,255,255,.08); }
[data-theme="light"] .ao-foot { color: rgba(255,255,255,.72); }
@media (max-width: 860px) { .ao-foot-inner { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .ao-foot-contact { text-align: left; } }

/* Thumb-size pass, mobile only. The visual art is untouched: each control keeps its painted pill or
   dot via background-clip:content-box, while padding (paid back with an equal negative margin, so the
   row layout cannot widen) builds the 40px box a thumb needs. !important because these pages declare
   their own sizes inline and in later style blocks. */
@media (max-width: 768px) {
  .hero-dot { box-sizing: content-box; width: 22px; height: 3px; padding: 18.5px 9px; margin: 0 -9px;
    background-clip: content-box; background-color: rgba(255,255,255,.32); }
  .hero-dot.active { width: 40px; background-color: var(--gold-soft, #d9bb5e); }
  .carousel-dot { box-sizing: content-box; width: 6px; height: 6px; padding: 17px 17px; margin: 0 -17px;
    background-clip: content-box; background-color: rgba(255,255,255,.22); }
  .carousel-dot.active { width: 22px; background-color: var(--gold-soft, #d9bb5e); }
  .filter-chip, .chip { min-height: 40px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .grades-remove { width: 40px !important; height: 40px !important; }
  .grades-add { min-height: 40px !important; }
  .pause-pill { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-ao-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
  .section-title::after { width: 92px; transition: none; }
  .ao-in .eyebrow, .ao-in .eyebrow-line, .section-number, .nb-apply:hover, .cta-btn:hover { animation: none; }
  .news-card:hover, .value-card:hover, .feature-card:hover, .prog-card:hover, .staff-card:hover,
  .dept-card:hover, .card-hover:hover, .subject-item:hover { transform: none; }
  .news-card:hover img, .gallery-card:hover img, .staff-card:hover img, .feature-card:hover img { transform: none; }
}