/* ═══════════════════════════════════════════════════════════════════
   Glen Susans — Contact Staging (glen-theme port)
   All rules scoped to body.contact-staging-page.
   Does not affect any other page on the site.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────
   Defined on body (not :root) so they can't leak to other pages.     */
.contact-staging-page {
  --c-orange:           #ff540f;
  --c-orange-hover:     #ff7a3d;
  --c-hero-navy:        #0f1420;
  --c-white:            #ffffff;
  --c-grey-50:          #f7f7f5;
  --c-grey-200:         #e5e5e5;
  --c-grey-400:         #9ca3af;
  --c-grey-700:         #4b5563;
  --c-ink:              #1d2438;
  --c-error:            #c2410c;
  --ink-on-light:       #1d2438;
  --ink-on-light-muted: #4b5563;
  --ink-on-light-faint: #9ca3af;
  --rule-on-light:      #e5e5e5;
  --surface-light:      #ffffff;
  --fs-body:            1.0625rem;
  --fs-body-sm:         0.9375rem;
  --fs-h1:              clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  --fs-h2:              clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  --fs-eyebrow:         0.6875rem;
  --space-section:      clamp(5rem, 4rem + 4vw, 8.5rem);
  --space-lg:           2.5rem;
  --space-md:           1.5rem;
  --space-sm:           1rem;
  --radius-lg:          20px;
  --radius-md:          14px;
  --radius-sm:          10px;
  --radius-pill:        999px;
  --container-max:      1240px;
  --container-pad:      clamp(1.5rem, 1rem + 2vw, 3rem);
  --ease:               cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow:           1100ms;
  --dur-med:            420ms;
  --dur-fast:           180ms;
  --font-sans:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Page background ────────────────────────────────────────────────── */
.contact-staging-page {
  background: #ffffff !important;
  color: #1d2438;
}

.contact-staging-page .gs-contact-wrap {
  background: #ffffff;
}

/* ── Base resets, scoped ────────────────────────────────────────────── */
.contact-staging-page .gs-contact-wrap,
.contact-staging-page .gs-contact-wrap *,
.contact-staging-page .gs-contact-wrap *::before,
.contact-staging-page .gs-contact-wrap *::after {
  box-sizing: border-box;
}
.contact-staging-page .gs-contact-wrap ::selection {
  background: #ff540f;
  color: #fff;
}
.contact-staging-page .gs-contact-wrap img  { max-width: 100%; display: block; }
.contact-staging-page .gs-contact-wrap h1,
.contact-staging-page .gs-contact-wrap h2,
.contact-staging-page .gs-contact-wrap h3,
.contact-staging-page .gs-contact-wrap p    { margin: 0; }
.contact-staging-page .gs-contact-wrap ul,
.contact-staging-page .gs-contact-wrap ol   { margin: 0; padding: 0; }
.contact-staging-page .gs-contact-wrap a    { color: inherit; text-decoration: none; }
.contact-staging-page .gs-contact-wrap {
  font-size:                16px;
  font-family:              var(--font-sans);
  font-feature-settings:    "ss01" 1;
  -webkit-font-smoothing:   antialiased;
}

/* ── sr-only utility ────────────────────────────────────────────────── */
.contact-staging-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Container ──────────────────────────────────────────────────────── */
.contact-staging-page .container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Cursor follower ────────────────────────────────────────────────── */
.contact-staging-page .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
  transition: opacity 220ms var(--ease);
}
.contact-staging-page .cursor-dot.is-visible { opacity: 1; }
.contact-staging-page .cursor-dot.is-hidden  {
  opacity: 0;
  transition: opacity 90ms linear;
}
.contact-staging-page .cursor-dot__inner {
  --dot-size: calc(clamp(18px, 1.35vw, 21px) * 0.2897);
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--c-orange);
  animation: csCursorPulse 1.8s ease-in-out infinite;
}

@keyframes csCursorPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 84, 15, 0.45);
  }
  50% {
    transform: scale(1.45);
    box-shadow: 0 0 0 calc(var(--dot-size) * 0.6) rgba(255, 84, 15, 0);
  }
}

@media (max-width: 900px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .contact-staging-page .cursor-dot { display: none; }
}

/* ── Page entry animation ───────────────────────────────────────────── */
@keyframes csRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT SECTION
   Two columns: left = invitation + details; right = form card.
   ═══════════════════════════════════════════════════════════════════ */

.contact-staging-page .contact {
  /* --gt-nav-height (64px) keeps the section from extending behind the
     fixed nav. --space-section min (80px) already clears the nav, but
     the min-height subtraction ensures correct vertical centering.     */
  min-height: calc(100vh  - var(--gt-nav-height, 64px));
  min-height: calc(100svh - var(--gt-nav-height, 64px));
  display: flex;
  align-items: center;
  padding-block: var(--space-section);
  background: var(--c-grey-50);
}

