/**
 * Event Submission form — Participating Nonprofits checkbox field layout.
 *
 * Scoped via the `give-events-np-checkboxes` class added to the field wrapper
 * in gravityform.php. Renders the (long) nonprofit checkbox list as two
 * columns, each row laid out as [checkbox] [name] to match the design.
 */

/* Utility: hide a GF field while leaving it in the DOM so its value still
   posts. Used to hide the split-type control + percentages container when the
   form is locked to even-split-only (see gravityform.php). */
.give-events-hide {
    display: none !important;
}

/* Two-column flow. Items fill the left column top-to-bottom, then the right.
   GF 2.5+ renders .gfield_checkbox as a <div> containing <div class="gchoice">
   rows (not ul/li), so selectors are element-agnostic. */
.give-events-np-checkboxes .gfield_checkbox {
    columns: 2;
    column-gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each choice is one [checkbox][name] row that must not split across columns. */
.give-events-np-checkboxes .gfield_checkbox .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px 0;
    padding: 0;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

/* Checkbox sits on the left, vertically aligned with the first line of text. */
.give-events-np-checkboxes .gfield_checkbox .gchoice input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 3px 0 0 0;
}

/* Name to the right, wraps cleanly for long titles. */
.give-events-np-checkboxes .gfield_checkbox .gchoice label {
    flex: 1 1 auto;
    margin: 0;
    line-height: 1.35;
    font-weight: 400;
    word-break: break-word;
}

/* Collapse to a single column on narrow screens. */
@media (max-width: 640px) {
    .give-events-np-checkboxes .gfield_checkbox {
        columns: 1;
    }
}

/* ---------------------------------------------------------------------------
 * End Date picker: highlight the selected Start Date with brand orange.
 * The actual circular element is the <a class="ui-state-default"> inside the
 * day <td> (Gravity Forms gravity-theme/orbital/legacy all style it as a 40px
 * circle with their own .ui-datepicker-calendar .ui-state-default rule, which
 * has specificity (0,4,0)). We mirror that selector pattern so our rule wins,
 * and add !important to defeat the multiple layered GF theme stylesheets.
 * ------------------------------------------------------------------------- */
.gravity-theme.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default,
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default,
.gform-theme-datepicker.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default,
.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default,
.ui-datepicker td.give-events-startdate a,
.ui-datepicker td.give-events-startdate span {
    background: #E96D2C !important;
    background-color: #E96D2C !important;
    border-color: #E96D2C !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
}

.gravity-theme.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default:hover,
.gravity-theme.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default:focus,
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default:hover,
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default:focus,
.gform-theme-datepicker.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default:hover,
.gform-theme-datepicker.ui-datepicker .ui-datepicker-calendar td.give-events-startdate .ui-state-default:focus {
    background: #be612d !important;
    background-color: #be612d !important;
    border-color: #be612d !important;
    color: #fff !important;
}