/* static.css: the few rules the static rebuild needs that used to live in
   index.html or in React inline styles. Loaded last, after contact.css.
   Everything else is the original stylesheets, unchanged. */

/* Page entrance (was the route transition in the single-page app) */
.route-fade { animation: routeFade 420ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes routeFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The header's Menu button showed below 1100px (was an inline style read
   from the window width on load). */
@media (min-width: 1100px) { .site-header .nav-btn { display: none; } }

/* /contact#apply and friends: land clear of the header (the script then
   replays the old smooth scroll; this covers visitors without JavaScript). */
main section[id] { scroll-margin-top: 80px; }

/* Blog cards and "read more" controls are real links now. Cancel the global
   link hover fade from tokens.css so they behave exactly as the old buttons. */
.blog-card:hover, .blog-readmore:hover, .blog-article__back:hover { opacity: 1; }
/* buttons get line-height: normal from the browser; links inherit the body's */
a.blog-readmore, a.blog-article__back, .blog-cta-photo__actions a.btn-ghost-light { line-height: normal; }
.blog-featured { cursor: pointer; }

/* Very small phones (320px, e.g. iPhone SE 1st gen): these blocks were a
   little wider than the screen, so the whole page scrolled sideways. */
@media (max-width: 380px) {
  .accredited__grid, .fees__grid { grid-template-columns: minmax(0, 1fr); }
  .accredited__badges { gap: 12px; }
  .badge-card { padding: 24px 10px; }
  .badge-card__mark { font-size: 24px; }
  .fees__list li { flex-wrap: wrap; gap: 2px 16px; }
  .subject-schedule li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .subject-schedule__group { grid-column: 1 / -1; }
}