/* ==========================================================================
   OTB — WordPress-specific overrides

   Everything here exists only because the design runs inside WordPress.
   It is kept out of assets/css/style.css so that file stays byte-identical
   to the delivered design source and can be re-synced by overwriting it.

   1. Admin bar
   2. WPForms on the contact page
   3. Active nav item
   4. Editor-injected content
   ========================================================================== */

/* 1. Admin bar ------------------------------------------------------------
   .site-header is position:sticky; top:0. When logged in, WordPress pins its
   toolbar over the top of the viewport, so the sticky header slides underneath
   it on scroll. Admin-only, purely cosmetic, one rule each way. */

body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* 2. WPForms on the contact page -------------------------------------------
   The design ships a static form whose action is empty; its BUILD-NOTES
   recommend swapping it for a forms plugin in WordPress and keeping the
   design's classes so the styling carries across. page-contact.php renders
   the site's WPForms form inside the design's own `.form` card, so the card
   chrome (background, border, radius, padding, shadow) already applies.

   What is left is making WPForms' own field markup match the design's
   `.field` rules, which it cannot inherit. The values below are copied from
   section 22 of style.css rather than invented, so the two stay in step. */

/* WPForms drives its own look from custom properties which it declares on
   :root in an inline <style> block — emitted after this stylesheet, so it wins
   on source order. Redeclaring them on the container beats :root on
   specificity and keeps WPForms' own derived rules (hover, focus, error)
   working, which fighting its selectors one by one would not. */
.form .wpforms-container {
  --wpforms-field-border-radius: var(--r-sm);
  --wpforms-field-background-color: #FBFAF7;
  --wpforms-field-border-color: var(--rule);
  --wpforms-field-text-color: var(--ink);
  --wpforms-label-color: var(--ink-muted);
  --wpforms-label-sublabel-color: var(--ink-muted);
  --wpforms-label-error-color: var(--coral-deep);

  --wpforms-button-background-color: var(--teal);
  --wpforms-button-text-color: #06231F;
  --wpforms-button-border-color: var(--teal);
  --wpforms-button-border-style: solid;
  --wpforms-button-border-size: 1px;
  --wpforms-button-border-radius: var(--r-pill);
  --wpforms-button-size-font-size: 0.9rem;
  --wpforms-button-size-height: auto;
  --wpforms-button-size-padding-h: 1.75rem;
  --wpforms-button-size-margin-top: 0.6rem;

  margin: 0;
}

.form .wpforms-container,
.form .wpforms-field-label,
.form .wpforms-field-sublabel,
.form input,
.form select,
.form textarea,
.form button {
  font-family: var(--font-body);
}

/* Field label — the design's `.field > span` treatment. */
.form .wpforms-field-label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.form .wpforms-required-label {
  font-style: normal;
  color: var(--coral-deep);
}

.form .wpforms-field-sublabel {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.form .wpforms-field {
  padding: 0 0 1.1rem;
}

/* Inputs — the design's `.field input/select/textarea`. */
.form .wpforms-field input[type="text"],
.form .wpforms-field input[type="email"],
.form .wpforms-field input[type="tel"],
.form .wpforms-field input[type="url"],
.form .wpforms-field input[type="number"],
.form .wpforms-field select,
.form .wpforms-field textarea {
  width: 100%;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: #FBFAF7;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  box-shadow: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease);
}

.form .wpforms-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

.form .wpforms-field select {
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form .wpforms-field input:focus,
.form .wpforms-field select:focus,
.form .wpforms-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px rgba(13, 148, 135, 0.12);
}

.form .wpforms-field input::placeholder,
.form .wpforms-field textarea::placeholder { color: #AEA99D; }

/* Two-up rows — WPForms' own column layout, spaced like `.form-row`. */
.form .wpforms-field-row { display: flex; gap: 1rem; }
.form .wpforms-field-row .wpforms-field-row-block { flex: 1 1 0; padding: 0; }

@media (max-width: 600px) {
  .form .wpforms-field-row { display: block; }
  .form .wpforms-field-row .wpforms-field-row-block + .wpforms-field-row-block {
    margin-top: 1.1rem;
  }
}

/* Submit — the design's `.btn`, full width as `.form .btn`. */
.form .wpforms-submit-container { padding: 0; }

.form button[type="submit"].wpforms-submit {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  margin-top: 0.6rem;
  background: var(--teal);
  color: #06231F;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  padding: 1.05rem 1.75rem;
  border: 1px solid var(--teal);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
              background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.form button[type="submit"].wpforms-submit:hover {
  transform: translateY(-3px);
  background: #4BE3D0;
  border-color: #4BE3D0;
  box-shadow: 0 16px 34px -16px rgba(45, 212, 191, 0.75);
}

.form button[type="submit"].wpforms-submit:active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .form button[type="submit"].wpforms-submit,
  .form button[type="submit"].wpforms-submit:hover,
  .form button[type="submit"].wpforms-submit:active {
    transform: none;
    transition: none;
  }
}

/* Validation + confirmation, matched to `.form-status`. */
.form .wpforms-error {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--coral-deep);
}

.form .wpforms-field input.wpforms-error,
.form .wpforms-field select.wpforms-error,
.form .wpforms-field textarea.wpforms-error {
  border-color: rgba(193, 70, 42, 0.55);
}

.wpforms-confirmation-container-full {
  background: var(--teal-wash);
  border: 1px solid rgba(13, 148, 135, 0.3);
  border-radius: var(--r-md);
  color: var(--ink);
  padding: 1.4rem 1.6rem;
}

/* 3. Active nav item -------------------------------------------------------
   header.php marks the current page with aria-current="page", but the
   delivered stylesheet never gives that a visual treatment — so the nav reads
   as active to a screen reader and as nothing at all to everyone else.

   This is a gap in the design rather than a WordPress problem; it lives here
   because style.css is kept byte-identical to the delivered file. Worth
   raising with the designer so it lands in the source.

   The treatment is the design's own hover state made permanent: white text
   plus the teal underline that normally wipes in on hover. Nothing new is
   invented, so it stays consistent if the hover styling is ever retuned.

   :not(.btn) keeps the CTA pill out of it — it shares the .nav a selector. */

.nav a[aria-current="page"]:not(.btn) {
  color: #fff;
}

.nav a[aria-current="page"]:not(.btn)::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Below 860px the nav becomes a stacked panel and the design switches the
   underline off (`.nav a::after { display: none }`), so the active row needs
   its own marker: the brand teal, which reads clearly on the dark panel. */
@media (max-width: 860px) {
  .nav a[aria-current="page"]:not(.btn) {
    color: var(--teal);
  }
}

/* 4. Editor-injected content ----------------------------------------------
   The designed pages have empty post_content, but pages outside the design
   may gain editor content later. Keep it within the design's measure and
   typography rather than letting it run the full band width. */

.otb-entry-content > * { max-width: 62ch; }
.otb-entry-content > :first-child { margin-top: 0; }
.otb-entry-content > :last-child { margin-bottom: 0; }

.otb-entry-content a {
  color: var(--teal-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.band-dark .otb-entry-content a { color: var(--teal); }