/**
 * SRX Sign Up page styles
 *
 * Author:  MJ Bomar
 * Version: 1.2.0
 *
 * Changelog:
 * 1.2.0 (2026-07-29) - Aesthetic round on the Sign Up page. The hero now
 *   runs full width at 600px tall to match the Home page cover, and it
 *   keeps its 20px rounded corners and the same 14px top / 24px side
 *   breathing room the Home cover wears, so it reads as the same
 *   inset-card hero (MJ's calls across two review rounds; the first
 *   pass came out square and flush). The watch-video pill got
 *   louder: solid white, bigger, with a shadow and a lift on hover, so it
 *   reads clearly against the photo. The three numbered step cards came
 *   off the page, so their rules came out with them. The benefit dots
 *   grew back into real cards with the original icons and descriptions
 *   (the team wanted that verbiage back), restyled to match the site's
 *   card language: white, rounded 20, thin border, icon in a rose quartz
 *   circle, kept to a small footprint (tighter padding and a narrower
 *   grid, MJ's call after the first pass ran large). The
 *   Multi-Location and Schools cards now wear the same rose
 *   quartz as the form band, and their Learn More buttons match the
 *   site's standard dark purple button. The testimonial band moved to
 *   the bottom of the page as a full-width lavender band exactly like
 *   Home, which is styled by the shared spotlight skin, so the old
 *   rounded srx-signup-testi rules came out too. And the newly-graduated
 *   student note moved up from under the registration form into the
 *   join copy above it, wearing the same srx-join-copy style as its
 *   neighbors, so its own srx-signup-studentnote rule came out as well.
 * 1.1.0 (2026-07-26) - The Thank You social section rules (the
 *   .srx-ty-social width pin, padding, and heading size) moved to
 *   wp-custom-styles.css. The Contact Us page now uses the same
 *   social section, and that page does not load this file, so the
 *   rules needed a sitewide home. The 10% off highlight
 *   (.srx-ty-highlight) stays here since only the Thank You page
 *   uses it.
 * 1.0.0 (2026-07-26) - First version, built for the Sign Up page remake
 *   and shared with the Sign Up Thank You page (same design family)
 *   (the approved "combined" design). The page's blocks carry the
 *   structure and the registered site colors; this file carries what the
 *   editor cannot do: the hero photo overlay and white script heading,
 *   the watch-video pill, the step cards and their numbered circles, the
 *   benefit dots, the two Learn More cards, the form section skin, and
 *   the sleeping "ghost" preview fields that show the form's shape
 *   before a status is chosen. Everything is scoped to srx-signup
 *   classes so nothing leaks to the rest of the site.
 */

/* ==========================================================
   Section widths. The page's sections are direct children of the
   post content, whose flow layout does not manage child widths
   (the same lesson as the Home Award Winners band), so every
   band pins itself to the site's wide width and centers, with
   small side gutters on screens narrower than that. The hero and
   the testimonial band are not in this list on purpose: both are
   full-width bands now, and the theme handles those on its own.
   ========================================================== */
.srx-signup-benefits,
.srx-signup-duo,
.srx-signup-join{
	max-width: min(var(--wp--style--global--wide-size, 1280px), calc(100% - 48px));
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================
   Hero: full width and 600px tall, the same size as the Home
   page cover. The cover photo gets a soft deep-purple wash so
   the white script heading and subtitle stay readable on top of
   it. The blocks carry the photo; this carries the size, the
   wash, and the text treatment, and centers everything in the
   middle of the band.
   ========================================================== */
.srx-signup-hero{
	position: relative;
	min-height: 600px;
	border-radius: 20px;
	overflow: hidden;
	padding: 40px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* The same breathing room the Home cover has (its homeCover rule in
   wp-custom-styles.css): a touch of air up top and 24px at the sides,
   so the rounded corners read against the page. The heavier selector
   is on purpose: the theme zeroes the top margin of the first block
   on the page with a stronger rule, and this has to outweigh it, the
   same way the Home cover's own rule does. */
div.wp-block-group.srx-signup-hero{
	margin: 14px 24px 0;
}

.srx-signup-hero::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(55, 29, 79, 0.52), rgba(55, 29, 79, 0.38));
}