.contact-staging-page .contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(3rem, 2rem + 5vw, 6rem);
  align-items: stretch;
  width: 100%;
}

/* Left column stacks as flex so footer note pushes to bottom */
.contact-staging-page .contact__info {
  display: flex;
  flex-direction: column;
}

/* ── Left: invitation ───────────────────────────────────────────────── */
.contact-staging-page .gs-contact-wrap .contact__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-on-light-muted);
  margin: 0 0 clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem);
  opacity: 0;
  animation: csRise var(--dur-slow) var(--ease) 60ms forwards;
}

.contact-staging-page .gs-contact-wrap .contact__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-on-light);
  max-width: 12ch;
  margin: 0 0 var(--space-lg);
  opacity: 0;
  animation: csRise var(--dur-slow) var(--ease) 180ms forwards;
  background: linear-gradient(160deg, #1d2438 50%, #3F33C0 74%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: 0.1em;
}

.contact-staging-page .contact__lede-group {
  opacity: 0;
  animation: csRise var(--dur-slow) var(--ease) 300ms forwards;
}
.contact-staging-page .contact__lede {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.72;
  color: var(--ink-on-light-muted);
  max-width: 40ch;
}
.contact-staging-page .contact__lede + .contact__lede { margin-top: 0.75rem; }

/* ── Meta rows: location + response time ───────────────────────────── */
.contact-staging-page .gs-contact-wrap .meta {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  opacity: 0;
  animation: csRise var(--dur-slow) var(--ease) 420ms forwards;
}
.contact-staging-page .meta__item {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}
.contact-staging-page .meta__item + .meta__item { margin-top: var(--space-md); }

.contact-staging-page .meta__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eff2f7;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  transition: transform 0.3s var(--ease);
}
.contact-staging-page .meta__item:hover .meta__icon,
.contact-staging-page .meta__item:focus-within .meta__icon { transform: scale(1.08); }
.contact-staging-page .meta__icon svg,
.contact-staging-page .meta__icon img { width: 22px; height: 22px; display: block; }

.contact-staging-page .meta__dot {
  fill: var(--c-orange);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes csDotPulse {
  0%   { transform: scale(1);    }
  30%  { transform: scale(0.78); }
  65%  { transform: scale(1.22); }
  100% { transform: scale(1);    }
}
.contact-staging-page .meta__item:hover .meta__dot,
.contact-staging-page .meta__item:focus-within .meta__dot {
  animation: csDotPulse 620ms var(--ease);
}

.contact-staging-page .gs-contact-wrap .meta__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-light-faint);
  margin: 0 0 0.25rem;
}
.contact-staging-page .meta__value {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-on-light);
  margin: 0;
}

/* ── Footer note — pushed to bottom of left column ─────────────────── */
.contact-staging-page .contact__footer {
  margin-top: auto;
  opacity: 0;
  animation: csRise var(--dur-slow) var(--ease) 540ms forwards;
}
.contact-staging-page .contact__divider {
  height: 1px;
  background: var(--rule-on-light);
  border: 0;
  margin: var(--space-lg) 0;
}
.contact-staging-page .contact__note {
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--ink-on-light-muted);
  margin: 0;
}
.contact-staging-page .contact__note strong {
  display: block;
  font-weight: 600;
  color: var(--ink-on-light);
  margin-top: 0.25rem;
}

/* ── Right column: form card ────────────────────────────────────────── */
.contact-staging-page .contact__form {
  opacity: 0;
  animation: csRise var(--dur-slow) var(--ease) 220ms forwards;
}

.contact-staging-page .form-card {
  background: #eff2f7;
  border: 1px solid rgba(29, 36, 56, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  box-shadow:
    0 2px 4px rgba(29, 36, 56, 0.04),
    0 12px 32px -8px rgba(29, 36, 56, 0.14),
    0 32px 64px -24px rgba(29, 36, 56, 0.18);
}

.contact-staging-page .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.contact-staging-page .field--full { grid-column: 1 / -1; }

.contact-staging-page .field__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-light-muted);
  margin-bottom: 0.625rem;
}
.contact-staging-page .field__label .req { color: var(--c-orange); }

