/**
 * 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);
}

/* ==========================================================================
   Privacy consent
   Client request 2026-09-23: a small tick box under the message field reading
   "קראתי ואישרתי את מדיניות הפרטיות", with the last two words linking to the
   policy. It is a CF7 [acceptance] tag, so the box is genuinely required and
   the refusal message is CF7's own Hebrew one.

   Deliberately small. The field labels on this form are 64px; a consent line
   at that size would read as a second heading, and this is a legal note the
   visitor ticks, not part of the conversation.
   ========================================================================== */

.roya-form__consent {
	margin: clamp(var(--roya-space-3), 2.8vw, 2.5rem) 0 0;
	color: var(--roya-text);
	font-size: clamp(0.9375rem, 1.5vw, 1.375rem);
	font-weight: var(--roya-weight-light);
	line-height: var(--roya-leading-normal);
}

/*
 * CF7 nests the control three spans deep and always puts its own label around
 * the box. The link to the policy therefore sits OUTSIDE the tag in the form
 * content, as a sibling - inside the label, clicking "מדיניות הפרטיות" would
 * also tick the box, which is the opposite of informed consent.
 *
 * The three wrappers are removed from layout with `display: contents`, so the
 * label and the link become direct flex items of the paragraph below and are
 * centred on one axis. They used to be `inline`, which the flex container
 * blockified: the outer wrap became a block flex item holding a LINE BOX, and
 * the 24px box sat on that line's baseline with descender space under it -
 * the wrap grew to 32px, the label hugged its top and the link was centred
 * 4-5px lower (measured 2026-09-23, at 390 and 1440 alike).
 */
.roya-form__consent .wpcf7-form-control-wrap,
.roya-form__consent .wpcf7-acceptance,
.roya-form__consent .wpcf7-list-item {
	display: contents;
	margin: 0;
}

/* CF7 appends its "required" notice inside the wrap; as a flex item it takes
   a line of its own under the sentence rather than squeezing beside it. */
.roya-form__consent .wpcf7-not-valid-tip {
	flex-basis: 100%;
}

.roya-form__consent .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	/* The label's own line matches the link's, so the two halves of the
	   sentence share one height and one centre at every width. */
	line-height: inherit;
	cursor: pointer;
}

.roya-form__consent input[type="checkbox"] {
	flex-shrink: 0;
	/* 24px: the WCAG 2.5.8 minimum target, and about the cap height of the
	   line it sits on, so the two look level. */
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--roya-accent);
	cursor: pointer;
}

/*
 * wpautop wraps the line in a <p> of its own inside the div. A flex row rather
 * than plain inline text: the box and its label are centred on each other
 * inside CF7's label, while the link beside them is ordinary inline text on
 * the baseline - so left to themselves the two halves of one sentence sit a
 * few pixels apart. It also restores the word space, which the paragraph
 * formatter collapses away between the tag and the anchor.
 *
 * flex-start is the visual RIGHT here, which is where the rest of the form
 * begins.
 */
.roya-form__consent p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.3em;
	margin: 0;
}

/*
 * Phone: the 15px sentence next to a 24px box read top-heavy (client note
 * 2026-09-23). 18px sits level with the text. The tap target is still the
 * whole label - box plus sentence - so it stays well over the 24px minimum.
 */
@media (max-width: 767px) {
	.roya-form__consent input[type="checkbox"] {
		width: 1.125rem;
		height: 1.125rem;
	}
}

.roya-form__consent a {
	color: var(--roya-accent);
	text-underline-offset: 0.2em;
}

.roya-form__consent a:hover {
	color: var(--roya-graphite);
}

/* 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);
	}
}