/* === TrueGrimmStories – WPForms CSS ===============================
   NOTE: To match the "Watch on YouTube" button exactly, add class `tgs-cta`
         to the Submit Button in your WPForms settings.
=================================================================== */

/* 1) Override WPForms CSS Variables to match theme.json */
.wpforms-block.wpforms-container,
.wpforms-container {
  /* Colors */
  --wpforms-label-color: var(--wp--preset--color--foreground) !important;
  --wpforms-label-sublabel-color: var(--wp--preset--color--foreground) !important;
  --wpforms-label-error-color: #d63637 !important;
  --wpforms-field-text-color: var(--wp--preset--color--foreground) !important;
  --wpforms-field-background-color: var(--wp--preset--color--background) !important;
  --wpforms-field-border-color: currentColor !important;
  --wpforms-field-menu-color: var(--wp--preset--color--background) !important;
  --wpforms-background-color: transparent !important;

  /* Button colors (fallback theme button) */
  --wpforms-button-background-color: var(--wp--custom--elements--button--color--background) !important;
  --wpforms-button-text-color: var(--wp--custom--elements--button--color--text) !important;
  --wpforms-button-border-color: var(--wp--custom--elements--button--color--background) !important;

  /* Typography */
  --wpforms-label-size-font-size: inherit !important;
  --wpforms-label-size-line-height: var(--wp--custom--typography--line-height--body, 1.5) !important;
  --wpforms-field-size-font-size: var(--wp--preset--font-size--medium, 1rem) !important;
  --wpforms-field-size-line-height: var(--wp--custom--typography--line-height--body, 1.5) !important;

  /* Field sizing */
  --wpforms-field-size-input-height: 48px !important;
  --wpforms-field-size-input-spacing: 15px !important;
  --wpforms-field-size-padding-h: calc(0.667em + 1px) !important;
  --wpforms-field-size-checkbox-size: 16px !important;
  --wpforms-field-size-sublabel-spacing: 5px !important;
  --wpforms-field-size-icon-size: 1 !important;

  /* Label sizing */
  --wpforms-label-size-sublabel-font-size: 14px !important;
  --wpforms-label-size-sublabel-line-height: 17px !important;

  /* Button sizing */
  --wpforms-button-size-font-size: var(--wp--preset--font-size--medium, 1rem) !important;
  --wpforms-button-size-height: auto !important;
  --wpforms-button-size-padding-h: calc(1.333em + 2px) !important;
  --wpforms-button-size-margin-top: 1rem !important;

  /* Borders + spacing */
  --wpforms-field-border-size: 1px !important;
  --wpforms-field-border-style: solid !important;
  --wpforms-container-padding: 0 !important;

  /* Button border/radius */
  --wpforms-button-border-radius: var(--wp--custom--elements--button--border--radius) !important;
  --wpforms-button-border-size: 0 !important;
}

/* 2) Labels */
.wpforms-block.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-label {
  font-weight: inherit !important;
  margin-bottom: 0.25em !important;
}

.wpforms-field-sublabel {
  opacity: 0.8 !important;
}

/* 3) Text inputs + textarea */
.wpforms-block input:where(:not([type="submit"]):not([type="checkbox"])),
.wpforms-container input:where(:not([type="submit"]):not([type="checkbox"])),
.wpforms-block textarea,
.wpforms-container textarea {
  border: 1px solid !important;
  line-height: inherit !important;
  font-size: inherit !important;
  padding: calc(0.667em + 1px) !important;
  width: 100% !important;
  background-color: var(--wp--preset--color--background) !important;
  color: var(--wp--preset--color--foreground) !important;
  border-color: inherit !important;
}

/* 4) Default WPForms submit button (fallback if NOT using tgs-cta) */
.wpforms-block.wpforms-container button.wpforms-submit:not(.tgs-cta),
.wpforms-container button.wpforms-submit:not(.tgs-cta),
.wpforms-container input[type="submit"].wpforms-submit:not(.tgs-cta) {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45ch !important;
  min-height: 44px !important;
  padding: calc(0.667em + 2px) calc(1.333em + 2px) !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: var(--wp--custom--typography--font-weight--medium, 600) !important;
  border-radius: var(--wp--custom--elements--button--border--radius, 12px) !important;
  border-width: 0 !important;
  height: auto !important;
  text-decoration: none !important;
  cursor: pointer !important;

  background-color: var(--wp--custom--elements--button--color--background) !important;
  color: var(--wp--custom--elements--button--color--text) !important;
}

