/**
 * UK Social Care Directory — Front end
 * ----------------------------------------------------------------------------
 * Theme activation, front-end-only chrome, and the Divi compatibility layer.
 *
 * Load order: tokens -> base -> layout -> components -> utilities -> THIS.
 */

/* =====================================================================
 * THEME ACTIVATION
 *
 * The dark palette is applied by adding `.scd-theme-dark` alongside
 * `.scd-root` on our wrapper. It is NOT applied to `:root`, so the host
 * theme and any other plugin are untouched.
 * ===================================================================== */

.scd-root.scd-theme-dark {
	background: var(--scd-surface-0);
	color: var(--scd-text);
}

/* Page wrapper for a full directory screen. */
.scd-page {
	padding-block: var(--scd-space-10);
	min-height: 60vh;
}

.scd-page__header { margin-bottom: var(--scd-space-8); }

.scd-page__title {
	margin: 0 0 var(--scd-space-2);
	font-size: var(--scd-text-4xl);
	font-weight: var(--scd-weight-bold);
	letter-spacing: var(--scd-tracking-tight);
	line-height: var(--scd-leading-tight);
}

.scd-page__lead {
	max-width: 68ch;
	font-size: var(--scd-text-lg);
	color: var(--scd-text-muted);
}

/* =====================================================================
 * NAV BAR
 *
 * Replaces three separate definitions of `.uk-scd-nav-bar` plus an inline
 * style attribute that used to beat all of them (which is why the old rules
 * needed !important to work at all).
 *
 * On mobile this is a snapping scroll strip rather than a vertical stack —
 * stacking 5+ items pushed all page content below the fold on a phone.
 * ===================================================================== */

.scd-nav {
	display: flex;
	gap: var(--scd-space-2);
	margin-bottom: var(--scd-space-10);
	padding: var(--scd-space-3);
	border: 1px solid var(--scd-border-subtle);
	border-radius: var(--scd-radius-xl);
	background: var(--scd-surface-1);
	box-shadow: var(--scd-shadow-3);
	backdrop-filter: blur(12px);

	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.scd-nav::-webkit-scrollbar { display: none; }

.scd-nav__item {
	display: inline-flex;
	align-items: center;
	gap: var(--scd-space-2);
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-height: var(--scd-tap);
	padding: var(--scd-space-2) var(--scd-space-4);
	border-radius: var(--scd-radius-md);
	color: var(--scd-text-muted);
	font-size: var(--scd-text-sm);
	font-weight: var(--scd-weight-semibold);
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color var(--scd-dur-base) var(--scd-ease-out),
		color var(--scd-dur-base) var(--scd-ease-out),
		transform var(--scd-dur-base) var(--scd-ease-out);
}

.scd-nav__item:hover {
	background: var(--scd-surface-2);
	color: var(--scd-text);
	text-decoration: none;
	transform: translateY(-2px);
}

.scd-nav__item.is-active {
	background: var(--scd-accent-gradient);
	color: var(--scd-accent-contrast);
	box-shadow: var(--scd-shadow-2);
}

@media (min-width: 768px) {
	.scd-nav { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
}

/* =====================================================================
 * HERO — the entity page header
 * ===================================================================== */

.scd-hero { margin-bottom: var(--scd-space-8); }

.scd-hero__title {
	margin: 0 0 var(--scd-space-3);
	font-size: var(--scd-text-4xl);
	font-weight: var(--scd-weight-bold);
	line-height: var(--scd-leading-tight);
	letter-spacing: var(--scd-tracking-tight);
}

.scd-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--scd-space-3);
	color: var(--scd-text-muted);
	font-size: var(--scd-text-sm);
}

/* =====================================================================
 * FILTER BAR — the directory search form
 * ===================================================================== */

.scd-filters {
	margin-bottom: var(--scd-space-8);
	padding: var(--scd-space-5);
	border: 1px solid var(--scd-border);
	border-radius: var(--scd-radius-xl);
	background: var(--scd-surface-1);
}

/* Mobile-first: one column. The primary search input plus a "Filters"
 * toggle is all that shows until the user opens the sheet. */
.scd-filters__grid {
	display: grid;
	gap: var(--scd-space-3);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.scd-filters__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
	.scd-filters__grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}

/* The advanced block collapses into a sheet below md and is always visible
 * above it. `hidden` is toggled by JS on mobile only. */
