/* Kerkdiensten component styles
 * Auto-loaded by the ontwo theme.
 * Purpose: small, focused rules for the kerkdiensten table layout and teaser items.
 *
 * Adapted from legacy theme styling for teaser-item and dateblock components.
 */

/* ==========================================================================
   Table Layout
   ========================================================================== */

table.kerkdiensten {
	width: 100%;
}

/* ==========================================================================
   Teaser Items (Kerkdiensten List)
   ========================================================================== */

/**
 * Individual teaser item wrapper
 * Used in kerkdiensten shortcode output
 */
.teaser-item {
	width: 100%;
	padding: 0 0 20px;
}

/**
 * Teaser item link
 * Flexbox layout with dateblock, time, and title
 */
.teaser-item__link {
	display: flex;
	text-decoration: none;
	flex-wrap: nowrap;
	color: var(--color-body);
	justify-content: flex-start;
	align-items: flex-start;
}

/**
 * Hide category on homepage teaser items
 */
.teaser-item__category {
	display: none;
}

/* ==========================================================================
   Dateblock Component
   ========================================================================== */

/**
 * Date block square
 * Orange background with white text, rounded corners
 */
.dateblock {
	display: flex;
	width: 52px;
	height: 52px;
	border-radius: 5px;
	background-color: var(--color-primary);
	text-align: center;
	flex-shrink: 0;
	flex-direction: column;
}

/**
 * The gap after the date block is homepage-only. The cards there lay out
 * flex-start, so the margin is what separates block from text. The agenda list
 * and the single event page space their columns differently and production
 * leaves .dateblock at margin-right: 0 on both.
 */
.home .dateblock {
	margin-right: 20px;
}

/**
 * Day number in dateblock
 */
.dateblock__day {
	height: 28px;
	font-size: 23px;
	color: var(--color-white);
	font-weight: 700;
}

/**
 * Month name in dateblock
 */
.dateblock__month {
	background-color: var(--color-primary);
	color: var(--color-white);
	font-size: 12px;
	border-radius: 0 0 5px 5px;
}

/**
 * Empty dateblock (hidden but preserves layout)
 * Used for subsequent items on the same day
 */
.home .teaser-item .dateblock.empty {
	visibility: hidden;
}

/* ==========================================================================
   Teaser Item Content
   ========================================================================== */

/**
 * Start time and title
 * Common styling for both elements
 */
.teaser-item__start,
.teaser-item__title {
	display: flex;
	align-items: center;
	text-decoration: none;
	margin-top: 10px;
}

/**
 * Start time
 * Red color for emphasis
 */
.teaser-item__start {
	margin-right: 20px;
	color: var(--color-red-light);
	font-weight: var(--font-weight-medium);
}

/**
 * Title/voorganger name
 * Default body color
 */
.teaser-item__title {
	color: var(--color-body);
}

/* ==========================================================================
   Teaser Items List Container
   ========================================================================== */

/**
 * Events variant with borders
 * Used on archive/overview pages
 */
.teaser-items--events {
	border-top: 1px solid hsla(0, 0%, 67%, 0.5);
}

.teaser-items--events .teaser-item {
	margin: 0;
	padding: 20px 0;
	border-bottom: 1px solid hsla(0, 0%, 67%, 0.5);
}

.teaser-items--events .teaser-item__link {
	justify-content: space-between;
}

.teaser-items--events .teaser-item__start {
	width: 15%;
}

.teaser-items--events .teaser-item__title {
	width: 40%;
}

.teaser-items--events .teaser-item__category {
	width: 15%;
	display: flex;
	align-items: center;
}

/**
 * Expired agenda items, hidden by assets/js/agenda-expired.js until the
 * "Toon verlopen items" button is clicked
 */
.hidden-event {
	display: none;
}

/**
 * "Toon verlopen items" button — matches legacy .btn
 *
 * margin-bottom stands in for the 15px the legacy list gets from the ul's own
 * top margin, which our .teaser-items does not carry.
 */
#em-wrapper .btn {
	display: inline-block;
	position: relative;
	margin-bottom: 15px;
	padding: 10px 20px;
	border: 0;
	border-radius: 22px;
	background-color: #e98c00;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

#em-wrapper .btn:hover,
#em-wrapper .btn:focus {
	background-color: #b83288;
	color: #fff;
}