/* TH Class Calendar. Colours come from theme.json where the theme provides them,
   with hard fallbacks so the calendar is never unreadable on a bare theme. */
.thcc {
	--thcc-available: var(--wp--preset--color--primary, #15803d);
	--thcc-limited: #facc15;
	--thcc-limited-ink: #1f2937;
	--thcc-soldout: #e5e7eb;
	--thcc-soldout-ink: #6b7280;
	--thcc-line: #d1d5db;
	--thcc-head: #f9fafb;
	margin: 2rem 0;
}
/* Block themes set display on sections and divs, which overrides the hidden
   attribute - without this, every month renders at once under a heading naming
   only one of them. */
.thcc [hidden] { display: none !important; }

.thcc-title { text-align: center; }
.thcc-month-name { text-align: center; margin: 0 0 .75rem; }

.thcc-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .75rem; }
.thcc-nav-btn {
	cursor: pointer; border: 1px solid var(--thcc-line); background: #fff;
	border-radius: .375rem; padding: .35rem .8rem; font-size: 1rem; line-height: 1;
}
.thcc-nav-btn[disabled] { opacity: .35; cursor: default; }
.thcc-nav-label { font-weight: 700; min-width: 11ch; text-align: center; }

.thcc-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.thcc-grid th {
	background: var(--thcc-head); border: 1px solid var(--thcc-line);
	padding: .6rem .25rem; font-size: .9rem; font-weight: 600;
}
.thcc-day {
	border: 1px solid var(--thcc-line); vertical-align: top;
	height: 4.25rem; padding: .3rem; position: relative;
}
.thcc-day--empty { background: #fff; }
.thcc-day--today { outline: 2px solid #f59e0b; outline-offset: -2px; }
.thcc-daynum { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .25rem; }

/* The cell shows the time only. Two lines, each unbreakable, so a narrow column can
   never split a time mid-number the way "12:0 / 0 pm" did. */
.thcc-session {
	display: block; text-decoration: none; border-radius: .25rem;
	padding: .45rem .25rem; margin-bottom: .25rem; text-align: center;
	font-size: .8rem; line-height: 1.35; font-weight: 700;
	background: var(--thcc-available); color: #fff;
}
.thcc-session:hover, .thcc-session:focus-visible { filter: brightness(1.1); color: #fff; }
.thcc-session--limited { background: var(--thcc-limited); color: var(--thcc-limited-ink); }
.thcc-session--soldout { background: var(--thcc-soldout); color: var(--thcc-soldout-ink); cursor: not-allowed; }
.thcc-from, .thcc-to {
	display: block;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}
.thcc-to::before { content: "\2013\00a0"; } /* en dash + non-breaking space */
.thcc-session--soldout .thcc-from, .thcc-session--soldout .thcc-to { text-decoration: line-through; }

/* Very narrow columns (small laptops, sidebars): shrink rather than wrap. */
@media (min-width: 641px) and (max-width: 1100px) {
	.thcc-session { font-size: .72rem; padding: .4rem .15rem; }
}

.thcc-legend { display: flex; gap: 1.25rem; justify-content: center; list-style: none; padding: 0; margin: 1rem 0 0; font-size: .85rem; }
.thcc-legend li { display: flex; align-items: center; gap: .4rem; }
.thcc-key { width: .9rem; height: .9rem; border-radius: .2rem; display: inline-block; }
.thcc-key--available { background: var(--thcc-available); }
.thcc-key--limited { background: var(--thcc-limited); }
.thcc-key--soldout { background: var(--thcc-soldout); }

.thcc-selected { outline: 3px solid #f59e0b; outline-offset: 1px; }

/* The hand-off to WooCommerce's own Class date dropdown, which sits just below. */
.thcc-bridge {
	display: flex; align-items: center; gap: .75rem;
	margin: 1.25rem 0 0; color: #6b7280; font-size: .9rem; text-align: center;
}
.thcc-bridge::before, .thcc-bridge::after {
	content: ""; flex: 1 1 auto; height: 1px; background: var(--thcc-line);
}
.thcc-bridge span { flex: 0 1 auto; }

/* Phones: a 7-column grid cannot hold this much text, so the month becomes a list. */
@media (max-width: 640px) {
	.thcc-grid, .thcc-grid tbody, .thcc-grid tr, .thcc-grid td { display: block; width: auto; }
	.thcc-grid thead { display: none; }
	.thcc-day { height: auto; border: 0; padding: 0; }
	.thcc-day--empty { display: none; }
	.thcc-day:not(:has(.thcc-session)) { display: none; }
	.thcc-daynum::after { content: " " attr(data-weekday); font-weight: 400; }
	.thcc-day { border-top: 1px solid var(--thcc-line); padding: .6rem 0; }
	.thcc-session { font-size: .95rem; padding: .6rem; }
	.thcc-from, .thcc-to { display: inline; }
	.thcc-to::before { content: " \2013 "; }
}