/**
 * Kumamoto Live Status — front-end styles.
 *
 * Compact by default (collapsed accordion rows), expandable per-row.
 * Colors are CSS variables with sensible fallbacks so this can be tuned to
 * kumamoto.guru's exact palette in one place without touching markup/PHP.
 */

.kls-widget {
	--kls-accent: #c8102e;      /* Kumamon red - adjust to match site brand */
	--kls-ink: #222;
	--kls-muted: #6b6b6b;
	--kls-border: #e6e1d8;
	--kls-bg-card: #fffdf9;
	--kls-bg-row-hover: #faf6ee;
	--kls-bg-tag: #f2ede2;

	--kls-open: #1a7f37;
	--kls-open-bg: #e8f5ea;
	--kls-restricted: #a9600a;
	--kls-restricted-bg: #fbf0dc;
	--kls-closed: #b32d2e;
	--kls-closed-bg: #fbe9e9;
	--kls-unknown: #6b6b6b;
	--kls-unknown-bg: #ececec;
	--kls-illum: #7b4fa3;
	--kls-illum-bg: #f1e9f8;
	--kls-event: #1f6fb2;
	--kls-event-bg: #e8f1fb;

	color: var(--kls-ink);
	font-size: 15px;
	line-height: 1.4;
	margin: 1.5rem 0;
	max-width: 640px;
}

.kls-widget__title {
	margin: 0 0 0.6rem;
	font-size: 1.15rem;
}

.kls-panel {
	background: var(--kls-bg-card);
	border: 1px solid var(--kls-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	margin-bottom: 0.75rem;
}

/* ---- Accordion rows (Castle / Suizenji / Aso) ---- */

.kls-row {
	border-bottom: 1px solid var(--kls-border);
}

.kls-row:last-child {
	border-bottom: none;
}

.kls-row-summary {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.65rem 0.9rem 0.65rem 0.75rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border-left: 3px solid transparent;
}

.kls-row-summary::-webkit-details-marker {
	display: none;
}

.kls-row-summary:hover {
	background: var(--kls-bg-row-hover);
}

/* Subtle per-location accent, since the row no longer carries an icon. */
.kls-row--castle > .kls-row-summary   { border-left-color: var(--kls-illum); }
.kls-row--suizenji > .kls-row-summary { border-left-color: var(--kls-open); }
.kls-row--aso > .kls-row-summary      { border-left-color: var(--kls-restricted); }

/* Name + chevron always share one line; badges/hours wrap freely underneath.
   This keeps the location name fully readable (no truncation) at any width,
   including narrow mobile viewports, instead of squeezing everything onto
   one row and ellipsizing the name. */
.kls-row-top {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.kls-row-name {
	font-weight: 600;
	flex: 1 1 auto;
}

.kls-row-meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.kls-row-hours {
	font-size: 0.78rem;
	color: var(--kls-muted);
}

.kls-chevron {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--kls-muted);
	border-bottom: 2px solid var(--kls-muted);
	transform: rotate(45deg);
	margin-left: 0.1rem;
	transition: transform 0.18s ease;
}

.kls-row[open] > .kls-row-summary .kls-chevron {
	transform: rotate(-135deg);
}

.kls-row-body {
	padding: 0 0.9rem 0.9rem;
	animation: kls-fade-in 0.15s ease;
}

@keyframes kls-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---- Badges ---- */

.kls-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--kls-unknown-bg);
	color: var(--kls-unknown);
}

.kls-badge--regular, .kls-badge--open      { background: var(--kls-open-bg); color: var(--kls-open); }
.kls-badge--restricted                     { background: var(--kls-restricted-bg); color: var(--kls-restricted); }
.kls-badge--closed                         { background: var(--kls-closed-bg); color: var(--kls-closed); }
.kls-badge--illumination                   { background: var(--kls-illum-bg); color: var(--kls-illum); }
.kls-badge--event                          { background: var(--kls-event-bg); color: var(--kls-event); }
.kls-badge--unknown                        { background: var(--kls-unknown-bg); color: var(--kls-unknown); }

.kls-badge--traffic {
	border: 1px dashed currentColor;
	background: transparent;
}

/* ---- Castle day list ---- */

.kls-day-list {
	list-style: none;
	margin: 0.5rem 0 0.4rem;
	padding: 0;
}

.kls-day {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.3rem 0.6rem;
	padding: 0.3rem 0;
	border-bottom: 1px dashed var(--kls-border);
	font-size: 0.85rem;
}

