@charset "UTF-8";
/*
 * Altnoy - contact form layout repairs
 * =====================================================================
 * Covers the two Contact Form 7 forms behind all four shortcodes:
 *
 *   [contact_form]             custom-template/contact_form.php            CF7 #120
 *   [contact_form_h1]          custom-template/contact_form_h1.php         CF7 #120
 *   [contact_form_english]     custom-template/contact_form_english.php    CF7 #1489
 *   [contact_form_english_h1]  custom-template/contact_form_english_h1.php CF7 #1489
 *
 * ...plus the same consent markup where it appears outside those
 * templates: the front page form (.hp_form / .contact-from-home) and the
 * project pages (single-projectdetails.php).
 *
 * UNLIKE assets/css/accessibility.css this file is NOT gated behind
 * `body[class*="pojo-a11y-..."]`. Every problem it fixes is present with
 * no accessibility option selected; the font-resize steps only make it
 * visible sooner. accessibility.css sits in a cascade layer and still
 * out-ranks everything here under the resize steps, which is correct -
 * the two sheets agree on layout and it only tightens the numbers.
 *
 * LOAD ORDER
 *   Linked from header.php after responsive.css, i.e. last of the
 *   hard-coded sheets. The `!important`s below are not defensive: each one
 *   answers a specific `!important` or higher-specificity rule in
 *   commonstyle.css / responsive.css that is named in the comments.
 *
 * DEPLOY
 *   header.php ships with this file. Purge the LiteSpeed cache after
 *   uploading - it combines all CSS into one file.
 */

/* ==========================================================================
   1 - The consent checkbox and its label are ONE row
   --------------------------------------------------------------------------
   commonstyle.css floats the box (`.checbox-altony input{float:right}`) and
   absolutely positions it in English (`.en_US .checbox-altony input{
   position:absolute; left:-12px}`). Both detach the box from the sentence:
   the long marketing-consent text flows underneath it, and once the type
   grows the box is left stranded above its own label - measured on the
   front page at resize step 160, the box sat 32px above the first line of
   the text it belongs to.

   A flex row keeps them locked together at every type size and both
   directions. `align-items:flex-start` puts the box on the FIRST line of a
   label that wraps to three lines, which is where a checkbox belongs.
   ========================================================================== */
.wpcf7-checkbox .wpcf7-list-item.first.last{
	margin: 0 !important; /* .wpcf7-list-item{margin:0 1em 0 0} - 1em grows with the type */
}

.wpcf7-checkbox .wpcf7-list-item > label{
	display: flex !important;
	align-items: flex-start !important;
	gap: 6px !important;
	margin: 0 !important;
}

body.he_IL .wpcf7-checkbox .wpcf7-list-item > label{
	direction: rtl !important;
	text-align: right !important;
}

body.en_US .wpcf7-checkbox .wpcf7-list-item > label{
	direction: ltr !important;
	text-align: left !important;
}

.wpcf7-checkbox input[type="checkbox"]{
	position: relative !important; /* NOT static: the tick in section 2 is */
	                               /* absolutely positioned against this box */
	float: none !important;        /* .checbox-altony / .contact_1 / .page-id-1479 */
	inset: auto !important;        /* .en_US .checbox-altony{left:-12px;top:5px} */
	margin: 2px 0 0 !important;
	padding: 0 !important;         /* a generic input rule leaks 10px 0 in, which */
	                               /* made a 20px box render 20x22 */
	aspect-ratio: 1 !important;    /* keeps it square at every resize step */
	flex: 0 0 auto !important;
	align-self: flex-start !important;
}

/* ==========================================================================
   2 - The tick, centred inside the box at any size
   --------------------------------------------------------------------------
   The theme draws it with `input[type="checkbox"]::after{right:5px; top:2px;
   width:7px; height:13px}` - fixed pixels, measured for the 25px box in
   style.css. The real boxes are 20px, and accessibility.css scales them to
   `20px * var(--a11y-scale-form)` (up to ~35px) while the tick stays pinned
   at 5px/2px, so it drifts further into the top corner at every step.

   Percentages instead of pixels. `top:40%` rather than 50% because the ink
   of a rotated checkmark sits below the centre of its own box - the offset
   is ~10% of the box height and is scale-invariant, so 40% + a centring
   translate lands the ink on the middle at every size. Verified from
   getComputedStyle at 20px, 30px and 35px boxes.
   ========================================================================== */
