/* ==========================================================================

   integrations.css
   Purpose:
   - Platform glue and overrides for Astra / Spectra (UAGB) / WP core blocks
   - Plugin-specific styling fixes (GF, SureForms, SureCart, etc.)

   Contents:
   - Selectors that reference markup we do not control:
     .ast-*, .uagb-*, .wp-block-*, .entry-content, plugin classes/IDs
   - Normalizations and compatibility fixes

   Do NOT put here:
   - Our design system components/utilities (c-*/u-*)              -> base.css
   - Site/page-specific styling, experiments, one-offs            -> site.css

   Notes:
   - Prefer opt-in scoping via our class when possible
     (e.g., .wrap-copy / later .c-prose) to avoid global side effects.

   ========================================================================== */


/* ==========================================================================
   ASTRA OVERRIDES
   - Theme-level corrections specific to Astra markup
   ========================================================================== */

/* Disable Astra’s default image box-shadow on single posts/pages */
.ast-article-single img {
  box-shadow: none !important;
}

/* Remove Astra single-content image/figure shadow */
.ast-article-single figure,
.ast-article-single img:not(figure img) {
  box-shadow: none !important;
}


/* ==========================================================================
   SPECTRA / UAGB OVERRIDES
   - Fixes specific to Spectra block markup and editor output
   ========================================================================== */

/* Button cleanup (Spectra + Astra) */
a.uagb-buttons-repeater.ast-outline-button:hover {
  text-decoration: none !important;
}

/* Hero CTA button stacking (mobile)
   - Scoped by .hero-cta-button wrapper
   - Uses Spectra/UAGB button markup
*/
@media (max-width: 768px) {
  .hero-cta-button .uagb-buttons__wrap {
    flex-direction: column !important;
    gap: 12px;
    align-items: stretch;
  }

  .hero-cta-button .uagb-buttons__child {
    width: 100% !important;
    text-align: center;
  }
}


/* ==========================================================================
   CONTENT AREA + WP CORE BLOCKS (scoped)
   - Normalizations for WP core blocks within the main content area
   - Prefer opt-in scoping with our class (e.g., .wrap-copy / later .c-prose)
   ========================================================================== */



/* WRAP-COPY: list indentation + prose rhythm
   Scope: .wrap-copy (opt-in prose container)
*/
.entry-content .wrap-copy ul,
.entry-content .wrap-copy ol,
.entry-content .wrap-copy .wp-block-list {
  padding-inline-start: 1.6rem;
  margin: 0 0 1rem 0;
  list-style-position: outside;
}

.entry-content .wrap-copy li {
  margin-block: 0.5rem;
  text-indent: 0;
}

/* Orphan fix */
.entry-content .wrap-copy p:last-of-type,
.entry-content .wrap-copy .wp-block-paragraph:last-of-type {
  clear: both;
}

/* If WP/theme overrides list padding in certain contexts, re-enable this:
.entry-content .wrap-copy ul,
.entry-content .wrap-copy ol,
.entry-content .wrap-copy .wp-block-list {
  padding-inline-start: 1.6rem !important;
}
*/


/* DETAILS BLOCK (WP core)
   Note: currently global. Consider scoping behind .wrap-copy / .c-prose later.
*/
.wp-block-details {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 18px 24px;
  margin-bottom: 12px;
  background-color: #f9f9f9;
  transition: all 0.2s ease;
}

