/* ==========================================================================
   GODRANK — Contact Form 7 styling.
   Loaded only on pages that actually contain a CF7 form.

   The form template itself is untouched: CF7 stores it in protected meta and
   it is the site's live lead-capture path. Everything here is presentation,
   plus a progressive JS enhancement (forms.js) that pairs CF7's loose label
   paragraphs with their inputs. If that JS never runs, the labels are still
   visible and the form still submits — it just loses the programmatic
   association, which is the state the site was already in.
   ========================================================================== */

.wpcf7 {
  --f-ink:    #0A0A0F;
  --f-gold:   #C9A84C;
  --f-signal: #E8C96A;
  --f-cream:  #F0EAD6;
  --f-line:   rgba(240, 234, 214, .18);
  --f-err:    #E8737F;
  --f-mono:   ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --f-sans:   "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  max-width: 820px;
  font-family: var(--f-sans);
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
.wpcf7-form {
  background: linear-gradient(180deg, rgba(240,234,214,.035), rgba(240,234,214,.012));
  border: 1px solid rgba(201, 168, 76, .34);
  border-radius: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* ── Field rows (built by forms.js; degrades to CF7's own <p> flow) ─────── */
.gr-cf-field { display: block; margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); }

@media (min-width: 720px) {
  .gr-cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
}

.gr-cf-label {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--f-signal);
  font-weight: 500;
}
.gr-cf-req {
  margin-left: .5rem;
  color: rgba(240, 234, 214, .45);
  letter-spacing: .12em;
}

/* Before JS runs, CF7's bare label paragraphs still read as labels */
.wpcf7-form > p:not(:has(.wpcf7-form-control-wrap)):not(:has(input)) {
  margin: 0 0 .55rem;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--f-signal);
}

/* ── Controls — the "bigger" part ───────────────────────────────────────── */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 58px;
  padding: 1rem 1.15rem;
  background: var(--f-ink);
  border: 1px solid var(--f-line);
  border-radius: 0;
  color: var(--f-cream);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.45;
  transition: border-color .18s ease, background-color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 textarea { min-height: 190px; resize: vertical; }
.wpcf7 ::placeholder { color: rgba(240, 234, 214, .34); opacity: 1; }

.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 textarea:hover { border-color: rgba(240, 234, 214, .34); }

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: 2px solid var(--f-signal);
  outline-offset: 2px;
  border-color: var(--f-signal);
  background: #0D0D14;
}

/* Autofill — Chrome's yellow wash would destroy the palette */
.wpcf7 input:-webkit-autofill,
.wpcf7 input:-webkit-autofill:hover,
.wpcf7 input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--f-cream);
  -webkit-box-shadow: 0 0 0 1000px var(--f-ink) inset;
  caret-color: var(--f-cream);
}

/* ── Submit ─────────────────────────────────────────────────────────────── */
.wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 1rem 2.25rem;
  background: var(--f-signal);
  color: var(--f-ink);
  border: 1px solid var(--f-signal);
  border-radius: 0;
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(201, 168, 76, .28);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--f-cream);
  border-color: var(--f-cream);
  box-shadow: 7px 7px 0 rgba(201, 168, 76, .42);
}
.wpcf7 input[type="submit"]:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(201,168,76,.3); }
.wpcf7 input[type="submit"]:focus-visible { outline: 2px solid var(--f-cream); outline-offset: 3px; }

.gr-cf-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgba(240, 234, 214, .12);
}
.gr-cf-assurance {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1.6;
  color: rgba(240, 234, 214, .5);
  max-width: 34ch;
}

/* ── Validation ─────────────────────────────────────────────────────────── */
.wpcf7 .wpcf7-not-valid { border-color: var(--f-err); }
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: .5rem;
  color: var(--f-err);
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .04em;
}
.wpcf7 .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--f-line);
  border-radius: 0;
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--f-cream);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--f-err); color: var(--f-err); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--f-signal); color: var(--f-signal); }

.wpcf7-spinner { margin-left: 1rem; }

/* ==========================================================================
   Overrides for the legacy contact-page Customizer CSS.

   wp-custom-css still styles this page for the old light theme: .gr-form-wrap
   is a white card with a 10px radius, inputs get grey borders and a 6px
   radius, and the submit button is blue (#2563eb). Those rules are inline in
   wp_head, so they load after this file and win on equal specificity — hence
   the deliberately heavier selectors below.

   The right long-term fix is deleting that dead block from Appearance >
   Customize > Additional CSS; this keeps the page on-brand until then.
   ========================================================================== */

/* Width: the rest of the site runs to 1440px, this page was capped at 920px
   by an !important rule inline in the page content, so this needs both a
   heavier selector and !important to win. */
body .page-content-area:has(.gr-contact-wrap) { max-width: 1240px !important; }
body .entry-content .gr-contact-wrap { max-width: 1200px !important; }

