/* ==========================================================================
   LoomReach theme v4.0 · E "Showroom" · WordPress additions
   The prototype's CSS (tokens.css, site.css, pages/*.css) is copied byte for byte and never edited
   (check.sh diffs it against the pinned commit). Everything WordPress needs on top lives here, scoped
   to body.lr-e. Loaded last (handle lr-e-wp).
   Sections: 1 cookie banner · 2 admin bar · 3 founder photo · 4 404 · 5 Contact Form 7 (forms builder) ·
   6 About without the founder room
   ========================================================================== */

/* ---------- 1. Cookie banner: the live consent script opens #lr-cc (adds .is-open) for a visitor
   without a valid lr_consent cookie, synchronously, right after the markup at the top of <body>.
   So a returning visitor never sees it and nothing shifts. ---------- */
.lr-e #lr-cc:not(.is-open) { display: none; }

/* ---------- 2. Admin bar (logged-in editors only): keep the sticky header under it ---------- */
.lr-e.admin-bar .lr-header { top: 32px; }
@media screen and (max-width: 782px) {
  .lr-e.admin-bar .lr-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* core makes #wpadminbar position:absolute here: it scrolls away */
  .lr-e.admin-bar .lr-header { top: 0; }
}

/* ---------- 3. Founder photo (template-parts/e/founder.php, after F1): a real photo fills the frame ---------- */
.lr-e .lr-photo picture { position: absolute; inset: 0; }
.lr-e .lr-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4. 404 (404.php): the "Try one of these" rows carry no thumbnail ---------- */
.lr-e--404 .lr-need { min-height: 56px; padding-left: 22px; }
.lr-e--404 .lr-needs { margin-top: 8px; width: 100%; }

/* ---------- 5. Contact Form 7 inside .lr-form (home #enquiry, Contact #form) ----------
   CF7's own stylesheet is not loaded on E pages (inc/lr-e.php); its scripts are, where the form is.
   Baseline only — the forms builder adds the chip and summary rules for CF7's DOM below this line. */
.lr-e .wpcf7 .hidden-fields-container { display: none; }

/* Wrappers CF7 puts around each control are inline spans: the E field grid wants blocks. */
.lr-e .lr-form .wpcf7-form-control-wrap { display: block; position: relative; }
/* In the prototype the textarea is a grid item (blockified); inside CF7's wrapper it would stay inline-block
   on the text baseline and leave an 8px descender gap under it. */
.lr-e .lr-form .wpcf7-form-control-wrap > textarea { display: block; }
.lr-e .lr-form input.lr-btn { -webkit-appearance: none; appearance: none; }

/* Chips. [radio about use_label_element class:lr-chips__list] prints
   span.lr-chips__list > span.wpcf7-list-item > label > input + span.wpcf7-list-item-label;
   the prototype's chip (site.css .lr-chips__input + .lr-chips__chip) on that DOM. The radios stay native:
   arrows and Tab work without JavaScript, and the ?type= preselect is a server-side "checked". */
.lr-e .lr-chips .wpcf7-list-item { display: inline-flex; margin: 0; }
.lr-e .lr-chips .wpcf7-list-item > label { position: relative; display: inline-flex; }
.lr-e .lr-chips .wpcf7-list-item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lr-e .lr-chips .wpcf7-list-item-label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--lr-line-strong); border-radius: var(--lr-r-pill); background: #FFFFFF;
  font-size: .9375rem; font-weight: 500; cursor: pointer; user-select: none;
}
.lr-e .lr-chips .wpcf7-list-item-label:hover { border-color: var(--lr-ink); }
.lr-e .lr-chips input:checked + .wpcf7-list-item-label { background: var(--lr-ink); border-color: var(--lr-ink); color: #FBFAF7; }
.lr-e .lr-chips input:checked + .wpcf7-list-item-label::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.3 L5.6 10.2 L11.5 3.9' fill='none' stroke='%233DE0A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.lr-e .lr-chips input:focus-visible + .wpcf7-list-item-label { outline: 3px solid var(--lr-focus-outer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lr-focus-inner); }

/* The trap field ([lr_trap], inc/lr-enquiry.php): off screen, not display:none (some bots skip hidden fields). */
.lr-e .lr-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Without enquiry.js (no JavaScript): CF7's own error tips and response box, in E's colours. */
.lr-e .lr-form .wpcf7-not-valid-tip { display: flex; gap: 8px; margin-top: 6px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--lr-stop); }
.lr-e .lr-form .wpcf7-not-valid-tip::before { content: ""; flex: none; width: 4px; border-radius: 2px; background: var(--lr-stop); }
.lr-e .lr-form .wpcf7-response-output { padding: 18px 20px; border: 2px solid var(--lr-stop); border-radius: var(--lr-r-m); background: #FFFFFF; font-weight: 600; }
.lr-e .lr-form .wpcf7-response-output:empty,
.lr-e .lr-form.init .wpcf7-response-output,
.lr-e .lr-form.submitting .wpcf7-response-output,
.lr-e .lr-form.resetting .wpcf7-response-output { display: none; }
.lr-e .lr-form.sent .wpcf7-response-output { border-color: var(--lr-ink); background: var(--lr-mint-tint); }
.lr-e .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* With enquiry.js (it marks the CF7 wrapper data-lr-enhanced): E shows every message — field errors and the
   summary — so CF7's copies step aside and a screen reader hears each one once. */
.lr-e [data-lr-enhanced] .wpcf7-not-valid-tip,
.lr-e [data-lr-enhanced] .wpcf7-response-output,
.lr-e [data-lr-enhanced] .screen-reader-response { display: none; }

/* Sending (reCAPTCHA and mail can take a few seconds): CF7's spinner after the button. */
.lr-e .lr-form .wpcf7-spinner { display: none; }
.lr-e .lr-form.submitting .wpcf7-spinner {
  display: inline-block; width: 22px; height: 22px; flex: none;
  border: 2.5px solid var(--lr-ink); border-right-color: transparent; border-radius: 50%;
  animation: lr-e-spin .8s linear infinite;
}
@keyframes lr-e-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lr-e .lr-form.submitting .wpcf7-spinner { animation: none; border-right-color: var(--lr-ink); opacity: .5; }
}

/* ---------- 6. About while F1 is open: template-parts/e/founder.php prints nothing, so the two plain sections
   #who and #with-you meet (the design alternates plain sections with rooms; two plain paddings make a ~200px
   band). Once the founder room is printed it sits between them and this rule stops matching. ---------- */
.lr-e--about #who + #with-you { padding-top: 0; }