.contact-staging-page .field__input,
.contact-staging-page .field__textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink-on-light);
  background: var(--c-white);
  border: 1px solid var(--rule-on-light);
  border-radius: var(--radius-sm);
  padding: 0.9375rem 1rem;
  margin-top: 0;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow   var(--dur-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.contact-staging-page .field__textarea {
  height:     190px;
  min-height: 190px;
  line-height: 1.6;
  resize: vertical;
}
.contact-staging-page .field__input::placeholder,
.contact-staging-page .field__textarea::placeholder {
  color: var(--ink-on-light-faint);
}

/* Orange ring on focus */
.contact-staging-page .field__input:focus,
.contact-staging-page .field__textarea:focus {
  outline: none;
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgba(255, 84, 15, 0.14);
}

/* Error state */
.contact-staging-page .field.has-error .field__input,
.contact-staging-page .field.has-error .field__textarea {
  border-color: var(--c-error);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.12);
}
.contact-staging-page .field__error {
  display: none;
  font-size: 0.8125rem;
  color: var(--c-error);
  margin-top: 0.5rem;
}
.contact-staging-page .field.has-error .field__error { display: block; }

/* Send button */
.contact-staging-page .form-card__actions { margin-top: var(--space-lg); }

.contact-staging-page .btn-send {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left !important;
  color: #ffffff;
  /* Arrow SVG embedded as right-side background layer; orange fill as left layer.
     CF7 6.x renders [submit] as <button>, which can't use ::after/::before for
     decorative content reliably across all implementations.                      */
  background-color: var(--c-orange);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.4 3.2L12.6 8L5.4 12.8Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 14px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 1.125rem 2rem;
  padding-right: 4rem;
  cursor: pointer;
  transition:
    transform    var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.contact-staging-page .btn-send:hover,
.contact-staging-page .btn-send:focus-visible {
  transform: scale(1.015);
  background-color: var(--c-orange-hover);
}
.contact-staging-page .btn-send:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
}

/* Privacy note */
.contact-staging-page .gs-contact-wrap .form-card__privacy {
  font-size: 0.8125rem;
  color: var(--ink-on-light-faint);
  margin-top: var(--space-md);
  line-height: 1.5;
}

/* ── Success state ──────────────────────────────────────────────────── */
.contact-staging-page .form-card__sent {
  display: none;
  text-align: center;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.contact-staging-page .form-card.is-sent .form-card__sent  { display: block; }
.contact-staging-page .form-card.is-sent .form-grid,
.contact-staging-page .form-card.is-sent .form-card__actions,
.contact-staging-page .form-card.is-sent .form-card__privacy { display: none; }

.contact-staging-page .form-card__sent-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-md);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
}
.contact-staging-page .gs-contact-wrap .form-card__sent-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-on-light);
  margin: 0 0 0.875rem;
}
.contact-staging-page .gs-contact-wrap .form-card__sent-body {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-on-light-muted);
  max-width: 38ch;
  margin-inline: auto;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

/* Tablet and below: single column, form first */
@media (max-width: 980px) {
  .contact-staging-page .contact { min-height: 0; }
  .contact-staging-page .contact__grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    align-items: start;
  }
  .contact-staging-page .contact__form { order: -1; }
  .contact-staging-page .gs-contact-wrap .contact__title { max-width: none; }
  .contact-staging-page .contact__note  { max-width: none; }
}

/* Mobile: collapse form grid to single column */
@media (max-width: 600px) {
  .contact-staging-page .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .contact-staging-page { --container-pad: 1.25rem; }
}

/* Short viewports: compress vertical padding */
@media (max-height: 600px) {
  .contact-staging-page .contact { padding-block: clamp(2rem, 4vh, 4rem); }
}

/* Desktop: single-screen layout — no vertical scroll permitted.
   ─────────────────────────────────────────────────────────────
   Root cause of overflow: WordPress injects html { margin-top: 32px } for
   the admin bar, adding exactly 32px to the document height even though
   the section geometry already fits the viewport.  For public visitors
   (no admin bar) the layout naturally fits; for logged-in admins the 32px
   margin causes the small scroll that triggers the nav transition.
   overflow-y: hidden on both html and body is the approved fix — the
   intended desktop design is a fixed one-screen layout, not a scrolling one.
   :has() scopes the html rule to this page only, with no global side-effects. */
