/**
 * Emmaus Theme
 * Module: Mass Timings
 * File: assets/css/modules/mass-timings.css
 *
 * ----------------------------------------------------------
 * Styles for the Mass Timings module.
 *
 * Responsibilities:
 * - Module layout
 * - Schedule cards
 * - Typography
 * - Badges
 * - Responsive behavior
 * - Accessibility
 *
 * @package Emmaus_Theme
 * @since 1.0.0
 * ----------------------------------------------------------
 */

/* ==========================================================
   Section 1 - Design Tokens
   ========================================================== */

:root {

	/* Colors */
	--emmaus-mass-bg: #ffffff;
	--emmaus-mass-surface: #f8fafc;
	--emmaus-mass-border: #dbe4ee;

	--emmaus-mass-text: #1f2937;
	--emmaus-mass-text-light: #6b7280;

	--emmaus-mass-primary: #1d4ed8;
	--emmaus-mass-primary-light: #dbeafe;

	--emmaus-mass-success: #15803d;
	--emmaus-mass-success-bg: #dcfce7;

	/* Radius */
	--emmaus-radius-sm: 6px;
	--emmaus-radius-md: 10px;
	--emmaus-radius-lg: 14px;

	/* Shadows */
	--emmaus-shadow-sm:
		0 1px 2px rgba(0, 0, 0, 0.05);

	--emmaus-shadow-md:
		0 4px 12px rgba(0, 0, 0, 0.08);

	/* Spacing */
	--emmaus-space-xs: 0.25rem;
	--emmaus-space-sm: 0.5rem;
	--emmaus-space-md: 1rem;
	--emmaus-space-lg: 1.5rem;
	--emmaus-space-xl: 2rem;

	/* Typography */
	--emmaus-font-size-sm: 0.875rem;
	--emmaus-font-size-base: 1rem;
	--emmaus-font-size-lg: 1.125rem;
	--emmaus-font-size-xl: 1.5rem;

	--emmaus-line-height: 1.6;

	/* Animation */
	--emmaus-transition:
		0.25s ease-in-out;
}

/* Ensure predictable sizing */

.emmaus-mass-timings,
.emmaus-mass-timings * {

	box-sizing: border-box;
}

/* ==========================================================
   Section 2 - Main Wrapper
   ========================================================== */

.emmaus-mass-timings {

	width: 100%;
	max-width: 100%;

	display: flex;
	flex-direction: column;
	gap: var(--emmaus-space-lg);

	padding: var(--emmaus-space-lg);

	background: var(--emmaus-mass-bg);
	border: 1px solid var(--emmaus-mass-border);
	border-radius: var(--emmaus-radius-lg);

	box-shadow: var(--emmaus-shadow-sm);

	color: var(--emmaus-mass-text);

	line-height: var(--emmaus-line-height);

	overflow: hidden;
}

/*
 * Optional modifier for an empty result.
 */

.emmaus-mass-timings--empty {

	justify-content: center;
	align-items: center;

	min-height: 180px;
}

/*
 * Ensure all direct children occupy full width.
 */

.emmaus-mass-timings > * {

	width: 100%;
}

/*
 * Normalize spacing for paragraphs inside
 * the module only.
 */

.emmaus-mass-timings p {

	margin: 0;
	color: inherit;
	line-height: inherit;
}

/*
 * Normalize headings.
 */

.emmaus-mass-timings h1,
.emmaus-mass-timings h2,
.emmaus-mass-timings h3,
.emmaus-mass-timings h4,
.emmaus-mass-timings h5,
.emmaus-mass-timings h6 {

	margin: 0;
	font-weight: 600;
	color: inherit;
	line-height: 1.3;
}

/*
 * Links inside the module.
 */

.emmaus-mass-timings a {

	color: var(--emmaus-mass-primary);

	text-decoration: none;

	transition:
		color var(--emmaus-transition);
}

.emmaus-mass-timings a:hover,
.emmaus-mass-timings a:focus-visible {

	color: var(--emmaus-mass-success);

	text-decoration: underline;
}

/*
 * Smooth transition for interactive elements.
 */

