/* ===========================================================================
   SSTGC — forms
   File: assets/css/forms.css   (loads after components.css)

   Contact Form 7 emits a <p> around every field, and the temple's forms were
   authored with those paragraphs nested inside further wrappers. Combined with
   any container that has a border, every input ends up inside two or three
   boxes. That is the doubled-border effect on the contact page.

   This file strips the structural noise, then styles the controls once.
   =========================================================================== */

/* ── Neutralise the form's own structure ───────────────────────────────────
   The temple's forms were authored in the CF7 admin, and that editor is a
   plain textarea — so their markup is whatever someone typed. Some fields sit
   in a <p>, some in nested <div>s, some in a table. Targeting those wrappers
   individually kept missing one, which is why every field still had a box
   drawn around its box.

   Inside a CF7 form, only the control itself should carry a border or a
   background. Everything structural is neutralised in one rule, then spacing
   is put back deliberately.

   !important is warranted here: the rule exists to beat markup this stylesheet
   cannot see, and adding specificity would mean guessing at that markup again.
   =========================================================================== */

.wpcf7 form :is(p, div, span, table, tbody, tr, td, th, fieldset, section, article) {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
  max-width: none;
}

/* Tables become blocks so a table-laid-out form stacks rather than squeezing. */
.wpcf7 form :is(table, tbody, tr, td, th) { display: block; width: 100%; }

/* Spacing back, on the rows only. */
.wpcf7 form > :is(p, div) { margin-bottom: var(--s-4) !important; }
.wpcf7 form > :is(p, div):last-of-type { margin-bottom: 0 !important; }

.wpcf7-form-control-wrap { display: block; position: relative; }

/* Empty paragraphs — a blank line in the form editor — add a full line of gap
   the margin above already provides. */
.wpcf7 form p:empty,
.wpcf7 form p:has(> br:only-child),
.wpcf7 form div:empty { display: none !important; }

/* CF7 adds a <br> after each control by default. */
.wpcf7 form br { display: none; }
.wpcf7 form textarea + br,
.wpcf7 form label br { display: initial; }

/* ── Controls ──────────────────────────────────────────────────────────────*/

/* The controls. These carry the border the wrappers no longer do, so they use
   !important to beat the neutralising rule above rather than relying on order. */
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 input[type='url'],
.wpcf7 input[type='number'],
.wpcf7 input[type='date'],
.wpcf7 input[type='file'],
.wpcf7 select,
.wpcf7 textarea {
  width: 100% !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  padding: var(--s-3) var(--s-4) !important;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-strong);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 48px;
  box-shadow: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7 textarea {
  /* The contact form's message box was rendering about 300px tall, which reads
     as an obligation to write an essay. Six rows is enough to start. */
  min-height: 140px;
  resize: vertical;
  line-height: var(--lh-body);
}

.wpcf7 input:hover, .wpcf7 select:hover, .wpcf7 textarea:hover { border-color: var(--line-strong); }

.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent) !important;
}
.wpcf7 .wpcf7-not-valid { border-color: var(--danger) !important; }

.wpcf7 ::placeholder { color: var(--text-soft); opacity: 1; }

