/* =============================================================================
   Collective — front-end styles
   -----------------------------------------------------------------------------
   Organised in clearly-labelled sections so the theme or client can override
   any part without hunting. All colours and spacing flow from CSS custom
   properties at the top — re-skin by overriding these in your theme.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Theme tokens (override these in your theme to re-skin everything)
   ----------------------------------------------------------------------------- */
:where(.collective-hours, .collective-status-pill, .collective-coming-soon) {
	--collective-bg:            #E84B4B;   /* Collective red background */
	--collective-text:          #111111;   /* Primary text (black) */
	--collective-muted:         rgba(17, 17, 17, 0.65);
	--collective-border:        rgba(17, 17, 17, 0.85);
	--collective-pill-border:   rgba(17, 17, 17, 0.85);

	--collective-radius-pill:   999px;
	--collective-radius-block:  4px;

	--collective-font:          inherit;
	--collective-font-weight:   700;
	--collective-font-size:     1rem;

	--collective-gap:           0.5rem;
	--collective-row-padding-y: 1.1rem;

	font-family: var(--collective-font);
	color: var(--collective-text);
}


/* -----------------------------------------------------------------------------
   2. Full opening times block — used by [collective_opening_times]
   ----------------------------------------------------------------------------- */
.collective-hours {
	background: var(--collective-bg);
	color: var(--collective-text);
	padding: 1.75rem 1.5rem 0.5rem;
	box-sizing: border-box;
}

/* "Open Today" / "Closed Today" pill above the table */
.collective-hours__badge {
	display: inline-block;
	padding: 0.4rem 1rem;
	border: 1.5px solid var(--collective-border);
	border-radius: var(--collective-radius-pill);
	font-weight: var(--collective-font-weight);
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
	line-height: 1.2;
}

/* The list of day -> hours rows */
.collective-hours__list {
	margin: 0;
	padding: 0;
	display: block;
}

/* Each row: label on the left, time on the right, with a divider underneath */
.collective-hours__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: var(--collective-row-padding-y) 0;
	border-bottom: 1px solid var(--collective-border);
}

.collective-hours__row:last-child {
	border-bottom: 1px solid var(--collective-border); /* keep final divider, matches mockup */
}

/* Subtle highlight for the row that covers today (e.g. bolder weight) */
.collective-hours__row.is-today .collective-hours__day,
.collective-hours__row.is-today .collective-hours__time {
	font-weight: var(--collective-font-weight);
}

/* Day label */
.collective-hours__day {
	margin: 0;
	font-weight: var(--collective-font-weight);
	font-size: 1.05rem;
	line-height: 1.2;
}

/* Time value (or "Closed") */
.collective-hours__time {
	margin: 0;
	font-weight: var(--collective-font-weight);
	font-size: 1.05rem;
	line-height: 1.2;
	text-align: right;
	white-space: nowrap;
}

/* Dash between open and close times — kept tight so it sits flush */
.collective-hours__dash {
	margin: 0 0.25rem;
}


/* -----------------------------------------------------------------------------
   3. Compact status pill — used by [collective_open_status]
   ----------------------------------------------------------------------------- */
.collective-status-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--collective-gap);
	padding: 0.45rem 0.95rem;
	color: var(--collective-text);
	border: 0;
	background: transparent;
	line-height: 1.2;
}

/* Modifier states — hook for theme overrides if needed */
.collective-status-pill--open {
	/* default styling is the "open" state */
}

.collective-status-pill--closed {
	/* Slightly muted feel when closed — easy to override */
	opacity: 0.95;
}

.collective-status-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.collective-status-pill__label {
	display: inline-block;
	font-family: "CabinetGrotesk-Variable";
	font-size: 20px;
	font-style: normal;
	font-weight: 550;
	line-height: 142%;
	color: #000;
}


/* -----------------------------------------------------------------------------
   4. Weather icons
   -----------------------------------------------------------------------------
   Icons inherit colour via `currentColor`, so they always match surrounding
   text. Size is controlled by the wrapping element's font-size or width.
   ----------------------------------------------------------------------------- */
.collective-weather-icon {
	width: 100%;
	height: 100%;
	display: block;
	color: currentColor;
}


/* -----------------------------------------------------------------------------
   5. "Coming soon" placeholder (generic, currently unused)
   ----------------------------------------------------------------------------- */
.collective-coming-soon {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--collective-border);
	border-radius: var(--collective-radius-block);
	background: rgba(232, 75, 75, 0.08);
	color: var(--collective-text);
	font-size: 0.95rem;
}


/* -----------------------------------------------------------------------------
   6. Responsive tweaks
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.collective-hours {
		padding: 1.25rem 1rem 0.25rem;
	}

	.collective-hours__day,
	.collective-hours__time {
		font-size: 0.95rem;
	}

	.collective-status-pill {
		padding: 0.4rem 0.8rem;
	}
}