/**
 * ROYA - Contact section
 *
 * Lifted out of home.css on 2026-09-03. The design draws this section on the
 * home page AND on the About page (18:284-307 against the home's own), and
 * template-parts/home/contact.php is reused verbatim by both - so its styles
 * cannot live in a page-scoped sheet. Loaded globally, after components.css.
 *
 * The Contact page (5.2) will be the third caller.
 */

/* ==========================================================================
   Contact
   Figma 1:9 y 12964-14100. Section head (drifting watermark + title), then
   the CF7 form as underline fields: name/phone/email in one row, a full-width
   message field, a full-width sage submit pill with an arrow icon beside its
   centered label, and five cream social circles.
   The selectors target CF7's rendered markup - the form content itself is
   seeded into the wpcf7 post (.tools/seeders/seed-contact.php).
   ========================================================================== */

.roya-contact__form {
	margin-block-start: clamp(var(--roya-space-4), 4.9vw, 4.4rem);
}

.roya-form__row {
	display: flex;
	gap: clamp(var(--roya-space-2), 3.5vw, 3.2rem);
}

.roya-form__row .roya-form__field {
	flex: 1;
	min-width: 0;
}

.roya-form__field {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	margin: 0;
	color: var(--roya-text);
	font-size: var(--roya-text-label);
	font-weight: var(--roya-weight-light);
}

/* CF7 wraps each control in a span - the span carries the flexible width. */
.roya-form__field .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
}

/*
 * The rule has to land on the label's own line, not a line below it: the
 * design's whole field row (1:177) is 69px tall, one 64px line holding label
 * and rule together (client note 2026-08-31).
 *
 * An input's default line-height leaves ~0.2em of descender space under its
 * text, and that space sits UNDER the shared baseline - so the border landed
 * roughly 22px below the label instead of inside its descender room. line-height
 * 1 removes it; the small bottom padding is the only clearance kept, so typed
 * Hebrew descenders (ק ן ך ף) do not sit on the rule.
 */
.roya-form__field input {
	width: 100%;
	padding: 0 0 0.08em;
	line-height: 1;
	background: transparent;
	border: 0;
	border-block-end: 2px solid var(--roya-rule);
	border-radius: 0;
	color: var(--roya-text);
	font-family: inherit;
	font-size: 0.7em;
	font-weight: var(--roya-weight-light);
}

.roya-form__field input:focus-visible {
	outline: none;
	border-block-end-color: var(--roya-accent);
}

/* Message: label on its own line, writing space + underline across the
   full form width below it. */
.roya-form__field--message {
	display: block;
	margin-block-start: clamp(var(--roya-space-2), 2.4vw, 2.2rem);
}

.roya-form__field--message .wpcf7-form-control-wrap {
	display: block;
}

.roya-form__field--message textarea {
	display: block;
	width: 100%;
	/* Fixed height: CF7 renders rows="10" by default, and the design's
	   writing space is ~two lines over a single underline. */
	height: 2.4em;
	padding: 0.2em 0;
	background: transparent;
	border: 0;
	border-block-end: 2px solid var(--roya-rule);
	border-radius: 0;
	color: var(--roya-text);
	font-family: inherit;
	font-size: 0.7em;
	font-weight: var(--roya-weight-light);
	resize: none;
}

.roya-form__field--message textarea:focus-visible {
	outline: none;
	border-block-end-color: var(--roya-accent);
}

/* Submit: a full-width sage pill; the arrow icon rides on the wrapper so it
   can sit beside the input's centered label (an input cannot hold markup). */
.roya-form__submit {
	position: relative;
	margin: clamp(var(--roya-space-4), 4.6vw, 4.1rem) 0 0;
}

.roya-form__submit input[type="submit"] {
	/* Block, not inline: the wrapper's line box would otherwise add
	   descender space below the input and drag the ::after icon off-center. */
	display: block;
	width: 100%;
	min-height: var(--roya-submit-height);
	padding-block: var(--roya-space-1);
	background-color: var(--roya-accent);
	border: var(--roya-border-width) solid var(--roya-border);
	border-radius: var(--roya-radius-pill);
	box-shadow: var(--roya-shadow-soft);
	color: var(--roya-on-accent);
	font-family: inherit;
	font-size: var(--roya-text-label);
	font-weight: var(--roya-weight-regular);
	cursor: pointer;
	transition: background-color var(--roya-transition), box-shadow var(--roya-transition);
}

