/* ============================================================================
   WORDPRESS BRIDGE
   Only what WordPress adds on top of the static build: admin bar offset,
   editor block defaults, Contact Form 7, comment and alignment classes.
   Depends on: tokens.css, base.css, components.css, sections.css
   ============================================================================ */

/* ---------- 1. Admin bar ------------------------------------------------- */

/* The header is fixed, so it hides behind the admin bar without this. */
body.admin-bar .hdr{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .hdr{ top:46px; } }
body.admin-bar{ scroll-padding-top:calc(var(--nav-h) + 32px + var(--sp-md)); }

/* ---------- 2. Editor output --------------------------------------------- */

.ne-prose > * + *{ margin-top:var(--sp-md); }
.ne-prose p{ font-size:var(--fs-body); line-height:var(--lh-body); }
.ne-prose a{ color:var(--text-accent); border-bottom:var(--bw) solid currentColor; }
.ne-prose ul,.ne-prose ol{ padding-left:1.2rem; }
.ne-prose ul{ list-style:disc; }
.ne-prose ol{ list-style:decimal; }
.ne-prose li + li{ margin-top:.4rem; }
.ne-prose h2{ font-family:var(--font-display); font-size:var(--fs-h3); font-weight:var(--fw-light); }
.ne-prose h3{ font-family:var(--font-display); font-size:var(--fs-h4); font-weight:var(--fw-reg); }
.ne-prose blockquote{
  border-left:var(--bw-2) solid var(--line); padding-left:var(--sp-md);
  font-family:var(--font-display); font-style:italic; font-size:var(--fs-lead);
}
.ne-prose img{ height:auto; }

.alignleft{ float:left; margin:0 var(--sp-md) var(--sp-sm) 0; }
.alignright{ float:right; margin:0 0 var(--sp-sm) var(--sp-md); }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide,.alignfull{ max-width:none; }
.wp-caption-text,figcaption{ font-size:var(--fs-micro); color:var(--text-muted); margin-top:var(--sp-2xs); }
.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- 3. Contact Form 7 -------------------------------------------- */

/* The plugin normalises CF7's output back to the markup the design build uses
   (ne_cf7_normalise): the wrapper spans are unwrapped, the submit input becomes
   the site's <button> with its arrow, and every field closes with the same
   empty .field__err slot. So the site stylesheet styles the form outright and
   nothing here touches the controls.

   What is left is the two things CF7 adds that the design never had, plus the
   visibility rules its own dequeued stylesheet used to provide. */

/* Contact Form 7 6.2 moved its hidden inputs out of a display:none div and into
   a <fieldset>, which every browser draws a border around by default. Its own
   stylesheet hides it; that sheet is dequeued, so it drew an empty rectangle
   across the top of the form. The div form is kept too, for older CF7. */
.wpcf7 form .hidden-fields-container,
.wpcf7 form fieldset.hidden-fields-container{ display:none; }

/* CF7's summary block for screen readers is hidden by its own stylesheet, and
   that sheet is dequeued, so it has to be hidden here or it prints an empty
   paragraph above the form and the whole validation summary after a failure. */
.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;
}

/* The response message lands in the slot above the fields, where .form__alert
   sits in the design build, and wears the same treatment. CF7 keeps it in the
   document at all times and shows it by putting a state class on the form, so
   the hiding has to happen here now its own sheet is gone. */
.wpcf7 form .wpcf7-response-output{
  display:none; margin:0 0 var(--sp-sm); padding:var(--sp-sm);
  background:var(--c-stone); border-left:3px solid var(--c-mocha-dp);
  font-size:var(--fs-small); line-height:1.6; color:var(--c-ink-2);
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{ display:block; }
.wpcf7 form.sent .wpcf7-response-output{ border-left-color:#3F5230; color:#3F5230; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{ border-left-color:var(--c-error); color:var(--c-error); }

/* Per-field validation. The tip takes the place of the empty error slot rather
   than adding to it, so a form that fails validation does not grow taller than
   the design build. */
.wpcf7 .wpcf7-not-valid-tip{
  display:block; margin-top:var(--sp-3xs); min-height:1em;
  font-size:var(--fs-micro); line-height:1.6; color:var(--c-error);
}
.wpcf7 .wpcf7-not-valid-tip + .field__err{ display:none; }
.wpcf7 .wpcf7-not-valid{ border-color:var(--c-error); }

/* CF7's spinner follows the submit button, which is full width, so in the flow
   it would wrap onto a line of its own and make the form taller than the
   design. Float it over the button instead. */
.wpcf7 .u-mt-md{ position:relative; }
.wpcf7 .wpcf7-spinner{
  position:absolute; right:var(--sp-sm); top:50%; transform:translateY(-50%);
  width:10px; height:10px; margin:0; opacity:0; pointer-events:none;
  background:var(--c-white);
  transition:opacity var(--dur-fast) var(--ease);
}
.wpcf7 form.submitting .wpcf7-spinner{ opacity:1; animation:ne-pulse .8s ease-in-out infinite; }
.wpcf7 form.submitting .btn{ opacity:.65; }
/* A square, because the brand law makes every corner square anyway. */
@keyframes ne-pulse{ 50%{ opacity:.2; } }
@media (prefers-reduced-motion:reduce){
  .wpcf7 form.submitting .wpcf7-spinner{ animation:none; }
}

/* ---------- 4. Blocks ----------------------------------------------------- */

.wp-block-image img{ display:block; }
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:1.08rem 2.2rem;
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  background:var(--c-ink); color:var(--c-white); border:var(--bw) solid var(--c-ink);
}

/* ---------- 5. Walkthrough videos ---------------------------------------- */

/* The client's videos are vertical phone recordings, so the grid is built for
   9:16 rather than the landscape ratios used everywhere else. */
.vgrid{ display:grid; gap:var(--gap-grid); grid-template-columns:1fr; }
@media(min-width:620px){ .vgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1000px){ .vgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.vcard{ margin:0; }
.vcard video{
  display:block; width:100%; aspect-ratio:9/16;
  object-fit:cover; background:var(--c-ink);
}

/* ---------- 6. Map -------------------------------------------------------- */

.mapwrap{ position:relative; overflow:hidden; background:var(--surface-sunken); }
.mapwrap iframe{ display:block; width:100%; border:0; filter:grayscale(.3) contrast(1.02); }

/* ---------- 7. Gallery empty state --------------------------------------- */

.gempty{ padding-block:var(--sp-2xl); color:var(--text-muted); }

/* ---------- 8. Fallback enquiry form ------------------------------------- */

.form__fallback{ border:var(--bw) solid var(--line); padding:var(--sp-md); }