/*
 * Gravity Forms 3.0 datepicker - calendar popup styling
 * -----------------------------------------------------
 * Deliberate design changes to the WhatSock calendar GF 3.0 introduced.
 *
 * Distinct from css/gravity-legacy.css, which exists only to restore pre-upgrade
 * appearance after the 2.10.5 -> 3.0.1 upgrade; the day-grid sizing lives there.
 * Behavioural datepicker fixes live in js/gw-datepicker.js.
 *
 * Loaded between gravity-legacy.css and gravity-bootstrap.css - see the
 * 'gravity-datepicker' registration in functions/custom.php.
 *
 * The single-row header is NOT done here. It cannot be: .yearSelector and
 * .monthSelector are <tr> siblings of the day rows inside one <table class="calendar">
 * with no <thead>/<tbody>, so any attempt to re-flow them with display overrides
 * collapses the table. It is switched on natively via the condenseYear option in
 * js/gw-datepicker.js.
 */

/* ---------------------------------------------------------------------------
 * Disabled navigation arrows
 *
 * WhatSock already sets aria-disabled="true" tabindex="-1" on these, and the
 * month handlers guard on disableNavPrevMonthBtn / disableNavNextMonthBtn, so a
 * disabled arrow does not navigate. What was left was purely cosmetic: it still
 * took a pointer cursor, changed colour on hover, took a focus ring when clicked,
 * and its glyph could be dragged over and text-selected.
 *
 * pointer-events: none also neutralises GF's .nav.prev:hover::before and
 * :focus::before colour rules, so no separate overrides are needed for those.
 * ------------------------------------------------------------------------- */
.gravity-theme .gform-datepicker-calendar .nav.disabled {
  cursor: default;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.gravity-theme .gform-datepicker-calendar select {
  padding-right: 2.4rem !important;
}

.gravity-theme .gform-datepicker-calendar .monthSelector {
  text-align: center;
}

.gravity-theme .gform-datepicker-calendar .nav {
  line-height: 1.6 !important;
}

/* ---------------------------------------------------------------------------
 * Mobile
 *
 * GF's own @media (max-width: 640px) block sets
 * `table.calendar td { height: 20px; padding: 3px }`, which matches the header
 * cells as well as day cells and would clip the 1.2rem selector. Let the header
 * row size to its content; the day grid keeps GF's compact sizing.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .gravity-theme .gform-datepicker-calendar table.calendar .monthSelector td {
    height: auto;
  }

  /* ---------------------------------------------------------------------------
 * Month / year selector
 *
 * GF sets font-size: .8125rem on the popup, but a <select> does not inherit font
 * size from its ancestors, and GF's own .gform-datepicker-calendar select rule
 * sets appearance, background and width without touching it. Selector matches
 * GF's specificity (0,2,1); this file loads after theme.min.css, so it wins.
 * ------------------------------------------------------------------------- */
  .gravity-theme .gform-datepicker-calendar select {
    font-size: 1.05rem;
  }

}

/* ---------------------------------------------------------------------------
 * Bottom-of-form date fields: open the calendar upward
 *
 * The WhatSock datepicker has no collision detection - $A.isOutOfView() exists
 * in the bundle but is never called - and GF positions the popup purely by CSS,
 * always below the input (inset-block-start: 36px inside the position:relative
 * .ginput_container_date). jQuery UI used to flip above the input automatically.
 *
 * Field 69 (Expected Delivery / Collection Date) is the last field on both
 * voucher forms, so downward opening pushes the calendar past the footer.
 * Mirror GF's 5px gap on the other side. Scoped per field: the date fields on
 * the book-* forms are mid-page, where downward is correct. If another form
 * ever puts a date field at the page bottom, add its #field_{form}_{id} here.
 * ------------------------------------------------------------------------- */
#field_5_69 .gform-datepicker-calendar,
#field_8_69 .gform-datepicker-calendar {
  inset-block-start: auto;
  inset-block-end: calc(100% + 5px);
  margin-top: 0;
}