/* ==========================================================================
   FORMS MODULE
   --------------------------------------------------------------------------
   Purpose:
   - Styles BuddyBoss registration forms and Gravity Forms used across the site
   - Provides consistent spacing, readability, and layout for form fields,
     subheadings, instruction blocks, and page-level wrappers
   - Ensures forms remain accessible, centered, and visually aligned with the
     broader design system

   Exclusions:
   - No directory styling (belongs in directory.css)
   - No profile snapshot styling (belongs in snapshots.css)
   - No Luminary profile UI (belongs in luminary.css)
   - No BuddyBoss navigation or layout overrides (belongs in buddyboss-overrides.css)

   Related JS:
   - gravityforms.js (validation, conditional logic)
   - registration.js (BuddyBoss registration enhancements)

   Sections:
   1. BuddyBoss Registration Form
   2. Gravity Forms Subheadings
   3. Instruction Box Styling
   4. Form Width + Centering
   5. Page-Level Form Wrappers
   6. Bullet List Spacing
   7. Footer + Button Spacing
   8. Select Field Normalization
   ========================================================================== */



/* Styling for Buddyboss registration page description text */
.custom-description {
  font-size: 0.9em;
  color: #555;
  margin-top: 6px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.custom-description strong {
  color: #222;
}


/* ==========================================================================
   CSS styling for subheaders html section blocks in gravityform
   ========================================================================== */
.gform_wrapper .form-subheading {
  font-size: 1.1em;
  margin: 1.2em 0 0.5em;
  font-weight: 600;
  color: #333;
}
.gform_wrapper .form-subheading + p {
  margin-bottom: 1em;
  color: #555;
}


/* ==========================================================================
   CSS to Style the Box around instruction block in gravityform
   ========================================================================== */
/* Container around your instruction block */
.gform_wrapper .instruction-box .instruction-content {
  background-color: #f5f8fa;        /* light gray-blue background */
  border-left: 4px solid #0073e6;   /* accent border in your brand color */
  padding: 1em 1.5em;               /* space inside the box */
  margin-bottom: 0.5em;             /* space below before the field */
  border-radius: 4px;               /* soften the corners */
  color: #333;                      /* ensure good readability */
  max-width: 600px;                 /* limit line length for readability */
  margin: 0 auto 0.5em;
  padding-left: 1em;
  padding-right: 1em;
}


/* Limit line length for readability  */
.classification-group .gfield_description {
  max-width: 600px;
  margin: 0.3em auto 1em;
}


/* ==========================================================================
   shorten the width of your form fields and center the entire form on the page
   ========================================================================== */
#gform_wrapper_1, #gform_wrapper_3 {
    max-width: 700px;
    margin: 0 auto;
}

#gform_wrapper_1 .gform_body ul.gform_fields li.gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]),
#gform_wrapper_3 .gform_body ul.gform_fields li.gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]),
#gform_wrapper_1 .gform_body ul.gform_fields li.gfield select,
#gform_wrapper_3 .gform_body ul.gform_fields li.gfield select,
#gform_wrapper_1 .gform_body ul.gform_fields li.gfield textarea,
#gform_wrapper_3 .gform_body ul.gform_fields li.gfield textarea {
    width: 100%;
}

/* ==========================================================================
   Center the page’s H1 on the first page of Gravityform listing
   ========================================================================== */
.page-id-101675 .entry-header,
.page-id-103208 .entry-header,
.page-id-103496 .entry-header {
  text-align: center;
}

.page-id-103208 .entry-header .entry-title,
.page-id-103496 .entry-header .entry-title,
.page-id-101675 .entry-header .entry-title {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
}

/* Wrap the entire form in a soft background */
.page-id-103208 #gform_wrapper_1,
.page-id-103496 #gform_wrapper_3,
.page-id-101675 #gform_wrapper_1 {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 1.5em;
  border-radius: 6px;
}

/* ==========================================================================
   Fix spacing for bullet points inside instruction block for description field
   ========================================================================== */
.gform_wrapper .instruction-box ul {
    list-style-position: inside; /* Positions the bullet inside the list item box */
    padding-left: 15px; /* Adds space between the border and the bullet */
    margin-left: 0;
}


/* ==========================================================================
   Add space above form buttons and under consent field
   ========================================================================== */
#gform_wrapper_1 .gform-page-footer,
#gform_wrapper_3 .gform-page-footer {
    margin-top: 50px !important; /* Adjust this value as needed to increase space */
}

/* ==========================================================================
   Target all GF selects, or scope to your form ID
   ========================================================================== */
#gform_wrapper_1 .gform_body select,
#gform_wrapper_3 .gform_body select,
.gform_wrapper select {
  /* Make sure the line-height is at least as tall as your font */
  line-height: 1.4;    /* tweak up or down until the text no longer cuts off */
  
  /* Give the select some vertical padding so Chrome expands it taller */
  padding: 0.5em 0.75em;  

  /* Force a minimum height to guarantee room for your placeholder text */
  min-height: 2.75em;    /* ~44px; adjust if your theme’s font-size is different */
}

/* Optional: if your theme is shrinking the <option> text itself, reset it */
#gform_wrapper_1 .gform_body select option,
#gform_wrapper_3 .gform_body select option {
  line-height: 1.4;
}