.emmaus-mass-timings *,
.emmaus-mass-timings *::before,
.emmaus-mass-timings *::after {

	transition:

		background-color var(--emmaus-transition),
		border-color var(--emmaus-transition),
		color var(--emmaus-transition),
		box-shadow var(--emmaus-transition);
}

/* ==========================================================
   Section 3 - Header & Title
   ========================================================== */

.emmaus-mass-timings__header {

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--emmaus-space-md);

	padding-bottom: var(--emmaus-space-md);

	border-bottom: 1px solid var(--emmaus-mass-border);
}

/*
 * Main section title.
 */

.emmaus-mass-timings__title {

	position: relative;

	margin: 0;
	padding-left: var(--emmaus-space-md);

	font-size: var(--emmaus-font-size-xl);
	font-weight: 700;
	line-height: 1.3;

	color: var(--emmaus-mass-text);

	overflow-wrap: anywhere;
}

/*
 * Decorative accent bar.
 */

.emmaus-mass-timings__title::before {

	content: "";

	position: absolute;
	top: 0.15em;
	bottom: 0.15em;
	left: 0;

	width: 4px;

	background: var(--emmaus-mass-primary);
	border-radius: var(--emmaus-radius-sm);
}

/*
 * Optional supporting text inside the header.
 */

.emmaus-mass-timings__subtitle {

	margin: 0;

	font-size: var(--emmaus-font-size-sm);
	font-weight: 400;
	line-height: 1.5;

	color: var(--emmaus-mass-text-light);

	overflow-wrap: anywhere;
}

/*
 * Header content grouping.
 */

.emmaus-mass-timings__heading-group {

	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--emmaus-space-xs);

	min-width: 0;
}

/*
 * Optional actions container.
 */

.emmaus-mass-timings__header-actions {

	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	gap: var(--emmaus-space-sm);
}

/*
 * Prevent long action text from breaking the layout.
 */

.emmaus-mass-timings__header-actions > * {

	max-width: 100%;
}

/* ==========================================================
   Section 4 - Schedule List Layout
   ========================================================== */

.emmaus-mass-timings__list {

	display: grid;
	grid-template-columns: 1fr;
	gap: var(--emmaus-space-md);

	margin: 0;
	padding: 0;

	list-style: none;
}

/*
 * Each schedule item.
 */

.emmaus-mass-timings__item {

	display: grid;
	grid-template-columns: 120px 1fr auto;
	align-items: center;
	gap: var(--emmaus-space-md);

	padding: var(--emmaus-space-md);

	background: var(--emmaus-mass-surface);

	border: 1px solid var(--emmaus-mass-border);
	border-radius: var(--emmaus-radius-md);

	box-shadow: var(--emmaus-shadow-sm);
}

/*
 * Hover and keyboard focus.
 */

.emmaus-mass-timings__item:hover {

	border-color: var(--emmaus-mass-primary);

	box-shadow: var(--emmaus-shadow-md);

	transform: translateY(-1px);
}

.emmaus-mass-timings__item:focus-within {

	border-color: var(--emmaus-mass-primary);

	box-shadow:
		0 0 0 3px rgba(29, 78, 216, 0.15),
		var(--emmaus-shadow-md);
}

/*
 * Left column (Day)
 */

.emmaus-mass-timings__day {

	font-size: var(--emmaus-font-size-base);
	font-weight: 700;

	color: var(--emmaus-mass-primary);

	word-break: break-word;
}

/*
 * Middle column (Details)
 */

.emmaus-mass-timings__details {

	display: flex;
	flex-direction: column;
	gap: var(--emmaus-space-xs);

	min-width: 0;
}

/*
 * Right column (Badge / Language)
 */

.emmaus-mass-timings__meta {

	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--emmaus-space-sm);

	min-width: 0;
}

/*
 * Divider between items when rendered
 * inside a plain list.
 */

.emmaus-mass-timings__list > * + * {

	margin-top: 0;
}

/*
 * Active schedule.
 */

.emmaus-mass-timings__item--active {

	border-left: 4px solid var(--emmaus-mass-success);
}

/*
 * Inactive schedule.
 */

.emmaus-mass-timings__item--inactive {

	opacity: 0.65;
}

/*
 * Weekend Mass.
 */

