/* ==========================================================================
   Utivra — Site-wide responsive overrides (mobile-first)
   Loaded after the active theme. Touch-friendly (≥44×44), fluid typography,
   safe media scaling, and defensive stacking on small viewports.
   Breakpoints (mobile-first, min-width):
     sm: 480   md: 740   lg: 992   xl: 1200
   ========================================================================== */

/* ---------- 1. Universal safety net --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	overflow-x: hidden;          /* prevent rogue children pushing horizontal scroll */
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* Tickers / marquees / sliders that intentionally use huge inner widths
   must clip at their own boundary, never leak into the page scroll */
.ticker,
.news-ticker,
.marquee,
.js-marquee-wrapper,
.slick-slider,
.swiper,
.owl-carousel,
[class*="ticker"],
[class*="marquee"] {
	max-width: 100%;
	overflow: hidden;
}

/* Theme card-grid wrappers use negative margins for gutters and can blow out
   the viewport on phones. Cap them at 100% and absorb the negative margin. */
.news-grid-post-wrap,
.posts-grid-wrap,
.featured-grid,
[class*="grid-post-wrap"],
[class*="grid-wrap"] {
	max-width: 100%;
	overflow: hidden;
}

/* ---------- 2. Flexible media --------------------------------------------- */
img, video, picture, canvas, svg, iframe, embed, object {
	max-width: 100%;
	height: auto;
}
/* Iframes (oEmbed YouTube/Vimeo, maps) get explicit responsive treatment */
.entry-content iframe,
.wp-block-embed iframe,
iframe[src*="youtube"],
iframe[src*="vimeo"],
iframe[src*="google.com/maps"] {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}
/* Tables shouldn't blow out the layout */
.entry-content table,
.ai-guide table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- 3. Fluid typography (mobile-first, clamp to desktop) ---------- */
:root {
	--utv-fs-body: clamp(15px, 1.6vw, 17px);
	--utv-fs-h1:   clamp(28px, 5vw,   44px);
	--utv-fs-h2:   clamp(22px, 3.6vw, 32px);
	--utv-fs-h3:   clamp(18px, 2.6vw, 24px);
	--utv-fs-h4:   clamp(16px, 2.0vw, 20px);
	--utv-fs-small: clamp(13px, 1.3vw, 14px);
}

body, p, li {
	font-size: var(--utv-fs-body);
	line-height: 1.65;
}
h1, .entry-title, .post-title { font-size: var(--utv-fs-h1); line-height: 1.2; }
h2 { font-size: var(--utv-fs-h2); line-height: 1.25; }
h3 { font-size: var(--utv-fs-h3); line-height: 1.3; }
h4 { font-size: var(--utv-fs-h4); line-height: 1.35; }

/* Tiny meta text — never let theme go below 12px on mobile */
.meta-info, .post-meta, .entry-meta, .meta, time, .byline, small {
	font-size: max(12px, var(--utv-fs-small));
}

/* ---------- 4. Touch-friendly targets (≥ 44×44) --------------------------- */
/* Header utility buttons (search, theme/sidebar toggles) — size only,
   never force display so the theme can keep its show/hide rules. */
.search-trigger,
.mobile-menu-toggle,
.sidebar-toggle,
.theme-toggle,
.search-form button[type="submit"],
button.close,
.close-search {
	min-width: 44px;
	min-height: 44px;
	padding: 10px;
	line-height: 1;
}

/* Menu toggle: the theme hides it on desktop. Only size it on phones/tablets. */
@media (max-width: 991px) {
	.menu-toggle,
	.mobile-menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 10px;
		line-height: 1;
	}
}
@media (min-width: 992px) {
	.menu-toggle { display: none !important; }
}
/* Primary nav links — bigger tap area on touch viewports */
.main-navigation a,
.site-navigation a,
.menu a,
.nav-menu a,
.primary-menu a,
.footer-menu a {
	display: inline-block;
	padding: 12px 14px;
	min-height: 44px;
	line-height: 1.4;
}
/* Pagination, prev/next, social icons */
.page-numbers,
.pagination a,
.pagination span,
.nav-links a,
.social-icons a,
.social-links a,
.share-buttons a {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
}
/* Generic buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn,
.wp-block-button__link {
	min-height: 44px;
	padding: 10px 18px;
	line-height: 1.3;
	cursor: pointer;
}
/* Form fields — 16px font prevents iOS auto-zoom on focus */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	min-height: 44px;
	font-size: 16px;
	padding: 10px 12px;
	max-width: 100%;
}
textarea { min-height: 88px; }

/* Comment-form & WP block-form spacing */
.comment-form input,
.comment-form textarea,
.wp-block-search__input { width: 100%; }

/* ---------- 5. Layout safety — mobile-first stacking ---------------------- */
/* Hide horizontal scroll inside common WP wrappers (defensive) */
.site, .site-content, .entry-content, .post-inner, .post-inner-wrapper,
.primary-content, .container, .row, main, article {
	max-width: 100%;
}