.wp-block-details[open] {
  background-color: #f4f4f4;
  border-left: 4px solid #8EB957;
  padding-left: 26px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.wp-block-details summary {
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  outline: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: color 0.2s ease;
  line-height: 1.3;
}

.wp-block-details[open] summary {
  margin-bottom: 12px;
}

.wp-block-details summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 10px;
  color: #49494A;
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.wp-block-details[open] summary::before {
  content: '▾';
}

.wp-block-details summary:hover {
  color: #8EB957;
}

.wp-block-details summary:hover::before {
  transform: scale(1.1);
  color: #8EB957;
}

.wp-block-details p {
  margin-bottom: 1em;
  line-height: 1.6;
}

.wp-block-details ul {
  padding-left: 1.25em;
  margin-bottom: 1em;
}

.wp-block-details li {
  margin-bottom: 0.5em;
}


/* ==========================================================================
   PLUGIN OVERRIDES
   - Fixes for plugin-generated markup
   ========================================================================== */

/* ================================
   Gravity Forms (Orbital) neutralizer
   Scoped to GravityScore quiz only
   Uses GravityStack UI variables
   ================================ */

/* Base typography + color */
form.gs-gravityscore-quiz {
  font-family: inherit !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  color: var(--charcoal) !important;
}

/* Ensure common GF text elements inherit */
form.gs-gravityscore-quiz .gfield_label,
form.gs-gravityscore-quiz .gform-field-label,
form.gs-gravityscore-quiz .gfield_description,
form.gs-gravityscore-quiz .gform_description {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Inputs inherit site typography */
form.gs-gravityscore-quiz input,
form.gs-gravityscore-quiz select,
form.gs-gravityscore-quiz textarea,
form.gs-gravityscore-quiz button {
  font-family: inherit !important;
  font-size: inherit !important;
}

/* Buttons: force brand green */
form.gs-gravityscore-quiz .gform-theme-button,
form.gs-gravityscore-quiz .gform_button,
form.gs-gravityscore-quiz .gform_next_button,
form.gs-gravityscore-quiz .gform_previous_button,
form.gs-gravityscore-quiz .gform_page_footer input[type="button"],
form.gs-gravityscore-quiz .gform_page_footer input[type="submit"] {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Hover/focus states */
form.gs-gravityscore-quiz .gform-theme-button:hover,
form.gs-gravityscore-quiz .gform_button:hover,
form.gs-gravityscore-quiz .gform_next_button:hover,
form.gs-gravityscore-quiz .gform_previous_button:hover,
form.gs-gravityscore-quiz .gform_page_footer input[type="button"]:hover,
form.gs-gravityscore-quiz .gform_page_footer input[type="submit"]:hover {
  filter: brightness(0.95);
}

form.gs-gravityscore-quiz .gform-theme-button:focus-visible,
form.gs-gravityscore-quiz .gform_button:focus-visible,
form.gs-gravityscore-quiz .gform_next_button:focus-visible,
form.gs-gravityscore-quiz .gform_previous_button:focus-visible,
form.gs-gravityscore-quiz .gform_page_footer input[type="button"]:focus-visible,
form.gs-gravityscore-quiz .gform_page_footer input[type="submit"]:focus-visible {
  outline: 3px solid rgba(var(--charcoal-rgb), 0.25) !important;
  outline-offset: 2px !important;
}

/* Inputs: neutral look (reduces Orbital feel) */
form.gs-gravityscore-quiz input[type="text"],
form.gs-gravityscore-quiz input[type="email"],
form.gs-gravityscore-quiz input[type="tel"],
form.gs-gravityscore-quiz input[type="url"],
form.gs-gravityscore-quiz input[type="number"],
form.gs-gravityscore-quiz input[type="password"],
form.gs-gravityscore-quiz select,
form.gs-gravityscore-quiz textarea {
  background: #fff !important;
  color: var(--charcoal) !important;
  border: 1px solid rgba(var(--charcoal-rgb), 0.25) !important;
  border-radius: 10px !important;
}

/* Input focus: use brand green instead of Orbital blue */
form.gs-gravityscore-quiz input:focus,
form.gs-gravityscore-quiz select:focus,
form.gs-gravityscore-quiz textarea:focus {
  border-color: rgba(142, 185, 87, 0.85) !important; /* from --green */
  box-shadow: 0 0 0 3px rgba(142, 185, 87, 0.25) !important; /* from --green */
  outline: none !important;
}

/* Optional: radio spacing + size (keeps quiz feel consistent) */
form.gs-gravityscore-quiz .gfield--type-radio .gchoice {
  margin: 12px 0 !important;
}

form.gs-gravityscore-quiz .gfield--type-radio input[type="radio"] {
  transform: scale(1.25);
  transform-origin: left center;
  margin-right: 12px;
}

/* Page 1 card container */
form.gs-gravityscore-quiz #gform_page_1_1 .gform_page_fields {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: clamp(16px, 2vw, 28px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* Page 1: darken text + increase size */
form.gs-gravityscore-quiz #gform_page_1_1 {
  color: #1f2937;
}

form.gs-gravityscore-quiz #gform_page_1_1 .gfield_label,
form.gs-gravityscore-quiz #gform_page_1_1 .gform-field-label,
form.gs-gravityscore-quiz #gform_page_1_1 .gfield_description,
form.gs-gravityscore-quiz #gform_page_1_1 .gform_description,
form.gs-gravityscore-quiz #gform_page_1_1 .ginput_container {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.45;
}

/* Page 1: radio options bigger + more spacing */
form.gs-gravityscore-quiz #gform_page_1_1 .gfield--type-radio .gchoice {
  margin: 12px 0;
}

form.gs-gravityscore-quiz #gform_page_1_1 .gfield--type-radio input[type="radio"] {
  transform: scale(1.25);
  transform-origin: left center;
  margin-right: 12px;
}

form.gs-gravityscore-quiz #gform_page_1_1 .gfield--type-radio label {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.35;
}


/* ============================================================
   GRAVITY FORMS — PAGE STEPS (DESKTOP)
   Purpose:
   - Keep page steps visible on desktop for motivation/progress
   - Hide page steps on Page 1 only (reduce friction before first tap)
   Notes:
   - Mobile hiding is handled via JS (force-hide), because mobile CSS was
     being overridden / not reliably applied in the final render.
   - Uses :has() (supported in modern Chrome/Safari/Firefox).
   ============================================================ */

@media (min-width: 769px) {

  /* Default: show steps on desktop */
  #gform_wrapper_1 #gf_page_steps_1 {
    display: flex !important;
  }

  /* Hide steps only while Step 1 is active (Page 1) */
  #gform_wrapper_1 #gf_page_steps_1:has(#gf_step_1_1.gf_step_active) {
    display: none !important;
  }

}