/*
 * The reflection form's LOOK.
 *
 * ---------------------------------------------------------------------
 * WHAT THIS FILE IS
 * ---------------------------------------------------------------------
 * The nomads form's design, rewritten against the library's class names.
 *
 * resources/reflection-form/reflection-form.css is the library's own and stays
 * design-free: it makes the form work — the decoy unreachable, an error
 * visible, a field in error distinguishable by more than colour — and asserts
 * nothing about how any of it looks. This file is the other half, and it is the
 * theme's, which is why it lives here and not there. Drop the library into
 * another project and it arrives with no opinion; drop this file in beside it
 * and it arrives with nomads'.
 *
 * ---------------------------------------------------------------------
 * WHY IT IS A REWRITE AND NOT A COPY
 * ---------------------------------------------------------------------
 * nomads/resources/scripts/css/reflection-form.css cannot be used as it is.
 * Every selector in it is written against markup that no longer exists:
 *
 *   .reflection-form > .fields > .field        →  .reflection-form-field
 *   .field > label                             →  .reflection-form-label
 *   .field.empty > .empty / .wrong > .wrong    →  one .reflection-form-error
 *   .fields > .input > input                   →  .reflection-form-input
 *   .fields > .dropdown > .select > select     →  .reflection-form-select
 *   .fields > .dropdown  (the row)             →  .reflection-form-field-dropdown
 *   .fields > .checkbox > .checkbox            →  .reflection-form-field-consent
 *   .reflection-form.sending                   →  .reflection-form.is-sending
 *   #reflection-form-response                  →  .reflection-form-overlay-panel
 *
 * Two of those are simplifications rather than renames. The old markup carried
 * TWO error paragraphs per field and revealed one by putting `empty` or `wrong`
 * on the row; the library fills a single slot with the sentence that applies,
 * so the state class has nothing left to do and this file only has to say what
 * an error looks like. And the old `.input` / `.textarea` / `.dropdown`
 * wrappers were the row saying what it held — the row now carries
 * .reflection-form-field-<type>, which says the same thing without a second
 * element to hang it on.
 *
 * ONE THING DOES NOT PORT: `.reflection-form > header`, with its title,
 * description and close button. That existed because the nomads form lived
 * inside a modal and needed a way out of it. render.php emits no header at all
 * now — deliberately, because the same form may sit on two pages that do not
 * want the same words above it, so the page owns the heading. The close button
 * belongs to whatever the page puts the form in, if anything.
 *
 * NO ASSETS. The chevron is the nomads arrow.down.svg geometry inlined as a
 * mask, so there is no images directory to keep in step and no request for a
 * 600-byte file. Everything else here is CSS.
 *
 * ---------------------------------------------------------------------
 * LOADING
 * ---------------------------------------------------------------------
 * Enqueued on reflection_form_enqueue, with the library's stylesheet as a
 * dependency — see resources/php/lib/theme.php. That hook fires when a form is
 * actually rendered, so a page without one carries neither file, and the
 * dependency is what puts this AFTER the library's rules rather than before
 * them. Half of what is below is a same-specificity override, so print order
 * is the whole game: enqueue this in header.php instead and the library's
 * declarations win every tie.
 */

.reflection-form { position: relative; }

/*---------------------------------------------------------------------------*/
/* The field grid                                                            */
/*                                                                           */
/* The library stacks fields in one column. nomads laid them out as a wrapping*/
/* row so an editor could put two or three side by side, which is what        */
/* .cols-2 and .cols-3 are for — and those need nothing new: the field's own  */
/* Classes box in the builder writes straight onto the row, so an editor types*/
/* cols-2 and this file honours it. The old template had no such box; the     */
/* class was hard-coded per field in PHP.                                     */
/*---------------------------------------------------------------------------*/

.reflection-form-fields {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 30px;
	row-gap: 20px;
	margin: 0 0 45px;
}

.reflection-form-field {
	position: relative;
	flex: 0 0 100%;
	max-width: 100%;
	gap: 0;                        /* the margins below do the spacing, as they did */
	padding-bottom: 15px;

	border-bottom: solid 1px;
}

@media (width >= 700px) {
	.reflection-form-field.cols-2 { flex: calc((100% - 30px) / 2); }
	.reflection-form-field.cols-3 { flex: calc((100% - 60px) / 3); }
}

/*---------------------------------------------------------------------------*/
/* Label, required mark, error                                               */
/*---------------------------------------------------------------------------*/

.reflection-form-label {
	margin-bottom: 10px;

	line-height: 16px;
	font-size: 14px;
	font-weight: 400;
}

.reflection-form-error {
	margin-top: 8px;

	line-height: 16px;
	font-size: 12px;
	color: #BA1717;
}

