/* =============================================================================
   SecureForms — Cruise Escapes theme integration
   =============================================================================
   Loaded only on pages whose post_content contains either a [secureform ...]
   shortcode OR a direct-embedded `<form class="secure-form" id="secure-form-N">`
   (see cruise_escapes_enqueue_secureforms_styles() in functions.php).

   This stylesheet assumes the SecureForms server CSS has been suppressed —
   per-embed via `naked="1"` on the shortcode (when the plugin honours it) or
   site-wide via wp-admin → Settings → SecureForms → "Disable server-side CSS".

   Class taxonomy: see the docblock in patterns/contact.php. We style our own
   .ce-row / .ce-field / .ce-choices wrappers and keep the SecureForms class
   names (.form-control, .repeating-*, .add-repeating-item, .remove-item,
   .item-number, .btn-primary, .secure-form) ONLY for the JS-binding contract.
   No more .form-group-half / -third / -quarter / -new-row dependency — those
   classes can still appear in the markup (the SecureForms server emits them),
   but this stylesheet doesn't react to them at all.

   Reference: /secureforms-theme-styling-guide.md (project root).
   ========================================================================== */

.secure-form {
	--sf-text:           var( --wp--preset--color--heading );
	--sf-muted:          var( --wp--preset--color--body );
	--sf-border:         rgba( 0, 0, 0, 0.12 );
	--sf-border-focus:   var( --wp--preset--color--ocean );
	--sf-input-bg:       var( --wp--preset--color--base );
	--sf-required:       var( --wp--preset--color--accent );
	--sf-primary:        var( --wp--preset--color--accent );           /* bronze CTA */
	--sf-primary-hover:  var( --wp--preset--color--ocean );            /* aqua hover */
	--sf-on-primary:     var( --wp--preset--color--base );
	--sf-success:        #2f6f4f;
	--sf-success-bg:     #e8f3ec;
	--sf-error:          #b3261e;
	--sf-error-bg:       #fdecea;
	--sf-radius:         4px;
	--sf-gap:            var( --wp--preset--spacing--40, 1rem );

	color: var( --sf-text );
	background: transparent;

	/* Vertical stack of rows; each .ce-row decides its own internal split. */
	display: flex;
	flex-direction: column;
	gap: calc( var( --sf-gap ) * 1.25 );
	font-family: inherit;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;

	/* CSS container — lets the inner rows stack based on the FORM's own width
	   rather than the viewport. Works in any embedding context, not just
	   this contact page's two-column layout. */
	container-type: inline-size;
	container-name: ce-form;
}

.secure-form,
.secure-form *,
.secure-form *::before,
.secure-form *::after {
	box-sizing: border-box;
}

/* ---- Row layouts -------------------------------------------------------- */

.ce-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --sf-gap ) calc( var( --sf-gap ) * 1.5 );
}
.ce-row--2up     { grid-template-columns: 1fr 1fr; }
.ce-row--3up     { grid-template-columns: 1fr 1fr 1fr; }
.ce-row--zip     { grid-template-columns: minmax( 0, 220px ); }
.ce-row--advisor { grid-template-columns: 1fr 1fr; }

/* Stack rows to a single column when the FORM itself drops below 575px wide —
   the threshold below which side-by-side fields start to squish. The container
   query targets .secure-form, so it kicks in regardless of why the form is
   narrow (sidebar squeeze, narrow viewport, embedded in a column). */
@container ce-form (max-width: 575px) {
	.ce-row--2up,
	.ce-row--3up,
	.ce-row--advisor { grid-template-columns: 1fr; }
}

/* ---- Field wrapper ------------------------------------------------------ */

.ce-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

/* ---- Labels — uppercase eyebrow ---------------------------------------- */

.ce-field > label {
	color: var( --sf-text );
	font-size: var( --wp--preset--font-size--x-small );
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}
.ce-field .required {
	color: var( --sf-required );
	font-weight: 600;
	margin-inline-start: 0.15em;
}

/* ---- Inputs ------------------------------------------------------------- */