@media (min-width: 981px) {
  html:has(body.contact-staging-page),
  body.contact-staging-page { overflow-y: hidden; }

  .contact-staging-page #gt-footer { display: none; }

  /* Push wrap below the fixed nav so the section occupies y=64→y=100dvh */
  .contact-staging-page .gs-contact-wrap {
    margin-top: var(--gt-nav-height, 64px);
  }

  .contact-staging-page .contact {
    min-height: unset;
    height: calc(100dvh - var(--gt-nav-height, 64px));
    /* dvh-relative padding so it never causes content to overflow the section
       on short viewports (--space-section scales with width, not height) */
    padding-block: clamp(1.5rem, 4dvh, var(--space-section));
    transform: translateY(-10px);
  }

  /* White background on desktop — override body, wrap, and section */
  .contact-staging-page,
  .contact-staging-page .gs-contact-wrap,
  .contact-staging-page .contact { background: #ffffff !important; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .contact-staging-page .contact__eyebrow,
  .contact-staging-page .contact__title,
  .contact-staging-page .contact__lede-group,
  .contact-staging-page .meta,
  .contact-staging-page .contact__footer,
  .contact-staging-page .contact__form { opacity: 1; animation: none; }
  .contact-staging-page .meta__item:hover .meta__dot,
  .contact-staging-page .meta__item:focus-within .meta__dot { animation: none; }
  .contact-staging-page .meta__item:hover .meta__icon,
  .contact-staging-page .meta__item:focus-within .meta__icon { transform: none; }
  .contact-staging-page .btn-send:hover,
  .contact-staging-page .btn-send:focus-visible { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   CF7 INTEGRATION
   CF7 wraps each rendered form in <div class="wpcf7"> and <form
   class="wpcf7-form">. All rules below are scoped to ensure zero
   leakage to any other CF7 form on the site.
   ═══════════════════════════════════════════════════════════════════ */

/* Passthrough wrappers — don't add visual chrome */
.contact-staging-page .wpcf7 { display: block; }
.contact-staging-page .wpcf7-form { margin: 0; }

/* wpautop converts the newline between </label> and [text* …] in the CF7
   form template into a <br>, creating a ~24px blank line-box. Hide it —
   the label's own margin-bottom (0.625rem) provides the correct gap.    */
.contact-staging-page .wpcf7-form br { display: none; }

/* CF7 injects <fieldset class="hidden-fields-container"> as the FIRST child
   of .wpcf7-form. Its default padding: 18px 0 creates dead space at the top
   of the form card. Collapse it — inputs inside are hidden.               */
.contact-staging-page .wpcf7-form fieldset.hidden-fields-container {
  padding: 0;
  margin:  0;
  border:  0;
}

/* CF7's screen-reader-response: visually hidden but accessible. */
.contact-staging-page .screen-reader-response {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* CF7 wraps each field in a span; make it block so it acts like a div */
.contact-staging-page .wpcf7-form-control-wrap {
  display: block;
}

/* CF7 adds wpcf7-form-control to every rendered control — reset so our
   .field__input / .field__textarea styles remain fully in control.      */
.contact-staging-page .wpcf7-form-control.field__input,
.contact-staging-page .wpcf7-form-control.field__textarea {
  width: 100%;
}

/* ── Submit button ──────────────────────────────────────────────────
   CF7 6.x renders [submit] as:
     <button class="wpcf7-form-control wpcf7-submit has-spinner btn-send">
       Send message
       <span class="wpcf7-spinner">…</span>
     </button>
   Spinner is hidden — button opacity signals loading state instead.   */
.contact-staging-page .btn-send .wpcf7-spinner { display: none; }

/* Loading — CF7 adds class="submitting" to the <form> */
.contact-staging-page .wpcf7-form.submitting .btn-send {
  opacity: 0.62;
  cursor: wait;
  pointer-events: none;
}
.contact-staging-page .wpcf7-form.submitting .btn-send:hover,
.contact-staging-page .wpcf7-form.submitting .btn-send:focus-visible {
  transform: none;
  background: var(--c-orange);
}

/* ── Validation error state ─────────────────────────────────────────
   CF7 adds wpcf7-not-valid to the input/textarea, and injects a
   <span class="wpcf7-not-valid-tip"> after it inside the control-wrap. */
.contact-staging-page .wpcf7-form-control.wpcf7-not-valid.field__input,
.contact-staging-page .wpcf7-form-control.wpcf7-not-valid.field__textarea {
  border-color: var(--c-error) !important;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.12) !important;
}

.contact-staging-page .wpcf7-not-valid-tip {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-error);
  margin-top: 0.5rem;
}

/* ── CF7 response output ────────────────────────────────────────────
   Suppress for validation/success (our UI handles both); show as an
   error banner only when the server fails to deliver the email.        */
.contact-staging-page .wpcf7-response-output {
  display: none !important;
}
.contact-staging-page .wpcf7-form.failed .wpcf7-response-output,
.contact-staging-page .wpcf7-form.spam .wpcf7-response-output,
.contact-staging-page .wpcf7-form.aborted .wpcf7-response-output {
  display: block !important;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--c-error);
  background: rgba(194, 65, 12, 0.06);
  border: 1px solid rgba(194, 65, 12, 0.18);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  margin-top: var(--space-md);
}

/* ── Success — hide CF7 wrapper, reveal designed success state ──────
   JS adds .is-sent to #cs-form-card on wpcf7mailsent.               */
.contact-staging-page .form-card.is-sent .wpcf7 { display: none; }