.emmaus-mass-timings__item--weekend {

	background:
		linear-gradient(
			90deg,
			var(--emmaus-mass-primary-light),
			var(--emmaus-mass-surface)
		);
}

/*
 * Holy Day / Feast.
 */

.emmaus-mass-timings__item--feast {

	border-left: 4px solid
		var(--emmaus-mass-primary);
}

/* ==========================================================
   Section 5 - Individual Schedule Item Content
   ========================================================== */

/*
 * Optional icon container.
 */

.emmaus-mass-timings__icon {

	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	width: 2.5rem;
	height: 2.5rem;

	background: var(--emmaus-mass-primary-light);
	border-radius: 50%;

	color: var(--emmaus-mass-primary);

	font-size: var(--emmaus-font-size-lg);
	line-height: 1;
}

/*
 * Support SVG icons and WordPress Dashicons.
 */

.emmaus-mass-timings__icon svg {

	display: block;

	width: 1.25rem;
	height: 1.25rem;

	fill: currentColor;
}

.emmaus-mass-timings__icon .dashicons {

	width: auto;
	height: auto;

	font-size: 1.25rem;
	line-height: 1;
}

/*
 * Main content container.
 */

.emmaus-mass-timings__content {

	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--emmaus-space-xs);

	min-width: 0;
}

/*
 * Primary content row.
 */

.emmaus-mass-timings__primary {

	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap:
		var(--emmaus-space-xs)
		var(--emmaus-space-sm);

	min-width: 0;
}

/*
 * Secondary content row.
 */

.emmaus-mass-timings__secondary {

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--emmaus-space-sm);

	min-width: 0;

	color: var(--emmaus-mass-text-light);
}

/*
 * Optional separator between secondary values.
 */

.emmaus-mass-timings__separator {

	display: inline-block;
	flex: 0 0 auto;

	color: var(--emmaus-mass-border);

	font-weight: 400;
}

/*
 * Ensure long content does not overflow the card.
 */

.emmaus-mass-timings__content,
.emmaus-mass-timings__primary,
.emmaus-mass-timings__secondary {

	overflow-wrap: anywhere;
	word-break: normal;
}

/*
 * Mass-type modifiers.
 */

.emmaus-mass-timings__item--daily
.emmaus-mass-timings__icon {

	background: var(--emmaus-mass-primary-light);
	color: var(--emmaus-mass-primary);
}

.emmaus-mass-timings__item--sunday
.emmaus-mass-timings__icon,
.emmaus-mass-timings__item--weekend
.emmaus-mass-timings__icon {

	background: var(--emmaus-mass-success-bg);
	color: var(--emmaus-mass-success);
}

/*
 * Visually distinguish inactive records without
 * preventing administrators from reviewing them.
 */

.emmaus-mass-timings__item--inactive
.emmaus-mass-timings__icon {

	filter: grayscale(1);
}

/*
 * Remove icon movement when the item is hovered.
 */

.emmaus-mass-timings__item:hover
.emmaus-mass-timings__icon {

	transform: scale(1.04);
}

/* ==========================================================
   Section 6 - Time, Type, Language & Badges
   ========================================================== */

/*
 * Mass time.
 */

.emmaus-mass-timings__time {

	font-size: var(--emmaus-font-size-lg);
	font-weight: 700;
	line-height: 1.3;

	color: var(--emmaus-mass-text);

	white-space: nowrap;
}

/*
 * Mass type.
 */

.emmaus-mass-timings__type {

	font-size: var(--emmaus-font-size-base);
	font-weight: 600;

	color: var(--emmaus-mass-primary);

	overflow-wrap: anywhere;
}

/*
 * Language.
 */

.emmaus-mass-timings__language {

	font-size: var(--emmaus-font-size-sm);
	font-weight: 500;

	color: var(--emmaus-mass-text-light);

	overflow-wrap: anywhere;
}

/*
 * Generic badge.
 */

.emmaus-badge {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding:
		0.35rem
		0.75rem;

	border-radius: 999px;

	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;

	white-space: nowrap;

	border: 1px solid transparent;
}

/*
 * Language badge.
 */