.secure-form .form-control {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var( --sf-text );
	background: var( --sf-input-bg );
	border: 1px solid var( --sf-border );
	border-radius: var( --sf-radius );
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.secure-form .form-control:focus {
	outline: none;
	border-color: var( --sf-border-focus );
	box-shadow: 0 0 0 3px rgba( 44, 125, 160, 0.18 );	/* ocean @ 0.18 */
}
.secure-form .form-control::placeholder {
	color: var( --sf-muted );
	opacity: 0.7;
}
.secure-form textarea.form-control {
	min-height: 7rem;
	resize: vertical;
}

/* ---- Inline radios / checkboxes ---------------------------------------- */

.ce-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	margin-top: 0.3rem;
	padding: 0.65rem 0;
}
.ce-choice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ce-choice input {
	margin: 0;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var( --sf-primary );
}
.ce-choice label {
	font-size: var( --wp--preset--font-size--small );
	color: var( --sf-text );
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

/* ---- Submit — full-width bronze CTA ------------------------------------ */

.ce-submit-row { margin-top: var( --wp--preset--spacing--40 ); }
.secure-form .btn-primary {
	width: 100%;
	padding: 1rem 1.5rem;
	font: inherit;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.25;
	border: 1px solid var( --sf-primary );
	border-radius: var( --sf-radius );
	background: var( --sf-primary );
	color: var( --sf-on-primary );
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}
.secure-form .btn-primary:hover,
.secure-form .btn-primary:focus {
	background-color: var( --sf-primary-hover );
	border-color: var( --sf-primary-hover );
}

/* ---- Travelers (repeating section) — JS-contract class names ----------- */

.secure-form .repeating-section {
	border: 1px solid var( --sf-border );
	border-radius: var( --sf-radius );
	padding: var( --wp--preset--spacing--60 );
	background: var( --wp--preset--color--complimentary );
}
.secure-form .repeating-section-header h4 {
	margin: 0 0 var( --wp--preset--spacing--50 );
	color: var( --sf-text );
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.secure-form .repeating-item {
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px dashed var( --sf-border );
	display: flex;
	flex-direction: column;
	gap: var( --sf-gap );
}
.secure-form .repeating-item:first-child {
	border-top: none;
	padding-top: 0;
}
.secure-form .repeating-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.secure-form .repeating-item-header h5 { margin: 0; }
.secure-form .item-number {
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--x-small );
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var( --sf-muted );
	font-weight: 600;
}
.secure-form .item-number::before { content: "Traveler "; }
.secure-form .repeating-section-controls {
	margin-top: var( --wp--preset--spacing--40 );
}
.secure-form .add-repeating-item {
	font: inherit;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.6rem 1.2rem;
	border: 1px dashed var( --sf-primary );
	border-radius: var( --sf-radius );
	background: transparent;
	color: var( --sf-primary );
	cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease, border-style 140ms ease;
}
.secure-form .add-repeating-item:hover {
	background: var( --sf-primary );
	color: var( --sf-on-primary );
	border-style: solid;
}
.secure-form .remove-item {
	font: inherit;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.4rem 0.8rem;
	border: 1px solid var( --sf-border );
	border-radius: var( --sf-radius );
	background: var( --sf-input-bg );
	color: var( --sf-muted );
	cursor: pointer;
}
.secure-form .remove-item:hover {
	border-color: var( --sf-error );
	color: var( --sf-error );
}

/* ---- Status messages — see styling guide caveats on inline-style override - */

.alert {
	padding: 1rem 1.25rem;
	border-radius: var( --sf-radius );
	border: 1px solid transparent;
	font-size: var( --wp--preset--font-size--small );
}
.alert-success { color: var( --sf-success ); background: var( --sf-success-bg ); border-color: var( --sf-success ); }
.alert-danger  { color: var( --sf-error );   background: var( --sf-error-bg );   border-color: var( --sf-error );   }

/* ---- Cloudflare Turnstile — leave alone, just breathing room ------------ */

.secure-form .cf-turnstile { margin-top: 0.5rem; }