/*
 * Utilities carried over from the microsites' per-site Global Styles.
 *
 * These rules were found duplicated in the user Global Styles of
 * stage.sideconvo.ai and stage.certme.ai (identical in both). They style
 * markup emitted by the saas-wp-frontend plugin, not the theme, so they
 * belong in one shared place rather than being retyped per site.
 */

.sc-og-button,
.sc-og-button-sm {
	height: 50px;
}

.sc-og-button-sm {
	height: 40px;
}

.sc-og-button a,
.sc-og-button-sm a {
	padding: 0 22px 0 0 !important;
	line-height: 50px;
}

.sc-og-button-sm a {
	line-height: 40px;
}

.sc-og-button img,
.sc-og-button-sm img {
	position: relative;
	top: -2px;
	display: inline-block;
	margin: 0 12px 0 7px;
	vertical-align: middle;
}

/* The FAQ plugin's hero search is width:100% plus side padding. Spectra One
   sized everything border-box, so it fit; without that it runs 40px past a
   phone screen. */
.page-hero .home-search {
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.reverse-mobile {
		flex-direction: column-reverse;
	}
}

/*
 * playful-saas helpers used by the theme's own templates and parts.
 */

/* Byline separator that only exists when the date is rendered. */
.saas-dot-before::before {
	content: "·";
	margin-right: 0.5em;
}

/* Tags as soft pills under an article. */
.is-style-saas-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.is-style-saas-pills .wp-block-post-terms__separator {
	display: none;
}
.is-style-saas-pills a {
	padding: 0.375rem 0.875rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
}
.is-style-saas-pills a:hover,
.is-style-saas-pills a:focus-visible {
	background: var(--wp--preset--color--tint);
}


/* Cards: images fill the card, titles never underline at rest. */
.wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
}
.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
}
.wp-block-post-template .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* FAQ details: show they open. */
.wp-block-details summary {
	cursor: pointer;
}

/* Sections carry their own padding, so top-level blocks sit flush:
   without this, core's `.wp-site-blocks > * + *` gap shows as a white strip above the dark
   footer. `body` is needed to outrank that rule; a zero-specificity :where() loses. */
body .wp-site-blocks > * {
	margin-block-start: 0;
}

/* Category eyebrows are labels, not inline links in prose. */
.wp-block-post-terms a {
	text-decoration: none;
}
.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus-visible {
	text-decoration: underline;
}

/* Landing pages carry content migrated from Spectra One, laid out against its
   764px content width. playful-saas reads at 640px, which crushes those
   three-column sections, so landing pages keep the width they were built for.
   Articles are unaffected and keep the 640px measure. */
.saas-legacy-width {
	--wp--style--global--content-size: 764px;
}

/* Single posts: title, featured image and text share one column, wider than
   the 640px default so the text lines up with the banner above it but still
   reads comfortably. */
.saas-article {
	--wp--style--global--content-size: 960px;
}
.saas-article .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

/* Buttons in content carried over from the Spectra sites look exactly as they
   do on production. Spectra's rules: 6px corners at weight 500; the default
   button is primary with white text and turns secondary on hover; the
   swt-button-secondary style is surface with body-colour text, and
   swt-button-inverse is white with heading-colour text, neither changing on
   hover; outline is transparent with a 2px border in the text colour. The
   theme's own playful-saas buttons declare itxi-pill or itxi-square and keep
   their shapes. */
.wp-block-button:not(.is-style-itxi-pill):not(.is-style-itxi-square) > .wp-block-button__link {
	border-radius: 6px;
	font-weight: 500;
}
.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--primary);
}
.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--white);
}
.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:not(.has-background):hover,
.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-swt-button-secondary > .wp-block-button__link,
.wp-block-button.is-style-swt-button-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-swt-button-secondary > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--body);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: inherit;
}
.wp-block-button.is-style-swt-button-inverse > .wp-block-button__link,
.wp-block-button.is-style-swt-button-inverse > .wp-block-button__link:hover,
.wp-block-button.is-style-swt-button-inverse > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading);
}

/* "Works with" pills on a dark hero, as production's Spectra buttons drew
   them: see-through with a faint white border, small light type, the
   platform's icon before the label. saas-icon-<name> picks the icon from
   assets/icons. The extra .wp-block-buttons outranks the legacy 6px rule. */
.wp-block-buttons > .wp-block-button.is-style-saas-platform-pill > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px 7px 10px;
	border: 1px solid rgb(255 255 255 / 0.48);
	border-radius: 30px;
	background: transparent;
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.4;
}
.wp-block-buttons > .wp-block-button.is-style-saas-platform-pill > .wp-block-button__link:hover,
.wp-block-buttons > .wp-block-button.is-style-saas-platform-pill > .wp-block-button__link:focus-visible {
	background: rgb(255 255 255 / 0.16);
	color: var(--wp--preset--color--white);
}
.is-style-saas-platform-pill[class*="saas-icon-"] > .wp-block-button__link::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--saas-icon) center / contain no-repeat;
	mask: var(--saas-icon) center / contain no-repeat;
}
.saas-icon-shopify {
	--saas-icon: url("../icons/shopify.svg");
}
.saas-icon-wordpress {
	--saas-icon: url("../icons/wordpress.svg");
}

/* Landing pages: the header floats over the page's first band (its hero), as
   the Spectra sites did. Content sits at full width like the old template
   root, so coloured bands run edge to edge; each band centres its own
   content. A landing page must therefore open with a dark hero band, because
   the logos are white. */
