/* Golden Throne Recipes - primary nav button.
   ------------------------------------------------------------------
   Loaded on every page, because the nav is on every page. Kept apart
   from gt-recipes.css so the full recipe stylesheet stays scoped to
   recipe screens rather than being pulled in site-wide for one button.

   Colours come straight from the child theme's own tokens, with the
   theme's current values as fallbacks in case it is ever swapped out. */

.gt-nav-cta-item {
	display: inline-block;
}

.gt-nav-cta,
.gt-nav-cta-item > a,
.menu-item.gt-nav-cta > a {
	display: inline-block;
	margin: 0.35rem 0.6rem;
	padding: 0.5rem 1.1rem !important;
	border-radius: var(--gt-radius, 6px);
	background: var(--gt-accent, #e86633);
	color: #fff !important;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 0 0 0 rgba(232, 102, 51, 0.55);
	animation: gt-nav-pulse 2.6s ease-in-out infinite;
	transition: transform 0.18s ease, background 0.18s ease;
}

.gt-nav-cta:hover,
.gt-nav-cta:focus,
.gt-nav-cta-item > a:hover,
.menu-item.gt-nav-cta > a:hover {
	background: #cf4f1d !important;
	color: #fff !important;
	transform: translateY(-1px);
	/* Settle once the visitor is actually aiming at it. */
	animation-play-state: paused;
}

/* A ring expanding outward, rather than a strobe. Anything flashing above
   roughly 3Hz is a photosensitivity risk (WCAG 2.3.1) and reads as spam;
   this catches the eye without either problem. */
@keyframes gt-nav-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(232, 102, 51, 0.5);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(232, 102, 51, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(232, 102, 51, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gt-nav-cta,
	.gt-nav-cta-item > a,
	.menu-item.gt-nav-cta > a {
		animation: none;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	}
}

/* Twenty Fourteen collapses the primary menu on small screens; let the
   button fill the row there rather than sitting awkwardly inline. */
@media screen and (max-width: 782px) {
	.gt-nav-cta-item {
		display: block;
	}

	.gt-nav-cta,
	.gt-nav-cta-item > a {
		display: block;
		margin: 0.5rem 0.75rem;
		text-align: center;
	}
}