/*
 * GNH Staff Availability Form (Form 29) - front-end styling
 * Added 2026-08-04 ahead of the Aug 5 staff training, per Teffany: staff
 * need to log in, submit their availability, and be able to come back and
 * update it later - the goal here is making that experience friendly and
 * good-looking instead of Gravity Forms' bare default look.
 *
 * Updated 2026-08-04 after Teffany sent real screenshots of the live form
 * (portal.greaternewhopefamilyservices.org/my-availability/): it actually
 * opens with an "Effective Date" field before the day list, and each day
 * shows ONLY its "I am available on ___" checkbox by default - the
 * start/end time fields are almost certainly hidden via Gravity Forms
 * conditional logic until that day's checkbox is checked. That means the
 * exact field COUNT/order ahead of Monday isn't fully known, so the
 * earlier draft's "3 fields = 1 day card" grouping trick (which assumed
 * Monday's checkbox was the very first field) has been dropped rather than
 * risk misaligned borders - every field is styled individually instead,
 * which looks clean regardless of exactly how many fields precede it or
 * whether a given day's time fields are shown or hidden.
 *
 * Selectors below use Gravity Forms' well-documented, stable markup (works
 * across the "legacy" and current default themes). Only touches Form 29
 * (#gform_wrapper_29 / #gform_29) - scoped so it can never affect any other
 * Gravity Forms form on the site. Written without being able to preview it
 * live (per the standing rule: no browser automation on the GNH portal,
 * ever - Teffany does all the clicking) - send a screenshot after deploying
 * and I'll true up anything that doesn't look right.
 */

/* ---------------------------------------------------------------------
   "My Availability" heading + first-time intro text - added 2026-08-18
   for the [gnh_my_availability] shortcode (render_my_availability_gate(),
   class-gnh-dashboard.php). These two elements sit OUTSIDE #gform_wrapper_29
   (rendered before the form itself), so they're deliberately NOT scoped
   under that selector like everything else in this file.
--------------------------------------------------------------------- */
.gnh-availability-heading {
    margin: 0 0 16px;
}

.gnh-first-availability-intro {
    margin: 0 0 20px;
}

.gnh-first-availability-intro p {
    margin: 0 0 8px;
    color: #646970;
    font-size: 14px;
    line-height: 1.5;
}

.gnh-first-availability-intro p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Card container
--------------------------------------------------------------------- */
#gform_wrapper_29 {
    max-width: 640px;
    margin: 24px auto;
    padding: 28px 32px 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#gform_wrapper_29 .gform_heading {
    margin-bottom: 20px;
    text-align: left;
}

#gform_wrapper_29 .gform_title {
    font-size: 22px;
    font-weight: 700;
    color: #1d2327;
    margin: 0 0 6px;
}

#gform_wrapper_29 .gform_description {
    font-size: 14px;
    color: #646970;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Field list / day rows
--------------------------------------------------------------------- */
#gform_wrapper_29 .gform_fields {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

#gform_wrapper_29 .gfield {
    padding: 14px 16px;
    margin: 0 0 10px;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    background: #fafbfc;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#gform_wrapper_29 .gfield:hover {
    background: #f6f9fc;
    border-color: #c8d7e6;
}

#gform_wrapper_29 .gfield_label {
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 6px;
}

/* ---------------------------------------------------------------------
   Checkbox ("available this day?") - enlarged, brand-blue accent
--------------------------------------------------------------------- */
#gform_wrapper_29 .gfield_checkbox li,
#gform_wrapper_29 ul.gfield_checkbox li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

#gform_wrapper_29 input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #2271b1;
    cursor: pointer;
    flex-shrink: 0;
}

#gform_wrapper_29 .gfield_checkbox label,
#gform_wrapper_29 ul.gfield_checkbox label {
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Time fields (start / end)
--------------------------------------------------------------------- */
#gform_wrapper_29 .ginput_container_time {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

#gform_wrapper_29 .gfield_time_hour input,
#gform_wrapper_29 .gfield_time_minute input,
#gform_wrapper_29 input.gfield_time_hour,
#gform_wrapper_29 input.gfield_time_minute {
    width: 56px;
    height: 40px;
    box-sizing: border-box;
    text-align: center;
    padding: 0 6px;
    border: 1px solid #c8ccd0;
    border-radius: 6px;
    font-size: 15px;
}

#gform_wrapper_29 .gfield_time_ampm select,
#gform_wrapper_29 select.gfield_time_ampm {
    height: 40px;
    box-sizing: border-box;
    padding: 0 28px 0 10px;
    min-width: 78px;
    line-height: 40px;
    border: 1px solid #c8ccd0;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
}

#gform_wrapper_29 input[type="text"]:focus,
#gform_wrapper_29 input[type="number"]:focus,
#gform_wrapper_29 select:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34,113,177,0.15);
}

/* ---------------------------------------------------------------------
   Effective Date field - visually distinct since it's the one field that
   isn't part of the 7-day list
--------------------------------------------------------------------- */
#gform_wrapper_29 input[type="date"],
#gform_wrapper_29 .datepicker {
    padding: 9px 10px;
    border: 1px solid #c8ccd0;
    border-radius: 6px;
    font-size: 15px;
    max-width: 220px;
}

/* ---------------------------------------------------------------------
   Additional Notes textarea
--------------------------------------------------------------------- */
#gform_wrapper_29 textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid #c8ccd0;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Validation / error styling - softer than GF's harsh default red
--------------------------------------------------------------------- */
#gform_wrapper_29 .gfield_error {
    background: #fdf0f0 !important;
    border-color: #e6a3a3 !important;
}

#gform_wrapper_29 .validation_message,
#gform_wrapper_29 .gfield_description.validation_message {
    color: #8a1f1f;
    font-size: 13px;
    margin-top: 4px;
}

#gform_wrapper_29 .gform_validation_errors,
#gform_wrapper_29 .validation_error {
    background: #fdf0f0;
    border: 1px solid #e6a3a3;
    border-radius: 8px;
    padding: 12px 16px;
    color: #8a1f1f;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   Submit button - matches the admin dashboard's brand blue
--------------------------------------------------------------------- */
#gform_wrapper_29 .gform_footer {
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
}

#gform_wrapper_29 .gform_button,
#gform_wrapper_29 input[type="submit"] {
    background: #2271b1;
    border: 1px solid #2271b1;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

#gform_wrapper_29 .gform_button:hover,
#gform_wrapper_29 input[type="submit"]:hover {
    background: #135e96;
    border-color: #135e96;
}

/* ---------------------------------------------------------------------
   Confirmation message after a successful submit/update
--------------------------------------------------------------------- */
#gform_wrapper_29 .gform_confirmation_wrapper,
.gform_confirmation_message_29 {
    background: #edfaef;
    border: 1px solid #b7e2bd;
    border-radius: 8px;
    padding: 18px 20px;
    color: #1a6630;
    font-size: 15px;
}

/* ---------------------------------------------------------------------
   Mobile - larger tap targets, no iOS auto-zoom, stacked time fields
--------------------------------------------------------------------- */
@media (max-width: 600px) {
    #gform_wrapper_29 {
        margin: 12px;
        padding: 20px 16px 24px;
        max-width: none;
    }

    #gform_wrapper_29 .gform_title {
        font-size: 19px;
    }

    #gform_wrapper_29 input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    #gform_wrapper_29 input[type="text"],
    #gform_wrapper_29 input[type="number"],
    #gform_wrapper_29 select {
        font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
    }

    #gform_wrapper_29 .gform_button,
    #gform_wrapper_29 input[type="submit"] {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }
}