/*
Theme Name: Hydron
Description: HYDRYON by Azurith Labs: an editorial single-page FSE theme converted from the Hydron Figma design.
Version: 0.2.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hydron
*/

/* Menu links glide to their sections (instant for reduced-motion users). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Top-level regions sit flush against each other, as in the design. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Keep the footer at the bottom of short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* Landing page content: full-width sections stacked flush, no flow-layout gaps. */
.hydron-landing__content > * {
	margin-block: 0;
}

:where(h1, h2, h3, h4).wp-block-heading {
	text-wrap: balance;
}

/*
 * Front-page masthead: the hero photo fills the first screen and the header
 * sits on its bottom edge, whatever the viewport height (admin bar excluded).
 */
.hydron-masthead {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.hydron-masthead > .wp-block-image.hydron-hero {
	position: relative;
	flex: 1 1 auto;
	min-height: 12rem;
}

.hydron-masthead > .wp-block-image.hydron-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto !important;
}

/* Vertical hairline dividers in the header and footer lockups. */
.wp-block-group.hydron-rule-v {
	padding: 0;
	flex-shrink: 0;
	align-self: center;
	width: var(--wp--custom--border--hairline);
}

.hydron-rule-v--header {
	height: var(--wp--custom--rule--header);
}

.hydron-rule-v--footer {
	height: var(--wp--custom--rule--footer);
}

/* Short gold accent rules (beat core's 100px default separator width). */
hr.wp-block-separator.hydron-accent-rule:not(.is-style-wide) {
	width: var(--wp--custom--width--accent);
	height: var(--wp--custom--border--accent);
	border: 0;
	opacity: 1;
}

hr.wp-block-separator.hydron-accent-rule--wide:not(.is-style-wide) {
	width: var(--wp--custom--width--accent-wide);
	margin-inline: auto 0;
}

/* Opening question: measured text widths from the design. */
.hydron-question .wp-block-heading.hydron-premise {
	max-width: var(--wp--custom--width--premise);
}

.hydron-question .hydron-answer {
	max-width: var(--wp--custom--width--answer);
}

/* Brand lockups. */
.hydron-brand .wp-block-image,
.hydron-footer__lockup .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.hydron-brand img,
.hydron-footer__lockup img {
	display: block;
	height: auto;
}

.hydron-footer__product {
	text-align: right;
}

.hydron-footer__product > * {
	margin: 0;
}

/* Mobile menu: a right-hand drawer over a dimmed page instead of a full-screen overlay. */
.hydron-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open:not(.disable-default-overlay) {
	padding: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--navy) 55%, transparent);
}

.hydron-header .is-menu-open .wp-block-navigation__responsive-close {
	box-sizing: border-box;
	width: min(20rem, 82vw);
	max-width: none;
	height: 100%;
	margin: 0 0 0 auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	overflow-y: auto;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
}

.hydron-header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: var(--wp--preset--spacing--60);
}

.hydron-header .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.hydron-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--stone);
}

.hydron-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--30) 0;
	font-size: var(--wp--preset--font-size--small);
}

@media (prefers-reduced-motion: no-preference) {
	.hydron-header .is-menu-open .wp-block-navigation__responsive-close {
		animation: hydron-drawer-in 0.25s ease-out;
	}
}

@keyframes hydron-drawer-in {
	from {
		transform: translateX(100%);
	}
}

/* Signup form (styled placeholder; see patterns/signup.php). */
.hydron-signup {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.hydron-signup__field {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: var(--wp--custom--field--height);
	padding: 0 var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--stone);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--charcoal);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.hydron-signup__field::placeholder {
	color: var(--wp--preset--color--slate);
	opacity: 1;
}

.hydron-signup__field:focus-visible {
	outline: var(--wp--custom--border--accent) solid var(--wp--preset--color--gold);
	outline-offset: var(--wp--custom--border--accent);
}

.hydron-signup__button {
	flex: 0 0 var(--wp--custom--width--signup-button);
	min-height: var(--wp--custom--field--height);
	border: 0;
	cursor: pointer;
}

/*
 * Gravity Forms signup (patterns/signup.php): the Orbital form theme retuned to match
 * the placeholder above, with the email field and button side by side.
 */
.hydron-signup-section .gform-theme--framework .gform_fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.hydron-signup-section .gform-theme--framework .gfield.hydron-gf-email {
	flex: 1 1 14rem;
	min-width: 0;
}

.hydron-signup-section .gform-theme--framework .gfield--type-submit {
	flex: 0 0 var(--wp--custom--width--signup-button);
}

.hydron-signup-section .gform-theme--framework .gfield.hydron-gf-email input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--field--height);
	padding: 0 var(--wp--preset--spacing--30);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--stone);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
}

.hydron-signup-section .gform-theme--framework .gfield.hydron-gf-email input[type="email"]::placeholder {
	color: var(--wp--preset--color--slate);
	opacity: 1;
}

.hydron-signup-section .gform-theme--framework .gfield.hydron-gf-email input[type="email"]:focus {
	outline: var(--wp--custom--border--accent) solid var(--wp--preset--color--gold);
	outline-offset: var(--wp--custom--border--accent);
	box-shadow: var(--wp--preset--shadow--soft);
}

.hydron-signup-section .gform_wrapper.gform-theme--framework .gfield--type-submit .gform-button.button {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--field--height);
	padding: 0 var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.hydron-signup-section .gform_wrapper.gform-theme--framework .gfield--type-submit .gform-button.button:hover {
	background-color: var(--wp--preset--color--navy-dark);
}

.hydron-signup-section .gform_wrapper.gform-theme--framework .gfield--type-submit .gform-button.button:focus-visible {
	outline: var(--wp--custom--border--accent) solid var(--wp--preset--color--gold);
	outline-offset: var(--wp--custom--border--accent);
}

.hydron-signup-section .gform-theme--framework .gform_footer {
	margin: 0;
	padding: 0;
}

/* Error and thank-you messages in the section's own type. */
.hydron-signup-section .gform-theme--framework .gfield_validation_message,
.hydron-signup-section .gform-theme--framework .gform_validation_errors {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
}

.hydron-signup-section .gform_confirmation_message {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: var(--wp--preset--font-size--2-x-large);
	line-height: var(--wp--custom--line-height--relaxed);
}

/* Stacked layouts below the core columns breakpoint. */
@media (max-width: 781px) {
	.wp-block-column.hydron-intro__promise {
		padding-left: 0 !important;
		padding-top: var(--wp--preset--spacing--50) !important;
		border-left: 0 !important;
		border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--stone);
	}

	.hydron-footer__product {
		align-items: flex-start !important;
		text-align: left;
	}

	hr.wp-block-separator.hydron-accent-rule--wide:not(.is-style-wide) {
		margin-inline: 0 auto;
	}
}

@media (max-width: 600px) {
	.hydron-header .hydron-brand__symbol img {
		width: calc(var(--wp--custom--logo--header-symbol) * 0.75) !important;
	}

	.hydron-header .hydron-brand__wordmark img {
		width: calc(var(--wp--custom--logo--header-wordmark) * 0.75) !important;
	}

	.hydron-intro__promise br {
		display: none;
	}

	.hydron-footer__lockup {
		flex-wrap: wrap !important;
	}

	.hydron-footer__lockup .hydron-rule-v {
		display: none;
	}

	.hydron-signup__button,
	.hydron-signup-section .gform-theme--framework .gfield--type-submit {
		flex-basis: 100%;
	}
}