.wpcf7 select {
  /* Native select arrow, drawn rather than imported, so the control matches
     the inputs on every platform. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2371717a' stroke-width='1.8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-10);
}

/* ── Labels ────────────────────────────────────────────────────────────────
   The forms are authored with placeholders and no labels, so the field name
   disappears the moment someone types and a screen reader gets an unlabelled
   edit box.

   assets/js/forms.js promotes each placeholder to a real <label> and these
   rules float it. If that script does not run — a JS error elsewhere on the
   page, or markup it cannot match — the placeholder stays visible and the form
   still works. That is the point of doing it this way round rather than
   emptying the placeholder in CSS and depending on the script.              */

.field-float { position: relative; display: block; }

.field-float > label {
  position: absolute;
  left: calc(var(--s-4) + 2px);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--t-sm);
  color: var(--text-soft);
  pointer-events: none;
  transition: transform var(--fast) var(--ease), font-size var(--fast) var(--ease), color var(--fast) var(--ease);
  background: var(--surface);
  padding-inline: var(--s-1);
  max-width: calc(100% - var(--s-8));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-float:has(textarea) > label { top: var(--s-4); transform: none; }

.field-float:focus-within > label,
.field-float > input:not(:placeholder-shown) + label,
.field-float > textarea:not(:placeholder-shown) + label {
  transform: translateY(calc(-50% - 24px)) scale(.86);
  transform-origin: left center;
  color: var(--brand);
  font-weight: 600;
}
.field-float:has(textarea):focus-within > label,
.field-float > textarea:not(:placeholder-shown) + label {
  transform: translateY(-26px) scale(.86);
}

/* Only hide the placeholder where the label actually exists — so a field the
   script missed keeps its placeholder rather than going blank. */
.field-float > input::placeholder,
.field-float > textarea::placeholder { color: transparent; }
.field-float:focus-within > input::placeholder,
.field-float:focus-within > textarea::placeholder { color: var(--text-soft); }

.field-float__required { color: var(--danger); margin-left: 2px; }

/* The required asterisk CF7 authors type into the placeholder — style it where
   the label was never promoted. */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--text-soft); }

/* ── Submit ────────────────────────────────────────────────────────────────
   Styled by attribute rather than by a class added in PHP. The previous
   approach filtered CF7's markup for an exact class string, which broke as
   soon as the form used a slightly different one — which is why the button
   rendered as a browser default.                                            */

.wpcf7 input[type='submit'],
.wpcf7 button[type='submit'],
.wpcf7 .wpcf7-submit {
  width: auto !important;
  border: 1.5px solid var(--brand) !important;
  border-radius: var(--r-sm) !important;
  background: var(--brand) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 190px;
  min-height: 48px;
  padding: var(--s-3) var(--s-8);
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--white);
  background: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--fast) var(--ease), transform .08s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 input[type='submit']:hover,
.wpcf7 button[type='submit']:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.wpcf7 input[type='submit']:active { transform: translateY(1px); }
.wpcf7 input[type='submit']:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 560px) {
  .wpcf7 input[type='submit'] { width: 100%; }
}

/* ── Validation and response ───────────────────────────────────────────────*/

.wpcf7 .wpcf7-not-valid { border-color: var(--danger); }
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: var(--danger);
  font-weight: 500;
}

.wpcf7 .wpcf7-response-output {
  margin: var(--s-5) 0 0 !important;
  padding: var(--s-3) var(--s-4) !important;
  border: 1px solid !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--success) !important;
  background: var(--success-bg);
  color: var(--success);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--danger) !important;
  background: var(--danger-bg);
  color: var(--danger);
}

.wpcf7 .wpcf7-spinner { margin: 0 0 0 var(--s-3); vertical-align: middle; }

/* ── Phone field (intl-tel-input) ──────────────────────────────────────────
   The plugin injects a flag dropdown absolutely positioned over the input.
   It was rendering as a separate, differently sized box because the input it
   wraps was not filling its container.                                      */

/* intl-tel-input wraps the input in .iti and positions a flag over it. The
   neutralising rule strips that wrapper's padding, which is right — but the
   input inside still needs room for the flag, and the wrapper must stay full
   width or the field renders narrower than its neighbours. */
.wpcf7 .iti,
.wpcf7 .iti--allow-dropdown { width: 100% !important; display: block !important; }
.wpcf7 .iti input[type='tel'] { padding-left: 56px !important; width: 100% !important; }
.wpcf7 .iti__flag-container { position: absolute !important; }
.wpcf7 .iti__flag-container { border: 0; background: none; }
.wpcf7 .iti__selected-flag {
  padding: 0 var(--s-2) 0 var(--s-3);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: none;
}
.wpcf7 .iti__country-list {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-deep);
  font-size: var(--t-sm);
  max-height: 220px;
}
.wpcf7 .iti__country.iti__highlight { background: var(--brand-tint); }

