/**
 * Ortega type scale — shared across blocks, templates, and global UI.
 * Module CSS should reference var(--ortega-type-*) and var(--ortega-font-*).
 */

:root {
	/* Font families */
	--ortega-font-display: var(--wp--preset--font-family--berthold-block, "berthold-block-w1g"), sans-serif;
	--ortega-font-display-condensed: "berthold-block-w1g-condensed", sans-serif;
	--ortega-font-body: var(--wp--preset--font-family--brandon-grotesque, "brandon-grotesque"), sans-serif;
	--ortega-font-copy: var(--wp--preset--font-family--tt-commons-pro, "tt-commons-pro"), sans-serif;

	/* Hero display — two-line headlines (Recipes Hero, video overlays) */
	--ortega-type-hero-lg: clamp(56px, 10vw, 132px);
	--ortega-type-hero-sm: clamp(28px, 4.5vw, 56px);
	--ortega-type-hero-lg--mobile: clamp(52px, 16vw, 72px);
	--ortega-type-hero-sm--mobile: clamp(28px, 8.5vw, 40px);

	/* Hero display — video overlay variant */
	--ortega-type-hero-video-lg: clamp(40px, 7.5vw, 112px);
	--ortega-type-hero-video-sm: clamp(22px, 3.2vw, 52px);
	--ortega-type-hero-video-lg--mobile: 64px;
	--ortega-type-hero-video-sm--mobile: 30px;

	/* Section titles */
	--ortega-type-title-xl: clamp(36px, 6vw, 72px);
	--ortega-type-title-lg: clamp(32px, 5.5vw, 64px);
	--ortega-type-title-md: clamp(22px, 5.5vw, 30px);
	--ortega-type-title-md--desktop: 26px;
	--ortega-type-title-md--mobile: 18px;

	/* In-body section headlines — Follow Along, Featured Recipes Home */
	--ortega-type-headline-lg: clamp(36px, 6vw, 72px);
	--ortega-type-headline-lg--mobile: 56px;
	--ortega-type-headline-lg-line-height: 0.92;
	--ortega-type-headline-lg--desktop: 100px;
	--ortega-type-headline-lg-line-height--desktop: 106px;

	/* Navigation */
	--ortega-type-nav-mobile: 40px;
	--ortega-type-nav-mobile-list: 24px;
	--ortega-type-nav-mobile-cta: 20px;
	--ortega-type-nav-desktop: 16px;
	--ortega-type-nav-desktop-lg: 22px;

	/* Eyebrows & labels */
	--ortega-type-eyebrow: clamp(14px, 1.6vw, 18px);
	--ortega-type-breadcrumb: clamp(12px, 1.4vw, 14px);

	/* Body copy */
	--ortega-type-body-lg: clamp(16px, 1.7vw, 22px);
	--ortega-type-body-md: clamp(14px, 3.5vw, 16px);
	--ortega-type-body: 16px;
	--ortega-type-body-sm: 18px;

	/* CTAs & buttons */
	--ortega-type-cta-display: clamp(18px, 2vw, 26px);
	--ortega-type-cta: clamp(16px, 1.6vw, 20px);
	--ortega-type-cta-pill: clamp(1.125rem, 2.2vw, 1.625rem);
	--ortega-type-cta-ask: clamp(1rem, 1.8vw, 1.25rem);
	--ortega-type-btn: 14px;
	--ortega-type-btn-md: 16px;

	/* Social Dinner Inspiration */
	--ortega-type-sdi-headline: clamp(50px, 8vw, 80px);
	--ortega-type-sdi-headline--desktop: 80px;
	--ortega-type-sdi-headline--mobile: 50px;
	--ortega-type-sdi-accent: clamp(21px, 2.5vw, 26px);

	/* Social handles & captions */
	--ortega-type-handle: clamp(18px, 4.5vw, 24px);
	--ortega-type-handle--desktop: clamp(20px, 1.8vw, 28px);

	/* Legal & micro */
	--ortega-type-legal: clamp(10px, 2.6vw, 12px);
	--ortega-type-legal-sm: clamp(10px, 2.4vw, 11px);
}

/* Raised ® and manual superscript in display titles */
:is(
	.ortega-article__title,
	.ortega-recipe__title,
	.ortega-recipe__related-name,
	.ortega-recipe__used-name,
	.ortega-product-hero__title,
	.ortega-product-recipe__title,
	.ortega-product-category__title,
	.ortega-popular-products__title,
	.ortega-products-hero__card-title,
	.ortega-featured-recipes__title,
	.ortega-featured-recipes-home__featured-title,
	.ortega-featured-recipes-home__stack-title,
	.ortega-featured-articles__featured-title,
	.ortega-featured-articles__stack-title,
	.ortega-recipes-list__card-title,
	.ortega-articles-list__card-title,
	.ortega-shop-the-lineup__card-title,
	.ortega-sdi__cta-title,
	[class*="__title"]
) :is(sup, .ortega-mark) {
	font-size: 0.45em;
	font-weight: inherit;
	line-height: 0;
	position: relative;
	top: -0.35em;
	vertical-align: baseline;
}

/* Block editor placeholders */
:is(
	.ortega-follow-along-placeholder,
	.ortega-featured-product-placeholder,
	.ortega-featured-recipes-placeholder,
	.ortega-featured-recipes-home-placeholder,
	.ortega-intro-placeholder,
	.ortega-taco-day-placeholder,
	.ortega-fiesta-marquee-placeholder,
	.ortega-brotega-hero-placeholder,
	.ortega-bro-history-placeholder,
	.ortega-recipes-hero-placeholder,
	.ortega-recipes-list-placeholder,
	.ortega-sdi-placeholder,
	.ortega-video-hero-placeholder
) {
	font-family: var(--ortega-font-body);
	font-size: var(--ortega-type-body);
}