/* =========================================================
   Entangle Events — "Add to calendar" dropdown
   BEM: entangle-calendar-dropdown__{toggle,icon,menu,item}

   Theme integration
   -----------------
   Fonts and text sizes inherit from the surrounding theme. Colors, radii
   and rules resolve through the --ee-* tokens below, which bridge to the
   Entangle Base theme tokens first (--color-brand, --color-bg-alt, ...),
   then to the legacy Tailwind theme tokens (--color-primary,
   --color-contrast, ...), and finally to neutral hard-coded fallbacks —
   so the component renders the same everywhere, themed or not.

   The toggle carries the .wp-element-button class: block themes style it
   from theme.json / their button CSS. Our own toggle styling is wrapped
   in :where() (zero specificity), so any theme button style wins and the
   rules below only apply as a fallback.
   ========================================================= */

.entangle-calendar-dropdown {
	/* accent = brand color of the theme */
	--ee-accent: var(--color-brand, var(--color-primary, #1a1a1a));
	--ee-accent-deep: var(--color-brand-deep, var(--ee-accent));
	--ee-on-accent: var(--color-on-brand, #fff);
	/* surfaces & text */
	--ee-surface: var(--color-bg-alt, var(--color-contrast, #fff));
	--ee-ink: var(--color-ink, var(--color-base, #222));
	--ee-rule: var(--color-rule, rgba(0, 0, 0, 0.14));
	--ee-hover: color-mix(in srgb, var(--ee-accent) 10%, transparent);
	/* shape */
	--ee-radius: var(--radius-media, var(--border-radius, 8px));

	position: relative;
	display: inline-block;
}

/* ---- Toggle button — fallback only (theme .wp-element-button wins) ---- */
:where(.entangle-calendar-dropdown__toggle) {
	display: inline-flex;
	align-items: center;
	gap: 0.625em;
	padding: 0.8125em 1.375em;
	background: var(--ee-accent);
	color: var(--ee-on-accent);
	border: 1px solid var(--ee-accent);
	border-radius: var(--ee-radius);
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

:where(.entangle-calendar-dropdown__toggle):hover,
:where(.entangle-calendar-dropdown__toggle):focus-visible {
	background: var(--ee-accent-deep);
}

/* Layout of the icon inside the toggle (applies with themed buttons too). */
.entangle-calendar-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.625em;
	cursor: pointer;
}

.entangle-calendar-dropdown__icon {
	width: 1.125em;
	height: 1.125em;
	flex: 0 0 auto;
}

/* ---- Dropdown menu ---- */
.entangle-calendar-dropdown__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	min-width: 260px;
	padding: 0.375rem;
	background: var(--ee-surface);
	color: var(--ee-ink);
	border: 1px solid var(--ee-rule);
	border-radius: var(--ee-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.entangle-calendar-dropdown__menu[hidden] {
	display: none;
}

.entangle-calendar-dropdown__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.875rem;
	border: 0;
	border-radius: calc(var(--ee-radius) * 0.5);
	background: transparent;
	background-image: none;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
	font-size: 0.9375em;
	line-height: 1.3;
	transition: background-color 180ms ease, color 180ms ease;
}

.entangle-calendar-dropdown__item::after {
	content: "\2192"; /* → */
	margin-left: auto;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.entangle-calendar-dropdown__item:hover,
.entangle-calendar-dropdown__item:focus-visible {
	background-color: var(--ee-hover);
	color: var(--ee-accent);
	text-decoration: none;
}

.entangle-calendar-dropdown__item:hover::after,
.entangle-calendar-dropdown__item:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* ---- Single event meta line (date / time / venue) ---- */
.entangle-event-meta {
	--ee-accent: var(--color-brand, var(--color-primary, #1a1a1a));
	--ee-accent-deep: var(--color-brand-deep, var(--ee-accent));
	--ee-muted: var(--color-ink-soft, var(--color-neutral-500, #6b6b6b));
	--ee-rule: var(--color-rule, rgba(0, 0, 0, 0.14));

	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-bottom: clamp(20px, 2.5vw, 32px);
	padding-bottom: clamp(12px, 1.5vw, 18px);
	border-bottom: 1px solid var(--ee-rule);
	color: var(--ee-muted);
	font-size: 0.95em;
}

.entangle-event-meta__date {
	font-weight: 600;
	color: var(--ee-accent-deep);
}

.entangle-event-meta__place a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entangle-event-meta__place a:hover,
.entangle-event-meta__place a:focus-visible {
	color: var(--ee-accent);
}

/* Fallback for browsers without color-mix() */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.entangle-calendar-dropdown__item:hover,
	.entangle-calendar-dropdown__item:focus-visible {
		background-color: rgba(0, 0, 0, 0.06);
	}
}