/**
 * Open Hour — sane defaults only. Everything here is single-class
 * specificity so themes and the block style panel win without effort
 * (and no !important, ever).
 */

.open-hour-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.open-hour-list li {
	display: flex;
	justify-content: space-between;
	gap: 1.5em;
}

.open-hour-list .is-today {
	font-weight: 600;
}

/*
 * Reveal mode: today's line is the always-visible summary — big, bold,
 * in the flex shape of a list row — and the week expands beneath it.
 * Single-class specificity like everything else here; the block style
 * panel and themes win without effort.
 */
.open-hour-reveal summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5em;
	cursor: pointer;
	font-size: 1.5em;
	font-weight: 700;
	list-style: none;
}

.open-hour-reveal summary::-webkit-details-marker {
	display: none;
}

.open-hour-reveal summary::after {
	content: none;
}

/* The chevron rides the text size and color; centered on the row. */
.open-hour-reveal .open-hour-reveal-chevron {
	width: 1em;
	height: 1em;
	flex: none;
	margin-left: auto;
	transition: transform 220ms ease;
}

.open-hour-reveal[open] .open-hour-reveal-chevron {
	transform: rotate(180deg);
}

.open-hour-reveal .open-hour-list {
	margin-top: 0.5em;
}

@media (prefers-reduced-motion: reduce) {
	.open-hour-reveal .open-hour-reveal-chevron {
		transition: none;
	}
}

/*
 * Links inside an item (tel:, website, directions, user-made) inherit the
 * block's color and text-decoration instead of the theme's global `a`
 * styling — the style panel decides how they look. :where() keeps the anchor
 * at zero extra specificity, so the panel's link color (.wp-elements-… a)
 * still wins when set.
 */
.wp-block-open-hour-item :where(a) {
	color: inherit;
	text-decoration: inherit;
}

/*
 * Editor-only in practice: the live-value chip inside an item's rich-text
 * label. Its text is the data-label attribute; the frontend never renders
 * the chip — the server swaps it for real data.
 */
.open-hour-value::before {
	content: attr(data-label);
}

.open-hour-value {
	background: rgba(127, 127, 127, 0.16);
	border-radius: 3px;
	padding: 0 0.25em;
	box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.25);
}

/* Map item — the iframe fills the block; size the block from the panel
 * (width via layout/alignment, shape via this default ratio). */
.open-hour-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}