/**
 * Mobile-first layout & typography
 * Loaded after blocks.css — overrides grid columns and header at small viewports.
 *
 * @package EDsmartData
 */

/* -------------------------------------------------------------------------
   Base: mobile (default)
   ------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	/* Match theme background — avoids stray canvas tints (e.g. #F6F4E9) from block editor / WP global styles */
	background-color: var(--wp--preset--color--background, #fafbfc) !important;
}

body {
	overflow-x: clip;
	background-color: var(--wp--preset--color--background, #fafbfc) !important;
}

/* Horizontal padding respects notched devices (no extra .wp-site-blocks background layer) */
.is-root-container {
	padding-left: max(1rem, env(safe-area-inset-left));
	padding-right: max(1rem, env(safe-area-inset-right));
}

/* Hero / homepage: readable line length & scale */
main .hero-subtitle {
	font-size: clamp(1rem, 2.5vw + 0.85rem, 1.25rem);
	line-height: 1.55;
}

/* Primary CTA row: stack on narrow screens */
main .wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

main .wp-block-buttons .wp-block-button .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

/* -------------------------------------------------------------------------
   Site header (.edsmart-header): layout matches html/css/base.css; see header-base.css
   ------------------------------------------------------------------------- */

.edsmart-header .logo {
	min-width: 0;
	display: inline-flex;
	align-items: center;
}

.edsmart-header .logo-image {
	height: auto;
	max-height: 44px;
	width: auto;
}

/* -------------------------------------------------------------------------
   Grids: Query Loop & layout grids (homepage Featured Data, footer, archives)
   ------------------------------------------------------------------------- */

.wp-block-post-template.is-grid,
.wp-block-group.is-layout-grid {
	grid-template-columns: minmax(0, 1fr) !important;
}

/* Footer link line: wrap on small screens */
footer .wp-block-group a {
	word-break: break-word;
}

/* Wide tables / charts: scroll instead of breaking layout */
.wp-block-table,
.wp-block-edsmart-data-chart-block,
.entry-content .wp-block-html,
.wp-block-post-content .wp-block-html {
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Single post / page content: shrink so wide tables scroll inside column, not the canvas */
.wp-block-post-content,
.entry-content {
	min-width: 0;
	max-width: 100%;
}

.wp-block-post-content .ranking-table-container,
.wp-block-post-content .table-wrapper,
.wp-block-post-content .table-responsive-wrapper,
.wp-block-post-content .comparison-table-wrapper,
.entry-content .table-responsive-wrapper {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ed_ranking singles: cap imported HTML to content width (do not set max-width on main .wp-block-group — it overrides layout constrained / contentSize). */
body.single-ed_ranking .wp-block-post-content .wp-block-html,
body.post-type-ed_ranking.single .wp-block-post-content .wp-block-html,
body.single-ed_ranking .entry-content .wp-block-html,
body.post-type-ed_ranking.single .entry-content .wp-block-html {
	min-width: 0;
	max-width: min(var(--wp--style--global--content-size, 1200px), 100%);
	margin-inline: auto;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Breakpoints: tablet and up
   ------------------------------------------------------------------------- */

@media (min-width: 600px) {
	main .wp-block-buttons {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.wp-block-post-template.is-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Footer: 2 columns mid */
	footer .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 782px) {
	.wp-block-post-template.is-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 960px) {
	footer .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	/* Homepage featured data: 4 columns on large screens */
	.featured-data-query .wp-block-post-template.is-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* Featured data: 2 columns between tablet and large desktop */
@media (min-width: 782px) and (max-width: 959px) {
	.featured-data-query .wp-block-post-template.is-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* -------------------------------------------------------------------------
   WordPress global-styles vs border presets on white cards
   Core/theme.json utilities can set `color` to the border swatch (#D8E0ED)
   on `.has-border-color` groups, which makes excerpts illegible. This sheet
   loads after `global-styles` (see functions.php) so these rules win.
   ------------------------------------------------------------------------- */

.wp-block-group.has-surface-background-color.has-border-color,
.wp-block-group.has-surface-background-color.has-border-border-color {
	border-color: var(--wp--preset--color--border, #d8e0ed) !important;
	color: var(--wp--preset--color--text-primary, #1a2332) !important;
}

.wp-block-group.has-surface-background-color.has-border-color .wp-block-post-title a,
.wp-block-group.has-surface-background-color.has-border-border-color .wp-block-post-title a {
	color: var(--wp--preset--color--link, #0a5f6d) !important;
}

.wp-block-group.has-surface-background-color.has-border-color .wp-block-post-title a:hover,
.wp-block-group.has-surface-background-color.has-border-border-color .wp-block-post-title a:hover {
	color: var(--wp--preset--color--link-hover, #064a55) !important;
}

.wp-block-group.has-surface-background-color.has-border-color .wp-block-post-excerpt,
.wp-block-group.has-surface-background-color.has-border-color .wp-block-post-excerpt p,
.wp-block-group.has-surface-background-color.has-border-border-color .wp-block-post-excerpt,
.wp-block-group.has-surface-background-color.has-border-border-color .wp-block-post-excerpt p {
	color: var(--wp--preset--color--text-primary, #1a2332) !important;
}