/* WordPress-only additions. The design system itself lives in styles.css,
   ported verbatim from the approved mockups. Keep this file tiny. */

/* Form status messages (success / error) */
.form-status {
  padding: 0.875rem 1.125rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.form-status--ok {
  background: var(--sage-wash, #E4EAE0);
  color: var(--forest, #1B3A2A);
  border: 1px solid var(--moss-mid, #5B7B60);
}
.form-status--err {
  background: #F7E9E5;
  color: #7A2E1D;
  border: 1px solid #C4664F;
}
.book-form-grid .form-status { grid-column: 1 / -1; }

/* Honeypot: visually gone, still in the DOM for bots */
.rnm-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Logged-in admin bar: keep the fixed header below it */
body.admin-bar .site-header { top: 32px; }

/* Skip link: hidden until keyboard focus */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--forest, #1B3A2A);
  color: var(--parchment, #fff);
  border-radius: 6px;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; outline: 2px solid var(--terracotta, #C4664F); outline-offset: 2px; }
body.admin-bar .skip-link:focus { top: 2.75rem; }

/* Desktop dropdown state, driven by assets/nav.js (aria-expanded stays truthful) */
.site-nav__list > li.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__list > li.is-open .site-nav__caret { transform: rotate(180deg); opacity: 1; }
.site-nav__list > li:focus-within:not(.is-open):not(:hover) > .dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}
.site-nav .site-nav__list > li.is-dismissed > .dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

/* Forest CTA band: the two-column inline grid leaves the button ~1px wider than its
   column at 375px. Stack it on narrow phones. */
@media (max-width: 480px) {
  .section--forest .container > div[style*="grid-template-columns: minmax(0, 1.5fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .section--forest .container > div[style*="grid-template-columns: minmax(0, 1.5fr)"] > div[style*="text-align: right"] {
    text-align: left !important;
  }
}

/* ============================================================
   WPForms (since 2026-10-13). WPForms runs with "No styling", so
   these rules plus the shared .form-row rules in styles.css are the
   whole look. Fields carry the form-row / form-row--full classes from
   the build script (scripts/build_wpforms.php); the layout below
   reproduces the legacy theme forms 1:1.
   ============================================================ */

/* Field wrappers become direct grid items of the form. */
.rnm-wpf .wpforms-field-container { display: contents; }
.rnm-wpf form { display: grid; gap: 1rem; margin-top: 1rem; }

/* Honeypot, hidden fields: anything WPForms adds that is not one of our rows. */
.rnm-wpf .wpforms-field:not(.form-row) {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Required asterisk: the legacy forms showed none (required stays on the input). */
.rnm-wpf .wpforms-required-label { display: none; }

/* Visually hidden field legend (consent fieldset), still read by screen readers. */
.rnm-wpf .wpforms-label-hide,
.rnm-wpf .wpforms-screen-reader-element {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contact + aesthetics: single column, 640px */
.rnm-wpf--contact form,
.rnm-wpf--aesthetics form { max-width: 640px; }

/* Homepage #book: two columns */
.rnm-wpf--book form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
@media (max-width: 640px) { .rnm-wpf--book form { grid-template-columns: 1fr; } }

/* Service-page enquiry: three columns, no top margin */
.rnm-wpf--service form { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; margin-top: 0; }
@media (max-width: 640px) { .rnm-wpf--service form { grid-template-columns: 1fr; } }
.svc-enquire-wpf .svc-enquire__note { margin-top: 1.125rem; }

.rnm-wpf .form-row--full,
.rnm-wpf .wpforms-submit-container,
.rnm-wpf .wpforms-recaptcha-container,
.rnm-wpf .wpforms-error-container { grid-column: 1 / -1; }

/* Consent checkbox: fieldset > ul > li > input + label, styled like .consent-check */
.rnm-wpf .rnm-consent fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.rnm-wpf .rnm-consent ul { list-style: none; padding: 0; margin: 0; display: block; }
.rnm-wpf .rnm-consent li { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0; line-height: 1.55; }
.rnm-wpf .rnm-consent input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0.2em 0 0;
  flex-shrink: 0;
  accent-color: var(--moss-mid);
}
.rnm-wpf .form-row .rnm-consent-label,
.rnm-wpf .form-row label.wpforms-field-label-inline {
  font-size: 0.8125rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  line-height: 1.55;
  cursor: pointer;
}
.rnm-wpf .rnm-consent a { color: inherit; text-decoration: underline; text-decoration-color: var(--lichen); text-underline-offset: 2px; }
.rnm-wpf .rnm-consent a:hover { text-decoration-color: var(--terracotta); }
@media (max-width: 1024px) {
  .rnm-wpf .rnm-consent input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0.05em; }
  .rnm-wpf .rnm-consent li { padding-block: 0.35rem; }
}

/* Submit row */
.rnm-wpf .wpforms-submit-container { display: flex; flex-direction: column; align-items: flex-start; }
.rnm-wpf .wpforms-submit { cursor: pointer; }
.rnm-wpf .wpforms-submit-spinner { display: none !important; }
.rnm-wpf .wpforms-submit:disabled { opacity: 0.7; cursor: progress; }
/* Contact + aesthetics: the legacy button was a stretched .form-row child */
.rnm-wpf--contact .wpforms-submit-container,
.rnm-wpf--aesthetics .wpforms-submit-container { align-items: stretch; }
.rnm-wpf--contact .wpforms-submit,
.rnm-wpf--aesthetics .wpforms-submit,
.rnm-wpf--service .wpforms-submit { margin-top: 0.5rem; }
/* Book: the legacy button sat in the first grid column */
.rnm-wpf--book .wpforms-submit-container { grid-column: 1 / 2; }
@media (max-width: 640px) {
  .rnm-wpf--service .wpforms-submit-container { align-items: stretch; }
}

/* Inline validation errors */
.rnm-wpf em.wpforms-error,
.rnm-wpf label.wpforms-error {
  display: block;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: #7A2E1D;
}
.rnm-wpf .form-row input.wpforms-error,
.rnm-wpf .form-row select.wpforms-error,
.rnm-wpf .form-row textarea.wpforms-error { border-color: #C4664F; }
.rnm-wpf .wpforms-error-container,
.rnm-wpf .wpforms-error-alert {
  padding: 0.875rem 1.125rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  background: #F7E9E5;
  color: #7A2E1D;
  border: 1px solid #C4664F;
}
.rnm-wpf .wpforms-error-container p { margin: 0; color: inherit; }

/* Success message: same box as the legacy .form-status--ok */
.rnm-wpf.wpforms-confirmation-container,
.rnm-wpf .wpforms-confirmation-container,
.rnm-wpf-host .wpforms-confirmation-container {
  padding: 0.875rem 1.125rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  background: var(--sage-wash, #E4EAE0);
  color: #1B3A2A;
  border: 1px solid var(--moss-mid, #5B7B60);
}
.rnm-wpf-host .wpforms-confirmation-container p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
/* Inside .longform (contact, aesthetics) the legacy message was a .longform p */
.longform .rnm-wpf-host .wpforms-confirmation-container { color: var(--ink); line-height: 1.7; margin-top: 1rem; }

/* ============================================================
   Footer newsletter band (WPForms "Newsletter signup", 2026-10-13)
   Sits above the footer columns on every page. Forest ground, so
   the fields are a quiet translucent parchment instead of the solid
   parchment used on light sections.
   ============================================================ */

.footer-news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--whisper-on-forest);
}

.footer-news__title {
  margin-top: 0.875rem;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--parchment);
  max-width: 18ch;
}

.footer-news__title em { color: var(--sage-wash); font-style: italic; }

.footer-news__text {
  margin-top: 0.875rem;
  font-size: var(--body-s);
  line-height: 1.6;
  color: var(--sage-wash);
  max-width: 44ch;
}

.rnm-wpf--newsletter form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 0.875rem 0.75rem;
  margin-top: 0;
  align-items: start;
}

.site-footer .rnm-wpf--newsletter .form-row label.wpforms-field-label {
  color: var(--sage-wash);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
}

.site-footer .rnm-wpf--newsletter .form-row input[type="text"],
.site-footer .rnm-wpf--newsletter .form-row input[type="email"] {
  height: 48px;
  background: rgba(244, 239, 227, 0.07);
  border-color: rgba(207, 216, 199, 0.34);
  color: var(--parchment);
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}

.site-footer .rnm-wpf--newsletter .form-row input[type="text"]:hover,
.site-footer .rnm-wpf--newsletter .form-row input[type="email"]:hover {
  border-color: rgba(207, 216, 199, 0.6);
}

.site-footer .rnm-wpf--newsletter .form-row input[type="text"]:focus,
.site-footer .rnm-wpf--newsletter .form-row input[type="email"]:focus {
  background: rgba(244, 239, 227, 0.12);
  border-color: var(--sage-wash);
}

/* Button sits on the field baseline, same height as the inputs. */
.rnm-wpf--newsletter .wpforms-submit-container { grid-column: auto; grid-row: 1; grid-column-start: 3; }
.rnm-wpf--newsletter .wpforms-submit { height: 48px; white-space: nowrap; }
/* Fields align to the top so an inline error never pushes the row; the
   button drops by one label line + the row gap to sit level with the inputs. */
.rnm-wpf--newsletter .wpforms-submit-container { margin-top: calc(0.6875rem * 1.5 + 0.375rem); }

.rnm-wpf--newsletter .rnm-consent { grid-row: 2; }
.site-footer .rnm-wpf--newsletter .form-row label.wpforms-field-label-inline {
  color: var(--sage-wash);
  font-size: 0.8125rem;
}
.rnm-wpf--newsletter .rnm-consent input[type="checkbox"] { accent-color: var(--terracotta); }

.site-footer .rnm-wpf--newsletter em.wpforms-error,
.site-footer .rnm-wpf--newsletter label.wpforms-error { color: #F2B8A4; }
.site-footer .rnm-wpf--newsletter .form-row input.wpforms-error { border-color: #E08F76; }

.site-footer .rnm-wpf-host--newsletter .wpforms-confirmation-container {
  background: rgba(244, 239, 227, 0.08);
  border-color: var(--moss-mid);
  color: var(--parchment);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .footer-news { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.75rem; }
}

@media (max-width: 640px) {
  .rnm-wpf--newsletter form { grid-template-columns: minmax(0, 1fr); }
  .rnm-wpf--newsletter .wpforms-submit-container { grid-column: 1 / -1; grid-row: auto; align-items: stretch; margin-top: 0; }
  .rnm-wpf--newsletter .rnm-consent { grid-row: auto; }
}

/* Footer email link: let the long address wrap inside its narrow tablet column
   (it overflowed the page by ~40-100px between roughly 780 and 1000px wide). */
.site-footer a[href^="mailto:"] { max-width: 100%; overflow-wrap: anywhere; }

/* Service enquiry band: grid children default to min-width:auto, so the
   WPForms markup could force the single column wider than a 768px screen. */
.svc-enquire__grid > * { min-width: 0; }

/* WPForms wrappers must be allowed to shrink inside grid/flex parents,
   or long consent text and inputs push the page wider at 768-1024px. */
.rnm-wpf, .rnm-wpf form, .rnm-wpf form > *, .rnm-wpf-host { min-width: 0; max-width: 100%; }

/* Footer legal bar with four items: copyright left, the three legal links
   grouped right (desktop); copyright on its own row on phones. */
.site-footer__legal { justify-content: flex-start; column-gap: 2rem; }
.site-footer__legal > span:first-child { margin-right: auto; }
@media (max-width: 640px) {
  .site-footer__legal { column-gap: 1.5rem; row-gap: 0; }
  .site-footer__legal > span:first-child { flex-basis: 100%; margin-right: 0; }
}

/* Turnstile (managed mode) on the four intake forms: small gap above the submit button. */
.rnm-wpf .wpforms-recaptcha-container { margin-top: 0.25rem; }