input[type="checkbox"]::after{
	top: 40% !important;
	right: 50% !important;
	bottom: auto !important;
	left: auto !important;
	width: 30% !important;
	height: 55% !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right-width: calc(2px * var(--a11y-scale-form, 1)) !important;
	border-bottom-width: calc(2px * var(--a11y-scale-form, 1)) !important;
	transform: translate(50%, -50%) rotate(45deg) !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   3 - The "I have read and agree to the / privacy policy" row
   --------------------------------------------------------------------------
   Three wrappers, one markup:
       <p><span class="wpcf7-form-control-wrap">…checkbox + sentence…</span>
          <a class="privacy-form-text">מדיניות הפרטיות</a></p>

   commonstyle.css lays each out as a flex row whose children may shrink
   (`.privacy-checkbox p{flex-wrap:nowrap}`, `.contact-from-home p` with no
   wrap at all). When the row runs out of width flexbox squeezes both items
   instead of moving one to the next line, so "מדיניות הפרטיות" is broken
   across two lines mid-phrase - measured 86x61 on the front page at resize
   step 160.

   The bigger problem is what happens when the row is INVALID. CF7 injects
   `.wpcf7-not-valid-tip` INSIDE `.wpcf7-form-control-wrap`, i.e. inside the
   first flex item, so that one item becomes two lines tall while the link
   beside it is still one line tall. Both reported symptoms come out of that:

     - `align-items:center` centres the link against the taller item, so it
       drops into the gap between the sentence and the message. Measured on
       the front page, invalid, 385px: label y=10006, link y=10020 - 14px of
       drift. That is "the privacy link is not staying at its position".
     - accessibility.css widens that same wrap to `width:100%` under the
       resize steps so the message has room. The wrap is ONE flex item, so
       widening it pushes the link onto a third line, below the error.
       Measured at step 130, English: label 1242, error 1279, link 1314.
       That is "when I increase font size it comes below validation error".

   `display:contents` on the wrap fixes both at once. The wrap stops
   generating a box, so the control and the tip become direct flex items of
   the row and can be ordered independently: control, then link, then the
   message on a line of its own (`flex-basis:100%`). The link never has a
   tall neighbour to be centred against, and accessibility.css's `width:100%`
   lands on an element that no longer has a width to set - a no-op instead
   of a conflict, so that sheet needs no edit and no layer fight.

   `flex:0 0 auto` on the items removes shrinking, so the row wraps as a
   unit rather than breaking a phrase. `direction` decides which edge the
   lines align to, so Hebrew reads right-to-left and English left-to-right
   whether the row ends up on one line or three.
   ========================================================================== */
.privacy-checkbox p,
.contact-from-home p,
.english-form-checkbox p{
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	column-gap: 6px !important;
	row-gap: 2px !important;
}

.privacy-checkbox p,
.contact-from-home p{ direction: rtl !important; }

.english-form-checkbox p{ direction: ltr !important; }

/* The wrap stops being a box, so its two children join the row directly.
   The leading `body` is load-bearing. Two other rules set `display:block` on
   this element with the same (0,2,1) specificity:

     responsive.css   .privacy-checkbox p > .wpcf7-form-control-wrap
     accessibility.php .contact_1 form .wpcf7-form-control-wrap

   forms.css is linked after responsive.css so it wins that tie, but
   accessibility.php is a raw <style> block printed after ALL the linked
   sheets, so it won the other one - and only on the pages whose form widget
   carries the `contact_1` class, which is why the front-page form regressed
   to the old `order` values (link drawn above its own sentence at the larger
   resize steps) while /צרו-קשר/ was correct. `body` takes this to (0,2,2)
   and settles it without touching either of those files. */
body .privacy-checkbox p > .wpcf7-form-control-wrap,
body .contact-from-home p > .wpcf7-form-control-wrap,
body .english-form-checkbox p > .wpcf7-form-control-wrap{
	display: contents !important;
}

/* 1. the checkbox and its sentence */
.privacy-checkbox p > .wpcf7-form-control-wrap > .wpcf7-form-control,
.contact-from-home p > .wpcf7-form-control-wrap > .wpcf7-form-control,
.english-form-checkbox p > .wpcf7-form-control-wrap > .wpcf7-form-control{
	order: 0 !important; /* .privacy-checkbox span{order:1} catches this span too */
	flex: 0 1 auto !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* 2. the privacy link, on the sentence's own line whenever it fits */
.privacy-checkbox p > .privacy-form-text,
.contact-from-home p > .privacy-form-text,
.english-form-checkbox p > .privacy-form-text{
	order: 1 !important; /* .contact-from-home agrees; .privacy-checkbox left the */
	                     /* link at 0, i.e. ahead of its own sentence */
	flex: 0 0 auto !important;
	max-width: 100% !important;
}

/* 3. the validation message, always last and always on its own line */
.privacy-checkbox p .wpcf7-not-valid-tip,
.contact-from-home p .wpcf7-not-valid-tip,
.english-form-checkbox p .wpcf7-not-valid-tip{
	order: 2 !important;
	flex: 1 0 100% !important;
	margin: 0 !important;
}

.privacy-form-text{
	white-space: nowrap !important; /* never split "מדיניות הפרטיות" / "privacy policy." */
	margin-top: 0 !important;       /* commonstyle sets margin-top:.5vh, a viewport- */
	                                /* sized nudge that grows with the window */
	align-self: flex-start !important;
}

/* The sentence and the link are different sizes (13px / 11px) and, in
   English, different line-heights: `.english-main-form-wrapper label` pins
   the label to 17px while `.privacy-form-text` runs at 12px on mobile. Two
   top-aligned boxes with different leading do not put their text on the same
   line - measured 2px of baseline offset on /en/contact/ with nothing else
   touched, which is the "position is not proper" report. One shared unitless
   line-height brings them to within 0.4px. 1.45 is the value
   accessibility.css already uses for both, so base and resized agree. */
.privacy-checkbox p .wpcf7-list-item-label,
.contact-from-home p .wpcf7-list-item-label,
.english-form-checkbox p .wpcf7-list-item-label,
.privacy-checkbox p .privacy-form-text,
.contact-from-home p .privacy-form-text,
.english-form-checkbox p .privacy-form-text{
	line-height: 1.45 !important;
}

/* ==========================================================================
   3b - The consent rows line up with each other
   --------------------------------------------------------------------------
   Every other control in this column is sized by
   `.contact_left .wpcf7 form .wpcf7-form-control-wrap{width:75%}`, including
   the two marketing-consent rows, which are plain <p>s. `.privacy-checkbox`
   is a <div> that sits outside that rule and commonstyle.css gives it
   `width:76%` instead. One percent of an 833px column is 8.3px, so the last
   checkbox sits ~8px to the right of the two above it.

   Measured on /פרויקטים-בהוד-השרון/ at 1400px, right edge of each box:
     before   1017, 1017, 1025
     after    1017, 1017, 1017

   Below 768px responsive.css already gives both 100%. That rule lives in a
   media query, which adds no specificity, so an unscoped `width` here would
   out-rank it on source order alone - hence the min-width wrapper.
   ========================================================================== */
@media (min-width: 768px){
	.privacy-checkbox{
		width: 75%;
	}
}

/* ==========================================================================
   4 - The validation tip is a block wherever else it appears
   --------------------------------------------------------------------------
   Section 3 covers the three consent rows. Everywhere else in the form the
   tip is still an inline span sharing its field's line box.
   `.privacy-checkbox span{width:fit-content!important}` catches the tip's
   own span too, so this needs the extra class to out-rank it.
   ========================================================================== */
.wpcf7-form-control-wrap > .wpcf7-not-valid-tip{
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	white-space: normal !important;
}

/* ==========================================================================
   5 - The validation summary stays inside the form
   --------------------------------------------------------------------------
   commonstyle.css gives `.wpcf7-response-output` `position:absolute;
   bottom:-54px`. It therefore reserves no height and is pinned by its FOOT
   to a point below `.contact_left`, so every extra line the sentence wraps
   to grows UPWARDS - into the "החלום אינו נבדל כל כך מן המעשה" quote in
   `.submit-before`, and past the bottom of the yellow block on mobile.
   At the site's own type size on a 1400px screen it clears the quote by
   2px; anything that adds a line (a narrower column, a longer message, the
   English copy, any resize step) closes that gap.

   accessibility.css section 9b already puts it in flow, but only under the
   resize steps. The same repair belongs at the base size, and once it is
   here that rule is simply a no-op restatement.

   `clear:both` because the Send button is floated at >=768px: without it
   the message starts level with the button and only its line boxes step
   aside. `margin-top` rather than a gap computed from the type, because the
   height depends on how the sentence wraps.
   ========================================================================== */
.wpcf7-response-output{
	position: static !important;
	inset: auto !important;
	float: none !important;
	clear: both !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 1.25em 0 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   6 - ...and so does the closing quote, for the same reason
   --------------------------------------------------------------------------
   `.submit-before` (the Herzl quote) is the OTHER out-of-flow block in this
   column: `position:absolute; bottom:0` inside `.contact_left`, i.e. pinned
   to the foot of the column and reserving no height. The two cannot be
   fixed apart. Section 5 makes `.contact_left` grow to contain the
   validation summary, and a quote pinned to the foot follows that growth
   straight onto it - measured on this page at 1400px with the form
   invalid: quote 1060-1114, summary 1087-1114, 27px of overlap.

   In flow, the column grows to contain both and they stack in DOM order:
   form, summary, quote. The Send button still floats, so where there is
   room the quote's line boxes wrap beside it exactly as they do now.

   Below 768px the theme already switches this block to `position:relative`
   and centres it, so it is in flow there and this is scoped away from it.
   Mirrors accessibility.css section 9a, which does the same under the
   resize steps.
   ========================================================================== */
@media (min-width: 768px){
	.contact_left .submit-before{
		position: static !important;
		inset: auto !important;
		width: auto !important;
		max-width: 100% !important;
		margin-top: 12px !important;
	}
}