/*
Theme Name: AntiSpam Wizard Site
Theme URI: https://antispamwizard.com/
Author: Anton Karmanov
Author URI: https://antispamwizard.com/
Description: Marketing site for the AntiSpam Wizard plugin. Block theme, no external requests.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://wordpress.org/about/gpl/
Text Domain: antispam-wizard-site
*/

/* -------------------------------------------------------------------------
   Block themes do not load style.css on their own; functions.php enqueues it.
   Everything here is local: no imports, no web fonts, no external requests.
   ------------------------------------------------------------------------- */

/* Sticky footer: the site wrapper fills the viewport and <main> takes the slack. */
.wp-site-blocks { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
body.admin-bar .wp-site-blocks { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }

/* "How it works": the three step titles differ in length, so without a
   reservation the paragraphs below them start at different heights. Heading
   line-height is 1.15 (theme.json), so 2.3em is exactly two lines. */
.asw-steps .wp-block-column > h3 {
	min-height: 2.3em;
}

@media (max-width: 781px) {
	/* Columns stack on mobile; nothing to align. */
	.asw-steps .wp-block-column > h3 {
		min-height: 0;
	}
}

/* -------------------------------------------------------------------------
   The ten-check carousel. Without JavaScript the track is still a native
   horizontal scroller (trackpad, touch, and keyboard via tabindex="0");
   assets/carousel.js only adds the prev/next buttons and the dots.
   ------------------------------------------------------------------------- */
.asw-carousel {
	position: relative;
}

.asw-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0.5rem 0 1rem;
	scrollbar-width: none;
}

.asw-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Core's flow layout gives every non-first child a margin-block-start, which
   would push slides 2-10 down by 16px inside the flex row. */
.asw-carousel__track > .asw-carousel__slide {
	margin-block-start: 0;
}

/* Faint right-edge fade: shows there is more to the right when JavaScript is
   off and there are no buttons or dots to say so. carousel.js adds
   .asw-carousel--enhanced, which removes it — over a full-width slide the
   gradient would otherwise wash out the card's own right edge. */
.asw-carousel:not( .asw-carousel--enhanced )::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 1rem;
	right: 0;
	width: 2.5rem;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--wp--preset--color--paper));
	pointer-events: none;
}

.asw-carousel__hint {
	margin-top: 0.5rem;
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.asw-carousel__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.asw-carousel__track {
		scroll-behavior: smooth;
	}
}

.asw-carousel__slide {
	/* Full width of the container: the screenshots have to be readable, so no
	   peeking neighbours. The buttons and dots say that it scrolls. */
	flex: 0 0 100%;
	scroll-snap-align: start;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1.25rem;
}

.asw-carousel__slide img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--line);
}

.asw-carousel__slide h3 {
	margin-top: 1rem;
}

.asw-carousel__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.asw-carousel__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.asw-carousel__btn:hover:not(:disabled) {
	background: var(--wp--preset--color--accent-strong);
}

.asw-carousel__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.asw-carousel__btn:focus-visible,
.asw-carousel__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-strong);
	outline-offset: 2px;
}

.asw-carousel__dots {
	display: flex;
	gap: 0.1rem;
}

/* The button is a 24x24px target (WCAG 2.2 minimum); the dot itself is the
   0.6rem circle drawn inside it. */
.asw-carousel__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.asw-carousel__dot::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--line);
}

.asw-carousel__dot.is-active::before {
	background: var(--wp--preset--color--accent);
}

/* Free / Pro Cloud plans */
.asw-plans__columns > .wp-block-column {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 1.5rem;
}
.asw-plans__columns > .wp-block-column > h3 {
	margin-block-start: 0;
}
.asw-plans__badge {
	display: inline-block;
	margin-block: 0 1rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.asw-plans__badge--now {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--accent-strong);
}
.asw-plans__badge--soon {
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}
.asw-plans__price {
	margin-block: 0 1rem;
	font-weight: 600;
}
.asw-plans__columns h4 {
	margin-block: 1rem 0.25rem;
	font-size: 1.05rem;
}
.asw-plans__columns h4 + p {
	margin-block-start: 0;
}
.asw-plans .asw-waitlist {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Waitlist form (Contact Form 7 markup rendered by the asw-waitlist site plugin) */
.asw-waitlist .wpcf7 form p {
	display: flex;
	align-items: flex-start; /* the inline validation tip must not stretch the button */
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}
/* CF7's wrap span is the real flex item, not the input inside it */
.asw-waitlist .wpcf7 .wpcf7-form-control-wrap {
	flex: 1 1 18rem;
	max-width: 24rem;
}
.asw-waitlist .wpcf7 input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	font: inherit;
}
.asw-waitlist .wpcf7 input[type="submit"] {
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.asw-waitlist .wpcf7 .wpcf7-not-valid-tip,
.asw-waitlist .wpcf7 .wpcf7-response-output {
	display: block;
	width: 100%;
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
	text-align: center;
}
.asw-waitlist .wpcf7 .wpcf7-spinner {
	display: none;
}
@media (max-width: 600px) {
	.asw-waitlist .wpcf7 .wpcf7-form-control-wrap,
	.asw-waitlist .wpcf7 input[type="submit"] {
		flex-basis: 100%;
		max-width: none;
	}
}