/*
Theme Name: Driver Instructor Near Me
Theme URI: https://driverinstructornearme.co.uk
Description: The theme for the driverinstructornearme.co.uk directory. Built around the language of the road — sign blue, the L-plate red, and a centre-line rule under the header. Designed to pair with the dinm-directory plugin.
Version: 1.1.0
Author: Prime Learning Hub
Text Domain: dinm-theme
License: GPL-2.0-or-later
*/

/*
 * The palette is the road's own, shared with the dinm-directory plugin so
 * the theme chrome and the page content read as one thing:
 *   sign blue   — UK motorway sign blue, the trust colour, used for the
 *                 header and headings
 *   L-plate red — the single most recognisable object in this world, kept
 *                 for the primary action only so it always means "do this"
 *   tarmac      — the road surface, for structure and the header band
 *   kerb        — off-white, the page ground
 */
:root {
	--dinm-sign: #12326b;
	--dinm-sign-ink: #0a1f42;
	--dinm-lplate: #d0021b;
	--dinm-lplate-dark: #b00016;
	--dinm-tarmac: #2b2f34;
	--dinm-kerb: #f4f6f8;
	--dinm-line: #d6dce3;
	--dinm-paper: #ffffff;
	--dinm-ink: #1a1d21;
	--dinm-muted: #616872;

	--dinm-wrap: 1080px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--dinm-kerb);
	color: var(--dinm-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	font-size: 17px;
}

a {
	color: var(--dinm-sign);
}

h1, h2, h3, h4 {
	color: var(--dinm-sign-ink);
	line-height: 1.15;
	letter-spacing: -0.015em;
}

img {
	max-width: 100%;
	height: auto;
}

.dinm-wrap {
	max-width: var(--dinm-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

/* Skip link — accessibility floor. */
.dinm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--dinm-sign);
	color: #fff;
	padding: 10px 16px;
	z-index: 100;
}

.dinm-skip:focus {
	left: 8px;
	top: 8px;
}

/* ------------------------------------------------------------------
 * Header — the signature.
 *
 * A tarmac band, then a thin centre-line rule beneath it: dashed white on
 * dark, exactly the marking that runs down a carriageway. It is the one
 * bold element; everything else stays quiet.
 * ---------------------------------------------------------------- */

.dinm-site-header {
	background: var(--dinm-sign);
}

.dinm-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 20px;
	max-width: var(--dinm-wrap);
	margin: 0 auto;
}

.dinm-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: #fff;
}

.dinm-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: #fff;
	color: var(--dinm-lplate);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.03em;
	/* The L-plate: a red L on white, the learner's own badge. */
}

.dinm-brand-name {
	font-weight: 800;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.dinm-brand-name small {
	display: block;
	font-weight: 500;
	font-size: 0.75rem;
	opacity: 0.75;
}

.dinm-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dinm-nav a {
	color: rgba( 255, 255, 255, 0.92 );
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 8px 12px;
	border-radius: 6px;
}

.dinm-nav a:hover {
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
}

.dinm-nav .dinm-nav-cta {
	background: var(--dinm-lplate);
	color: #fff;
}

.dinm-nav .dinm-nav-cta:hover {
	background: var(--dinm-lplate-dark);
}

/*
 * The centre-line. A dark strip carrying a dashed white line, drawn with a
 * repeating gradient so it needs no image. This is the theme's signature.
 */
.dinm-centreline {
	height: 12px;
	background:
		linear-gradient( var(--dinm-tarmac), var(--dinm-tarmac) ),
		repeating-linear-gradient(
			to right,
			#fff 0,
			#fff 40px,
			transparent 40px,
			transparent 66px
		);
	background-size: 100% 100%, 100% 4px;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}

/* Mobile nav: a details/summary disclosure, no JS needed. */
.dinm-nav-toggle {
	display: none;
}

/* ------------------------------------------------------------------
 * Content
 * ---------------------------------------------------------------- */

.dinm-main {
	min-height: 50vh;
	padding-bottom: 48px;
}

.dinm-page-body {
	background: var(--dinm-paper);
}

/* When a page is just plugin shortcode output, give it room to breathe. */
.dinm-page-inner {
	max-width: var(--dinm-wrap);
	margin: 0 auto;
	padding: 8px 20px 40px;
}

.dinm-entry-title {
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	margin: 32px 0 8px;
}

/* ------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------- */

.dinm-site-footer {
	background: var(--dinm-tarmac);
	color: rgba( 255, 255, 255, 0.82 );
	padding: 36px 0;
	font-size: 0.9375rem;
}

.dinm-footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--dinm-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.dinm-site-footer a {
	color: #fff;
}

.dinm-footer-coverage {
	max-width: 460px;
	opacity: 0.85;
}

/* ------------------------------------------------------------------
 * Small screens
 * ---------------------------------------------------------------- */

@media ( max-width: 782px ) {
	.dinm-nav {
		position: relative;
	}

	.dinm-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 6px;
		background: rgba( 255, 255, 255, 0.12 );
		color: #fff;
		cursor: pointer;
	}

	.dinm-nav-links {
		display: none;
		position: absolute;
		right: 0;
		top: calc( 100% + 10px );
		flex-direction: column;
		min-width: 200px;
		background: var(--dinm-sign);
		border-radius: 10px;
		padding: 8px;
		box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.25 );
		z-index: 50;
	}

	.dinm-nav[open] .dinm-nav-links,
	.dinm-nav-toggle[aria-expanded="true"] + .dinm-nav-links {
		display: flex;
	}

	.dinm-nav a {
		padding: 12px;
	}

	.dinm-footer-inner {
		flex-direction: column;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}