/**
 * UK Social Care Directory — Base
 * ----------------------------------------------------------------------------
 * A scoped reset and the typographic ground floor.
 *
 * EVERYTHING here is nested under `.scd-root`. That is deliberate and load
 * bearing: this plugin runs inside the Divi theme, and a global reset would
 * break the host site. Scoping also buys every rule a free (0,1,0) of
 * specificity, which is what lets us delete ~170 `!important` declarations
 * rather than adding more.
 *
 * The rule: if a selector in this system is not inside `.scd-root` (or a
 * `body.scd-*` class we set ourselves), it does not belong in this plugin.
 */

.scd-root {
	/* Establish the type ground. Everything downstream is in rem/em so the
	 * whole system scales from this one declaration. */
	font-family: var(--scd-font-sans);
	font-size: var(--scd-text-base);
	line-height: var(--scd-leading-normal);
	font-weight: var(--scd-weight-normal);
	color: var(--scd-text);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;

	/* Long URNs, CRNs, postcodes and unbroken URLs are endemic in this data
	 * set and are the main cause of horizontal overflow on phones. */
	overflow-wrap: break-word;
}

/* Border-box everywhere inside our tree. The single most valuable line in
 * any reset — without it every padding value fights every width value. */
.scd-root,
.scd-root *,
.scd-root *::before,
.scd-root *::after {
	box-sizing: border-box;
}

/* --- Headings -------------------------------------------------------
 * Divi styles headings aggressively, so we restate rather than inherit. */

.scd-root h1,
.scd-root h2,
.scd-root h3,
.scd-root h4,
.scd-root h5,
.scd-root h6 {
	margin: 0 0 var(--scd-space-3);
	font-family: inherit;
	font-weight: var(--scd-weight-semibold);
	line-height: var(--scd-leading-tight);
	letter-spacing: var(--scd-tracking-tight);
	color: var(--scd-text);
	padding: 0;
}

.scd-root h1 { font-size: var(--scd-text-4xl); font-weight: var(--scd-weight-bold); }
.scd-root h2 { font-size: var(--scd-text-3xl); font-weight: var(--scd-weight-bold); }
.scd-root h3 { font-size: var(--scd-text-2xl); }
.scd-root h4 { font-size: var(--scd-text-xl); }
.scd-root h5 { font-size: var(--scd-text-lg); }
.scd-root h6 {
	font-size: var(--scd-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--scd-tracking-wide);
	color: var(--scd-text-muted);
}

/* --- Flow ------------------------------------------------------------ */

.scd-root p,
.scd-root ul,
.scd-root ol,
.scd-root dl,
.scd-root figure,
.scd-root blockquote {
	margin: 0 0 var(--scd-space-4);
}

.scd-root > *:last-child,
.scd-root p:last-child,
.scd-root ul:last-child,
.scd-root ol:last-child {
	margin-bottom: 0;
}

.scd-root small { font-size: var(--scd-text-xs); }

.scd-root strong,
.scd-root b { font-weight: var(--scd-weight-semibold); }

.scd-root code,
.scd-root kbd,
.scd-root samp,
.scd-root pre {
	font-family: var(--scd-font-mono);
	font-size: 0.9em;
}

.scd-root pre {
	overflow-x: auto;
	padding: var(--scd-space-4);
	background: var(--scd-surface-3);
	border: 1px solid var(--scd-border-subtle);
	border-radius: var(--scd-radius-md);
	-webkit-overflow-scrolling: touch;
}

.scd-root hr {
	height: 1px;
	margin: var(--scd-space-6) 0;
	border: 0;
	background: var(--scd-border);
}

/* --- Links ----------------------------------------------------------- */

.scd-root a {
	color: var(--scd-link);
	text-decoration: none;
	transition: color var(--scd-dur-fast) var(--scd-ease-out);
}

.scd-root a:hover,
.scd-root a:focus-visible {
	color: var(--scd-link-hover);
	text-decoration: underline;
}

/* --- Media ------------------------------------------------------------
 * `max-width:100%` on replaced elements is what keeps an oversized image
 * from forcing horizontal scroll. `height:auto` preserves aspect ratio. */

.scd-root img,
.scd-root svg,
.scd-root video,
.scd-root canvas,
.scd-root iframe {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* SVG text is inherited from the fill, not `color`. This replaces the
 * site-wide `svg text { fill:#fff !important }` that used to be injected on
 * every page of the whole site — including pages with nothing to do with
 * this plugin, where it rendered other plugins' charts white-on-white. */
.scd-root svg text {
	fill: var(--scd-text);
	font-family: var(--scd-font-sans);
}

/* --- Tables ----------------------------------------------------------- */

.scd-root table {
	width: 100%;
	border-collapse: collapse;
	font-size: inherit;
}

/* --- Forms ------------------------------------------------------------
 * Controls do not inherit font by default; restate it or they fall back to
 * the browser's 13px monospace-ish default and break the type scale. */

.scd-root input,
.scd-root select,
.scd-root textarea,
.scd-root button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

.scd-root textarea {
	resize: vertical;
	min-height: 6em;
}

.scd-root button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: inherit;
}

/* iOS zooms the page when a focused input's font-size is under 16px. This
 * data-dense UI uses 13-14px, so opt the touch case up to 16px to prevent
 * the zoom-and-never-zoom-back trap. */
@media (max-width: 767px) {
	.scd-root input,
	.scd-root select,
	.scd-root textarea {
		font-size: 16px;
	}
}

/* --- Focus ------------------------------------------------------------
 * `:focus-visible` shows the ring for keyboard users and hides it for mouse
 * users, with a `:focus` fallback for browsers without support. Never
 * remove this without providing a replacement — it is how keyboard users
 * navigate. */

.scd-root :focus-visible {
	outline: 2px solid var(--scd-focus-ring);
	outline-offset: 2px;
	border-radius: var(--scd-radius-xs);
}

.scd-root :focus:not(:focus-visible) {
	outline: none;
}

/* --- Utility primitives used by base itself --------------------------- */

/* Visually hidden but available to assistive tech. */
.scd-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Same, until focused — for skip links. */
.scd-sr-only-focusable:focus,
.scd-sr-only-focusable:focus-visible {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

.scd-root [hidden] {
	display: none !important;
}