/* ==========================================================
   privacy-request.css — Colony Creative
   Framing for the data-subject request form. The form controls
   themselves are styled by gravity-forms.css (scoped to
   .privacy-request__form); this file only handles the page around it.
   ========================================================== */

.privacy-request__intro {
  /* The policy intro rule already gives this a bottom border; tighten the
     gap so the form reads as part of the same block. */
  padding-bottom: clamp(2rem, 4vh, 3rem);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

.privacy-request__form {
  /* Room for the underline inputs to breathe against the page ground. */
  padding: 0;
}

/* GF's own wrapper adds a heading + description we don't want doubled. */
.privacy-request__form .gform_heading {
  display: none;
}

.privacy-request__fallback {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--text-secondary);
}

/* The "what happens next" note under the form. */
.privacy-request__aside {
  margin-top: clamp(3rem, 6vh, 4.5rem);
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--border-subtle);
}

.privacy-request__aside p {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.privacy-request__aside p:last-child {
  margin-bottom: 0;
}

.privacy-request__aside strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Submit button: reuse the site's pill rather than the contact section's
   square button (which is styled by contact.css, not loaded here). */
.privacy-request__form .gform_button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.95rem 2.25rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.privacy-request__form .gform_button:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
}

.privacy-request__form .gform_button svg {
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.privacy-request__form .gform_button:hover svg {
  transform: translate(2px, -2px);
}

/* Confirmation message: same voice as the rest of the policy page. */
.privacy-request__form .gform_confirmation_message {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--text-primary);
  padding: 1.5rem 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

/* ── Labels ─────────────────────────────────────────────────
   gravity-forms.css visually-hides every .gfield_label because the contact
   form uses placeholders instead. This form asks real questions, so labels
   come back — as mono eyebrows, matching the policy-page vocabulary. These
   rules are scoped tighter than the hide rule and win on specificity. */
.privacy-request__form .gform_wrapper .gfield .gfield_label,
.privacy-request__form .gform_wrapper .gfield legend.gfield_label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.privacy-request__form .gfield_required {
  color: var(--text-muted);
  margin-left: 0.35em;
}

/* Sub-labels on the Name field (First / Last) stay as quiet placeholders-
   in-disguise: small, muted, below the input. */
.privacy-request__form .ginput_complex label {
  font-family: 'DM Mono', monospace;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Field rhythm ─────────────────────────────────────────── */
.privacy-request__form .gfield {
  margin-bottom: clamp(2rem, 4vh, 2.75rem);
}

/* Inputs get a hint of surface so they read as fields on the black ground,
   not just a hairline. Underline stays; the fill is the same token the
   address card and TOC use. */
.privacy-request__form .ginput_container input[type="text"],
.privacy-request__form .ginput_container input[type="email"],
.privacy-request__form .ginput_container textarea {
  background: var(--bg-surface) !important;
  padding: 0.875rem 1rem !important;
  border-radius: 6px 6px 0 0 !important;
}

.privacy-request__form .ginput_container textarea {
  min-height: 140px;
  resize: vertical;
}

/* Choice rows get a touch more air and a hover surface. */
.privacy-request__form .gchoice {
  padding: 0.5rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.privacy-request__form .gchoice:hover {
  background: var(--bg-surface);
}

.privacy-request__form .gchoice label {
  color: var(--text-primary);
}

/* Descriptions sit between the label and the input (form is set to
   descriptionPlacement: above). Clear the label's bottom margin so the
   description reads as its subtitle, then give the input room. */
.privacy-request__form .gfield_description:not(.validation_message) {
  margin: -0.35rem 0 0.9rem;
  max-width: 60ch;
}

/* If GF ever falls back to below-placement, keep them from crowding. */
.privacy-request__form .field_description_below .gfield_description:not(.validation_message) {
  margin: 0.75rem 0 0;
}

/* Choice groups: the description on radio fields sits under the legend
   and above the first choice, so the choices need to start lower. */
.privacy-request__form .gfield--type-radio .gfield_radio,
.privacy-request__form .gfield--type-checkbox .gfield_checkbox {
  margin-top: 0.25rem;
}

/* reCAPTCHA v3 is invisible; hide the field's label and collapse its box so
   there is no orphaned "RECAPTCHA" heading over an empty gap. */
.privacy-request__form .gfield--type-captcha .gfield_label,
.privacy-request__form .pr-captcha .gfield_label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: -1px !important;
}

.privacy-request__form .gfield--type-captcha,
.privacy-request__form .pr-captcha {
  margin-bottom: 0;
}

/* The selected state is the one place the ember appears on this page.
   Overrides gravity-forms.css's white glyph with the same SVG in #FF4D20,
   plus an ember ring, so a chosen option reads as chosen at a glance.
   Precedent: components/not-found.css and the Arcade promo section. */
.privacy-request__form .ginput_container .gchoice input[type="radio"]:checked {
  border-color: #FF4D20 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='4' fill='%23FF4D20'/%3E%3C/svg%3E") !important;
}

.privacy-request__form .ginput_container_consent input[type="checkbox"]:checked,
.privacy-request__form .ginput_container .gchoice input[type="checkbox"]:checked {
  border-color: #FF4D20 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3 3 7-7' fill='none' stroke='%23FF4D20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Light theme: the ember is dark enough on #F5F5F2 already (≈3.5:1 as a
   glyph, fine for a non-text indicator), so no swap needed. */

/* Consent: give it its own quiet card so it reads as a step, not a footnote. */
.privacy-request__form .gfield--type-consent {
  padding: 1.25rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.privacy-request__form .gfield--type-consent .gfield_label {
  margin-bottom: 0.5rem !important;
}