/**
 * Mioim front-end styles - a location's single-page detail panel
 * (Module::render_location_content()). Enqueued only on a singular
 * seogeo_locations page.
 *
 * Deliberately theme-agnostic: no opaque background or hardcoded text
 * color is set anywhere, since this renders inside an arbitrary theme
 * whose palette (light or dark) this plugin has no way to know ahead of
 * time. Every color here is either `currentColor` (inherits whatever the
 * theme already set for body text) or a semi-transparent mix of it, so
 * the panel always reads correctly against the surrounding page. The one
 * exception - the open/closed status pill - uses a small set of
 * accessible, fixed hues that are deliberately legible on both light and
 * dark surfaces, adjusted slightly under prefers-color-scheme: dark.
 */

.mioim-location-details {
	--mioim-rule: color-mix(in srgb, currentColor 14%, transparent);
	--mioim-muted: color-mix(in srgb, currentColor 60%, transparent);
	--mioim-accent: color-mix(in srgb, currentColor 85%, transparent);

	margin-top: 2.5em;
	padding-top: 2em;
	border-top: 1px solid var(--mioim-rule);
	max-width: 46em;
}

.mioim-location-details .mioim-section {
	margin-bottom: 2em;
}

.mioim-location-details .mioim-section:last-child {
	margin-bottom: 0;
}

.mioim-location-details .mioim-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 0 0.6em;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mioim-muted);
}

.mioim-location-details .mioim-eyebrow .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}

.mioim-location-details .mioim-address {
	margin: 0;
	font-style: normal;
	font-size: 1.05em;
	line-height: 1.5;
}

/* Short-fact grid: phone, price range, payment, area served - whichever
   are present lay out as responsive two-up pairs, collapsing to a single
   column once the panel is narrower than its natural pair width. */
.mioim-location-details .mioim-fact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
	gap: 1.5em 2em;
}

.mioim-location-details .mioim-fact-grid .mioim-section {
	margin-bottom: 0;
}

.mioim-location-details .mioim-phone-link {
	font-size: 1.05em;
	text-decoration: none;
	border-bottom: 1px solid var(--mioim-rule);
}

.mioim-location-details .mioim-phone-link:hover {
	border-bottom-color: currentColor;
}

/* Hours table. */
.mioim-location-details .mioim-hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.mioim-location-details .mioim-hours-table tr {
	border-bottom: 1px solid var(--mioim-rule);
}

.mioim-location-details .mioim-hours-table tr:last-child {
	border-bottom: none;
}

.mioim-location-details .mioim-hours-table th,
.mioim-location-details .mioim-hours-table td {
	padding: 0.45em;
	text-align: left;
	font-weight: 400;
	color: var(--mioim-muted);
}

.mioim-location-details .mioim-hours-table td {
	text-align: right;
	color: currentColor;
}

.mioim-location-details .mioim-hours-table tr.mioim-today th,
.mioim-location-details .mioim-hours-table tr.mioim-today td {
	color: currentColor;
	font-weight: 600;
}

.mioim-location-details .mioim-open-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0.9em;
	font-size: 0.9em;
	font-weight: 600;
}

.mioim-location-details .mioim-open-status::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: currentColor;
}

.mioim-location-details .mioim-open-status.is-open {
	color: #1a7f37;
}

.mioim-location-details .mioim-open-status.is-closed {
	color: #c0341d;
}

@media (prefers-color-scheme: dark) {
	.mioim-location-details .mioim-open-status.is-open {
		color: #4ade80;
	}

	.mioim-location-details .mioim-open-status.is-closed {
		color: #f87171;
	}
}

.mioim-location-details .mioim-map-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
	border-bottom: 1px solid var(--mioim-rule);
}

.mioim-location-details .mioim-map-link:hover {
	border-bottom-color: currentColor;
}

/* Related locations: branches / parent HQ / departments, rendered as a
   wrap of link chips rather than a plain bulleted list. */
.mioim-location-details .mioim-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mioim-location-details .mioim-chip-list li {
	margin: 0;
}

.mioim-location-details .mioim-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 0.9em;
	border: 1px solid var(--mioim-rule);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.92em;
	line-height: 1.2;
	color: currentColor;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mioim-location-details .mioim-chip:hover {
	border-color: var(--mioim-accent);
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.mioim-location-details .mioim-chip .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
}

.mioim-location-details .mioim-parent-link {
	text-decoration: none;
	border-bottom: 1px solid var(--mioim-rule);
}

.mioim-location-details .mioim-parent-link:hover {
	border-bottom-color: currentColor;
}