/*
 * Entravision Network (2026 Fred) — styling now lives in Tailwind utility
 * classes (loaded via CDN in functions.php's entv_enqueue_head_assets()),
 * matching the client-approved mockup markup. This file intentionally stays
 * near-empty rather than carrying dead rules for a class structure the
 * theme no longer uses.
 *
 * The one exception is simple-post-editor's own `.spe-video-wrapper` markup
 * (reused via [spe_video] in the hero playlist and single-post content) —
 * it isn't Tailwind-authored, so it needs real CSS, not utility classes.
 */

/*
 * simple-post-editor's own CSS sizes .spe-video-wrapper via a padding-bottom
 * aspect-ratio hack (56.25% = 16:9) driven by ITS OWN width. Anywhere this
 * theme embeds [spe_video] inside its own 16:9 box (.entv-video-frame — the
 * homepage hero playlist, the El Tiempo page's latest-weather-video feature),
 * this override makes the plugin's wrapper simply fill that box instead of
 * computing a second, conflicting height.
 */
.entv-video-frame .spe-video-wrapper {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 0;
	margin-bottom: 0;
	border-radius: 0;
}

/*
 * The REAL cause of the "portrait video looks zoomed/cropped" bug: core's
 * wp_video_shortcode() always wraps its output in a `.wp-video` div with an
 * inline `style="width: {$width}px"` — [spe_video] passes a hardcoded
 * width="2000" with no matching real height, so this div renders at a
 * literal 2000px regardless of the visible frame. The <video> tag's own
 * `width: 100% !important` (from simple-post-editor's CSS) then resolves
 * against THIS 2000px box, not the actual on-screen frame — so the video
 * paints far larger than the visible, overflow:hidden frame, which is what
 * actually looked "zoomed in" (object-fit alone can't fix a sizing bug one
 * level up the tree). `!important` here is required to beat the inline style.
 */
.entv-video-frame .spe-video-wrapper .wp-video {
	width: 100% !important;
	height: 100% !important;
}

/*
 * The weather page's "Último Video del Clima" hero frequently gets a
 * portrait-shot clip inside this landscape 16:9 frame — object-fit: cover
 * was cropping those down further still. contain shows the whole clip
 * (pillarboxed on portrait sources) instead of cropping it.
 */
.entv-video-frame .spe-video-wrapper video {
	object-fit: contain;
}

/*
 * video.js itself only manages sizing through its own vjs-fluid padding
 * trick, which fights the plain absolute-fill technique used above for
 * .entv-video-frame — the Noticias Ahora player deliberately skips
 * vjs-fluid and relies on this instead (same reasoning as teradek-stream-
 * player's own #tsp-player-wrapper .video-js rule).
 */
.entv-video-frame .video-js,
.entv-video-frame .vjs-tech {
	width: 100% !important;
	height: 100% !important;
}

/*
 * The Noticias Ahora player is a fixed 24/7 linear stream — always live,
 * pausing it never makes sense (see the 'pause' -> player.play() handler
 * in entv_render_noticias_ahora_player()). Hide the now-dead toggle rather
 * than leave a button that does nothing.
 */
.entv-live-nopause .vjs-play-control {
	display: none !important;
}

/*
 * Archive page pagination — core's paginate_links() emits plain
 * `.page-numbers` markup with no Tailwind-recognized classes, so it needs
 * real CSS rather than utility classes (same reasoning as .spe-video-wrapper
 * above).
 */
.entv-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #475569;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	transition: background-color 0.15s ease;
}

.entv-pagination a.page-numbers:hover {
	background: #f1f5f9;
}

.entv-pagination .page-numbers.current {
	background: #e01b2f;
	color: #ffffff;
	border-color: #e01b2f;
}

.entv-pagination .page-numbers.dots {
	border: none;
	background: transparent;
}

/*
 * Prev/Next carry real text ("« Anterior" / "Siguiente »"), not a single
 * digit — the fixed 2.25rem square above (sized for page numbers and the
 * "…" dots) was forcing that text into a box narrower than its own content,
 * wrapping/overflowing instead of fitting. These need to size to their
 * label, not the number square.
 */
