/*
 * PixelBase base styles
 *
 * Rules that child themes assume exist but do not define themselves. Shipped
 * as plain committed CSS and enqueued unconditionally — deliberately NOT a
 * build artefact.
 *
 * Until 4.0.4 these lived in the theme-root critical.css that 3.x inlined on
 * every page. 4.0.x moved the lookup to dist/critical.css, which no build ever
 * produces (the parent has no package.json), so the file_exists() check
 * silently skipped and every 4.x site lost the lot. Symptoms: paragraph and
 * heading margins collapsing, .screen-reader-text rendering as visible page
 * text, and bare <button> elements reverting to the browser's 3D border.
 *
 * SCOPE: functional rules only. The old critical.css also carried colours,
 * font sizes and .hero/.container layout. Those are a child theme's business —
 * reinstating them here would impose 3.x design decisions on every site — so
 * they are intentionally absent. Anything decorative belongs in the child.
 *
 * Loads before the child's stylesheet, so a child overrides any of it simply
 * by declaring the same property.
 *
 * @package PixelBase
 * @since   4.0.4
 */

/* --------------------------------------------------------------------------
 * Typography rhythm
 *
 * Without these, every paragraph and heading sits flush against the element
 * above it. No font sizes or families here — sizing is the child's decision.
 * ----------------------------------------------------------------------- */

p {
	margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.5rem;
	font-weight: 600;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
 * Accessibility helpers
 *
 * WordPress core, WooCommerce and Gutenberg all emit .screen-reader-text and
 * expect the theme to hide it. With no rule, screen-reader-only strings render
 * as literal page text — WooCommerce's "Original price was…" sale wording,
 * quantity field labels and the skip link all become visible.
 *
 * The :focus rules must stay: they are what makes the skip link usable for
 * keyboard users, so this cannot be reduced to display:none.
 * ----------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	left: -9999rem;
	position: absolute;
	top: 2.5rem;
	z-index: 999999999;
	text-decoration: underline;
}

.skip-link:focus {
	left: 6px;
	top: 7px;
	display: block;
	padding: 15px 23px 14px;
	background-color: #f1f1f1;
	color: #21759b;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	z-index: 100000;
}

/* --------------------------------------------------------------------------
 * Button reset
 *
 * Only the reset — no background, colour or padding, which are the child's.
 * Without `border: none` a bare <button> falls back to the UA's 2px outset 3D
 * border; this showed up on WooCommerce quantity controls and Slick arrows.
 * ----------------------------------------------------------------------- */

.button,
button,
.wp-block-button__link {
	border: none;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Media defaults — layout shift prevention
 *
 * Keeps images inside their container and preserves aspect ratio while the
 * child's stylesheet is still loading.
 * ----------------------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

iframe,
video {
	max-width: 100%;
}