/*
 * pbsf-page-shell.css
 *
 * Structural/layout styling owned by PBSF_Page_Shell — the max-width
 * container and vertical rhythm between header/content/footer. Never
 * page-specific content styling (that belongs to whatever fills the
 * main-content slot). Scoped under .pbsf-scope. `!important` is used
 * only where documented inline (WPForms compatibility override, below).
 */

.pbsf-scope {
	background: var(--pbsf-color-bg);
	color: var(--pbsf-color-text);
	font-family: var(--pbsf-font-family);
	line-height: var(--pbsf-line-height-base);
	position: relative;
	/*
	 * Same reason Home Builder's own .pbh-page sets this: without an
	 * isolated stacking context, the negative-z-index background layers
	 * below aren't guaranteed to paint above other elements outside
	 * .pbsf-scope — they can end up buried, leaving only the plain
	 * --pbsf-color-bg solid color visible instead of the image beneath it.
	 */
	isolation: isolate;
}

/*
 * Optional atmospheric background, matching the same treatment Home
 * Builder's own `.pbh-page::before`/`::after` already use — a dark
 * gradient over a background image (set via the `--pbsf-scope-bg-image`
 * custom property; a site's own config supplies the URL, see
 * pbellaras-site-framework.php) plus two soft radial accents. Defaults
 * to `none` for the image, so a project that never sets the property
 * just sees the plain `--pbsf-color-bg` solid color above — no visual
 * change for any page that doesn't opt in.
 */
.pbsf-scope::before {
	background-image:
		linear-gradient(rgba(2, 7, 10, 0.3), rgba(2, 7, 10, 0.84)),
		var(--pbsf-scope-bg-image, none);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: -2;
}

.pbsf-scope::after {
	background:
		radial-gradient(circle at 50% 12%, rgba(85, 244, 255, 0.10), transparent 34%),
		radial-gradient(circle at 82% 68%, rgba(140, 99, 255, 0.06), transparent 28%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: -2;
}

.pbsf-shell__main {
	max-width: var(--pbsf-content-width);
	margin: 0 auto;
	padding: var(--pbsf-space-6) var(--pbsf-space-4);
	min-height: 40vh;
}

.pbsf-test-placeholder {
	border: 1px dashed var(--pbsf-color-border);
	border-radius: var(--pbsf-radius);
	padding: var(--pbsf-space-4);
	color: var(--pbsf-color-text-muted);
}

.pbsf-test-placeholder strong {
	color: var(--pbsf-color-text);
}

/*
 * Skip link — first focusable element in the shell, off-screen until
 * focused. Lets keyboard users bypass the header/nav and jump straight to
 * `#pbsf-main-content` (WCAG 2.4.1 Bypass Blocks).
 */
.pbsf-skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100;
	background: var(--pbsf-color-panel);
	color: var(--pbsf-color-text);
	padding: var(--pbsf-space-2) var(--pbsf-space-3);
	border-radius: var(--pbsf-radius);
	text-decoration: none;
}

.pbsf-skip-link:focus {
	left: var(--pbsf-space-3);
	top: var(--pbsf-space-3);
}

.pbsf-skip-link:focus-visible {
	outline: 2px solid var(--pbsf-color-focus);
	outline-offset: 2px;
}

/*
 * Compatibility fix for third-party form markup rendered inside
 * .pbsf-scope (e.g. WPForms's own field-description text, used for the
 * Contact form's privacy notice). That text defaults to a dark gray
 * suited to a light theme background; inside PBSF's dark scope it was
 * nearly invisible. Only resets the description's own text color to
 * the framework's existing muted token — any link inside it (e.g. the
 * "Privacy Policy" link) already has its own distinct color and is
 * untouched.
 */
/*
 * !important is deliberate here: WPForms's own frontend stylesheet
 * loads *after* this one in wp_head, so on the frequent specificity
 * ties between WPForms's own selectors and this one, source order
 * alone would let WPForms's near-black default win back over this fix.
 */
.pbsf-scope .wpforms-field-description {
	color: var(--pbsf-color-text-muted) !important;
	margin-top: var(--pbsf-space-3) !important;
}