/* Give the form the larger share of the row; offices need far less. */
@media (min-width: 900px) {
  .entry-content .gr-contact-grid { grid-template-columns: 1.4fr .6fr; gap: clamp(2rem, 4vw, 4rem); }
}

/* Kill the white card. */
.entry-content .gr-form-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Controls — beat `.gr-form-wrap .wpcf7-form input[type="text"]`. */
.entry-content .gr-form-wrap .wpcf7-form input[type="text"],
.entry-content .gr-form-wrap .wpcf7-form input[type="email"],
.entry-content .gr-form-wrap .wpcf7-form input[type="tel"],
.entry-content .gr-form-wrap .wpcf7-form input[type="url"],
.entry-content .gr-form-wrap .wpcf7-form select,
.entry-content .gr-form-wrap .wpcf7-form textarea {
  min-height: 58px;
  padding: 1rem 1.15rem;
  background: var(--f-ink, #0A0A0F);
  border: 1px solid rgba(240, 234, 214, .18);
  border-radius: 0;
  color: #F0EAD6;
  font-size: 1.0625rem;
}
.entry-content .gr-form-wrap .wpcf7-form textarea { min-height: 200px; }

.entry-content .gr-form-wrap .wpcf7-form input[type="text"]:focus,
.entry-content .gr-form-wrap .wpcf7-form input[type="email"]:focus,
.entry-content .gr-form-wrap .wpcf7-form textarea:focus {
  outline: 2px solid #E8C96A;
  outline-offset: 2px;
  border-color: #E8C96A;
  background: #0D0D14;
}

/* Labels were dark grey on a white card. */
.entry-content .gr-form-wrap .wpcf7-form label,
.entry-content .gr-form-wrap .gr-cf-label {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E8C96A;
}
.entry-content .gr-form-wrap .gr-cf-req {
  color: rgba(240, 234, 214, .45);
  text-transform: uppercase;
}

/* The blue button. */
.entry-content .gr-form-wrap .wpcf7-form input[type="submit"] {
  min-height: 60px;
  padding: 1rem 2.25rem;
  background: #E8C96A;
  color: #0A0A0F;
  border: 1px solid #E8C96A;
  border-radius: 0;
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 rgba(201, 168, 76, .28);
}
.entry-content .gr-form-wrap .wpcf7-form input[type="submit"]:hover {
  background: #F0EAD6;
  border-color: #F0EAD6;
  box-shadow: 7px 7px 0 rgba(201, 168, 76, .42);
}

/* CF7's own <p> spacing fights the enhanced rows. */
.entry-content .gr-form-wrap .wpcf7-form p { margin: 0; }

/* The Customizer CSS (Appearance > Customize > Additional CSS) carries a set
   of !important colour remaps from an earlier migration. They leave rounded
   corners and off-palette shades behind, so these few properties have to be
   forced. Delete that block and these !important flags can go with it. */
.entry-content .gr-form-wrap .wpcf7-form input[type="text"],
.entry-content .gr-form-wrap .wpcf7-form input[type="email"],
.entry-content .gr-form-wrap .wpcf7-form input[type="tel"],
.entry-content .gr-form-wrap .wpcf7-form input[type="url"],
.entry-content .gr-form-wrap .wpcf7-form select,
.entry-content .gr-form-wrap .wpcf7-form textarea {
  background-color: #0A0A0F !important;
  border-radius: 0 !important;
  font-size: 1.0625rem !important;
}
.entry-content .gr-form-wrap .wpcf7-form input[type="submit"] {
  background-color: #E8C96A !important;
  border-radius: 0 !important;
  font-size: .8125rem !important;
}
.entry-content .gr-form-wrap .wpcf7-form input[type="submit"]:hover {
  background-color: #F0EAD6 !important;
}

/* ── Offices column ─────────────────────────────────────────────────────────
   Same story as the form: these cards were light-theme leftovers
   (background #f8f9fa, 10px radius, #111 text) and read as pasted-in
   against the dark page. Brought onto the palette with square corners. */
.entry-content .gr-office-card {
  background: linear-gradient(180deg, rgba(240,234,214,.035), rgba(240,234,214,.012));
  border: 1px solid rgba(201, 168, 76, .28);
  border-radius: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: 1.25rem;
  color: rgba(240, 234, 214, .78);
}
.entry-content .gr-office-label {
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C9A84C;
}
.entry-content .gr-office-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: #F0EAD6;
  margin: .35rem 0 1rem;
}
.entry-content .gr-office-card a { color: #E8C96A; text-decoration: none; }
.entry-content .gr-office-card a:hover { text-decoration: underline; }
.entry-content .gr-office-card svg { color: #C9A84C; }

/* ==========================================================================
   Discovery form ([godrank_discovery_form])
   ========================================================================== */
.gr-df {
  --f-ink: #0A0A0F; --f-gold: #C9A84C; --f-signal: #E8C96A; --f-cream: #F0EAD6;
  --f-line: rgba(240,234,214,.18); --f-err: #E8737F;
  --f-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --f-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 820px;
  font-family: var(--f-sans);
  color: var(--f-cream);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.gr-df__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gr-df__alert {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--f-err);
  color: var(--f-err);
  font-family: var(--f-mono);
  font-size: .8125rem;
}

.gr-df__row { margin-bottom: clamp(1.25rem, 2.6vw, 1.9rem); }

.gr-df__label {
  display: block;
  margin-bottom: .55rem;
  padding: 0;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--f-signal);
}
.gr-df__req { margin-left: .6rem; color: rgba(240,234,214,.42); }

.gr-df input[type="text"],
.gr-df input[type="email"],
.gr-df input[type="url"],
.gr-df textarea {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 58px; padding: 1rem 1.15rem;
  background: var(--f-ink);
  border: 1px solid var(--f-line);
  border-radius: 0;
  color: var(--f-cream);
  font-family: var(--f-sans);
  font-size: 1.0625rem; line-height: 1.45;
  transition: border-color .18s ease, background-color .18s ease;
  -webkit-appearance: none; appearance: none;
}
.gr-df textarea { min-height: 170px; resize: vertical; }
.gr-df ::placeholder { color: rgba(240,234,214,.34); opacity: 1; }
.gr-df input:hover, .gr-df textarea:hover { border-color: rgba(240,234,214,.34); }
.gr-df input:focus, .gr-df textarea:focus {
  outline: 2px solid var(--f-signal); outline-offset: 2px;
  border-color: var(--f-signal); background: #0D0D14;
}
.gr-df input:-webkit-autofill {
  -webkit-text-fill-color: var(--f-cream);
  -webkit-box-shadow: 0 0 0 1000px var(--f-ink) inset;
}

/* ── Radio groups ───────────────────────────────────────────────────────── */
.gr-df__fieldset { margin: 0; padding: 0; border: 0; }
.gr-df__opt { display: flex; align-items: center; gap: .75rem; padding: .45rem 0; }

.gr-df__opt input[type="radio"] {
  flex: none;
  width: 20px; height: 20px; margin: 0;
  border: 1px solid rgba(240,234,214,.4);
  border-radius: 50%;              /* radios stay round — squares read as checkboxes */
  background: var(--f-ink);
  cursor: pointer;
  display: grid; place-content: center;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease;
}
.gr-df__opt input[type="radio"]::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  transform: scale(0); transition: transform .15s ease;
  background: var(--f-signal);
}
.gr-df__opt input[type="radio"]:checked { border-color: var(--f-signal); }
.gr-df__opt input[type="radio"]:checked::before { transform: scale(1); }
.gr-df__opt input[type="radio"]:focus-visible { outline: 2px solid var(--f-signal); outline-offset: 3px; }
.gr-df__opt label {
  cursor: pointer;
  font-size: 1rem;
  color: rgba(240,234,214,.82);
  line-height: 1.4;
}
.gr-df__opt:hover label { color: var(--f-cream); }

