/* ==========================================================================
   Katie Wilson Homes — WordPress theme layer
   Icon sprite defaults and admin-bar/editor adjustments that the static
   site did not need.
   ========================================================================== */

/* Sprite icons inherit stroke/fill from the outer <svg>, so the shared
   `svg` rules in style.css and pages.css keep working unchanged. */
.svg-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* WordPress admin bar must not sit on top of the sticky header. */
body.admin-bar .nav-wrap.is-sticky { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .nav-wrap.is-sticky { top: 46px; }
}

/* Fluent Forms inherits the site's own form-card styling.
   The form is saved with the "Inherit Theme Style" preset, so Fluent Forms
   ships no styler sheet of its own and the rules below are the only ones
   painting the contact form. They reproduce .form-row / .field / .field-note
   from pages.css against Fluent Forms' own markup. */

/* Fluent Forms wraps every field in a <fieldset>, so the two-column rows are
   built on that instead of the .form-row wrapper the static markup used. */
.form-card .frm-fluent-form fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.form-card .frm-fluent-form fieldset > * { grid-column: 1 / -1; }
.form-card .frm-fluent-form .ff-el-group.ff-half { grid-column: span 1; }

.form-card .frm-fluent-form .ff-el-group { margin-bottom: 22px; }

.form-card .frm-fluent-form .ff-el-input--label label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 9px;
}

/* The static design marks no field with an asterisk. */
.form-card .frm-fluent-form .ff-el-input--label.ff-el-is-required label:after {
  content: none;
}

.form-card .frm-fluent-form .ff-el-form-control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .3s, box-shadow .3s;
}
.form-card .frm-fluent-form textarea.ff-el-form-control {
  min-height: 132px;
  resize: vertical;
}
.form-card .frm-fluent-form .ff-el-form-control:focus {
  outline: none;
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px rgba(189, 167, 126, .14);
}

/* The privacy note keeps the negative top margin .field-note already carries,
   so the group around it must not add spacing of its own. */
.form-card .frm-fluent-form .ff-el-group.kwh-note { margin-bottom: 0; }
.form-card .frm-fluent-form .kwh-note .field-note { margin: -12px 0 22px; }

.form-card .frm-fluent-form .ff-el-group.kwh-submit { margin-bottom: 0; }
.form-card .frm-fluent-form .ff-btn-submit { width: 100%; cursor: pointer; }

/* Inline validation errors, styled like the tips the old form showed. */
.form-card .frm-fluent-form .ff-el-is-error .text-danger,
.form-card .frm-fluent-form .error.text-danger {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #a8543f;
}
.form-card .frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-color: #d6a99c;
}

/* Submission feedback, matching the old response-output panel. */
.form-card .ff-message-success,
.form-card .ff_submit_error,
.form-card .ff-errors-in-stack {
  margin: 22px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  background: var(--soft-ivory);
  color: var(--text);
  box-shadow: none;
}
.form-card .ff-message-success {
  border-color: #b6cdb6;
  background: #f2f8f2;
  color: #3c5c3c;
}
.form-card .ff_submit_error,
.form-card .ff-errors-in-stack {
  border-color: #dcc0b8;
  background: #fbf3f1;
  color: #8a4b3b;
}
/* Fluent Forms hides the stack until it has an error to put in it. */
.form-card .ff-errors-in-stack:not([style*="block"]) { display: none; }

@media (max-width: 680px) {
  .form-card .frm-fluent-form fieldset { grid-template-columns: 1fr; }
}

/* Screen-reader-only helper for labels the design hides. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Structural classes that replace the inline styles used in the static build
   ========================================================================== */

/* Centred button under a grid, timeline or review row. */
.section-action { text-align: center; margin-top: 48px; }
.section-action.is-tight { margin-top: 0; }

/* A grid held to a narrower measure, e.g. the two "Working together" cards. */
.grid-2.is-narrow,
.grid-3.is-narrow,
.grid-4.is-narrow { max-width: 900px; margin-inline: auto; }

/* Track-record figure cards. */
.figure-card { text-align: center; }
.figure-card.is-highlight { border-color: var(--champagne); }
.figure-card .figure-value { font-size: 34px; margin-bottom: 6px; }
.figure-card .figure-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin: 0;
}
.figure-card .figure-meta { margin-top: 10px; font-size: 15px; color: var(--navy); }

.section-footnote {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--muted);
}

/* The wider two-across review row sits under the three-across one. */
.review-row-wide { margin-top: 30px; }

/* Spacing the static markup carried inline. */
.split-body .check-list { margin: 30px 0; }
.split-body .check-list:last-child { margin-bottom: 0; }
.section-pad .notice { margin-top: 36px; }
.contact-side .notice { margin-top: 26px; }
/* Drops the notice icon down to sit against the text rather than its cap line. */
.notice svg { margin-top: 16px; }
.contact-side .info-block.is-last { border-bottom: 0; }

/* Contact section headings. */
.contact-heading { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 16px; }
.contact-intro { margin-bottom: 34px; }
.contact-card-name { font-size: 24px; margin-bottom: 8px; }
.contact-card-role {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--champagne-deep);
  margin: 0 0 26px;
}

/* Banner with no photograph behind it, used by 404, search and posts. */
.page-hero.is-plain { padding-block: 120px 90px; }
.page-hero.is-plain .page-hero-inner { padding-block: 0; }

/* Fallback wordmark when no logo image has been uploaded yet. */
.brand-text {
  font-family: var(--display);
  font-size: 26px;
  color: var(--navy);
  letter-spacing: .02em;
}
.utility-bar + .nav-wrap .brand-text { color: var(--navy); }

/* Archive pagination. */
.pagination { margin-top: 56px; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
  min-width: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { border-color: var(--champagne); color: var(--champagne-deep); }
.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Rich-text links inside policy pages. */
.prose a { color: var(--champagne-deep); border-bottom: 1px solid var(--champagne); }
.prose a:hover { color: var(--navy); }