.emmaus-badge--language {

	background: var(--emmaus-mass-primary-light);

	color: var(--emmaus-mass-primary);

	border-color: rgba(29, 78, 216, 0.12);
}

/*
 * Mass type badges.
 */

.emmaus-badge--daily {

	background: #eef6ff;
	color: #1d4ed8;
}

.emmaus-badge--weekday {

	background: #f5f7fa;
	color: #4b5563;
}

.emmaus-badge--sunday {

	background: #fff7d6;
	color: #92400e;
}

.emmaus-badge--weekend {

	background: #dcfce7;
	color: #166534;
}

.emmaus-badge--feast {

	background: #fde7ef;
	color: #be185d;
}

.emmaus-badge--special {

	background: #ede9fe;
	color: #6d28d9;
}

/*
 * Active badge.
 */

.emmaus-badge--active {

	background: var(--emmaus-mass-success-bg);

	color: var(--emmaus-mass-success);
}

/*
 * Inactive badge.
 */

.emmaus-badge--inactive {

	background: #f3f4f6;

	color: #6b7280;
}

/*
 * Badge spacing.
 */

.emmaus-mass-timings__badges {

	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: var(--emmaus-space-sm);
}

/*
 * Small metadata row.
 */

.emmaus-mass-timings__meta-row {

	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap:
		var(--emmaus-space-xs)
		var(--emmaus-space-sm);

	margin-top: var(--emmaus-space-xs);
}

/*
 * Small icon inside badges.
 */

.emmaus-badge svg,
.emmaus-badge .dashicons {

	margin-right: 0.3rem;

	font-size: 0.85rem;
	line-height: 1;

	fill: currentColor;
}

/*
 * Prevent badge overflow.
 */

.emmaus-badge,
.emmaus-mass-timings__type,
.emmaus-mass-timings__language {

	max-width: 100%;
}

/* ==========================================================
   Section 7 - Empty State
   ========================================================== */

/*
 * Empty state container.
 */

.emmaus-mass-timings__empty {

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: var(--emmaus-space-md);

	min-height: 220px;

	padding: var(--emmaus-space-xl);

	text-align: center;

	background: var(--emmaus-mass-surface);

	border: 2px dashed var(--emmaus-mass-border);
	border-radius: var(--emmaus-radius-lg);
}

/*
 * Empty state icon.
 */

.emmaus-mass-timings__empty-icon {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 4rem;
	height: 4rem;

	border-radius: 50%;

	background: var(--emmaus-mass-primary-light);

	color: var(--emmaus-mass-primary);

	font-size: 2rem;
	line-height: 1;
}

.emmaus-mass-timings__empty-icon svg {

	width: 2rem;
	height: 2rem;

	fill: currentColor;
}

.emmaus-mass-timings__empty-icon .dashicons {

	font-size: 2rem;
	line-height: 1;

	width: auto;
	height: auto;
}

/*
 * Empty state title.
 */

.emmaus-mass-timings__empty-title {

	margin: 0;

	font-size: var(--emmaus-font-size-lg);
	font-weight: 700;

	color: var(--emmaus-mass-text);

	line-height: 1.4;
}

/*
 * Empty state message.
 */

.emmaus-mass-timings__empty-message {

	max-width: 34rem;

	margin: 0;

	font-size: var(--emmaus-font-size-base);
	line-height: var(--emmaus-line-height);

	color: var(--emmaus-mass-text-light);

	overflow-wrap: anywhere;
}

/*
 * Optional action area.
 */

.emmaus-mass-timings__empty-actions {

	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: var(--emmaus-space-sm);

	margin-top: var(--emmaus-space-sm);
}

/*
 * Optional button/link.
 */

.emmaus-mass-timings__empty-actions a,
.emmaus-mass-timings__empty-actions button {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding:
		0.65rem
		1rem;

	background: var(--emmaus-mass-primary);

	color: #ffffff;

	border: none;
	border-radius: var(--emmaus-radius-md);

	font-size: var(--emmaus-font-size-sm);
	font-weight: 600;

	text-decoration: none;

	cursor: pointer;
}

