/*
Theme Name: SWIS (Twenty Twenty-Five Child)
Theme URI: https://swis.reach2teach.net/
Description: Child theme of Twenty Twenty-Five for the SWIS marketing site (Home, Pricing, Contact) — direction 1b "product-led SaaS". Magenta + slate, Public Sans, pill buttons.
Author: Reach2Teach
Template: twentytwentyfive
Version: 1.0.0
Text Domain: swis-child
*/

/* ------------------------------------------------------------------
   Extras that go beyond what theme.json can express.
   Keep this file small — colors, type, spacing, and button radius
   all live in theme.json so the block editor stays in sync with them.
------------------------------------------------------------------- */

/* Header "Log in" link — add class "swis-login-link" (Settings ->
   Advanced -> Additional CSS class(es)) to any header link/block to force
   it pink. Using !important since Navigation Link colors and the site's
   global link color (theme.json elements.link) can otherwise win. */
.swis-login-link,
.swis-login-link a,
a.swis-login-link {
	color: #E6007E !important;
	font-weight: 600 !important;
}
.swis-login-link:hover,
.swis-login-link a:hover,
a.swis-login-link:hover {
	color: #FF4FA8 !important;
}

/* Pill buttons everywhere (belt-and-braces on top of theme.json button radius) */
.wp-block-button__link {
	border-radius: 999px !important;
	font-weight: 600;
	padding: 15px 30px;
}

/* Primary "Buy a trial package" style pill with the branded shadow */
.is-style-swis-primary .wp-block-button__link {
	background-color: #E6007E;
	color: #fff;
	box-shadow: 0 4px 14px rgba(230, 0, 126, .3);
	border: none;
}
.is-style-swis-primary .wp-block-button__link:hover {
	background-color: #FF4FA8;
}

/* Secondary "Book a demonstration" outline pill */
.is-style-swis-secondary .wp-block-button__link {
	background-color: #fff;
	color: #242C3A;
	border: 1.5px solid #D6DAE2;
}
.is-style-swis-secondary .wp-block-button__link:hover {
	background-color: #F3F5F9;
}

/* Outline pill for use on dark/magenta backgrounds */
.is-style-swis-outline-on-dark .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.5);
}
.is-style-swis-outline-on-dark .wp-block-button__link:hover {
	background-color: rgba(255,255,255,.1);
}

/* Cards */
.swis-card {
	background: #fff;
	border: 1px solid #ECEEF2;
	border-radius: 14px;
	box-shadow: 0 1px 4px rgba(29,42,63,.05);
}
.swis-card--lg {
	border-radius: 20px;
}
.swis-card--dark {
	background: #242C3A;
	color: #fff;
	border: none;
}
.swis-card--dark p,
.swis-card--dark h3 {
	color: #fff;
}

/* Equal-height cards in a row: WordPress stretches the (invisible) column
   to match its tallest sibling, but the visible card box inside only grows
   to fit its own text unless we tell it to fill that stretched column. */
.wp-block-column {
	display: flex;
	flex-direction: column;
}
.wp-block-column > .swis-card,
.wp-block-column > .swis-pricing-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}
/* Pin pricing-card CTAs to the bottom so all three buttons line up even
   when one card's feature list or price format is a line longer/shorter. */
.wp-block-column > .swis-pricing-card .wp-block-buttons {
	margin-top: auto;
}

/* Site logo (header + footer). The bundled image already includes the
   "Social Worker Inclusion Software" tagline, so no separate text is needed. */
.swis-logo {
	margin: 0;
}
.swis-logo img {
	display: block;
	height: 44px;
	width: auto;
}
.swis-logo.swis-logo--sm img {
	height: 26px;
}

/* Eyebrow / badge pill above headlines */
.swis-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #E3D0DC;
	background: #FDF2F8;
	color: #B00563;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: 999px;
}
.swis-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #E6007E;
	display: inline-block;
}

