/**
 * Gravity Forms datepicker -- all styling for the date field and its calendar.
 *
 * Everything the datepicker needs lives here rather than in style.css, so the
 * whole customisation can be reverted by deleting this file and the
 * eb_gform_datepicker_styles() enqueue in functions.php. Nothing else depends
 * on it, and each section below is independent of the others.
 *
 * Loaded after gforms_formsmain_css (see the enqueue's dependency), so these
 * rules win on source order rather than on an !important arms race. The one
 * !important below is only there because the rule it overrides uses it too.
 *
 * Companion JS lives at the end of js/custom.js -- it forwards a click on the
 * input to the calendar toggle button, which is a behaviour change, not a
 * style one, and is reverted separately.
 *
 * Sections:
 *   1. Calendar icon position
 *   2. Calendar popup placement
 *   3. Compact calendar sizing
 *   4. Day cell cursors
 *   5. Hidden "Press F1 for help" hint
 */


/* ------------------------------------------------------------------
   1. Calendar icon position

   The toggle button is a sibling that follows the input in the DOM, and
   .big-form forces date inputs to width:100%, so it wraps onto its own line
   below the field. Pull it inside the input's right edge instead, and pad the
   input so typed text does not run under it.
   ------------------------------------------------------------------ */

.big-form .gform_wrapper .gfield--input-type-datepicker .ginput_container_date {
	position: relative;
}

.big-form .gform_wrapper .gfield--input-type-datepicker .ginput_container_date input.gform-datepicker {
	padding-right: 34px;
	/* !important only because GF's legacy rule for this margin uses it. */
	margin-right: 0 !important;
}

.big-form .gform_wrapper .gfield--input-type-datepicker .ginput_container_date button.gform-datepicker-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	margin: 0;
}


/* ------------------------------------------------------------------
   2. Calendar popup placement

   Section 1 makes the field container a positioning context, so pin the popup
   to it explicitly. GF's legacy CSS offsets the popup by a hard-coded 2.25rem
   from the top with no horizontal anchor, which assumes a different ancestor.
   ------------------------------------------------------------------ */

.big-form .gform_wrapper .gfield--input-type-datepicker .ginput_container_date .gform-datepicker-calendar {
	inset-block-start: 100%;
	inset-inline-start: 0;
}


/* ------------------------------------------------------------------
   3. Compact calendar sizing

   GF 2.9+ ships a large calendar -- 40px circular day cells, ~380px wide, with
   the year and month selectors on two separate rows. This restores roughly the
   footprint of the old jQuery UI picker.

   The sizing is not invented: Gravity Forms already ships these exact numbers
   in legacy/css/formsmain.min.css, gated behind @media (max-width: 600px). The
   rules below promote that compact treatment to every screen width, and also
   tighten the two header rows, which GF's mobile block leaves at full size.

   Geometry only -- colours are left exactly as Gravity Forms ships them.
   ------------------------------------------------------------------ */

/* Overall footprint. */
.gform_legacy_markup_wrapper .gform-datepicker-calendar {
	font-size: 14px;
	max-width: 235px;
	padding: 8px;
}

/* Month / year header rows. */
.gform_legacy_markup_wrapper .gform-datepicker-calendar table.calendar .yearSelector td,
.gform_legacy_markup_wrapper .gform-datepicker-calendar table.calendar .monthSelector td {
	height: auto;
	padding: 1px 2px;
}

.gform_legacy_markup_wrapper .gform-datepicker-calendar select {
	font-size: 14px;
	height: auto;
	line-height: 1.3;
	min-height: 0;
	padding: 2px 4px;
	width: 100%;
}

.gform_legacy_markup_wrapper .gform-datepicker-calendar .nav.prev,
.gform_legacy_markup_wrapper .gform-datepicker-calendar .nav.next {
	font-size: 13px;
	width: 20px;
}

/* Weekday header + day grid. */
.gform_legacy_markup_wrapper .gform-datepicker-calendar table.calendar td,
.gform_legacy_markup_wrapper .gform-datepicker-calendar table.calendar th {
	font-size: 14px;
	height: 26px;
	padding: 2px;
}

.gform_legacy_markup_wrapper .gform-datepicker-calendar table.calendar td span,
.gform_legacy_markup_wrapper .gform-datepicker-calendar table.calendar th span {
	font-size: 14px;
	height: 26px;
	width: 26px;
}

/* ------------------------------------------------------------------
   4. Day cell cursors

   GF sets no cursor on day cells, so they inherit the text caret, and it gives
   disabled days `cursor: text` outright. Left unscoped so any datepicker on the
   site benefits -- these are cursor-only rules with no layout effect.
   ------------------------------------------------------------------ */

.gform-datepicker-calendar table.calendar td.day:not(.disabled),
.gform-datepicker-calendar table.calendar td.day:not(.disabled) span {
	cursor: pointer;
}

.gform-datepicker-calendar table.calendar td.day.disabled,
.gform-datepicker-calendar table.calendar td.day.disabled span,
.gform-datepicker-calendar table.calendar td.empty,
.gform-datepicker-calendar table.calendar td.empty span {
	cursor: default;
}


/* ------------------------------------------------------------------
   5. Hidden "Press F1 for help" hint

   The widget appends this line on every render. F1 is claimed by the browser,
   so the hint leads nowhere. Only the visual is removed -- the same guidance
   still reaches screen readers through the widget's live-region announcements,
   which use a separate node.

   This container is also what a per-month message would render into, but GF
   exposes no way to set one.
   ------------------------------------------------------------------ */

.gform-datepicker-calendar .monthMessage {
	display: none;
}