/* ============================================================
   Departures widget — filter bar + one-month-per-slide carousel.

   The month grid itself (.dctd-cal*) is styled by the theme's main.css.
   This file only adds the chrome around it, namespaced .dctd-dep-*, so the
   two never fight.

   Token fallbacks are literal on purpose: the widget must still look right
   if it is dropped on a page where the theme's tokens.css is absent.
   ============================================================ */

.dctd-dep {
	--dep-ink: var(--ink1, #071B2E);
	--dep-surface: var(--atmo1, #FFFCF6);
	--dep-canvas: var(--atmo0, #F6F1E8);
	--dep-sunken: var(--atmo2, #EFE7D8);
	--dep-border: var(--sand, #D8CDBC);
	--dep-body: var(--taupe, #6F685F);
	--dep-muted: var(--stone, #B8AEA1);
	--dep-gold: var(--gold, #B88A3B);
	--dep-gold-ink: var(--gold-ink, #8A6524);
	--dep-cream: var(--cream, #F7F0E6);
	--dep-font: var(--sans, "Montserrat", "Be Vietnam Pro", Helvetica, Arial, sans-serif);
}

/* ---------- filter bar ---------- */
.dctd-dep-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 24px;
	padding: 18px 20px;
	background: var(--dep-surface);
	border: 1px solid var(--dep-border);
	font-family: var(--dep-font);
}

.dctd-dep-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 220px;
}

.dctd-dep-field label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	/* --gold-ink, not --gold-dk: at 11px with wide tracking the lighter brass
	   only reaches 3.7:1 on this ivory surface and fails WCAG AA. */
	color: var(--dep-gold-ink);
}

.dctd-dep-field select {
	width: 100%;
	max-width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--dep-border);
	border-radius: 0;
	background: var(--dep-canvas);
	color: var(--dep-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}
.dctd-dep-field select:focus-visible {
	outline: 2px solid var(--focus-ring, rgba(184, 138, 59, .5));
	outline-offset: 1px;
	border-color: var(--dep-gold);
}

.dctd-dep-reset {
	flex: 0 0 auto;
	padding: 11px 18px;
	border: 1px solid var(--dep-ink);
	background: transparent;
	color: var(--dep-ink);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s, color .25s;
}
.dctd-dep-reset:hover,
.dctd-dep-reset:focus-visible {
	background: var(--dep-ink);
	color: var(--dep-cream);
}
.dctd-dep-reset[hidden] { display: none; }

.dctd-dep-summary {
	flex: 1 1 100%;
	margin: 0;
	color: var(--dep-body);
	font-size: 13px;
}
.dctd-dep-summary:empty { display: none; }

/* ---------- carousel ---------- */
/* No .is-ready (JS did not run) → the track stays a plain vertical stack and
   every month is reachable by scrolling, exactly as before the slider
   existed. Hiding slides by default would mean a script error ships a blank
   schedule. */
.dctd-dep-viewport { overflow: hidden; }

.dctd-dep-track.is-ready {
	display: flex;
	align-items: flex-start;
	transition: transform .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
	will-change: transform;
}

.dctd-dep-slide { margin-bottom: 40px; }

.dctd-dep-track.is-ready > .dctd-dep-slide {
	flex: 0 0 100%;
	min-width: 100%;
	margin-bottom: 0;
}

/* Off-screen slides are clipped by the viewport's overflow, NOT by
   visibility:hidden. Hiding them would make the outgoing month blink out the
   instant the transform starts instead of sliding away. Keyboard focus is
   handled in JS by pulling their links out of the tab order. */

.dctd-dep-slide.is-filtered-out { display: none; }

.dctd-cal-count {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(247, 240, 230, .7);
}

/* Cells whose only departures were filtered away read as empty days. */
.dctd-cal-cell.is-filtered {
	opacity: .45;
}
.dctd-cal-ev.is-filtered-out { display: none; }

/* ---------- nav ---------- */
.dctd-dep-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 4px 0 32px;
}
.dctd-dep-nav[hidden] { display: none; }

.dctd-dep-btn {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dep-border);
	background: var(--dep-surface);
	color: var(--dep-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .25s, border-color .25s, color .25s;
}
.dctd-dep-btn:hover:not(:disabled),
.dctd-dep-btn:focus-visible:not(:disabled) {
	background: var(--dep-ink);
	border-color: var(--dep-ink);
	color: var(--dep-cream);
}
.dctd-dep-btn:disabled {
	opacity: .35;
	cursor: default;
}

.dctd-dep-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.dctd-dep-dot {
	padding: 7px 13px;
	border: 1px solid var(--dep-border);
	background: var(--dep-surface);
	color: var(--dep-body);
	font-family: var(--dep-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .25s, border-color .25s, color .25s;
}
.dctd-dep-dot:hover {
	border-color: var(--dep-gold);
	color: var(--dep-gold-ink);
}
.dctd-dep-dot[aria-selected="true"] {
	background: var(--dep-ink);
	border-color: var(--dep-ink);
	color: var(--dep-cream);
}

/* ---------- empty state ---------- */
.dctd-dep-empty {
	margin: 0 auto 32px;
	padding: 28px 24px;
	max-width: 60ch;
	background: var(--dep-sunken);
	border: 1px dashed var(--dep-border);
	color: var(--dep-body);
	font-family: var(--dep-font);
	font-size: 15px;
	text-align: center;
}
.dctd-dep-empty[hidden] { display: none; }

/* ---------- mobile ---------- */
@media (max-width: 780px) {
	.dctd-dep-filters {
		padding: 14px 16px;
		gap: 12px;
	}
	.dctd-dep-field { flex: 1 1 100%; }
	.dctd-dep-reset { width: 100%; }

	/* Month labels do not fit across a phone once there are more than three.
	   The arrows plus the month heading in the calendar head are enough. */
	.dctd-dep-dots { display: none; }
	.dctd-dep-nav { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
	.dctd-dep-track.is-ready { transition: none; }
}