/* Numbered "why choose" list marker */
.swis-num {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #E6007E;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Screenshot frame with browser-chrome dots, used in the hero */
.swis-browser-frame {
	max-width: 1020px;
	margin: 0 auto;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
	box-shadow: 0 -8px 40px rgba(29,42,63,.12);
	border: 1px solid #DFE3EA;
	border-bottom: none;
	background: #fff;
}
.swis-browser-frame__bar {
	display: flex;
	gap: 6px;
	padding: 10px 14px;
	background: #EEF0F4;
	border-bottom: 1px solid #E2E5EC;
}
.swis-browser-frame__bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #D6DAE2;
	display: inline-block;
}
/* The dots-bar and the screenshot are two separate blocks stacked inside
   this frame, so WordPress's default block spacing (blockGap) inserts a
   margin between them — force it to 0 so the image sits flush under the
   bar with no visible gap. Also zero out the figure's own default margin. */
.swis-browser-frame {
	gap: 0 !important;
}
.swis-browser-frame > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.swis-browser-frame figure.wp-block-image {
	margin: 0 !important;
}
.swis-browser-frame img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	/* Crop to just past the 5 "Reading age / SATS / SDQ / attendance" tiles,
	   hiding the tab bar + Needs Analysis panel below (which reads as empty
	   space at hero size). aspect-ratio + object-fit keeps this crop point
	   correct at any screen width, instead of a fixed pixel height. Source
	   image is 2812x3070 — this ratio shows the top 2260px of it. Adjust the
	   two numbers below (in the same ratio as your source image's width to
	   however many px tall you want to reveal) if you swap in a different
	   screenshot. */
	aspect-ratio: 2812 / 2260 !important;
	object-fit: cover;
	object-position: top;
}

/* Pricing tier highlighted as the entry point */
.swis-pricing-card--highlight {
	border: 2px solid #E6007E !important;
	box-shadow: 0 8px 28px rgba(230,0,126,.12) !important;
	position: relative;
}
.swis-pricing-badge {
	position: absolute;
	top: -13px;
	left: 32px;
	background: #E6007E;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .5px;
	padding: 5px 14px;
	border-radius: 999px;
	text-transform: uppercase;
}
.swis-pricing-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.swis-pricing-card ul li {
	display: flex;
	gap: 10px;
	font-size: 14px;
	padding: 5.5px 0;
}
.swis-pricing-card ul li::before {
	content: "✓";
	color: #E6007E;
	font-weight: 800;
}
.swis-pricing-card--dark ul li::before {
	color: #FF4FA8;
}

/* Contact page: styled WPForms fields to match the design's pill/rounded inputs */
.swis-contact-form-wrap .wpforms-container {
	background: #fff;
	border: 1px solid #ECEEF2;
	border-radius: 20px;
	padding: 44px;
	box-shadow: 0 1px 4px rgba(29,42,63,.05);
}
/* WPForms caps each field/input at a fraction of the container width by
   default (its "medium"/"small" size classes) regardless of how much room
   is actually available, which is what leaves the empty space on the
   right of the form. Force fields to use the full row width... */
.swis-contact-form-wrap .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}
.swis-contact-form-wrap .wpforms-field {
	flex: 1 1 100%;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* ...except any field you've tagged "swis-col-half" in WPForms (Field
   settings → Advanced → CSS Classes) — those sit two-per-row instead,
   e.g. Email + Phone, or the two dropdowns. See the theme README. */
.swis-contact-form-wrap .wpforms-field.swis-col-half {
	flex: 1 1 calc(50% - 10px);
	max-width: calc(50% - 10px) !important;
}
@media (max-width: 600px) {
	.swis-contact-form-wrap .wpforms-field.swis-col-half {
		flex: 1 1 100%;
		max-width: 100% !important;
	}
}
.swis-contact-form-wrap input[type="text"],
.swis-contact-form-wrap input[type="email"],
.swis-contact-form-wrap input[type="tel"],
.swis-contact-form-wrap select,
.swis-contact-form-wrap textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border: 1.5px solid #D6DAE2 !important;
	border-radius: 10px !important;
	padding: 13px 14px !important;
	font-size: 14px !important;
}
.swis-contact-form-wrap .wpforms-submit-container button {
	border-radius: 999px !important;
	background-color: #E6007E !important;
	font-weight: 700 !important;
	padding: 14px 36px !important;
	box-shadow: 0 4px 14px rgba(230,0,126,.3);
}