/*
 * The 20 Event Calendar — front-end styles.
 *
 * IMPORTANT: every color/size value the plugin makes configurable is read
 * here via var(--t20ec-xxx, <fallback>) — the fallback is what's used if the
 * shortcode's inline :root block (see class-shortcode.php wrap_vars()) is
 * ever missing for some reason. Nothing in this file may *redeclare* one of
 * these custom properties with a hardcoded value on .t20ec-wrap or any other
 * selector — doing so would silently shadow every real Settings value for
 * every element inside it, which is exactly the bug fixed in v1.1.0 (the
 * plugin's Settings colors never had any effect on the front end because
 * .t20ec-wrap was re-declaring all of them here with fixed values).
 */

.t20ec-wrap {
	font-family: inherit;
	width: 100%;
	max-width: var(--t20ec-max-width, 100%);
	margin: 0 auto;
	box-sizing: border-box;
}

.t20ec-wrap,
.t20ec-wrap * {
	box-sizing: border-box;
}

.t20ec-card {
	width: 100%;
	background: var(--t20ec-card-bg, #ffffff);
	border-radius: var(--t20ec-card-radius, 12px);
	box-shadow: var(--t20ec-card-shadow, 0 4px 14px rgba(0, 0, 0, 0.08));
	padding: 24px;
}

/* Month header + navigation */
.t20ec-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.t20ec-card-head h3 {
	margin: 0;
	font-size: 1.15rem;
	flex: 1;
	text-align: center;
}

.t20ec-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	color: var(--t20ec-accent, #2c7a5b);
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 1;
	flex-shrink: 0;
}

.t20ec-nav-btn:hover,
.t20ec-nav-btn:focus-visible {
	background: var(--t20ec-accent, #2c7a5b);
	color: var(--t20ec-accent-text, #ffffff);
	outline: none;
}

/* Month grid */
.t20ec-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
	font-size: 0.85rem;
}

.t20ec-dow {
	font-weight: 700;
	color: #6b6560;
	padding-bottom: 6px;
	font-size: 0.72rem;
	text-transform: uppercase;
}

.t20ec-day {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	color: #3d3a36;
}

.t20ec-day.t20ec-blank {
	visibility: hidden;
}

.t20ec-day.t20ec-has-event {
	background: var(--t20ec-accent, #2c7a5b);
	color: var(--t20ec-accent-text, #ffffff);
	font-weight: 700;
	cursor: default;
}

.t20ec-day.t20ec-has-event:focus-visible {
	outline: 2px solid var(--t20ec-accent, #2c7a5b);
	outline-offset: 2px;
}

/* Tooltip — shown on hover or keyboard focus of its parent day cell.
   Desktop/tablet only (see the mobile breakpoint below, which hides the
   grid entirely in favor of the always-visible event list). */
.t20ec-tooltip {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	width: 240px;
	max-width: 60vw;
	background: var(--t20ec-tooltip-bg, #2c2a28);
	color: var(--t20ec-tooltip-text, #fefdfb);
	border-radius: 8px;
	padding: 12px 14px;
	text-align: left;
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.4;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

.t20ec-day.t20ec-has-event:hover .t20ec-tooltip,
.t20ec-day.t20ec-has-event:focus .t20ec-tooltip,
.t20ec-day.t20ec-has-event:focus-within .t20ec-tooltip {
	display: block;
}

.t20ec-tooltip-event + .t20ec-tooltip-event {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.t20ec-tooltip-event strong {
	font-size: 0.85rem;
}

.t20ec-tooltip-when {
	display: block;
	opacity: 0.75;
	font-size: 0.72rem;
	margin-top: 2px;
}

.t20ec-tooltip-event p {
	margin: 6px 0 0;
}

.t20ec-tooltip-event a {
	display: inline-block;
	margin-top: 6px;
	color: inherit;
	text-decoration: underline;
}

/* Category chip — a small colored label next to an event's title in both
   the tooltip and the list view, when that event's category has a color
   set (Event Calendar → Categories). Background comes from the category;
   the text color is computed server-side (see
   T20EC_Shortcode::readable_text_color()) to guarantee WCAG-readable
   contrast against whatever color an admin picks, without requiring them to
   also choose a matching text color by hand. */
.t20ec-category-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 9px;
	border-radius: 100px;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: middle;
	white-space: nowrap;
}

/* Event list — always rendered; the sole view on mobile, and shown
   beneath the grid on larger screens. Every color/size here is
   independently configurable (Event Calendar → Settings → List View),
   separate from the grid view's colors. */
.t20ec-event-list {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.t20ec-event-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--t20ec-list-item-bg, #f4f6f7);
	border-radius: var(--t20ec-list-item-radius, 8px);
	padding: 14px 18px;
}

.t20ec-event-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--t20ec-accent, #2c7a5b);
	margin-top: 8px;
	flex-shrink: 0;
}

.t20ec-event-item h4 {
	margin: 0 0 4px;
	color: var(--t20ec-list-title-color, #2c2a28);
	font-size: var(--t20ec-list-title-size, 1.15rem);
	line-height: 1.3;
}

.t20ec-event-item span {
	color: var(--t20ec-list-meta-color, #6b6560);
	font-size: var(--t20ec-list-meta-size, 0.9rem);
}

.t20ec-event-item span a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

.t20ec-event-item.t20ec-placeholder {
	opacity: 0.7;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	background: transparent;
}

.t20ec-event-item.t20ec-placeholder .t20ec-event-dot {
	background: #a3a3a3;
}

/* List-only mode (e.g. the homepage's "what's coming up" widget) has no
   grid or nav to begin with — just tighten the card padding slightly. */
.t20ec-list-only .t20ec-event-list {
	margin-top: 0;
}

/* Mobile: swap the visual grid for the plain, always-legible list.
   Per-cell hover tooltips depend on a mouse; a small tap-target 7-column
   grid is also harder to read/operate on a phone, so below this width the
   grid and month nav are hidden and only the event list remains. */
@media (max-width: 640px) {
	.t20ec-card-head,
	.t20ec-grid {
		display: none;
	}
	.t20ec-event-list {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------------
 * Admin-only: Settings page layout (tabs + live preview panel).
 * Scoped to .t20ec-settings-wrap so none of this reaches the front end.
 * ------------------------------------------------------------------- */
.t20ec-settings-layout {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin-top: 16px;
}

.t20ec-settings-main {
	flex: 1 1 auto;
	min-width: 0;
}

.t20ec-settings-preview {
	flex: 0 0 340px;
	position: sticky;
	top: 32px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 16px;
}

.t20ec-settings-preview h2 {
	margin-top: 0;
}

.t20ec-tab-panel[hidden] {
	display: none;
}

.t20ec-contrast-report {
	margin-top: 16px;
	border-top: 1px solid #dcdcde;
	padding-top: 12px;
}

.t20ec-contrast-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	padding: 4px 0;
}

.t20ec-contrast-badge {
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

.t20ec-contrast-badge.t20ec-pass {
	background: #d4f4dd;
	color: #0a5c2e;
}

.t20ec-contrast-badge.t20ec-fail {
	background: #f9d5d5;
	color: #7a1212;
}

@media (max-width: 900px) {
	.t20ec-settings-layout {
		flex-direction: column;
	}
	.t20ec-settings-preview {
		position: static;
		flex-basis: auto;
		width: 100%;
	}
}