/* =====================================================================
   EL MERCIO. — theme.css
   Only the things theme.json + native block supports genuinely can't
   express. If you're tempted to add a rule here first, check whether a
   block's own Style/Spacing/Border panel already covers it — most of
   this design system does not need custom CSS at all.
   ===================================================================== */

/* ---------- Sticky masthead ----------
   position:sticky can never stay pinned past the bottom edge of its own
   parent's box. `<!-- wp:template-part {"tagName":"header"} /-->` makes
   WordPress render its own `<header class="wp-block-template-part">`
   wrapper around whatever header.html contains — so header.html's root
   block (.em-header) actually has TWO ancestors named header nested
   inside each other, and the OUTER one (generated by the template-part
   call, not by us) is only as tall as its one child, giving zero room to
   stick past. This is the exact round-9c bug again, just hidden one level
   deeper this time. Fix stays the same: sticky goes on the truly
   top-level element — here that's the auto-generated wrapper, reached via
   `header.wp-block-template-part` — not on .em-header itself, which is
   now a plain <div> (no tagName set in header.html) so there's only one
   <header> landmark on the page, not two. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 500;
}
.em-header {
	transition: box-shadow 0.25s ease;
}
.em-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(20, 20, 20, 0.08);
}

/* ---------- Logo: two-tone wordmark ----------
   "EL MERCIO." with the period in accent red is a static brand mark, not
   the dynamic Site Title (which stays correct for SEO/browser tab/RSS —
   this only changes what's painted in the header). */
.em-logo {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}
.em-logo:hover {
	color: var(--wp--preset--color--contrast);
}
.em-logo .em-logo-dot {
	color: var(--wp--preset--color--accent);
}

/* ---------- Nav: underline-free uppercase links + mobile overlay ----------
   No overlayBackgroundColor/overlayTextColor block attributes here on
   purpose: those color the *same* .wp-block-navigation__responsive-container
   element that also holds the links at desktop width (closed state isn't a
   different element, just a different class on this one) — setting them
   made the desktop inline links render near-white-on-white and vanish.
   Colors are set here instead, scoped to each actual state. */
.em-nav-links .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.em-nav-links .wp-block-navigation-item a {
	text-decoration: none;
}
.em-nav-links .wp-block-navigation-item:hover .wp-block-navigation-item__label {
	color: var(--wp--preset--color--accent);
}
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--32);
}
/* The toggle icon inherits color from its nearest ancestor with one set —
   with nothing else around it that landed on #e6e6e6 (the border/outline
   token), nearly invisible on the white header. Pin it explicitly. */
.em-header .wp-block-navigation__responsive-container-open,
.em-header .wp-block-navigation__responsive-container-open svg {
	color: var(--wp--preset--color--contrast);
}
/* Force the hamburger breakpoint with plain CSS instead of trusting core's
   ResizeObserver-based auto-detection: that JS measures available width
   before custom web fonts finish swapping in, and with a 40px display
   wordmark + a red CTA button in the same row it can decide "everything
   fits" on a phone-width viewport when it doesn't — leaving both the
   toggle button hidden AND the inline links clipped to invisible. Below
   782px this always shows the toggle and always hides the non-open
   container, so there's no ambiguous middle state. */
@media (max-width: 781px) {
	.em-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.em-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Collapsed (mobile) menu panel: bigger, editorial, matches the brand
   instead of WordPress's default small sans-serif list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--pt-serif);
	font-size: var(--wp--preset--font-size--heading-1);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--24) !important;
}

/* ---------- Dark-mode token remap ----------
   Figma's variables aren't static — text/primary, text/secondary and
   bg/surface resolve to DIFFERENT values depending on whether the frame
   they're used in is set to light or dark mode (confirmed by re-reading
   the Necflis section's variables directly: text/primary is #ffffff
   there, not the global #141414; text/secondary is #a0a0a0, not #282828;
   bg/surface is #282828, not #f3f3f3). The first build hardcoded ad hoc
   `color:#ffffff` / `color:#a0a0a0` inline on individual blocks instead of
   reproducing that system, which is exactly what looked "off" here.
   Fix: apply .em-dark to any section using a dark background, and every
   block that uses the normal `contrast`/`contrast-2`/`contrast-3` text
   color (has-contrast-color etc.) picks up the dark-appropriate value
   automatically, with zero per-block overrides — same as Figma's modes.
   Only the three TEXT-role tokens remap here. Background-role tokens
   (base, base-2, surface, surface-2, inverse) are chosen explicitly per
   section already and must stay put, or a card that deliberately sets
   backgroundColor="contrast-2" would go light-gray inside a dark section. */
.em-dark {
	--wp--preset--color--contrast: #ffffff;
	--wp--preset--color--contrast-2: #a0a0a0;
	--wp--preset--color--contrast-3: #a0a0a0;
}

/* ---------- Opinión landing page: "Columnas más discutidas" auto-numbers
   itself via a CSS counter — insert/reorder posts in that query and the
   numbers stay correct with no manual editing. ---------- */
.em-opinion-list {
	counter-reset: em-opinion-item;
}
.em-opinion-list-number::before {
	counter-increment: em-opinion-item;
	content: counter(em-opinion-item);
}