.kls-day:last-child {
	border-bottom: none;
}

.kls-day__label {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--kls-muted);
	width: 5.5rem;
}

.kls-day__detail {
	text-align: right;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	justify-content: flex-end;
	flex: 1 1 auto;
}

.kls-day--closed .kls-day__detail {
	color: var(--kls-closed);
	font-weight: 600;
}

.kls-tag {
	background: var(--kls-bg-tag);
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
	font-size: 0.72rem;
	overflow-wrap: break-word;
	max-width: 100%;
}

.kls-tag--illum { background: var(--kls-illum-bg); color: var(--kls-illum); }
.kls-tag--event { background: var(--kls-event-bg); color: var(--kls-event); }
.kls-tag--muted { color: var(--kls-muted); }

.kls-notices {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.78rem;
	color: var(--kls-muted);
}

/* ---- Suizenji events ---- */

.kls-admission {
	margin: 0 0 0.4rem;
	font-size: 0.85rem;
	color: var(--kls-muted);
}

.kls-event-list {
	list-style: none;
	margin: 0.3rem 0 0;
	padding: 0;
	font-size: 0.85rem;
}

.kls-event-list li {
	padding: 0.35rem 0;
	border-bottom: 1px dashed var(--kls-border);
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.kls-event-list li:last-child {
	border-bottom: none;
}

.kls-date-range {
	font-size: 0.75rem;
	color: var(--kls-muted);
}

.kls-notes {
	font-size: 0.75rem;
	color: var(--kls-muted);
}

/* ---- Aso details ---- */

.kls-summary {
	margin: 0.5rem 0 0.4rem;
	font-size: 0.88rem;
}

.kls-facts {
	list-style: none;
	margin: 0 0 0.4rem;
	padding: 0;
	font-size: 0.82rem;
	color: var(--kls-muted);
}

.kls-facts li {
	padding: 0.1rem 0;
}

.kls-traffic-note {
	font-size: 0.8rem;
	color: var(--kls-muted);
	background: var(--kls-bg-tag);
	border-radius: 8px;
	padding: 0.5rem 0.6rem;
	margin: 0.4rem 0;
}

.kls-traffic-advice {
	font-size: 0.8rem;
	color: var(--kls-ink);
	background: var(--kls-restricted-bg);
	border-radius: 8px;
	padding: 0.5rem 0.6rem;
	margin: 0.4rem 0;
}

.kls-traffic-advice a {
	display: inline-block;
	margin-top: 0.3rem;
	color: var(--kls-accent);
	font-weight: 600;
	text-decoration: none;
}

/* ---- Tours card ---- */

.kls-tours-card {
	background: var(--kls-bg-card);
	border: 1px solid var(--kls-border);
	border-radius: 12px;
	padding: 0.75rem 0.9rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.kls-tours-card__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	margin-bottom: 0.4rem;
}

.kls-tours-card__header h3 {
	margin: 0;
	font-size: 0.95rem;
	flex: 1 1 auto;
}

.kls-tour-list {
	list-style: none;
	margin: 0 0 0.6rem;
	padding: 0;
	font-size: 0.85rem;
}

.kls-tour-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.2rem 0.6rem;
	padding: 0.3rem 0;
	border-bottom: 1px dashed var(--kls-border);
}

.kls-tour__name {
	font-weight: 600;
}

.kls-tour-list li:last-child {
	border-bottom: none;
}

.kls-tour__next--none {
	color: var(--kls-restricted);
}

.kls-book-btn {
	display: inline-block;
	background: var(--kls-accent);
	color: #fff !important;
	padding: 0.4rem 0.9rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.82rem;
	text-decoration: none;
}

/* ---- Shared ---- */

.kls-updated {
	font-size: 0.72rem;
	color: var(--kls-muted);
	white-space: nowrap;
}

.kls-updated--stale { color: var(--kls-restricted); }

.kls-stale-flag {
	font-size: 0.68rem;
	color: var(--kls-restricted);
	font-weight: 600;
}

.kls-source-link {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: var(--kls-muted);
}

.kls-source-link a {
	color: var(--kls-accent);
	text-decoration: none;
}

.kls-empty {
	color: var(--kls-muted);
	font-size: 0.85rem;
	font-style: italic;
	margin: 0.5rem 0;
}

.kls-error-note {
	margin-top: 0.5rem;
	font-size: 0.72rem;
	color: var(--kls-restricted);
}