.wpforms-block.wpforms-container button.wpforms-submit:not(.tgs-cta):hover,
.wpforms-container button.wpforms-submit:not(.tgs-cta):hover,
.wpforms-container input[type="submit"].wpforms-submit:not(.tgs-cta):hover {
  background-color: var(--wp--custom--elements--button--hover--color--background) !important;
  color: var(--wp--custom--elements--button--hover--color--text) !important;
}

.wpforms-block.wpforms-container button.wpforms-submit:not(.tgs-cta):focus,
.wpforms-container button.wpforms-submit:not(.tgs-cta):focus,
.wpforms-container input[type="submit"].wpforms-submit:not(.tgs-cta):focus {
  background-color: var(--wp--custom--elements--button--focus--color--background) !important;
  color: var(--wp--custom--elements--button--focus--color--text) !important;
  outline-color: var(--wp--custom--elements--button--focus--color--background) !important;
  outline-offset: 2px !important;
  outline-width: 2px !important;
  outline-style: solid !important;
}

/* 5) TGS CTA look (MATCHES "Watch on YouTube") — add class `tgs-cta` */
.wpforms-container button.wpforms-submit.tgs-cta,
.wpforms-container input[type="submit"].wpforms-submit.tgs-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45ch !important;
  min-height: 44px !important;
  padding: .68rem 1rem !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;

  /* Same gradient / colors / border / shadow as .tgs-cta anchors */
  background: linear-gradient(180deg, var(--accent), var(--accent-dark)) !important;
  color: #f7f3f3 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
  border: 1px solid rgba(90,16,16,.55) !important;
  box-shadow: 0 8px 18px rgba(130,25,25,.28) !important;
}

.wpforms-container button.wpforms-submit.tgs-cta:hover,
.wpforms-container input[type="submit"].wpforms-submit.tgs-cta:hover {
  filter: brightness(1.05);
}

.wpforms-container button.wpforms-submit.tgs-cta:focus-visible,
.wpforms-container input[type="submit"].wpforms-submit.tgs-cta:focus-visible {
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
}

/* Disabled state while processing */
.wpforms-container .wpforms-submit.tgs-cta[disabled] {
  opacity: .7;
  filter: saturate(.85) brightness(.95);
  cursor: not-allowed !important;
}

/* === Inline email + button layout ===================================== */
/* Puts the email field and the submit button on one row for forms
   that have the .tgs-inline class on the form wrapper. */
.wpforms-container.tgs-inline form.wpforms-form{
  display:grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  align-items: center;
}

/* Remove default vertical spacing so they sit flush */
.wpforms-container.tgs-inline .wpforms-field-container,
.wpforms-container.tgs-inline .wpforms-field,
.wpforms-container.tgs-inline .wpforms-submit-container{
  margin:0 !important;
}

/* Keep the submit column tight */
.wpforms-container.tgs-inline .wpforms-submit-container{
  width:auto !important;
  display:flex;
  align-items:stretch;
}

/* Make the button match input height nicely */
.wpforms-container.tgs-inline .wpforms-submit.tgs-cta{
  min-height: 48px; /* same as field height below */
  padding: .68rem 1rem !important;
}

/* === Make the email field look like your .tgs-search =================== */
.wpforms-container.tgs-inline input[type="email"],
.wpforms-container.tgs-inline input[type="text"]{
  height: 48px !important;
  padding: 0 14px !important;
  border-radius: var(--radius, 12px) !important;
  background: var(--panel, #141314) !important;
  color: var(--ink, #e6e6e6) !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
  outline: none !important;
  width: 100% !important;
  box-shadow: inset 0 0 0 9999px transparent; /* keeps backgrounds clean */
}

.wpforms-container.tgs-inline input[type="email"]::placeholder,
.wpforms-container.tgs-inline input[type="text"]::placeholder{
  color: var(--muted, #b9b6b3) !important;
  opacity: .9;
}

.wpforms-container.tgs-inline input[type="email"]:focus,
.wpforms-container.tgs-inline input[type="text"]:focus{
  border-color: color-mix(in srgb, var(--accent, #821919), #000 35%) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #821919), #000 82%);
}

/* === Responsive: stack on small screens =============================== */
@media (max-width: 640px){
  .wpforms-container.tgs-inline form.wpforms-form{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .wpforms-container.tgs-inline .wpforms-submit.tgs-cta{
    width: 100%;
  }
}