/* Air Datepicker theming: override the library's documented --adp-* custom properties so the calendar
   adopts our fonts and palette. Loaded after air-datepicker.base.css. The two UI themes use different
   palettes/fonts, so each gets its own block, scoped via :has() on the active theme stylesheet link
   (only one of /css/theme1.css or /css/theme2.css is present in the head at a time). */

/* Base overrides shared by both themes: typography + structural sizing. */
.air-datepicker {
	--adp-font-size: 1.3rem;
	--adp-day-cell-height: 34px;
	--adp-month-cell-height: 44px;
	--adp-year-cell-height: 52px;
	--adp-border-radius: 8px;
	--adp-cell-border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 41, 66, 0.18);
}

/* keep the nav title (clickable month/year header) clearly actionable */
.air-datepicker-nav--title {
	font-weight: 600;
}

/* ---- Theme 2 (modern): Inter font, navy/blue palette ---- */
html:has(link[href*="theme2.css"]) .air-datepicker {
	--adp-font-family: var(--font-body, 'Inter', "Segoe UI", system-ui, sans-serif);
	--adp-color: var(--ink, #1f2d3a);
	--adp-color-secondary: var(--muted, #6b7b8a);
	--adp-accent-color: var(--blue, #1c6fb0);
	--adp-background-color: var(--card, #fff);
	--adp-border-color: var(--line, #e4e9ef);
	--adp-border-color-inner: var(--line, #e4e9ef);
	--adp-border-color-inline: var(--line, #e4e9ef);
	--adp-day-name-color: var(--blue, #1c6fb0);
	--adp-day-name-color-hover: var(--navy, #16395a);
	--adp-cell-background-color-selected: var(--navy, #16395a);
	--adp-cell-background-color-selected-hover: var(--navy-deep, #0f2942);
	--adp-cell-background-color-in-range: rgba(28, 111, 176, 0.12);
	--adp-cell-background-color-in-range-hover: rgba(28, 111, 176, 0.2);
	--adp-cell-border-color-in-range: var(--navy, #16395a);
	--adp-background-color-hover: #eef3f8;
	--adp-background-color-active: #e3ebf3;
	--adp-color-current-date: var(--teal, #1aa6a0);
	--adp-btn-color: var(--blue, #1c6fb0);
	--adp-btn-color-hover: var(--navy, #16395a);
	--adp-nav-arrow-color: var(--muted, #6b7b8a);
}

/* ---- Theme 1 (classic): arial, blauw/geel palette ---- */
html:has(link[href*="theme1.css"]) .air-datepicker {
	--adp-font-family: arial, "Segoe UI", system-ui, sans-serif;
	--adp-color: var(--zwart, #333);
	--adp-color-secondary: var(--grijs, #3a3c3f);
	--adp-accent-color: var(--blauw, #5095c0);
	--adp-border-radius: 5px;
	--adp-cell-border-radius: 5px;
	--adp-day-name-color: var(--blauw, #5095c0);
	--adp-day-name-color-hover: var(--blauw2, #1ea6d0);
	--adp-cell-background-color-selected: var(--blauw, #5095c0);
	--adp-cell-background-color-selected-hover: var(--blauw2, #1ea6d0);
	--adp-cell-background-color-in-range: rgba(80, 149, 192, 0.12);
	--adp-cell-background-color-in-range-hover: rgba(80, 149, 192, 0.22);
	--adp-cell-border-color-in-range: var(--blauw, #5095c0);
	--adp-color-current-date: var(--oranje, #ffb301);
	--adp-btn-color: var(--blauw, #5095c0);
	--adp-btn-color-hover: var(--blauw2, #1ea6d0);
}