/**
 * WP PRO ADS block styles (front-end + editor).
 */

/* ------------------------------------------------------------------ *
 * Content width / alignment (classic theme support for align-wide /
 * align-full). theme.json supplies contentSize (800px) & wideSize (1080px);
 * these rules constrain top-level blocks and let aligned blocks break out.
 * ------------------------------------------------------------------ */
.entry-content > * {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 22px;
	padding-right: 22px;
}

.entry-content > .alignwide {
	max-width: 1080px;
}

.entry-content > .alignfull {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* ------------------------------------------------------------------ *
 * Shape divider
 * ------------------------------------------------------------------ */
/* Full-bleed, no gutters: the divider's shape must span the whole page width
   so it lines up with the full-width sections above and below it. Applies even
   when the block was saved without an alignfull class. */
.entry-content > .wpproads-divider {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.wpproads-divider {
	line-height: 0;
	width: 100%;
	overflow: hidden;
}

.wpproads-divider svg {
	display: block;
	width: 100%;
}

/* Keep the server-rendered preview from collapsing inside the editor. */
.block-editor-block-list__block .wpproads-divider {
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */
/* Full-bleed: the green hero spans the whole page even if the block was saved
   before "Full width" became the default (i.e. has no alignfull class). It
   fills .entry-content (which is the full viewport width); the inner column
   below stays constrained to the content width and centered. */
.entry-content > .wpproads-hero {
	max-width: 100%;
}

.wpproads-hero {
	position: relative;
	overflow: hidden;
	padding: 90px 22px;
	background-color: #d9f24b;
}

.wpproads-hero__inner {
	position: relative;
	z-index: 2;
	/* Match the site content width from theme.json (contentSize), so the hero
	   text column lines up with the rest of the page. */
	max-width: var( --wp--style--global--content-size, 800px );
	margin: 0 auto;
	text-align: center;
}

.wpproads-hero__inner h1,
.wpproads-hero__inner h2,
.wpproads-hero__inner .wp-block-heading {
	font-size: clamp(40px, 7vw, 72px);
	line-height: 1.05;
	margin: 0 0 0.25em;
	color: #1d1d1d;
}

.wpproads-hero__inner p {
	font-size: clamp(18px, 2.4vw, 24px);
	max-width: 720px;
	margin: 0 auto 1.4em;
	color: #2c3a00;
}

/* Hand-drawn sketch accent behind the headline. */
.wpproads-hero__sketch {
	position: absolute;
	z-index: 1;
	top: 38%;
	left: 50%;
	width: min(460px, 70%);
	height: 60px;
	transform: translate(-50%, -50%);
	opacity: 0.85;
	pointer-events: none;
}

/* Make the hero "GET IT NOW" button echo the existing theme button. */
.wpproads-hero .wp-block-button__link {
	background-color: #1d1d1d;
	color: #d9f24b;
	border-radius: 4px;
	padding: 14px 28px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wpproads-hero .wp-block-button__link:hover {
	background-color: #000;
}

@media only screen and (max-width: 600px) {
	.wpproads-hero {
		padding: 60px 18px;
	}
}