/**
 * Global theme layer (loaded after style.css, before style-shared).
 * Add site-wide layout or typography here when needed.
 */

/* Dietary badge pills link to category archives (see inc/dietary-needs-badges.php). */
a.dietary-badge {
	color: inherit;
	text-decoration: none;
}

/* Custom tooltip (data-mtt-dietary-tip) — fast show, no native title delay */
.dietary-badge[data-mtt-dietary-tip] {
	position: relative;
}

.dietary-badge[data-mtt-dietary-tip]::after {
	content: attr(data-mtt-dietary-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	z-index: 200;
	box-sizing: border-box;
	min-width: 0;
	max-width: min(14rem, 70vw);
	padding: 6px 10px;
	border-radius: 6px;
	background-color: var(--wp--preset--color--brown, #5e4234);
	color: var(--wp--preset--color--off-white, #fffbeb);
	font-family: var(--wp--preset--font-family--tt-norms-pro, "TT Norms Pro", sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	white-space: normal;
	pointer-events: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.08s ease, visibility 0.08s ease;
}

.dietary-badge[data-mtt-dietary-tip]:hover::after,
.dietary-badge[data-mtt-dietary-tip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

a.dietary-badge:focus {
	outline: none;
}

a.dietary-badge:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/**
 * Decorative block graphics — slow gentle rocking (accessible).
 */
@keyframes mtt-graphic-rock {
	0%,
	100% {
		transform: rotate(-1.75deg);
	}
	50% {
		transform: rotate(1.75deg);
	}
}

.mtt-recipe-category-toggles__graphic,
.mtt-posts-highlight__graphic-wrap,
.mtt-image-copy__graphic,
.mtt-fun-facts__graphic,
.mtt-slider-copy__graphic,
.mtt-wave-image-text__graphic,
.mtt-single-post-highlight__food {
	animation: mtt-graphic-rock 3s ease-in-out infinite;
	transform-origin: 50% 88%;
}

@media (prefers-reduced-motion: reduce) {
	.dietary-badge[data-mtt-dietary-tip]::after {
		transition: none;
	}

	.mtt-recipe-category-toggles__graphic,
	.mtt-posts-highlight__graphic-wrap,
	.mtt-image-copy__graphic,
	.mtt-fun-facts__graphic,
	.mtt-slider-copy__graphic,
	.mtt-wave-image-text__graphic,
	.mtt-single-post-highlight__food {
		animation: none;
	}
}