/*
Theme Name:   Astra Child
Theme URI:    https://skeleton.local
Description:  Child theme for DigiSquid's Client Sites
Author:       DigiSquid
Template:     astra
Version:      12.14.26
Text Domain:  astra-child
*/

/* =============================================================== */
/* !Remove the Margin at the top of the page */
/* =============================================================== */
#primary {
    margin-top: 0!important;
}

/* ==========================================================================
   SquidStyles — Gravity Forms Base
   --------------------------------------------------------------------------
   Style forms once; every SquidStyles site inherits it. No per-page module
   options, no max_input_vars bloat on save. Targets Gravity Forms' stable
   output classes so it works on any GF form regardless of field count.

   This variant is built for forms placed on DARK / brand-colored sections:
   labels are visually hidden (kept for screen readers) and field text comes
   from each field's Placeholder setting in the GF editor.
   ========================================================================== */

:root {
  /* --- Brand tokens: mapped to Astra Global Color Palette ---
     Set colors in Astra > Customize > Global > Colors > Global Palette.
     Slot order matches the Astra customizer labels on this skeleton:
       --ast-global-color-0  Brand
       --ast-global-color-1  Alternate Brand
       --ast-global-color-2  Headings
       --ast-global-color-3  Text
       --ast-global-color-4  Primary Background
       --ast-global-color-5  Secondary Background
       --ast-global-color-6  Alternate Background
       --ast-global-color-7  Subtle Background
       --ast-global-color-8  Other Supporting */
  --sq-form-accent:        var(--ast-global-color-8);   /* button bg */
  --sq-form-accent-hover:  var(--ast-global-color-1);   /* button hover */
  --sq-form-text:          var(--ast-global-color-3);   /* input text */
  --sq-form-muted:         var(--ast-global-color-3);   /* placeholder */
  --sq-form-field-bg:      var(--ast-global-color-4);   /* field bg */
  --sq-form-label:         var(--ast-global-color-3);   /* labels/desc */
  --sq-form-error:         #dc2626;   /* not in Astra palette — keep explicit */
  --sq-form-radius:        8px;
  --sq-form-gap:           1.25rem;
  --sq-form-font:          inherit;   /* inherits Astra body font */
}

/* --- Wrapper + layout --------------------------------------------------- */
.gform_wrapper {
  font-family: var(--sq-form-font);
  color: var(--sq-form-text);
  max-width: 640px;
}

.gform_wrapper .gform_body .gform_fields {
  display: flex;
  flex-direction: column;
  gap: var(--sq-form-gap);
}

/* --- Visually hide labels (kept for screen readers; text shown via placeholders) --- */
.gform_wrapper .gfield_label,
.gform_wrapper .ginput_complex label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Description / helper text (visible, white on dark sections) --------- */
.gform_wrapper .gfield_description,
.gform_wrapper .gsection_description {
  color: var(--sq-form-label);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

/* --- Inputs, textareas, selects ----------------------------------------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  padding: 1rem 1.1rem;
  font: inherit;
  color: var(--sq-form-text);
  background: var(--sq-form-field-bg);
  border: none;
  border-radius: var(--sq-form-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s ease;
}

.gform_wrapper textarea {
  min-height: 140px;
  resize: vertical;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: var(--sq-form-muted);
  opacity: 0.6;   /* muted look without a separate palette color, so it recolors safely */
}

/* --- Focus state (accessible, visible ring) ----------------------------- */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-form-accent) 35%, transparent);
}

/* --- Submit button (width handled by GF "Fill" setting) ----------------- */
.gform_wrapper .gform_footer {
  margin-top: var(--sq-form-gap);
}

.gform_wrapper .gform_button {
  padding: 0.75rem 1.6rem;
  font: inherit;
  font-weight: 600;
  color: #fff !important;
  background: var(--sq-form-accent) !important;
  border: none;
  border-radius: var(--sq-form-radius) !important;   /* match fields; beat GF --gf-ctrl-btn-radius */
  cursor: pointer;
  transition: background 0.15s ease;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible {
  background: var(--sq-form-accent-hover) !important;
}

.gform_wrapper .gform_button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-form-accent) 35%, transparent);
}

/* --- Validation / errors ------------------------------------------------ */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  box-shadow: 0 0 0 2px var(--sq-form-error);
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

.gform_wrapper .gform_validation_errors {
  border: 1px solid var(--sq-form-error);
  border-radius: var(--sq-form-radius);
  padding: 0.85rem 1rem;
  margin-bottom: var(--sq-form-gap);
  background: #ffffff;
  color: var(--sq-form-error);
  font-size: 0.9rem;
}

/* --- Confirmation message (after submit) -------------------------------- */
.gform_confirmation_message {
  padding: 1rem 1.25rem;
  border-radius: var(--sq-form-radius);
  background: #ffffff;
  color: var(--sq-form-text);
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gform_wrapper input,
  .gform_wrapper textarea,
  .gform_wrapper select,
  .gform_wrapper .gform_button {
    transition: none;
  }
}