/*
 * Skulltag — Mobile overflow + responsive fixes (ex-snippet 21).
 *
 * Fixes layout issues at narrow viewports: util bar reflow, fact box
 * wrapping, breadcrumb scroll, side padding, image/table overflow,
 * homepage reflow.
 */

/* Global word-break safety so nothing pushes a horizontal scrollbar */
html, body { overflow-x: hidden; }

@media (max-width: 1040px) {
	/* Util bar reflows on mobile */
	.util .wrap {
		flex-direction: column;
		gap: 6px;
		padding: 8px 16px;
		text-align: left;
	}
	.util .tag {
		font-size: 11px;
		line-height: 1.35;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		max-width: 100%;
		width: 100%;
	}
	.util .right {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 14px;
		justify-content: flex-start;
	}

	/* Header reflow: brand + hamburger only, hide desktop nav */
	header.site .wrap { padding: 0 16px; }
	nav.main { display: none; }
	.hdr-tools .searchbtn { display: none; }

	/* Breadcrumb on mobile: smaller text + scroll */
	.crumbs {
		font-size: 12px;
		padding: 8px 16px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.crumbs .wrap { padding: 0; }

	/* Fact box values wrap to next line — full column reflow */
	.fact .frow {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 8px 0;
	}
	.fact .k {
		font-size: 11px;
		opacity: .7;
	}
	.fact .v,
	.fact .v.ver {
		word-break: break-word;
		overflow-wrap: anywhere;
		white-space: normal;
		min-width: 0;
		max-width: 100%;
		text-align: left;
	}

	/* SP article: ensure side padding on mobile */
	.sp-article {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Ahero (source_port + hub) also gets side padding */
	.ahero .wrap,
	.layout,
	footer.site .wrap {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 720px) {
	/* Reduce hero h1 further */
	.ahero h1, .sp-hero h1 { font-size: 28px; }
	body::before { display: none; } /* perf: kill grain overlay */
}

/* Misc: prevent images and tables from overflowing */
.sp-article img,
.layout img,
.ahero img { max-width: 100%; height: auto; }
.ref-table-wrap { max-width: 100%; }

@media (max-width: 720px) {
	/* Homepage: ensure Kadence content wrappers fit viewport */
	body.home .content-container.site-container,
	body.home .content-wrap,
	body.home .entry-content-wrap,
	body.home .entry.content-bg,
	body.home .entry-content,
	body.home .single-content { max-width: 100vw !important; overflow-x: hidden; }
	body.home .home-hero,
	body.home .home-section { max-width: 100% !important; box-sizing: border-box; }
	body.home .home-hero h1,
	body.home .home-hero .lead,
	body.home .pillar-card h3,
	body.home .pillar-card p,
	body.home .hcard-title,
	body.home .hcard-desc { overflow-wrap: anywhere; word-break: break-word; }
}