.saas-header-overlay {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent;
}
/* The hero gets room for the floating header. Editors often leave an empty
   paragraph above it; hidden here, and the room goes to the block after it,
   otherwise the empty paragraph takes the padding and shows as a white strip
   with the white header lost on it. */
.saas-landing > p:empty {
	display: none;
}
.saas-landing > :first-child:not(p:empty),
.saas-landing > p:empty:first-child + *,
.saas-landing > p:empty:first-child + p:empty + * {
	padding-top: max(var(--wp--preset--spacing--80), 8.5rem) !important;
	margin-top: 0 !important;
}
.saas-landing > .alignwide {
	max-width: none;
}
/* Home page hero as on the production sites. Its own top padding (it already
   clears the header) and the site's primary gradient turning slowly behind
   it. The plugin's
   background-animation.css draws that gradient for "header + div", markup
   this theme does not produce. */
.home .saas-landing > div.wp-block-group:first-of-type {
	padding-top: var(--wp--preset--spacing--xx-large) !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: none !important;
}
.home .saas-landing > div.wp-block-group:first-of-type::before {
	content: '';
	position: absolute;
	top: -100%;
	left: -100%;
	width: 300%;
	height: 300%;
	background: var(--wp--preset--gradient--primary);
	animation: saas-hero-turn 3s linear infinite;
	z-index: -1;
}
/* One hero title on every landing page (home, WordPress, Shopify, pricing):
   between Spectra's 56px/500 and the theme's 72px/800. */
.saas-landing h1.wp-block-heading {
	font-size: clamp(40px, 2.5rem + ((1vw - 3.2px) * 2.133), 64px);
	font-weight: 600;
	line-height: 1.15;
}
@keyframes saas-hero-turn {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.home .saas-landing > div.wp-block-group:first-of-type::before {
		animation: none;
	}
}
.saas-header .wp-block-site-logo img {
	height: auto;
	max-height: 44px;
	width: auto;
}
.saas-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
}
/* Header menu as on the production sites: 14px growing to 16px, regular
   weight. The navigation block carries the small preset, whose class sets the
   size with !important. */
.saas-header .wp-block-navigation.has-small-font-size {
	font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.237), 16px) !important;
}
.saas-header .wp-block-navigation-item__content {
	font-weight: 400;
	letter-spacing: 0.25px;
}
/* A menu item with the classes "saas-nav-icon saas-icon-<name>" shows that
   platform's icon before its label, in the link colour. */
.saas-nav-icon > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.saas-nav-icon > .wp-block-navigation-item__content::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--saas-icon) center / contain no-repeat;
	mask: var(--saas-icon) center / contain no-repeat;
}

/* Footer, as on the production sites: white, dark logo, quiet links. */
.saas-footer-logo {
	margin: 0;
}
.saas-footer-logo img {
	display: block;
	height: 36px;
	width: auto;
	/* Image blocks get the theme's rounded corners, which clip a wide logo. */
	border-radius: 0 !important;
}
.saas-footer-nav a {
	color: var(--wp--preset--color--body);
	font-weight: 400;
	text-decoration: none;
}
.saas-footer-nav a:hover,
.saas-footer-nav a:focus-visible {
	color: var(--wp--preset--color--heading);
	text-decoration: underline;
}

/* Pagination under post lists: page numbers as round chips with the current
   page filled in the brand colour, Previous / Next as outlined pills. The
   row is centred, so page 1 (no Previous link) doesn't throw the numbers to
   one edge and Next to the other. */
.saas-pagination {
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}
.saas-pagination > * {
	margin: 0 !important;
}
.saas-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
}
.saas-pagination .page-numbers,
.saas-pagination .wp-block-query-pagination-previous,
.saas-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.saas-pagination .page-numbers {
	min-width: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}
.saas-pagination a.page-numbers:hover,
.saas-pagination a.page-numbers:focus-visible {
	background: var(--wp--preset--color--tint);
}
.saas-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}
.saas-pagination .page-numbers.dots {
	min-width: auto;
	border: 0;
	background: none;
}
.saas-pagination .wp-block-query-pagination-previous,
.saas-pagination .wp-block-query-pagination-next {
	gap: 0.5rem;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--primary-text);
}
.saas-pagination .wp-block-query-pagination-previous:hover,
.saas-pagination .wp-block-query-pagination-previous:focus-visible,
.saas-pagination .wp-block-query-pagination-next:hover,
.saas-pagination .wp-block-query-pagination-next:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}
.saas-pagination .wp-block-query-pagination-previous-arrow,
.saas-pagination .wp-block-query-pagination-next-arrow {
	margin: 0;
}

/* Blog category filter, as pills under the blog hero. */
.saas-category-pills .wp-block-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.saas-category-pills .wp-block-categories a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}
.saas-category-pills .wp-block-categories a:hover,
.saas-category-pills .wp-block-categories a:focus-visible,
.saas-category-pills .current-cat > a {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* Spectra One's per-device visibility (see saas_theme_spectra_visibility()),
   at its breakpoints. */
@media (min-width: 1025px) {
	.swt-hide-desktop {
		display: none !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.swt-hide-tablet {
		display: none !important;
	}
}
@media (max-width: 767px) {
	.swt-hide-mobile {
		display: none !important;
	}
}