.entv-pagination .page-numbers.prev,
.entv-pagination .page-numbers.next {
	width: auto;
	padding: 0 0.85rem;
	white-space: nowrap;
}

/*
 * Noti chat panel — the inherited noticias_network_render_ai_chatbot_floating_widget()
 * markup (hidden chat window + iframe, opened by this theme's own "Pregúntale
 * a Noti" buttons) originally relied on production noticias-network's big
 * stylesheet for its window styling; this theme never carried that file over.
 * Only the panel-window rules are ported here — not the always-visible
 * floating launcher bubble's styles, since that launcher is deliberately not
 * rendered in this theme (see the comment in functions.php).
 */
.noticias-ai-chatbot-floating {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1000020;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.noticias-ai-chatbot-floating__chat {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(390px, calc(100vw - 32px));
	height: min(680px, calc(100vh - 48px));
	background: #0a1128;
	border: 1px solid #1e293b;
	border-radius: 14px;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.noticias-ai-chatbot-floating__chat[hidden] {
	display: none;
}

.noticias-ai-chatbot-floating__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: #090d16;
	color: #94a3b8;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.noticias-ai-chatbot-floating__bar span {
	display: flex;
	align-items: center;
	gap: 7px;
}

.noticias-ai-chatbot-floating__bar i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #10b981;
}

.noticias-ai-chatbot-floating__bar button {
	background: #1e293b;
	border: 0;
	border-radius: 5px;
	color: #ffffff;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 3px 8px;
}

.noticias-ai-chatbot-floating__chat iframe {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	border: 0;
}

/*
 * noticias-network/contact-form block — the inherited render function (real
 * email delivery, honeypot, nonce, optional Cloudflare Turnstile) had no
 * styling at all in this theme, same reasoning as the chatbot panel above.
 */
.noticias-contact-form-block h3 {
	font-weight: 900;
	font-size: 1.125rem;
	color: #0f172a;
	margin-bottom: 1rem;
}

.noticias-contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.noticias-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.noticias-contact-form__field--full {
	grid-column: 1 / -1;
}

.noticias-contact-form__field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.noticias-contact-form__field label {
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.noticias-contact-form__field input,
.noticias-contact-form__field textarea {
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: #0f172a;
}

.noticias-contact-form__field input:focus,
.noticias-contact-form__field textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px #D91C1C;
	border-color: transparent;
}

.noticias-contact-form__field textarea {
	resize: vertical;
}

.noticias-contact-form__actions {
	grid-column: 1 / -1;
	margin: 0.5rem 0 0;
}