/* Block-editor columns / theme card grids — stack on mobile, grid on tablet+ */
.wp-block-columns,
.column-grid,
.row-cards,
.posts-grid,
.post-grid,
.category-grid,
.tag-grid,
.related-posts,
.featured-posts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
@media (min-width: 740px) {
	.wp-block-columns,
	.column-grid,
	.row-cards,
	.posts-grid,
	.post-grid,
	.category-grid,
	.tag-grid,
	.related-posts,
	.featured-posts {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.wp-block-columns > .wp-block-column,
	.posts-grid > *,
	.post-grid > *,
	.related-posts > * { flex: 1 1 calc(50% - 16px); min-width: 0; }
}
@media (min-width: 992px) {
	.posts-grid > *,
	.post-grid > *,
	.related-posts > * { flex: 1 1 calc(33.333% - 16px); }
}

/* Sidebar: full-width below, side-by-side from 992px.
   The digital-newspaper theme uses .row (flex) + .primary-content (flex:0 1 70%)
   + .secondary-sidebar. Force vertical stacking on phones + tablets. */
@media (max-width: 991px) {
	.row,
	.site-content > .row,
	.primary-content + .secondary-sidebar,
	.has-sidebar .row {
		display: block !important;
	}
	.primary-content,
	.content-area,
	.main-content,
	.site-content,
	.secondary-sidebar,
	.sidebar,
	.widget-area,
	#secondary {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.secondary-sidebar,
	.sidebar,
	.widget-area,
	#secondary { margin-top: 24px; }
}

/* Footer: stack widgets on mobile, columnize from tablet up */
.site-footer .footer-widgets,
.footer-widget-area,
.footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 740px) {
	.site-footer .footer-widgets,
	.footer-widget-area,
	.footer-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.site-footer .footer-widgets,
	.footer-widget-area,
	.footer-columns { grid-template-columns: repeat(4, 1fr); }
}

/* Header rows: let logo + nav + utility wrap on mobile */
.site-header,
.site-header > .container,
.header-inner,
.header-main {
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- 6. Spacing rhythm --------------------------------------------- */
/* Phones: collapse the theme's deeply nested wrappers so the article gets real
   estate. The digital-newspaper theme stacks ~6 wrappers (.site / .site-main /
   .digital-newspaper-container / .row / .primary-content / .post-inner), each
   adding its own 12–24px side padding. That eats ~150px on a 390px viewport. */
@media (max-width: 739px) {
	html, body { margin: 0; padding: 0; }

	/* Wipe outer side gutters from every nesting layer */
	.site,
	.site > div,
	.site-main,
	.digital-newspaper-container,
	.primary-content,
	.content-area,
	.post-inner,
	.post-inner-wrapper,
	main {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 100% !important;
	}
	.row { margin-left: 0 !important; margin-right: 0 !important; }

	/* Single source of truth: ONE 14px gutter on the content column.
	   .primary-content wraps BOTH listing pages (cards) AND single posts,
	   so gutter once there and zero it on inner .entry-content. */
	.primary-content,
	.content-area,
	.main-content,
	.site-header > .container,
	.site-footer > .container,
	.breadcrumb,
	.breadcrumbs {
		padding-left: 14px !important;
		padding-right: 14px !important;
		box-sizing: border-box;
	}
	.primary-content .entry-content,
	.primary-content .page-content,
	.primary-content .post-content,
	.entry-content,
	.page-content,
	.post-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Header & footer need their own gutter so logo / hamburger / search /
	   ad / widgets don't hug the screen edge. The .digital-newspaper-container
	   inside header & footer was zeroed above; restore it here on ONE layer
	   only (the outermost wrapper) to avoid stacked padding. */
	.site-header > .main-header,
	.site-header > .top-header,
	.site-header > .header-top,
	.site-header > .after-header,
	.site-header > .before-header,
	.site-footer > .footer-widget-area,
	.site-footer > .footer-bottom,
	.site-footer > .footer-top,
	.site-footer > .copyright,
	.site-footer > .footer-copyright,
	.after-header,
	.before-footer {
		padding-left: 14px !important;
		padding-right: 14px !important;
		box-sizing: border-box;
	}

	/* Featured images & block-editor wide/full figures: respect the 14px gutter
	   on phones (no edge-to-edge bleed). Anything narrower than the column is
	   already inside .entry-content gutter, but .post-thumbnail and
	   .alignwide/.alignfull have themes that try to escape the container —
	   force them back inside on phones. */
	.post-thumbnail,
	.post-thumbnail img,
	.featured-image,
	.featured-image img,
	.single-featured-image,
	.single-featured-image img,
	.post-thumb-wrap,
	.post-thumb-wrap img,
	.entry-header .post-thumbnail,
	.entry-header .post-thumbnail img,
	.primary-content > figure.alignwide,
	.primary-content > figure.alignfull,
	.primary-content .entry-content > figure.alignwide,
	.primary-content .entry-content > figure.alignfull,
	.primary-content .entry-content > .wp-block-image.alignwide,
	.primary-content .entry-content > .wp-block-image.alignfull {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		height: auto;
	}

	/* Tighter section spacing on phones */
	h1, h2 { margin-top: 1em; }
	figure { margin-left: 0; margin-right: 0; }
	.ai-guide { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Pre/code blocks — always scroll inside, never burst the page */
pre, code {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	word-wrap: normal;
	white-space: pre;
}
pre { padding: 12px; }

/* ---------- 7. Accessibility helpers -------------------------------------- */
/* Keep skip link off layout but reachable */
.skip-link { left: -9999px; position: absolute; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100000; }

/* Focus rings restored where themes strip them */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid #c8401a;
	outline-offset: 2px;
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}