.scd-filters__advanced { display: grid; gap: var(--scd-space-3); }

@media (max-width: 767px) {
	.scd-filters__advanced[hidden] { display: none; }
	.scd-filters__toggle { display: flex; }
}

@media (min-width: 768px) {
	.scd-filters__toggle { display: none; }
	/* Never let the JS `hidden` attribute hide the desktop filter set. */
	.scd-filters__advanced[hidden] { display: grid; }
}

.scd-filters__applied {
	display: flex;
	flex-wrap: wrap;
	gap: var(--scd-space-2);
	margin-top: var(--scd-space-4);
}

/* =====================================================================
 * RESULT CARDS
 * ===================================================================== */

.scd-results { display: grid; gap: var(--scd-space-5); }

@media (min-width: 768px) {
	.scd-results {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	}
}

.scd-result__summary {
	padding: var(--scd-space-3);
	border-left: 2px solid var(--scd-accent);
	border-radius: var(--scd-radius-sm);
	background: var(--scd-accent-soft);
	font-size: var(--scd-text-sm);
	color: var(--scd-text-secondary);
}

/* Search-term highlight inside extracted PDF text. */
.scd-result__snippet mark {
	padding: 0 2px;
	border-radius: 2px;
	background: var(--scd-warning-soft);
	color: var(--scd-warning-on-soft);
}

/* =====================================================================
 * TRANSIT / SCORE BAR
 * Percentage supplied via --scd-bar-pct (sanctioned inline custom property).
 * ===================================================================== */

.scd-score { display: flex; flex-direction: column; gap: var(--scd-space-1); }

.scd-score__head {
	display: flex;
	justify-content: space-between;
	font-size: var(--scd-text-xs);
	font-weight: var(--scd-weight-semibold);
	color: var(--scd-text-secondary);
}

/* =====================================================================
 * DIVI COMPATIBILITY
 *
 * Everything in this section exists solely to coexist with the Divi parent
 * theme. Each rule is scoped to our own tree or to a body class we set —
 * NEVER site-wide.
 *
 * Historical note worth keeping: these used to be injected globally on
 * `wp_head` for every page of the site, including pages with nothing to do
 * with this plugin. The SVG rule in particular set `fill:#fff !important`
 * on every `svg text` node anywhere, which silently rendered other plugins'
 * charts white-on-white. Do not reintroduce an unscoped variant.
 * ===================================================================== */

/* Divi draws a vertical rule via .container:before on directory pages. Only
 * suppressed where we actually render, via a body class we control. */
body.scd-directory-page #main-content .container::before,
body.scd-directory-page .et_pb_gutter #main-content .container::before {
	display: none;
	background: transparent;
	width: 0;
	content: none;
}

/* Divi constrains and pads .entry-content in ways that fight a full-bleed
 * directory layout. Scoped to our pages only. */
body.scd-directory-page #main-content .container {
	width: 100%;
	max-width: none;
	padding-top: 0;
}

/* Divi sets `color` on links inside content with high specificity. Our tree
 * must win, but a scoped selector is enough — no !important needed. */
.scd-root a:not(.scd-btn):not(.scd-nav__item):not(.scd-tabs__tab) {
	color: var(--scd-link);
}

/* Divi's global form styling would otherwise override our controls. */
.scd-root input[type="text"],
.scd-root input[type="search"],
.scd-root input[type="email"],
.scd-root input[type="url"],
.scd-root input[type="tel"],
.scd-root input[type="number"],
.scd-root input[type="password"],
.scd-root select,
.scd-root textarea {
	background-color: var(--scd-surface-3);
	border-color: var(--scd-border);
	color: var(--scd-text);
}

/* =====================================================================
 * SITE NOTICE BANNER
 * ===================================================================== */

.scd-banner {
	position: relative;
	z-index: var(--scd-z-sticky);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--scd-space-3);
	padding: var(--scd-space-3) var(--scd-gutter);
	background: var(--scd-accent-gradient);
	color: var(--scd-accent-contrast);
	font-size: var(--scd-text-sm);
	font-weight: var(--scd-weight-medium);
	text-align: center;
}

.scd-banner__close {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: var(--scd-radius-circle);
	background: rgba(255, 255, 255, 0.18);
	color: inherit;
	line-height: 1;
	cursor: pointer;
}

.scd-banner[hidden] { display: none; }