/* ---------- Necflis badge: pill absolutely positioned over the thumbnail ---------- */
.em-necflis-thumb-wrap {
	position: relative;
}
.em-necflis-badge {
	position: absolute;
	top: var(--wp--preset--spacing--12);
	left: var(--wp--preset--spacing--12);
	z-index: 2;
}

/* ---------- Podcast episode list (core/rss) re-skinned to match the card ---------- */
.em-podcast-rss.wp-block-rss {
	list-style: none;
	margin: 0;
	padding: 0;
}
.em-podcast-rss .wp-block-rss__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--24);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--12) 0;
}
.em-podcast-rss .wp-block-rss__item-title {
	flex: 1 0 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--pt-serif);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.em-podcast-rss .wp-block-rss__item-publish-date {
	flex-shrink: 0;
	display: block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--contrast-3);
}

/* ---------- Opinion column: just the headline, one shared byline below the loop ---------- */
.em-opinion-item .em-opinion-headline {
	display: block;
}

/* ---------- Prev/next post navigation ----------
   Core markup: <span class="...__arrow-previous">←</span><a><span
   class="post-navigation-link__label">Anterior: </span><span
   class="post-navigation-link__title">Title</span></a> — arrow always
   precedes the link in source order for both previous/next, so the "next"
   side is flipped visually (arrow after the text) with flex row-reverse
   rather than relying on source order. */
.wp-block-post-navigation-link {
	display: flex;
	align-items: baseline;
	gap: 8px;
	max-width: 380px;
}
.post-navigation-link-next {
	flex-direction: row-reverse;
	margin-left: auto;
	text-align: right;
}
.wp-block-post-navigation-link a {
	padding: var(--wp--preset--spacing--8) 0;
	font-family: var(--wp--preset--font-family--pt-serif);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}
.wp-block-post-navigation-link .post-navigation-link__label {
	display: block;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--contrast-3);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 4px;
}

/* ---------- Article: reading-progress bar + drop cap ---------- */
#em-progress {
	position: fixed;
	top: 0;
	left: 0;
	/* The theme's root blockGap (32px, spacing between top-level blocks
	   under .wp-site-blocks) lands on this element too since it's just
	   another top-level sibling after the header — margin still offsets a
	   fixed-position element unless zeroed explicitly. */
	margin: 0;
	height: 3px;
	width: 0%;
	background: var(--wp--preset--color--accent);
	z-index: 999;
	transition: width 0.1s linear;
}
.em-article .wp-block-post-content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--pt-serif);
	font-weight: 700;
	font-size: 4.2em;
	line-height: 0.78;
	padding-right: 10px;
	padding-top: 6px;
	color: var(--wp--preset--color--contrast);
}

/* ---------- Card grids: clamp titles to 2 lines so a long headline in one
   column doesn't push its excerpt/byline out of alignment with its
   neighbors — every card in a row reads from the same baseline. ---------- */
.em-cards-4up .wp-block-post-title,
.em-cards-4up-dark .wp-block-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ---------- Responsive: the Figma canvas is desktop-only (1420px);
   below it we scale the 64px section padding down and stack grids. ----------
   The 64px side gutter isn't just a padding value — useRootPaddingAwareAlignments
   also uses it as `--wp--style--root--padding-left/right` to compute how far
   .alignfull sections bleed past their constrained content (negative margin
   = that variable × -1). Overriding padding classes alone left the bleed
   calculation still using the old 64px on a 390px phone, which pushed
   alignfull sections wider than the viewport. The variable itself has to
   shrink too, or everything alignfull overflows sideways. */
@media (max-width: 960px) {
	body {
		--wp--style--root--padding-left: var(--wp--preset--spacing--24);
		--wp--style--root--padding-right: var(--wp--preset--spacing--24);
	}
	:where(.is-layout-constrained) {
		padding-left: var(--wp--preset--spacing--24) !important;
		padding-right: var(--wp--preset--spacing--24) !important;
	}
	.em-section-padded {
		padding-left: var(--wp--preset--spacing--24) !important;
		padding-right: var(--wp--preset--spacing--24) !important;
		padding-top: var(--wp--preset--spacing--32) !important;
		padding-bottom: var(--wp--preset--spacing--32) !important;
	}
	.em-hero-grid.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.em-hero-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
	.em-podcast-columns.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.em-podcast-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	.em-section-header-row {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	.em-section-header-row .em-section-description {
		text-align: left !important;
	}
}

@media (max-width: 600px) {
	.em-cards-4up > .wp-block-column,
	.em-cards-4up-dark > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Games section cards (the one spot using a real Columns block, not a
   Query grid): force a clean single-column stack, and drop the
   aspect-ratio sizing in favor of a fixed min-height. Aspect-ratio needs a
   resolved width to compute from, and chasing that through a wrapped flex
   column on a narrow viewport was producing a squashed, wrong-width card. */
@media (max-width: 781px) {
	.em-cards-4up-dark.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.em-cards-4up-dark > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.em-cards-4up-dark .wp-block-cover {
		aspect-ratio: auto !important;
		min-height: 280px !important;
	}
}