/*
 * GOAT Open Hours
 *
 * Deliberately low-specificity and mostly inherited: fonts, colours and link
 * styles come from the theme. Override any of the custom properties below in
 * the theme stylesheet to restyle without touching this file.
 */

.goat-oh {
	--goat-oh-gap: 0.75em;
	--goat-oh-border: currentColor;
	--goat-oh-muted: currentColor;
	--goat-oh-open-bg: #dff3e3;
	--goat-oh-open-fg: #14532d;
	--goat-oh-closed-bg: #f1f1f1;
	--goat-oh-closed-fg: #3c3c3c;

	font-size: 1em;
	line-height: 1.45;

	/* Lay out against the width of the sidebar/column we are dropped into,
	   not the viewport — a 200px sidebar on a 1440px screen still needs the
	   stacked layout. */
	container-type: inline-size;
	container-name: goat-oh;
}

.goat-oh__title {
	margin: 0 0 var(--goat-oh-gap);
}

/* --- Icons -------------------------------------------------------------
 *
 * All decorative and aria-hidden. Sized in em so they track the text they
 * sit next to, and drawn in currentColor so they inherit the theme's colour
 * in both light and dark. `flex: none` keeps them from being squashed when a
 * long staff list wraps.
 */

.goat-oh__icon {
	width: 1.05em;
	height: 1.05em;
	flex: none;
	vertical-align: -0.16em;
	margin-right: 0.4em;
}

.goat-oh__title .goat-oh__icon {
	opacity: 0.6;
}

.goat-oh__row--closed .goat-oh__icon,
.goat-oh__daycell .goat-oh__icon {
	opacity: 0.45;
}

/* The calendar marker is repeated on every row, so keep it quiet. */
.goat-oh__daycell .goat-oh__icon {
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.3em;
}

/* Screen-reader-only text. Self-contained so it does not rely on the theme. */
.goat-oh__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Status ------------------------------------------------------------ */

.goat-oh__status {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 0 0.4em;
	padding: 0.45em 0.7em;
	border-radius: 0.35em;
	font-size: 0.95em;
}

.goat-oh__status--open {
	background: var(--goat-oh-open-bg);
	color: var(--goat-oh-open-fg);
}

.goat-oh__status--closed {
	background: var(--goat-oh-closed-bg);
	color: var(--goat-oh-closed-fg);
}

/* Decorative only — the state is always spelled out in text as well. */
.goat-oh__dot {
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: currentColor;
	flex: none;
	align-self: center;
}

.goat-oh__status--closed .goat-oh__dot {
	background: none;
	box-shadow: inset 0 0 0 2px currentColor;
}

.goat-oh__state {
	font-weight: 700;
}

.goat-oh__detail {
	opacity: 0.85;
}

.goat-oh__who {
	margin: 0 0 var(--goat-oh-gap);
	font-size: 0.95em;
}

.goat-oh__who .goat-oh__icon {
	opacity: 0.55;
}

.goat-oh__who .goat-oh__names {
	font-weight: 700;
}

/* --- Schedule table ---------------------------------------------------- */

.goat-oh__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--goat-oh-gap);
	font-size: 0.95em;
}

.goat-oh__table th,
.goat-oh__table td {
	padding: 0.35em 0;
	text-align: left;
	vertical-align: baseline;
	border: 0;
	/* Fallback first, then a currentColor-derived tint where supported. */
	border-bottom: 1px solid rgba(128, 128, 128, 0.3);
	border-bottom-color: color-mix(in srgb, currentColor 15%, transparent);
}

.goat-oh__table tr:last-child th,
.goat-oh__table tr:last-child td {
	border-bottom: 0;
}

.goat-oh__daycell {
	font-weight: 400;
	white-space: nowrap;
	padding-right: 0.9em;
}

.goat-oh__row--today .goat-oh__daycell,
.goat-oh__row--today .goat-oh__hours {
	font-weight: 700;
}

.goat-oh__daydate {
	opacity: 0.65;
	font-size: 0.9em;
}

/* No column is pinned to a width: the browser's automatic table layout shares
 * the space by content, which measured best. Forcing `width: 100%` onto the
 * hours column crushes the staff names; forcing it onto the names column
 * collapses the day column and triples the row height. */
.goat-oh__hours {
	width: auto;
}

/* Never break inside "10:00 am–4:00 pm", but a day with a lunch gap may wrap
 * between its two ranges rather than forcing the whole table wider. */
.goat-oh__range {
	white-space: nowrap;
}

.goat-oh__row--closed .goat-oh__hours,
.goat-oh__row--closed .goat-oh__names {
	opacity: 0.6;
}

.goat-oh__names {
	width: auto;
	white-space: normal;
	/* `anywhere`, not `break-word`: only the former shrinks the cell's
	   min-content width, which is what stops one very long name from forcing
	   the whole table wider than its container. */
	overflow-wrap: anywhere;
	padding-left: 0.9em;
	text-align: right;
}

/* --- Footer ------------------------------------------------------------ */

.goat-oh__book {
	margin: 0 0 var(--goat-oh-gap);
}

.goat-oh__button {
	display: inline-block;
	padding: 0.5em 1em;
	border: 2px solid currentColor;
	border-radius: 0.35em;
	text-decoration: none;
	font-weight: 700;
}

.goat-oh__button:hover,
.goat-oh__button:focus {
	text-decoration: underline;
}

.goat-oh__tznote {
	margin: 0;
	font-size: 0.8em;
	opacity: 0.7;
}

.goat-oh__adminnote {
	margin: var(--goat-oh-gap) 0 0;
	padding: 0.5em 0.7em;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #3c3c3c;
	font-size: 0.85em;
}

/* Keep keyboard focus obvious even if the theme suppresses outlines. */
.goat-oh a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- Narrow columns ----------------------------------------------------
 *
 * Below ~270px the three columns cannot coexist, so each day becomes a
 * stacked block. Changing `display` on table elements strips their implicit
 * table semantics in most browsers — the markup carries explicit ARIA roles
 * so screen readers keep reading it as a table either way.
 */
@container goat-oh (max-width: 340px) {
	.goat-oh__table,
	.goat-oh__table tbody,
	.goat-oh__table tr,
	.goat-oh__table th,
	.goat-oh__table td {
		display: block;
		width: auto;
	}

	.goat-oh__table tr {
		padding: 0.4em 0;
		border-bottom: 1px solid rgba(128, 128, 128, 0.3);
		border-bottom-color: color-mix(in srgb, currentColor 15%, transparent);
	}

	.goat-oh__table th,
	.goat-oh__table td {
		border-bottom: 0;
		padding: 0;
		text-align: left;
	}

	.goat-oh__names {
		padding-left: 0;
		text-align: left;
		opacity: 0.85;
	}

	/* An em dash alone on its own line reads as a typo once stacked. The
	   screen-reader text lives in this cell too, so hide it visually rather
	   than removing it from the accessibility tree. */
	.goat-oh__names--empty {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Fallback for browsers without container queries: a narrow viewport is the
   best proxy available. */
@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.goat-oh__table,
		.goat-oh__table tbody,
		.goat-oh__table tr,
		.goat-oh__table th,
		.goat-oh__table td {
			display: block;
			width: auto;
		}

		.goat-oh__table tr {
			padding: 0.4em 0;
			border-bottom: 1px solid rgba(128, 128, 128, 0.3);
		}

		.goat-oh__table th,
		.goat-oh__table td {
			border-bottom: 0;
			padding: 0;
			text-align: left;
		}

		.goat-oh__names {
			padding-left: 0;
			text-align: left;
		}
	}
}