/*
 * A field in error colours its own rule.
 *
 * THE LIBRARY'S OUTLINE DOES NOT SURVIVE THIS THEME, and this is the rule that
 * replaces it. reflection-form.css marks an invalid control with
 * `outline: 2px solid currentColor`; resetters.css carries
 *
 *     #wrapper * { outline: none; }
 *
 * which is one ID against the library's three classes, so the reset wins and
 * the outline never renders anywhere inside the page wrapper. Found on the
 * live site, 26/09 — no test in this project could have: jsdom attaches no
 * stylesheet, so specificity is invisible to all of them.
 *
 * Not fixed by out-specifying it. An outline box round a borderless input
 * sitting on a rule was never the right mark for this design; the field
 * already HAS a line, and colouring it is what the design would have done if
 * it had had an error state. It is a border rather than an outline, so no
 * reset of that shape reaches it.
 *
 * The non-colour half of the library's guarantee is unaffected: the ⚠ before
 * the sentence and the sentence itself are what carry the error to someone who
 * cannot see red, and both are still there.
 *
 * A consent row has no rule to colour — it gets the glyph and the sentence,
 * which is what nomads gave it too.
 */
.reflection-form-field.is-invalid { border-bottom-color: #BA1717; }

/*---------------------------------------------------------------------------*/
/* Text, e-mail, tel, url, number, date, time                                */
/*                                                                           */
/* A rule, not a box: no border of its own, transparent, sitting on the       */
/* field's own bottom border.                                                */
/*---------------------------------------------------------------------------*/

.reflection-form-input {
	height: 30px;
	padding: 0;

	border: none;
	background-color: transparent;

	text-overflow: ellipsis;
	font-family: inherit;
	font-size: 14px;
	color: inherit;
}

.reflection-form-textarea {
	height: 120px;
	resize: none;
	padding: 5px 0 0;
	margin: 0;

	border: none;
	background-color: transparent;

	font-family: inherit;
	font-size: 14px;
	color: inherit;
}

.reflection-form-input::placeholder,
.reflection-form-textarea::placeholder {
	opacity: .5;
	color: inherit;
}

/*---------------------------------------------------------------------------*/
/* Dropdown                                                                  */
/*                                                                           */
/* The chevron is arrow.down.svg's path inlined as a mask — same geometry,    */
/* same round caps, no file. currentColor through the mask, so it follows the */
/* text rather than being painted black like the original was.                */
/*                                                                           */
/* .reflection-form-control is what it hangs off. nomads needed a .select     */
/* wrapper for this; the library already renders one round every control.     */
/*---------------------------------------------------------------------------*/

.reflection-form-field-dropdown .reflection-form-control {
	position: relative;
	background-color: inherit;
}

.reflection-form-field-dropdown .reflection-form-control:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: block;
	height: 10px;
	width: 10px;

	background-color: currentColor;
	pointer-events: none;

	--arrow: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.5 20"><path d="M33.2 2.2 17.8 17.8 2.2 2.2" fill="none" stroke="%23000" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');

	-webkit-mask-image: var(--arrow);
	        mask-image: var(--arrow);
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
}

.reflection-form-select {
	appearance: none;
	height: 30px;
	margin: 0;
	padding: 0 20px 0 0;           /* room for the chevron */

	background-color: inherit;
	border: none;

	line-height: inherit;
	font-family: inherit;
	font-size: 14px;
	color: inherit;

	cursor: pointer;
}

/* The placeholder option reads as placeholder text until something is chosen,
   and is not offered in the list. */
.reflection-form-select:required:invalid { color: color-mix(in srgb, currentColor 50%, transparent); }
.reflection-form-select > option[value=""][disabled] { display: none; }

/*---------------------------------------------------------------------------*/
/* Boxes — consent, checkbox groups, radio groups                            */
/*                                                                           */
/* The real control is hidden and the label draws the box in its :before.     */
/* Hidden with visibility, not display:none — it stays in the accessibility   */
/* tree and remains operable from the keyboard, which is the whole reason     */
/* nomads did it that way too.                                               */
/*                                                                           */
/* A consent row carries no rule under it: it is a sentence, not a field with */
/* a value you read back.                                                    */
/*---------------------------------------------------------------------------*/

.reflection-form-field-consent {
	padding-bottom: 0;
	border-bottom: none;
}

.reflection-form-field-consent .reflection-form-control {
	position: relative;
	display: block;                /* the library flexes this row; the :before box replaces it */
	max-width: 600px;
}

.reflection-form-field-consent .reflection-form-control > input,
.reflection-form-box-row > input {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	visibility: hidden;
}

.reflection-form-box-row {
	position: relative;
	display: block;
}

.reflection-form-boxes { gap: 5px; }

.reflection-form-field-consent .reflection-form-label-inline,
.reflection-form-box-row > label {
	display: block;
	max-width: 400px;
	padding-left: 35px;

	text-align: left;
	line-height: 20px;
	font-size: 14px;

	cursor: pointer;
}

.reflection-form-field-consent .reflection-form-label-inline:before,
.reflection-form-box-row > label:before {
	content: "";
	position: absolute;
	left: 0;
	box-sizing: border-box;
	display: block;
	height: 18px;
	width: 18px;

	background-color: rgba(0,0,0,.25);
	background-clip: content-box;
	border: solid 3px rgba(0,0,0,.25);
	border-radius: 3px;
	outline: solid 1px #FFF;

	transition:
		outline .2s ease-out,
		background-color .2s ease-out;
}