/* Children ride above the wash. */
.srx-signup-hero > *{
	position: relative;
}

.srx-signup-hero h1.srx-brittany-font{
	color: var(--wp--preset--color--custom-white, #ffffff);
	text-shadow: 0 2px 18px rgba(55, 29, 79, 0.55);
}

.srx-signup-hero .srx-hero-sub{
	color: var(--wp--preset--color--custom-white, #ffffff);
	text-shadow: 0 1px 10px rgba(55, 29, 79, 0.6);
	max-width: 52ch;
	margin-left: auto;
	margin-right: auto;
}

/* The watch pill: a solid white capsule with a play mark in a
   purple circle, big enough to read as the hero's action. It is
   a normal button block underneath, so the hype video modal
   trigger class rides on it untouched. */
.srx-signup-hero .srx-hype-pill .wp-block-button__link{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: var(--wp--preset--color--custom-white, #ffffff);
	color: var(--wp--preset--color--custom-dark-blue-magenta, #371d4f);
	border-radius: 999px;
	padding: 14px 30px;
	font-size: 1rem;
	font-weight: 500;
	box-shadow: 0 8px 28px rgba(31, 31, 31, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* The play mark: a white triangle sitting in a filled purple
   circle, drawn entirely here so the button text stays plain. */
.srx-signup-hero .srx-hype-pill .wp-block-button__link::before{
	content: "\25B6";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--custom-medium-dark-magenta-1, #783687);
	color: var(--wp--preset--color--custom-white, #ffffff);
	font-size: 0.62rem;
	padding-left: 2px;
}

.srx-signup-hero .srx-hype-pill .wp-block-button__link:hover{
	transform: translateY(-2px);
	box-shadow: 0 12px 34px rgba(31, 31, 31, 0.45);
}

/* ==========================================================
   The six benefit cards: the original icons and descriptions,
   dressed in the site's card language. White card, rounded 20,
   thin border, icon sitting in a rose quartz circle, small caps
   title. Three across on desktop, two on tablets, one on phones.
   ========================================================== */
.srx-signup-benefits{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: min(1080px, calc(100% - 48px));
}

/* The theme's flow layout gives every child after the first a top
   margin, which made card one sit higher than its row. The grid's
   gap is the only spacing we want between cards, so zero those out. */
.srx-signup-benefits > .srx-benefit-card{
	margin: 0;
}

.srx-signup-benefits .srx-benefit-card{
	background: var(--wp--preset--color--custom-white, #ffffff);
	border: 1px solid #e5e5e5;
	border-radius: 20px;
	padding: 22px 18px 20px;
	text-align: center;
}

/* The icon (or the ACA badge image) sits centered in a rose
   quartz circle at the top of each card. */
.srx-signup-benefits .srx-benefit-card > .wp-block-outermost-icon-block,
.srx-signup-benefits .srx-benefit-card > .wp-block-image{
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--wp--preset--color--custom-rose-quartz, #eeebe6);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
}

.srx-signup-benefits .srx-benefit-card .wp-block-image img{
	display: block;
}

.srx-signup-benefits .srx-benefit-title{
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--custom-dark-blue-magenta, #371d4f);
	margin-bottom: 5px;
}

.srx-signup-benefits .srx-benefit-card p{
	font-size: 0.88rem;
	color: #555555;
	max-width: 30ch;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================
   The two Learn More cards (Multi-Location and Schools). They
   wear the same rose quartz as the Ready to Join band, and the
   buttons match the site's standard dark purple button. The
   buttons keep their modal trigger classes; only the look is here.
   ========================================================== */
.srx-signup-duo .srx-duo-card{
	background: var(--wp--preset--color--custom-rose-quartz, #eeebe6);
	border-radius: 20px;
	padding: 26px 26px 22px;
}

.srx-signup-duo .srx-duo-card h2{
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wp--preset--color--custom-dark-blue-magenta, #371d4f);
	margin-bottom: 6px;
}

.srx-signup-duo .srx-duo-card p{
	font-size: 0.9rem;
	color: #555555;
	margin-bottom: 16px;
}

.srx-signup-duo .srx-duo-btn .wp-block-button__link{
	background-color: var(--wp--preset--color--custom-dark-blue-magenta, #371d4f);
	color: var(--wp--preset--color--custom-white, #ffffff);
	border-radius: 8px;
	padding: 10px 24px;
	font-size: 0.88rem;
}

.srx-signup-duo .srx-duo-btn .wp-block-button__link:hover{
	background-color: var(--wp--preset--color--custom-medium-dark-magenta-1, #783687);
}

/* ==========================================================
   The Ready to Join section: Rose Quartz band, centered copy,
   and the registration form in a white card.
   ========================================================== */
.srx-signup-join{
	padding: 44px 24px 48px;
}

.srx-signup-join .srx-join-copy{
	max-width: 76ch;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.srx-signup-join .srx-signup-formwrap{
	max-width: 760px;
	margin: 26px auto 0;
	background: var(--wp--preset--color--custom-white, #ffffff);
	border-radius: 20px;
	padding: 26px;
	box-shadow: 0 10px 34px rgba(55, 29, 79, 0.12);
}

/* ==========================================================
   The Sign Up Thank You page rides this same stylesheet (it is
   the second half of the registration flow and wears the same
   design). Its thank-you band reuses the srx-signup-join class.
   This rule is its own: the 10% off line gets a little extra
   weight so new registrants never miss it. The social section's
   rules (.srx-ty-social) moved to wp-custom-styles.css on
   2026-07-26 when the Contact Us page started using the same
   section.
   ========================================================== */
.srx-ty-highlight{
	font-weight: 500;
	color: var(--wp--preset--color--custom-dark-blue-magenta, #371d4f);
}

/* A light touch on the form fields so they match the site's
   rounded language. Forminator's own layout and behavior are
   left completely alone. */
.srx-signup-formwrap .forminator-input,
.srx-signup-formwrap .forminator-textarea,
.srx-signup-formwrap select.forminator-select,
.srx-signup-formwrap .forminator-select2 .selection .forminator-select2-selection{
	border-radius: 10px;
}

/* ==========================================================
   The sleeping ghost preview: a non-interactive sketch of the
   Licensed/Solo field set, shown under the status dropdown so
   the form never looks collapsed. The script next to this file
   builds it and hides it the moment a real status is chosen.
   ========================================================== */
.srx-ghost{
	opacity: 0.45;
	pointer-events: none;
	margin-top: 14px;
}

.srx-ghost .srx-ghost-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.srx-ghost .srx-ghost-field{
	background: #f6f4f1;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 0.85rem;
	color: #8a8a8a;
	margin-bottom: 10px;
}

.srx-ghost .srx-ghost-field.srx-ghost-tall{
	min-height: 74px;
}

.srx-ghost-note{
	font-size: 0.98rem;
	font-weight: 500;
	text-align: center;
	color: var(--wp--preset--color--custom-medium-dark-magenta-1, #783687);
	margin: 6px 0 8px;
}

/* Phones: ghost rows stack like the real form fields will. */
@media (max-width: 640px){
	.srx-ghost .srx-ghost-row{
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* Tablets: benefit cards drop to two across. */
@media (max-width: 900px){
	.srx-signup-benefits{
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Phones: benefit cards stack, and the hero keeps its 600px
   height with calmer side padding, same as the Home cover. */
@media (max-width: 600px){
	.srx-signup-benefits{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px){
	.srx-signup-hero{
		padding: 40px 18px;
	}
}