.noticias-contact-form__actions button {
	background: #D91C1C;
	color: #ffffff;
	font-weight: 900;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.noticias-contact-form__actions button:hover {
	background: #B81414;
}

.noticias-contact-form__notice {
	grid-column: 1 / -1;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.noticias-contact-form__notice--success {
	background: #dcfce7;
	color: #166534;
}

.noticias-contact-form__notice--error {
	background: #fee2e2;
	color: #991b1b;
}

@media (max-width: 640px) {
	.noticias-contact-form {
		grid-template-columns: 1fr;
	}
}

/*
 * iOS Safari auto-zooms the viewport when a focused text input/textarea has
 * a computed font-size under 16px (search box, newsletter email field, the
 * Noti chat box, etc. all use Tailwind's text-xs/text-sm, well under that).
 * Forcing 16px on mobile is the standard fix — !important to beat those
 * utility classes; nothing here changes desktop sizing.
 */
@media (max-width: 640px) {
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	textarea,
	select {
		font-size: 16px !important;
	}
}

/*
 * Mobile "Acceso Rápido" bar (home-layout.php): a true edge-to-edge, fixed
 * app-style tab bar on phones instead of the floating rounded pill used at
 * sm: and up — plus hide-on-scroll-down / reveal-on-scroll-up, wired by
 * entv_init_hide_on_scroll_nav() in theme.js. Kept out of Tailwind's utility
 * classes since the show/hide transform needs a real toggled class.
 */
@media (max-width: 639px) {
	/*
	 * Tailwind's CDN build JIT-injects its own <style> tag at runtime (order
	 * relative to this stylesheet isn't guaranteed), so !important is used
	 * here the same way it already is elsewhere in this file to reliably
	 * beat the .sticky/.bottom-4/.rounded-xl/.shadow-lg utility classes on
	 * this same element rather than depending on load order.
	 *
	 * nav[data-entv-hide-on-scroll], not the bare attribute — #entv-fixed-
	 * topbar (patterns/header.php) carries this same attribute now too (for
	 * its own, differently-scoped phone-landscape treatment below), and
	 * it's a <div>, not a <nav>, so this tag-qualified selector can never
	 * accidentally catch it here.
	 */
	nav[data-entv-hide-on-scroll] {
		position: fixed !important;
		inset-inline: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		border-radius: 0 !important;
		box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
		padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
		transition: transform 0.25s ease;
	}

	nav[data-entv-hide-on-scroll].entv-nav-hidden {
		transform: translateY(100%);
	}
}

/*
 * Phone landscape: (orientation: landscape) alone would also match tablets
 * and laptops turned sideways, which stay plenty tall even rotated — the
 * added max-height catches only genuinely short viewports (a phone's own
 * landscape height), the same "phone landscape" detection technique used
 * elsewhere for this kind of layout swap. Swaps the horizontal header for
 * #entv-landscape-sidebar (a narrow icon rail: logo, weather, hamburger —
 * see patterns/header.php), hides the bottom "Acceso Rápido" bar entirely
 * (there's no vertical room left for it once the browser chrome eats into
 * an already-short viewport), and keeps the ticker at the top but lets it
 * hide on scroll like that bottom bar already does — reusing the exact
 * same [data-entv-hide-on-scroll] + entv-nav-hidden mechanism from
 * theme.js, just with its own transform direction and its own scope here.
 */
@media (orientation: landscape) and (max-height: 500px) {
	#entv-header-bar,
	nav[data-entv-hide-on-scroll] {
		display: none !important;
	}

	#entv-landscape-sidebar {
		display: flex !important;
	}

	/*
	 * Starts after the sidebar instead of at the true left edge — top is
	 * set by JS (initFixedTopbarSpacer() in theme.js) to match the
	 * sidebar's own top, since both track #entv-fixed-topbar's live height
	 * (now just the ticker's height here, with the header hidden above).
	 */
	#entv-fixed-topbar {
		left: 64px !important;
		transition: transform 0.25s ease;
	}

	#entv-fixed-topbar.entv-nav-hidden {
		transform: translateY(-100%);
	}

	body {
		padding-left: 64px;
	}

	/*
	 * Homepage hero row (home-layout.php): gives the video player + "latest
	 * posts" column the same side-by-side arrangement desktop uses instead
	 * of the portrait single-column stack — landscape has the width for it
	 * even though it's still under the lg: breakpoint. 3fr/2fr rather than
	 * desktop's 2:1 col-span split: landscape's total width is more
	 * constrained than a real desktop viewport, so the posts column gets
	 * a bit more of the space to keep its own 2-column card grid (below)
	 * legible instead of being squeezed as narrow as a literal 2:1 split
	 * would make it.
	 */
	.entv-hero-grid {
		grid-template-columns: 3fr 2fr !important;
	}

	/*
	 * .entv-hero-card-portrait (the big full-bleed card) is too wide a
	 * treatment for this narrow column — replaced by .entv-hero-card-
	 * landscape's plain grid card below instead, the same swap
	 * #entv-header-bar/#entv-landscape-sidebar makes for the site header.
	 * Only the newest post gets a landscape card in the sidebar at all now
	 * (entv_render_hero_latest_posts()'s own PHP only renders one) — posts
	 * 2 and 3 render nothing here to hide/show in the first place, so no
	 * extra CSS is needed for them at this location.
	 */
	.entv-hero-card-portrait {
		display: none !important;
	}

	/*
	 * Posts 2 and 3 (entv_render_hero_latest_posts_landscape_extra() in
	 * home-layout.php) — their own side-by-side row below the whole hero
	 * grid, hidden (Tailwind's `hidden` class, in its own markup) at every
	 * other breakpoint since those already show these same 2 posts inside
	 * the sidebar column instead.
	 */
	.entv-hero-landscape-extra {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}

	.entv-hero-card-landscape {
		display: block !important;
	}
}

