/* «View Schedule Link» `3015:2441` — Default `3008:70` / `4190:20136` /
   `4124:11503`, orange=on `3015:2442` / `4316:25140`. Same box/type/hover
   as `.c-visit__all` (assets/css/components/visit.css), under its own class —
   inc/parts/schedule-link.php explains why the numbers are duplicated rather
   than the class renamed in place. */

.c-schedule-link {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-decoration: none;
	text-transform: uppercase;
}

/* orange=on sits on the announcement bar's #FFF8EA, where the .fig's #F47F0D
   is 2.52:1 — under AA — so it lands on --color-attention-700 (5.2:1), the
   nearest passing step of the same ramp, and its hover one step further down
   it (designer-questions.md). */
.c-schedule-link--orange {
	color: var(--color-attention-700);
}

.c-schedule-link svg {
	display: block;
	width: 27.1111px;
	height: 12px;
	flex: none;
}

/* Hover — ON_HOVER SMART_ANIMATE 600ms ease-out: text colour + auto-layout gap
   8 → 12. `mobile=on` (390) carries no Hover variant, so neither does this
   component below 768 (same reasoning/breakpoint as `.c-visit__all`). #0C9586
   is 3.71:1 on white — under AA — so the light variant lands on
   --color-primary-700, same substitution as the rest of the site
   (designer-questions.md). */
@media (min-width: 768px) {

	.c-schedule-link {
		transition:
			color 600ms cubic-bezier(0, 0, 0.58, 1),
			gap 600ms cubic-bezier(0, 0, 0.58, 1);
	}

	.c-schedule-link:hover,
	.c-schedule-link:focus-visible {
		gap: 12px;
		color: var(--color-primary-700);
	}

	.c-schedule-link--orange:hover,
	.c-schedule-link--orange:focus-visible {
		color: var(--color-attention-800);
	}
}