/* A radio is the same box, round. nomads had no radio groups to style. */
.reflection-form-box-row > input[type="radio"] + label:before { border-radius: 50%; }

.reflection-form-field-consent .reflection-form-control > input:checked + .reflection-form-label-inline:before,
.reflection-form-box-row > input:checked + label:before {
	background-color: #000;
}

/*
 * NO RULE FOR A LINK IN A CONSENT SENTENCE, and that is a loss worth naming.
 *
 * nomads had `.checkbox > .checkbox > label > a { text-decoration: underline }`
 * because its consent sentence linked the privacy policy, which is the ordinary
 * shape of one: "j'accepte la politique de confidentialité", with those last
 * three words clickable.
 *
 * render.php passes a field's label through esc_html(), so an <a> an editor
 * types into the Intitulé box arrives as visible angle brackets. The link
 * cannot exist, so a rule describing it would be decoration for markup nothing
 * emits — which is the exact fault this file's own coverage test exists to
 * catch, and it caught this.
 *
 * Left as a gap rather than worked around. Allowing markup in that one label is
 * a library decision with a real surface: it is the only place an editor's text
 * would stop being text.
 */

/* The error lines up with the sentence, not with the box. */
.reflection-form-field-consent .reflection-form-error { padding-left: 35px; }

/*---------------------------------------------------------------------------*/
/* Footer                                                                    */
/*                                                                           */
/* The button's own look is not here, and was not in nomads' form stylesheet  */
/* either — .submit-btn is styled per page there. The library adds the        */
/* editor's classes to .reflection-form-submit for exactly that.              */
/*---------------------------------------------------------------------------*/

.reflection-form-footer { margin-top: 0; }
.reflection-form-submit { margin-bottom: 30px; }

/*---------------------------------------------------------------------------*/
/* Sending                                                                   */
/*                                                                           */
/* nomads dropped pointer events on the fields. The library also drops the    */
/* whole form to .6 opacity, which says more and is kept.                    */
/*---------------------------------------------------------------------------*/

.reflection-form.is-sending .reflection-form-fields { pointer-events: none; }

/*---------------------------------------------------------------------------*/
/* The response overlay                                                      */
/*                                                                           */
/* nomads' #reflection-form-response card, on the library's overlay.          */
/*                                                                           */
/* The backdrop is nomads' #modal-underlay — .3 and a 5px blur, in place of   */
/* the library's flat .5. The fade is nomads' too, and it costs nothing to    */
/* add because the library's closed state is opacity + visibility rather than */
/* [hidden] for this exact reason. Gated on .loaded, as the theme's other     */
/* transitions are, so nothing animates on first paint.                       */
/*                                                                           */
/* NO ICON AND NO LOGO. The card's 80px status mark and its wordmark are      */
/* brand assets and do not belong in a proof of concept. The left gutter that */
/* held the mark is kept, so putting it back is one rule and no relayout:     */
/*                                                                           */
/*   .reflection-form-overlay-panel:before { … left: 50px … }                 */
/*   .is-success .reflection-form-overlay-panel:before { background-image: … }*/
/*---------------------------------------------------------------------------*/

.reflection-form-overlay {
	padding: 25px;
	background-color: rgba(0,0,0,.3);
	backdrop-filter: blur(5px);
}

.loaded .reflection-form-overlay {
	transition: opacity .4s cubic-bezier(0.38, 0.005, 0.215, 1);
}

.reflection-form-overlay-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-height: 100%;

	background-color: #FFF;
	border-radius: 40px;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);

	color: #000;

	isolation: isolate;
}

@media (width >= 650px) {
	.reflection-form-overlay-panel {
		max-width: 560px;
		align-items: flex-start;
		padding: 50px 90px 50px 180px;
	}
}

@media (width < 650px) {
	.reflection-form-overlay-panel {
		max-width: 100%;
		align-items: center;
		padding: 60px 40px;
		text-align: center;
	}
}

/* The title and the sentence. The library renders a <strong> and a <p> and
   hides whichever the editor left empty, so a card with only a sentence has no
   empty line above it. */
.reflection-form-overlay-panel > strong {
	margin-bottom: 5px;

	font-size: 16px;
	font-weight: 500;
}

.reflection-form-overlay-panel > p {
	margin: 0;

	line-height: 145%;
	font-size: 14px;
}

/* The dismiss button. nomads' card had none — it closed on the underlay or on
   a four-second timer — so this is the library's control and takes the card's
   own corner radius rather than a shape from somewhere else. */
.reflection-form-overlay-close {
	top: 15px;
	right: 20px;

	font-size: 24px;
	opacity: .4;

	transition: opacity .2s ease-out;
}

.reflection-form-overlay-close:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.loaded .reflection-form-overlay,
	.reflection-form-overlay-close,
	.reflection-form-field-consent .reflection-form-label-inline:before,
	.reflection-form-box-row > label:before {
		transition: none;
	}
}