/*
 * Compact header on scroll (phones only) — #entv-fixed-topbar (patterns/
 * header.php) is a true position:fixed bar now, so it costs the same
 * vertical space at all times unless something shrinks it back down once
 * the visitor is scrolled past the top; entv_init_compact_header_on_scroll()
 * in theme.js toggles .entv-header-compact for this. Same !important
 * rationale as the block above: Tailwind's CDN build JIT-injects its own
 * <style> tag at an unpredictable point relative to this file, so
 * !important is the only reliable way to beat the .h-20/.gap-2 utility
 * classes these override rather than depending on load order.
 */
@media (max-width: 639px) {
	#entv-header-row {
		transition: height 0.2s ease;
	}
	#entv-fixed-topbar.entv-header-compact #entv-header-row {
		height: 56px !important;
	}

	.entv-logo-icon,
	.entv-logo-text {
		transition: transform 0.2s ease;
		transform-origin: left center;
	}
	/*
	 * Scaled down in place, not hidden — the wordmark stays legible (just
	 * smaller), matching the icon's own treatment, rather than disappearing
	 * on scroll. transform (not width/font-size) so both shrink as one
	 * proportional unit without any layout reflow of the row around them.
	 */
	#entv-fixed-topbar.entv-header-compact .entv-logo-icon,
	#entv-fixed-topbar.entv-header-compact .entv-logo-text {
		transform: scale(0.72);
	}
}

/*
 * Homepage hero (entv_render_hero() in functions.php) — teradek-stream-
 * player's own #tsp-player-wrapper CSS already locks this to 16/9, which is
 * also the real broadcast stream's own native resolution (confirmed live:
 * 1280x720). Explicitly re-asserted at 16/9 here (not just left to the
 * plugin's own rule) as a deliberate marker: this box was shortened to
 * 16/8.1 for a while to reduce the hero's height, which forced the video
 * into either letterboxing (object-fit: contain, visible black bars) or
 * cropping (object-fit: cover) to fill a box that no longer matched its own
 * aspect ratio — both were visible, reported problems. Matching the box to
 * the stream's real ratio is what actually eliminates both at once, since
 * object-fit only ever has to do something when the box and the content
 * disagree on shape. If the hero needs to be visually shorter again later,
 * that has to come from shrinking the whole homepage layout around it
 * (or a min-height content, e.g. a fixed max-height crop with cover,
 * accepted explicitly as a crop) — not from stretching this box's ratio.
 */
#entv-hero #tsp-player-wrapper {
	aspect-ratio: 16 / 9 !important;
}

#entv-hero #tsp-player-wrapper .vjs-tech {
	object-fit: contain !important;
}


/*
 * Header ticker (patterns/header.php) — a real continuously-scrolling
 * marquee now that it can carry multiple items (the latest breaking post
 * plus Cerca de Ti's urgent/important incidents), not just one static line.
 * The item list is rendered twice back-to-back in the markup so the -50%
 * translateX loop point lands exactly on the seam between the two copies —
 * standard marquee technique, avoids any visible jump/reset.
 */
.entv-ticker-track {
	animation: entv-ticker-scroll linear infinite;
	animation-duration: var(--entv-ticker-duration, 30s);
}

.entv-ticker-viewport:hover .entv-ticker-track {
	animation-play-state: paused;
}

@keyframes entv-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.entv-ticker-track {
		animation: none;
	}
}