/* Name + surname share a row on wider screens. */
@media (min-width: 720px) {
  .gr-df { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .gr-df > * { grid-column: 1 / -1; }
  .gr-df__row--text:nth-of-type(1) { grid-column: 1 / 2; }
  .gr-df__row--text:nth-of-type(2) { grid-column: 2 / 3; }
}

/* ── Validation ─────────────────────────────────────────────────────────── */
.gr-df__row.is-invalid input,
.gr-df__row.is-invalid textarea { border-color: var(--f-err); }
.gr-df__err {
  margin: .5rem 0 0;
  color: var(--f-err);
  font-family: var(--f-mono);
  font-size: .75rem;
}

/* ── Submit ─────────────────────────────────────────────────────────────── */
.gr-df__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgba(240,234,214,.12);
}
.gr-df__submit {
  min-height: 60px; padding: 1rem 2.5rem;
  background: var(--f-signal); color: var(--f-ink);
  border: 1px solid var(--f-signal); border-radius: 0;
  font-family: var(--f-mono); font-size: .8125rem;
  letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(201,168,76,.28);
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.gr-df__submit:hover { background: var(--f-cream); border-color: var(--f-cream); box-shadow: 7px 7px 0 rgba(201,168,76,.42); }
.gr-df__submit:active { transform: translate(2px,2px); box-shadow: 3px 3px 0 rgba(201,168,76,.3); }
.gr-df__submit:focus-visible { outline: 2px solid var(--f-cream); outline-offset: 3px; }
.gr-df__assurance {
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em;
  line-height: 1.6; color: rgba(240,234,214,.5); max-width: 36ch;
}

@media (prefers-reduced-motion: reduce) { .gr-df * { transition: none !important; } }

/* Section headings on this page ("Send a Message", "Our Offices"). */
.entry-content .gr-contact-wrap h2 {
  font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #E8C96A;
}

@media (prefers-reduced-motion: reduce) {
  .wpcf7 * { transition: none !important; }
}