/*
 * Additions made after the static site was approved. Written in the site's
 * own tokens and type so they sit with the rest of the design.
 */

/* "We are hiring." bar above the header. Appearance > Customize >
   Ballet Centre: top bar turns it off or changes the words and link. */
.top-bar {
	display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 14px;
	padding: 9px 18px; background: var(--ink); color: #fff;
	font: 500 13px/1.4 'Switzer', -apple-system, sans-serif; letter-spacing: .1px; text-align: center;
}
.top-bar a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.top-bar a:hover, .top-bar a:focus-visible { text-decoration-color: #fff; }
.top-bar i { font-size: 13px; transition: transform .2s ease; }
.top-bar a:hover i { transform: translate(2px, -2px); }
@media (max-width: 680px) { .top-bar { font-size: 12.5px; padding: 8px 16px; } }

/* Numbered lists in prose (the job page's How to Apply), aligned with the
   site's bulleted lists. */
.sv-prose ol { margin: 0 0 20px; padding-left: 20px; }