/**
 * DKD Horizon — Modal window styles (Block "Modal window" setting).
 * Enqueued on demand when a page renders a modal (see inc/modal-link.php).
 */

html.dkd-modal-open,
html.dkd-modal-open body {
	overflow: hidden;
	height: 100%;
}

.dkd-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --wp--preset--spacing--20, 1rem );
}

.dkd-modal[hidden] {
	display: none;
}

.dkd-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba( 0, 0, 0, 0.82 );
}

.dkd-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: min( 90vh, 720px );
	overflow-y: auto;
	background-color: var( --wp--preset--color--base, #000 );
	color: var( --wp--preset--color--contrast, #fff );
	border: 1px solid var( --wp--preset--color--border-light, #f5f5f5 );
	border-radius: 20px;
	padding: var( --wp--preset--spacing--50, 3rem ) var( --wp--preset--spacing--40, 2rem ) var( --wp--preset--spacing--40, 2rem );
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.5 );
}

.dkd-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: transparent;
	color: var( --wp--preset--color--contrast, #fff );
	border: 1px solid var( --wp--preset--color--border-light, #f5f5f5 );
	border-radius: 999px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dkd-modal__close:hover,
.dkd-modal__close:focus-visible {
	background-color: var( --wp--preset--color--contrast, #fff );
	color: var( --wp--preset--color--base, #000 );
}

.dkd-modal__title {
	margin-top: 0;
	text-align: center;
}

.dkd-modal__intro {
	text-align: center;
	margin-bottom: var( --wp--preset--spacing--30, 1.5rem );
}

.dkd-modal__intro a {
	color: inherit;
}

.dkd-modal__notice {
	text-align: center;
	color: var( --wp--preset--color--accent-light, #ff4d57 );
}

/* Baseline legibility for third-party shortcode form markup (e.g. Contact Form 7).
 *
 * Listing input types individually is a trap: every type NOT named here falls
 * through to the browser default, which is a white box. `date` was missing and
 * rendered light. Match every text-ish input by EXCLUSION instead, so a field
 * type we have not thought of inherits the dark treatment rather than escaping
 * it. Checkbox/radio/submit are excluded because they are styled separately
 * below; hidden has no box to style. */
.dkd-modal__form input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']):not([type='file']),
.dkd-modal__form select,
.dkd-modal__form textarea {
	width: 100%;
	background-color: var( --wp--preset--color--surface, #121212 );
	color: var( --wp--preset--color--contrast, #fff );
	border: 1px solid var( --wp--preset--color--border-light, #f5f5f5 );
	border-radius: 8px;
	padding: 0.65em 0.85em;
	margin-bottom: 1em;
	font-family: inherit;
	font-size: 1rem;
}

.dkd-modal__form label {
	display: block;
	margin-bottom: 0.35em;
}

/* Multi-selects (the Availability weekday lists) render as an open list box,
 * not a dropdown. The <option> children do NOT inherit the select's background
 * in Chrome or Safari — they fall back to the UA's white list background, which
 * is why those three fields appeared as white blocks on an otherwise black
 * dialog. They must be colored explicitly.
 *
 * `size` is set to 7 by Gravity Forms, so the box is already the right height;
 * only the colors need correcting. */
.dkd-modal__form select[multiple],
.dkd-modal__form select[size] {
	padding: 0.5em 0.35em;
	height: auto;
}

.dkd-modal__form select option {
	background-color: var( --wp--preset--color--surface, #121212 );
	color: var( --wp--preset--color--contrast, #fff );
	padding: 0.25em 0.5em;
}

/* Selected options: theme red rather than the UA's system highlight, which is
 * a blue that belongs to no part of this design. `checked` is what actually
 * matches a selected option in a list box. */
.dkd-modal__form select option:checked {
	background: var( --wp--preset--color--accent, #d02028 ) linear-gradient( 0deg, var( --wp--preset--color--accent, #d02028 ) 0%, var( --wp--preset--color--accent, #d02028 ) 100% );
	color: #fff;
}

/* Focus ring: WHITE, deliberately not the accent.
 *
 * This used to be `--wp--preset--color--accent` (#d02028) — the same red as
 * the .gfield_error border below. The result was that simply typing in a valid
 * field made it look like it had failed validation, with no way to tell the
 * two states apart. Red now means one thing on this form: error.
 *
 * White measures 18.73:1 on the #121212 input surface, well past the 3:1 that
 * WCAG 2.2 requires for a non-text focus indicator. */
.dkd-modal__form input:focus-visible,
.dkd-modal__form select:focus-visible,
.dkd-modal__form textarea:focus-visible {
	outline: 2px solid var( --wp--preset--color--contrast, #fff );
	outline-offset: 1px;
}

/* A focused field that IS in error keeps the red border and takes a red ring,
   so the error state stays visible while focused rather than being masked by
   the white ring. */
.dkd-modal__form .gfield_error input:focus-visible,
.dkd-modal__form .gfield_error select:focus-visible,
.dkd-modal__form .gfield_error textarea:focus-visible {
	outline-color: var( --wp--preset--color--accent-light, #ff4d57 );
}

.dkd-modal__form input[type='submit'],
.dkd-modal__form button[type='submit'] {
	background-color: var( --wp--preset--color--accent, #d02028 );
	color: #fff;
	border: 1px solid var( --wp--preset--color--accent, #d02028 );
	border-radius: 999px;
	padding: 0.75em 2em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.dkd-modal__form input[type='submit']:hover,
.dkd-modal__form button[type='submit']:hover {
	background-color: transparent;
	color: var( --wp--preset--color--accent-light, #ff4d57 );
}

/* -----------------------------------------------------------------------
 * Gravity Forms inside the modal — dark-theme fixes
 * ----------------------------------------------------------------------- */

/* Retheme Gravity Forms at the VARIABLE level, not selector by selector.
 *
 * GF 2.10's Orbital theme is built for a LIGHT background and hardcodes dark
 * ink into its own custom properties:
 *
 *     --gf-ctrl-label-color-primary  -> --gf-color-out-ctrl-dark-darker -> #112337
 *     --gf-ctrl-desc-color           -> --gf-color-out-ctrl-dark        -> #585e6a
 *
 * Measured against the #000 dialog, those are 1.32:1 and 3.22:1. The first is
 * not "hard to read", it is invisible; both fail WCAG AA for body text. Our
 * own `.gfield_label` rule below set font-weight but never color, so GF's
 * value won by default. White labels measure 21:1, the muted grey 11.25:1.
 *
 * Overriding the four INPUT variables here is what makes every control follow
 * the dark theme, including the ones our attribute selectors miss entirely:
 * `select[multiple]` and `input[type="date"]` were never matched by the
 * `input[type='text'], ... , select` list further up, which is why the
 * weekday multi-selects rendered as white boxes.
 *
 * Scoped to the dialog so a Gravity form placed on an ordinary light page is
 * unaffected. */
.dkd-modal__dialog .gform_wrapper,
.dkd-modal__dialog .gform-theme,
.dkd-modal__form {
	/* Text and labels */
	--gf-color-out-ctrl-dark-darker: var( --wp--preset--color--contrast, #fff );
	--gf-color-out-ctrl-dark: #b9bec7;
	--gf-ctrl-label-color-primary: var( --wp--preset--color--contrast, #fff );
	--gf-ctrl-label-color-secondary: var( --wp--preset--color--contrast, #fff );
	--gf-ctrl-label-color-tertiary: #b9bec7;
	--gf-ctrl-label-color-quaternary: #b9bec7;
	--gf-ctrl-desc-color: #b9bec7;
	--gf-ctrl-color: var( --wp--preset--color--contrast, #fff );

	/* Control surfaces */
	--gf-color-in-ctrl: var( --wp--preset--color--surface, #121212 );
	--gf-color-in-ctrl-contrast: var( --wp--preset--color--contrast, #fff );
	--gf-ctrl-bg-color: var( --wp--preset--color--surface, #121212 );
	--gf-ctrl-border-color: var( --wp--preset--color--border-light, #f5f5f5 );

	/* Required marker and validation, in the theme's red rather than GF's */
	--gf-ctrl-label-color-req: var( --wp--preset--color--accent-light, #ff4d57 );
	--gf-color-danger: var( --wp--preset--color--accent-light, #ff4d57 );
}

/* Predictable sizing: keep 100%-width fields (padding + border included)
   inside the dialog instead of overflowing its right edge. */
.dkd-modal__dialog *,
.dkd-modal__dialog *::before,
.dkd-modal__dialog *::after,
#ui-datepicker-div,
#ui-datepicker-div * {
	box-sizing: border-box;
}

/* Never show the anti-spam honeypot field to visitors. */
.dkd-modal__form .gform_validation_container,
.dkd-modal__form .gfield--type-honeypot {
	display: none !important;
	position: absolute !important;
	left: -9999px;
}

/* GF renders checkbox/radio groups and complex fields as fieldsets: strip
   the default browser "boxed" look and style the legend as a field label. */
.dkd-modal__form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.25em;
	min-width: 0;
}

.dkd-modal__form fieldset legend,
.dkd-modal__form .gfield_label,
.dkd-modal__form .gform-field-label {
	display: block;
	padding: 0;
	margin-bottom: 0.35em;
	float: none;
	width: auto;
	font-weight: 600;
	/* GF's own rule is `.gform-field-label{color:var(--gf-local-color)}`, and it
	   sets --gf-local-color inline in the same declaration, so retheming the
	   upstream variables is not enough on its own — state the color here too.
	   Approved design (Flywheel) shows white labels on black. */
	color: var( --wp--preset--color--contrast, #fff );
}

/* Inline choice labels (checkbox/radio text) and sub-labels under complex
   fields go through the same GF variable, so they need the same treatment. */
.dkd-modal__form .gform-field-label--type-inline {
	color: var( --wp--preset--color--contrast, #fff );
	font-weight: 400;
}

.dkd-modal__form .gform-field-label--type-sub {
	color: #b9bec7;
	font-weight: 400;
}

/* The required asterisk, in the theme's red rather than GF's danger color. */
.dkd-modal__form .gfield_required,
.dkd-modal__form .gfield_required .gfield_required--text {
	color: var( --wp--preset--color--accent-light, #ff4d57 );
}

/* Field spacing. */
.dkd-modal__form .gform_fields {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dkd-modal__form .gfield {
	margin-bottom: 1.25em;
}

/* Checkboxes / radios: native size, on one line with their label, theme
   accent color. */
.dkd-modal__form .gfield_checkbox .gchoice,
.dkd-modal__form .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin-bottom: 0.5em;
}

.dkd-modal__form input[type='checkbox'],
.dkd-modal__form input[type='radio'] {
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var( --wp--preset--color--accent, #d02028 );
}

.dkd-modal__form .gfield_checkbox label,
.dkd-modal__form .gfield_radio label {
	display: inline;
	margin: 0;
	font-weight: 400;
}

/* Availability weekday grids (Lunch / Dinner / Closing).
 *
 * These three fields were `multiselect` until 2026-08-20. A native
 * `<select multiple>` needs cmd/ctrl-click to pick more than one option — a
 * modifier key applicants do not know about and cannot discover, with no
 * affordance on screen, and close to unusable on touch. An applicant who wants
 * Mon+Wed+Fri lunches selects one day and moves on, so the entry understates
 * their availability and nothing looks broken.
 *
 * Checkboxes carry the same data with no hidden interaction, and match what
 * this same form already does for Location and Position Desired.
 *
 * Seven stacked rows x3 fields would add a lot of scroll to a dialog that
 * already scrolls, so the days wrap into a grid. `auto-fill` with a min track
 * gives 3-4 per row on the narrow modal and collapses to 2 on small phones
 * without a media query. */
.dkd-modal__form .dkd-day-grid .gfield_checkbox {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 5.5rem, 1fr ) );
	gap: 0.15em 0.75em;
}

/* The flex row from .gchoice above still applies to each cell; only the
   stacking margin needs clearing now that the grid owns the spacing. */
.dkd-modal__form .dkd-day-grid .gfield_checkbox .gchoice {
	margin-bottom: 0;
}

/* Helper/description text: smaller and muted, so it reads as a hint rather
   than another label. */
.dkd-modal__form .gfield_description,
.dkd-modal__form .gform-field-label--type-sub,
.dkd-modal__form .instruction {
	font-size: 0.85rem;
	margin-top: 0.3em;
	/* An explicit muted grey rather than `opacity`, because GF resolves
	   --gf-ctrl-desc-color to #585e6a, which measures 3.22:1 on black and
	   fails AA for body text. #b9bec7 measures 11.25:1 (AAA) while still
	   reading as secondary next to the white labels. */
	color: #b9bec7;
}

/* Validation/error messages in the theme's accent red. */
.dkd-modal__form .gfield_validation_message,
.dkd-modal__form .validation_message,
.dkd-modal__form .gform_submission_error,
.dkd-modal__form .gfield_error .gfield_label {
	color: var( --wp--preset--color--accent-light, #ff4d57 );
}

.dkd-modal__form .gfield_validation_message,
.dkd-modal__form .validation_message {
	font-size: 0.85rem;
	margin-top: 0.3em;
}

.dkd-modal__form .gfield_error input,
.dkd-modal__form .gfield_error select,
.dkd-modal__form .gfield_error textarea {
	border-color: var( --wp--preset--color--accent, #d02028 );
}

/* Date field: keep the calendar trigger inside the input, on the right. */
.dkd-modal__form .ginput_container_date {
	position: relative;
}

.dkd-modal__form .ginput_container_date input {
	padding-right: 2.75em;
	margin-bottom: 0;
}

.dkd-modal__form .ui-datepicker-trigger,
.dkd-modal__form .gform-datepicker-icon {
	position: absolute;
	top: 50%;
	right: 0.9em;
	transform: translateY( -50% );
	width: 1.3em;
	height: 1.3em;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	display: inline-block;
	cursor: pointer;
	filter: invert( 1 );
}

/* GF spinner/ajax artifacts on dark background. */
.dkd-modal__form .gform_ajax_spinner {
	filter: invert( 1 );
}

/* Confirmation message after successful submit. */
.dkd-modal__form .gform_confirmation_message {
	text-align: center;
	padding: var( --wp--preset--spacing--30, 1.5rem ) 0;
}

/* -----------------------------------------------------------------------
 * jQuery UI datepicker popup (Gravity Forms date fields) — full dark-theme
 * styling, since the jQuery UI theme stylesheet is not loaded.
 * ----------------------------------------------------------------------- */

#ui-datepicker-div {
	display: none;
	position: absolute;
	z-index: 100001 !important;
	width: 21rem;
	max-width: calc( 100vw - 2rem );
	padding: 1rem;
	background-color: var( --wp--preset--color--surface, #121212 );
	color: var( --wp--preset--color--contrast, #fff );
	border: 1px solid var( --wp--preset--color--border-light, #f5f5f5 );
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.6 );
	font-size: 0.95rem;
}

#ui-datepicker-div .ui-datepicker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
	min-width: 0;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	flex: 0 1 auto;
	min-width: 0;
	padding: 0.2em 0.55em;
	border: 1px solid var( --wp--preset--color--border-light, #f5f5f5 );
	border-radius: 999px;
	color: inherit;
	font-size: 0.75rem;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ui-datepicker-div .ui-datepicker-prev {
	order: 1;
}

#ui-datepicker-div .ui-datepicker-title {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
	gap: 0.3rem;
}

#ui-datepicker-div .ui-datepicker-next {
	order: 3;
}

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
	border-color: var( --wp--preset--color--accent, #d02028 );
	color: var( --wp--preset--color--accent-light, #ff4d57 );
}

#ui-datepicker-div .ui-datepicker-title select {
	background-color: var( --wp--preset--color--base, #000 );
	color: var( --wp--preset--color--contrast, #fff );
	border: 1px solid var( --wp--preset--color--border-light, #f5f5f5 );
	border-radius: 6px;
	padding: 0.2em 0.3em;
	font-family: inherit;
	font-size: 0.8rem;
	flex: 0 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
}

#ui-datepicker-div table.ui-datepicker-calendar {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

#ui-datepicker-div .ui-datepicker-calendar th {
	padding: 0.3em 0;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
	text-align: center;
}

#ui-datepicker-div .ui-datepicker-calendar td {
	padding: 2px;
	text-align: center;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
	display: block;
	padding: 0.35em 0;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
}

#ui-datepicker-div .ui-datepicker-calendar td a:hover {
	background-color: var( --wp--preset--color--accent, #d02028 );
	color: #fff;
}

#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-today a,
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-today span {
	border: 1px solid var( --wp--preset--color--border-light, #f5f5f5 );
}

#ui-datepicker-div .ui-datepicker-calendar .ui-state-active {
	background-color: var( --wp--preset--color--accent, #d02028 );
	color: #fff;
}

#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-unselectable,
#ui-datepicker-div .ui-datepicker-calendar .ui-state-disabled {
	opacity: 0.35;
}

@media ( max-width: 480px ) {
	.dkd-modal__dialog {
		padding: var( --wp--preset--spacing--40, 2rem ) var( --wp--preset--spacing--20, 1rem ) var( --wp--preset--spacing--30, 1.5rem );
		border-radius: 14px;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.dkd-modal__dialog {
		animation: dkd-modal-in 0.18s ease-out;
	}
}

@keyframes dkd-modal-in {
	from {
		opacity: 0;
		transform: translateY( 8px ) scale( 0.98 );
	}
	to {
		opacity: 1;
		transform: none;
	}
}