.emmaus-mass-timings__empty-actions a:hover,
.emmaus-mass-timings__empty-actions a:focus-visible,
.emmaus-mass-timings__empty-actions button:hover,
.emmaus-mass-timings__empty-actions button:focus-visible {

	background: var(--emmaus-mass-success);

	color: #ffffff;
}

/*
 * Empty state inside a compact layout.
 */

.emmaus-mass-timings--empty .emmaus-mass-timings__empty {

	min-height: 180px;
}

/* ==========================================================
   Section 8 - Responsive & Accessibility
   ========================================================== */

/*
 * Tablet and below.
 */

@media (max-width: 768px) {

	.emmaus-mass-timings {

		padding: var(--emmaus-space-md);
	}

	.emmaus-mass-timings__header {

		flex-direction: column;
		align-items: flex-start;
	}

	.emmaus-mass-timings__header-actions {

		width: 100%;
		justify-content: flex-start;
	}

	.emmaus-mass-timings__item {

		grid-template-columns: 1fr;
		align-items: flex-start;

		gap: var(--emmaus-space-sm);
	}

	.emmaus-mass-timings__day {

		margin-bottom: var(--emmaus-space-xs);
	}

	.emmaus-mass-timings__meta {

		justify-content: flex-start;
		width: 100%;
	}

	.emmaus-mass-timings__primary,
	.emmaus-mass-timings__secondary,
	.emmaus-mass-timings__badges {

		width: 100%;
	}

	.emmaus-mass-timings__time {

		white-space: normal;
	}
}

/*
 * Small mobile devices.
 */

@media (max-width: 480px) {

	.emmaus-mass-timings {

		padding: var(--emmaus-space-sm);
	}

	.emmaus-mass-timings__title {

		font-size: 1.25rem;
	}

	.emmaus-mass-timings__item {

		padding: var(--emmaus-space-sm);
	}

	.emmaus-mass-timings__time {

		font-size: var(--emmaus-font-size-base);
	}

	.emmaus-badge {

		width: 100%;
		justify-content: center;
	}
}

/*
 * Respect users who prefer reduced motion.
 */

@media (prefers-reduced-motion: reduce) {

	.emmaus-mass-timings *,
	.emmaus-mass-timings *::before,
	.emmaus-mass-timings *::after {

		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/*
 * High contrast / forced colors support.
 */

@media (forced-colors: active) {

	.emmaus-mass-timings,
	.emmaus-mass-timings__item,
	.emmaus-badge,
	.emmaus-mass-timings__empty {

		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;

		box-shadow: none;
	}

	.emmaus-mass-timings__title::before {

		background: CanvasText;
	}

	.emmaus-mass-timings a {

		color: LinkText;
	}
}

/*
 * Keyboard accessibility.
 */

.emmaus-mass-timings a:focus-visible,
.emmaus-mass-timings button:focus-visible,
.emmaus-mass-timings [tabindex]:focus-visible {

	outline: 3px solid var(--emmaus-mass-primary);
	outline-offset: 2px;
}

/*
 * Improve text selection.
 */

.emmaus-mass-timings ::selection {

	background: var(--emmaus-mass-primary);
	color: #ffffff;
}

/*
 * Print styles.
 */

@media print {

	.emmaus-mass-timings {

		padding: 0;

		border: none;
		box-shadow: none;

		background: #ffffff;
	}

	.emmaus-mass-timings__item {

		break-inside: avoid;

		background: #ffffff;

		box-shadow: none;
	}

	.emmaus-badge {

		border: 1px solid #000000;

		background: transparent;
		color: #000000;
	}
}

/* ==========================================================
   Section 9 - File Completion
   ========================================================== */

/**
 * End of Mass Timings module styles.
 *
 * Sections:
 * 1. File Header & Design Tokens
 * 2. Main Wrapper
 * 3. Header & Title
 * 4. Schedule List Layout
 * 5. Individual Schedule Item Content
 * 6. Time, Type, Language & Badges
 * 7. Empty State
 * 8. Responsive & Accessibility
 * 9. File Completion
 *
 * Future extensions may include:
 * - Dark-mode overrides
 * - RTL-specific adjustments
 * - Compact layout modifier
 * - Horizontal schedule layout
 * - Calendar integration styles
 * - Loading and skeleton states
 */