.roya-form__submit input[type="submit"]:hover {
	background-color: var(--roya-graphite);
	box-shadow: var(--roya-shadow-card);
}

/* CF7 appends its spinner after the input; in flow it opens a second line
   under the block input and drags the wrapper's center (and the icon) down.
   Absolute keeps it visible during submit without affecting layout. */
.roya-form__submit .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: var(--roya-space-4);
	translate: 0 -50%;
	margin: 0;
}

.roya-form__submit::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(50% - clamp(4.5rem, 10.2vw, 9.2rem));
	width: clamp(1.75rem, 4.1vw, 3.7rem);
	height: clamp(1.75rem, 4.1vw, 3.7rem);
	translate: 0 -50%;
	background-color: var(--roya-on-accent);
	mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	-webkit-mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	pointer-events: none;
}

/* CF7 chrome kept quiet: response line centered, validation notes small. */
.roya-contact__form .wpcf7-response-output {
	margin: var(--roya-space-3) 0 0;
	padding: 0;
	border: 0;
	color: var(--roya-text);
	font-size: clamp(1rem, 1.7vw, 1.5rem);
	text-align: center;
}

.roya-contact__form .wpcf7-not-valid-tip {
	color: var(--roya-graphite);
	font-size: clamp(0.875rem, 1.4vw, 1.25rem);
}

/* Social circles. DOM order phone-first = visual right-first in RTL,
   matching the design's order. */
ul.roya-contact__socials {
	display: flex;
	/*
	 * Five 56px circles plus four 16px gaps = 344px, wider than a 320px phone
	 * (the row was the one thing pushing every page 12px past the viewport at
	 * that width, G-30). Wrapping puts the fifth circle on a second row there
	 * and changes nothing from 360px up, where the row fits.
	 */
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(var(--roya-space-2), 4.4vw, 3.9375rem);
	margin-block-start: clamp(var(--roya-space-5), 6.9vw, 6.2rem);
	padding: 0;
	list-style: none;
}

.roya-contact__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--roya-social-size);
	height: var(--roya-social-size);
	background-color: var(--roya-cream);
	border-radius: var(--roya-radius-circle);
	box-shadow: var(--roya-shadow-soft);
	transition: background-color var(--roya-transition);
}

.roya-contact__social-icon {
	width: 52%;
	height: 52%;
	background-color: var(--roya-accent);
	mask: center / contain no-repeat;
	-webkit-mask: center / contain no-repeat;
	transition: background-color var(--roya-transition);
}

.roya-contact__social:hover {
	background-color: var(--roya-accent);
}

.roya-contact__social:hover .roya-contact__social-icon {
	background-color: var(--roya-cream);
}

.roya-contact__social--phone .roya-contact__social-icon {
	mask-image: url("../img/icon-phone.svg");
	-webkit-mask-image: url("../img/icon-phone.svg");
}

.roya-contact__social--whatsapp .roya-contact__social-icon {
	mask-image: url("../img/icon-whatsapp.svg");
	-webkit-mask-image: url("../img/icon-whatsapp.svg");
}

.roya-contact__social--facebook .roya-contact__social-icon {
	mask-image: url("../img/icon-facebook.svg");
	-webkit-mask-image: url("../img/icon-facebook.svg");
}

.roya-contact__social--instagram .roya-contact__social-icon {
	mask-image: url("../img/icon-instagram.svg");
	-webkit-mask-image: url("../img/icon-instagram.svg");
}

.roya-contact__social--tiktok .roya-contact__social-icon {
	mask-image: url("../img/icon-tiktok.svg");
	-webkit-mask-image: url("../img/icon-tiktok.svg");
}

@media (max-width: 767px) {
	/* Mobile (no design exists): the three fields stack, everything else
	   already scales through the clamps. */
	.roya-form__row {
		flex-direction: column;
		gap: var(--roya-space-3);
	}
}