/*
Theme Name: GoWP Skeleton
Author: Celerate
Description: Starter Block Theme using Full Site Editing (FSE) optimized for flexibility, maintainability, and editor experience while preserving design, functionality, SEO, and performance.
Version: 1.0.7
Text Domain: gowp-skeleton
Tags: full-site-editing
*/

/* Spacing scale — backs the theme.json spacingSizes presets
   (each preset uses var(--gowp-space-<slug>)). Fixed px values. */
:root {
	--gowp-space-xxs: 8px;
	--gowp-space-xs: 12px;
	--gowp-space-sm: 24px;
	--gowp-space-md: 40px;
	--gowp-space-lg: 70px;
	--gowp-space-xl: 100px;
	--gowp-space-xxl: 140px;
}

/* Base design width (px) for the `cpx` ("calculated pixel") unit. A cpx value
   scales fluidly with the viewport relative to this width, so 100cpx equals
   100px at this viewport width. Backs the calc() emitted by the GoWP style
   engines (PHP GoWPStyleEngine + JS GowpStyleEngine). Unitless on purpose so it
   can be used as the divisor in `calc(<n> * 100vw / var(--gowp-cpx-base-width))`. */
:root {
	--gowp-cpx-base-width: 1920;
}

/* Font-size scale — backs the theme.json fontSizes presets
   (each preset uses var(--gowp-font-<slug>)). Fixed px values. */
:root {
	--gowp-font-xs: 11px;
	--gowp-font-sm: 13px;
	--gowp-font-md: 16px;
	--gowp-font-lg: 18px;
	--gowp-font-xl: 22px;
	--gowp-font-2xl: 24px;
}

/* Tablet: shrink the global wide size, so wide-aligned blocks and the Container
   (which defaults its width to var(--wp--style--global--wide-size)) narrow down.
   Matches the GoWP tablet breakpoint used by the style engines (max-width: 1024px). */
@media (max-width: 1024px) {
	:root {
		--wp--style--global--wide-size: 350px !important;
	}
}

* {
	box-sizing: border-box!important;
}

html {
	scroll-behavior: smooth;
}

/* Hide the login button if the user is logged in */
body.logged-in {

	/* But Is not in the block editor */

	&:not(.block-editor-iframe__body) {

		.gowp-join-ssp-button {
			display: none;
		}
	}
}

.spinner-border {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	vertical-align: text-bottom;
	border: 0.15em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spinner-border 0.75s linear infinite;

	.spinner-border-sm {
		width: 1rem;
		height: 1rem;
		border-width: 0.15em;
	}
}

@keyframes spinner-border {
	to {
		transform: rotate(360deg);
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Hide Yoast SEO panels (block editor sidebar + classic metabox). */
.yoast-seo-sidebar-panel,
#wpseo_meta {
	display: none;
}