/* The floating label must clear the flag. */
.field-float:has(.iti) > label { left: 56px; }

/* ── Checkboxes and radios ─────────────────────────────────────────────────*/

.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio { display: grid; gap: var(--s-2); }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  cursor: pointer;
  min-height: 32px;
}
.wpcf7 input[type='checkbox'],
.wpcf7 input[type='radio'] {
  width: 18px; height: 18px;
  min-height: 0;
  accent-color: var(--brand);
  flex-shrink: 0;
  margin: 0;
}

/* ── reCAPTCHA ─────────────────────────────────────────────────────────────
   The v3 badge floats bottom-right and collides with the back-to-top button.
   Moved above it, and only shown on pages that actually carry a form —
   Google's terms allow hiding it where the notice is given in the form.     */

.grecaptcha-badge { visibility: hidden; }
body:has(.wpcf7) .grecaptcha-badge {
  visibility: visible;
  bottom: 84px !important;
  z-index: 80;
}

.form-recaptcha-note {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--text-soft);
  line-height: var(--lh-snug);
}
.form-recaptcha-note a { color: var(--text-soft); text-decoration: underline; }

/* ── Layout ────────────────────────────────────────────────────────────────
   Name and email side by side on anything wider than a phone; everything else
   full width. Two short fields stacked is a lot of scrolling for no reason.  */

@media (min-width: 640px) {
  .wpcf7-form.form-two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-4);
  }
  .wpcf7-form.form-two-up > p { grid-column: span 2; }
  .wpcf7-form.form-two-up > p.field-half { grid-column: span 1; }
}

/* ── Native (non-CF7) forms ────────────────────────────────────────────────*/

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-6);
  box-shadow: var(--shadow);
}
.form-card > h2, .form-card > h3 { margin-top: 0; margin-bottom: var(--s-5); }

/* A card containing a form must not add a second border around the controls —
   the fields already carry their own. */
.form-card .wpcf7 form p { border: 0; background: none; }

/* ── Contact page ──────────────────────────────────────────────────────────
   Details column narrower than the form. Equal halves gave the details column
   more room than it had content for, which is how it ended up as one email
   address above a page of white.                                            */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  /* Form first on a phone — someone who opened this page on their phone came
     to get in touch, not to read the address they can see in the footer. */
  .contact-grid > .form-card { order: -1; }
}

.contact-card {
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  border-radius: var(--r);
  padding: var(--s-6);
}
.contact-card__title { font-size: var(--t-xl); margin: 0 0 var(--s-5); }

.contact-list { display: grid; gap: var(--s-4); margin: 0; }
.contact-list__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--brand-line);
}
.contact-list__row:last-child { border-bottom: 0; padding-bottom: 0; }

.contact-list dt {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--brand);
}
.contact-list dd { margin: 0; font-size: var(--t-sm); line-height: var(--lh-snug); color: var(--text-strong); }
.contact-list dd a { font-weight: 500; }
.contact-list dd br:last-child { display: none; }

@media (max-width: 480px) {
  .contact-list__row { grid-template-columns: 1fr; gap: var(--s-1); }
}

.contact-map {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── File input ────────────────────────────────────────────────────────────
   The browser default is an unstyled button and a filename in system font.
   The old theme faked a placeholder with ::before on the input, which does
   not render on a replaced element in any browser — so it never appeared.   */

.wpcf7 input[type='file'] {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.wpcf7 input[type='file']:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.wpcf7 input[type='file']:focus {
  outline: none;
  border-color: var(--brand);
  border-style: solid;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent);
}

/* The "Choose file" button inside the control. */
.wpcf7 input[type='file']::file-selector-button {
  margin-right: var(--s-4);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.wpcf7 input[type='file']::file-selector-button:hover {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}

/* A file input has no placeholder, so the floating-label treatment does not
   apply — the label stays put above it. */
.field-float:has(input[type='file']) > label {
  position: static;
  transform: none;
  display: block;
  margin-bottom: var(--s-2);
  background: none;
  padding: 0;
  color: var(--text);
}