/*
Theme Name: Sir Wellness — Coming Soon
Description: Standalone single-page "coming soon" theme for Sir Wellness. Every URL on the site renders the same launch teaser.
Author: Sir Wellness
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: sw-coming-soon
*/

/*
  Fonts loaded via Adobe Fonts kit (functions.php): "neue-haas-grotesk-display"
  (Neue Haas Grotesk Display Pro) and "amador" (the stylized $-style S glyph).
  The kit only ships weights 400/700 for neue-haas-grotesk-display — no true
  Medium/500-600 — so the Figma spec's "65 Medium" is approximated with 400
  (Regular reads closer to Medium than Bold does) until a kit with the actual
  Medium weight is available.
*/

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	background: #0B1827;
	color: #fff;
	font-family: 'neue-haas-grotesk-display', system-ui, sans-serif;
	overflow-x: hidden;
}

img, svg {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

.is-layout-flow > *,
.is-layout-constrained > * {
	margin-block-start: 0;
}

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

.wp-block-image {
	margin: 0;
	line-height: 0;
}

/* ---------- Coming Soon page ---------- */

.sw-cs {
	position: relative;
	min-height: 100dvh;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sw-cs__bg {
	position: absolute;
	inset: 0;
	background-image: url('assets/img/bg-desktop.jpg');
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.sw-cs__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(11, 24, 39, 0.2);
	mix-blend-mode: multiply;
}

.sw-cs__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sw-cs__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: min(1269px, calc(100% - 80px));
	text-align: center;
}

.sw-cs__top {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sw-cs__heading {
	margin: 0;
	font-family: 'neue-haas-grotesk-display', system-ui, sans-serif;
	font-weight: 400;
	font-size: 60px;
	line-height: 80px;
	text-transform: uppercase;
	color: #fff;
}

.sw-cs__heading .sw-cs__line--accent {
	color: #FEFCC6;
}

.sw-cs__heading .sw-cs__s {
	font-family: 'amador', serif;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
}

.sw-cs__form-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 375px;
	max-width: 100%;
}

.sw-cs__subhead {
	margin: 0;
	font-family: 'neue-haas-grotesk-display', system-ui, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	text-align: center;
}

.sw-cs__logo {
	margin-top: 125px;
	width: 127px;
}

.sw-cs__logo--horizontal {
	display: none;
}

/* ---------- Forminator override ---------- */

.sw-cs .forminator-custom-form {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0 !important;
}

.sw-cs .forminator-row {
	margin: 0 !important;
	width: 100%;
}

.sw-cs .forminator-row:first-child {
	flex: 1 1 auto;
}

.sw-cs .forminator-row.forminator-row-last {
	flex: 0 0 auto;
	width: auto;
}

.sw-cs .forminator-col {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
}

.sw-cs .forminator-field {
	margin: 0 !important;
}

/* Only the submit button's field needs the flex fix (to shrink its 48px
   min-height wrapper down to the button's own 38px) — applying it to the
   email field too would force its error message beside the input instead
   of stacking below it. */
.sw-cs .forminator-row-last .forminator-field {
	display: flex !important;
	align-items: center !important;
	min-height: 0 !important;
	height: auto !important;
}

.sw-cs .forminator-error-message {
	display: block;
	width: 100%;
	margin-top: 6px;
	font-family: 'neue-haas-grotesk-display', system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: #ff8a80;
	text-align: left;
}

.sw-cs .forminator-custom-form > p {
	display: none !important;
}

.sw-cs .forminator-label,
.sw-cs .forminator-label-hidden-label {
	display: none !important;
}

.sw-cs input[type="email"].forminator-input {
	height: 38px !important;
	width: 100%;
	background: #F4F1E9;
	border: none;
	border-radius: 4px;
	padding: 0 14px;
	font-family: 'neue-haas-grotesk-display', system-ui, sans-serif;
	font-size: 14px;
	color: rgba(55, 56, 99, 0.70);
}

.sw-cs input[type="email"].forminator-input::placeholder {
	color: rgba(55, 56, 99, 0.70);
}

.sw-cs .forminator-button-submit {
	height: 38px !important;
	width: auto;
	white-space: nowrap;
	background: #FEFCC6;
	color: #0B1827;
	border: none;
	border-radius: 4px;
	font-family: 'neue-haas-grotesk-display', system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	padding: 0 18px;
	cursor: pointer;
}

.sw-cs .forminator-button-submit:hover {
	background: #fff8a8;
}

.sw-cs .forminator-response-message {
	color: #fff;
}

/* ---------- Mobile (< 768px) ---------- */
/*
  Figma mobile frame is 393x852 with the logo+heading pinned near the top
  and the subhead+form pinned near the bottom, both horizontally centered —
  the empty space between is intentional (it shows the background photo).
  This is reproduced with a height:100vh section and a space-between column
  so it always fills exactly the viewport instead of growing with content.
*/

@media (max-width: 767px) {
	.sw-cs {
		height: 100dvh;
		min-height: 100dvh;
		align-items: stretch;
		justify-content: flex-start;
	}

	.sw-cs__bg {
		background-image: url('assets/img/bg-mobile.jpg');
	}

	.sw-cs__bg::after {
		background: rgba(24, 25, 42, 0.2);
	}

	.sw-cs__inner {
		height: 100%;
		align-items: stretch;
		padding: 26px 25px 20px;
	}

	.sw-cs__content {
		flex: 1 1 auto;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.sw-cs__top {
		align-items: center;
		gap: 12px;
	}

	.sw-cs__heading {
		font-size: 36px;
		line-height: 1.25;
		text-align: center;
	}

	.sw-cs__logo {
		display: none;
	}

	.sw-cs__logo--horizontal {
		display: block;
		width: 157px;
		margin: 0 auto;
	}

	.sw-cs__form-wrap {
		align-items: center;
		width: 100%;
	}

	.sw-cs__subhead {
		text-align: center;
		width: 100%;
	}

	.sw-cs .forminator-custom-form {
		flex-direction: column;
		align-items: stretch;
	}

	.sw-cs .forminator-row.forminator-row-last {
		width: 100%;
	}

	.sw-cs .forminator-button-submit {
		width: 100%;
	}
}