/* ============================================================================
   rangeroverguys.com — style.css
   Drop-in replacement. No HTML changes required.
   Palette:  Rover Navy #004678 · Deep Navy #00304F · Coachline Orange #FC7A1A
             Paper #FAFAF8 · Ink #1F2933 · Mist #E2E7EC
   Type:     Barlow Condensed (display) + Barlow (body) — transport-signage
             lineage, fitting for an automotive specialist. Falls back to
             system sans if Google Fonts is unreachable.
   Signature: the "coachline" — a thin orange pinstripe, echoing the painted
             coachlines on classic Range Rover bodywork.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Barlow:wght@400;600;700&display=swap');

/* ----- Base ---------------------------------------------------------------- */

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

HTML
{
	font-size: 62.5%;  /* 1rem = 10px */
}

HTML, BODY
{
	background-color: #004678;
	background-image: linear-gradient(180deg, #00304F 0%, #004678 340px);
	background-repeat: no-repeat;
}

BODY
{
	position: relative;
	width: 100%;
	font-family: 'Barlow', Arial, Helvetica, sans-serif;
	font-size: 1.6rem;
	line-height: 1.6;
	color: #1F2933;
	-webkit-font-smoothing: antialiased;
}

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

EM
{
	font-style: italic;
}

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

P
{
	line-height: 1.65;
	text-align: left;          /* was justified — rivers of whitespace, hard to read */
}

P, LI
{
	font-size: 1.6rem;         /* rem, not em: no more compounding sizes */
	line-height: 1.65;
}

P + P
{
	margin-top: 1em;
}

#partnerLogos, #partnerLogos IMG
{
	width: 217px;
	margin: 1em auto;
}

.icons
{
	float: right;
	max-width: 217px;
	height: auto;
	margin-left: 16px;
	margin-bottom: 12px;
	border-radius: 4px;
}

/* The coachline divider: navy over orange, like two-tone pinstriping */
HR
{
	border: 0;
	height: 5px;
	width: 80%;
	margin: 2.5em auto;
	background:
		linear-gradient(#004678, #004678) top / 100% 2px no-repeat,
		linear-gradient(#FC7A1A, #FC7A1A) bottom / 100% 1px no-repeat;
}


/* ----- ADDRESS -------------------------------------------------------------- */

ADDRESS
{
	font-size: 1.6rem;
	line-height: 1.7;
	margin-bottom: 1em;
	font-style: normal;
}

ADDRESS STRONG EM
{
	color: #B43A00;            /* was pure #F00 — keep urgency, lose the alarm */
	font-style: normal;
}

ADDRESS:first-line
{
	font-weight: 700;
}


/* ----- Frame ----------------------------------------------------------------- */

#wrapper
{
	background-color: #FAFAF8;
	border: 0;                 /* was a 3px white border on gray — frame removed */
	border-radius: 6px;
	box-shadow: 0 14px 40px rgba(0, 16, 28, .45);
	margin: 20px auto 36px;
	overflow: auto;
	position: relative;
	max-width: 968px;          /* matches banner.png's native width */
	width: 100%;
	z-index: 100;
}

HEADER
{
	border-bottom: 3px solid #FC7A1A;   /* coachline under the banner */
	display: block;
	position: relative;
	width: 100%;
	line-height: 0;
}

HEADER A
{
	display: block;
	text-decoration: none;
	outline: none;
}

HEADER A:focus-visible
{
	outline: 3px solid #FC7A1A;
	outline-offset: -3px;
}

HEADER IMG
{
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

#content
{
	overflow: auto;
	width: 100%;
}

#unique
{
	background-color: #FFFFFF;
	float: right;
	padding: 28px 32px 32px;
	width: calc(100% - 264px);
	min-height: 420px;
}

/* ----- Headings: condensed, upright, with the coachline ---------------------- */

#unique H1, #unique H2, #unique H3, #unique H4
{
	font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	font-style: normal;        /* was italic with text-shadow */
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #00304F;
	line-height: 1.15;
	margin: 1.1em 0 .5em;
	text-shadow: none;
}

#unique H1:first-child, #unique H2:first-child
{
	margin-top: 0;
}

#unique H1
{
	font-size: 3.4rem;
	padding-bottom: .35em;
	position: relative;
}

/* The signature: a short orange coachline under the page title */
#unique H1::after
{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 3px;
	background-color: #FC7A1A;
}

#unique H2
{
	font-size: 2.6rem;
}

#unique H3
{
	clear: both;
	font-size: 2.2rem;
}

#unique P + UL, #unique UL + UL
{
	margin-left: 1.6em;
	margin-bottom: 1em;
}

#unique LI + LI
{
	margin-top: .35em;
}

#unique UL + P
{
	clear: both;
}

/* ----- Content links: underline, not gray highlighter ------------------------ */

#unique A:link, #unique A:visited
{
	color: #00599A;
	text-decoration: underline;
	text-decoration-color: rgba(0, 89, 154, .35);
	text-underline-offset: 2px;
	transition: color .15s ease, text-decoration-color .15s ease;
}

#unique A:hover, #unique A:focus-visible
{
	background-color: transparent;   /* was a gray block behind the text */
	color: #FC7A1A;
	text-decoration-color: #FC7A1A;
}

#unique A:focus-visible
{
	outline: 2px solid #FC7A1A;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ----- Blurb: CTA card, not an alarm ------------------------------------------ */

#blurb
{
	width: min(100%, 480px);
	margin: 0 auto 1.5em;
	text-align: center;
	border: 0;
	border-left: 4px solid #FC7A1A;
	border-radius: 4px;
	padding: 1em 1.2em;
	background-color: #00304F;
	color: #FFFFFF;
	font-size: 1.7rem;
	line-height: 1.6;
	box-shadow: 0 4px 14px rgba(0, 16, 28, .25);   /* was 10px hard gray shadow */
}

#unique #blurb A
{
	color: #FFD9B8;
	text-decoration-color: rgba(255, 217, 184, .5);
}

#unique #blurb A:hover
{
	color: #FC7A1A;
}

/* ----- Map embed --------------------------------------------------------------- */

.map-embed
{
	position: relative;
	width: 100%;
	aspect-ratio: 638 / 400;
	margin: 0 0 1em;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #E2E7EC;
}

.map-embed IFRAME
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ----- Side navigation ----------------------------------------------------------- */

NAV
{
	background-color: #F2F4F6;
	display: block;
	float: left;
	width: 264px;
	overflow: hidden;
	padding: 12px 0;
	border-right: 1px solid #E2E7EC;
}

NAV UL
{
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	border: 0;
}

NAV UL LI
{
	border: 0;                 /* dashed separators removed */
	font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	font-size: 1.8rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.4;
	list-style-type: none;
	padding: 0;
}

NAV UL LI A
{
	display: block;
	width: 100%;
	padding: .7em 1.1em;
	border-left: 3px solid transparent;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

NAV LI A:link,
NAV LI A:visited
{
	color: #00304F;
	text-decoration: none;
	background-color: transparent;   /* visited links no longer go gray */
}

NAV UL LI A:hover,
NAV UL LI A:focus-visible,
NAV UL LI A:visited:hover
{
	background-color: #FFFFFF;
	border-left-color: #FC7A1A;      /* coachline marks the hovered item */
	color: #004678;
	text-decoration: none;
}

NAV UL LI A:focus-visible
{
	outline: 2px solid #FC7A1A;
	outline-offset: -2px;
}

.current,
.current A:link,
.current A:visited
{
	background-color: #FFFFFF;
	color: #004678;
}

.current A
{
	border-left-color: #FC7A1A;
	font-weight: 600;
}

/* External links: arrow glyph instead of the remote.png image */
UL LI A[href^="http:"]::after, UL LI A[href^="https:"]::after
{
	content: " \2197";          /* ? */
	font-size: .85em;
	color: #FC7A1A;
}

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

BODY > FOOTER, #wrapper FOOTER
{
	display: block;
	background-color: #00304F;
	border-top: 3px solid #FC7A1A;     /* closing coachline */
}

FOOTER P
{
	font-size: 1.3rem;
	color: #C9D6E0;
	padding: 1.1em 1em;
	text-align: center;
}


/* ===========================
   Mobile / Tablet (<= 768px)
   =========================== */
@media (max-width: 768px)
{
	#wrapper
	{
		margin: 0 auto;
		border-radius: 0;
		box-shadow: none;
	}

	NAV
	{
		float: none;
		width: 100%;
		padding: 0;
		border-right: 0;
		border-bottom: 1px solid #E2E7EC;
	}

	NAV UL
	{
		display: flex;
		flex-wrap: wrap;
	}

	NAV UL LI
	{
		flex: 1 1 50%;
		text-align: center;
	}

	NAV UL LI A
	{
		padding: 1em .5em;
		border-left: 0;
		border-bottom: 3px solid transparent;
	}

	NAV UL LI A:hover,
	NAV UL LI A:focus-visible,
	.current A
	{
		border-left: 0;
		border-bottom-color: #FC7A1A;
	}

	#unique
	{
		float: none;
		width: 100%;
		padding: 20px 16px 24px;
		min-height: 0;
	}

	#unique H1 { font-size: 2.8rem; }
	#unique H2 { font-size: 2.2rem; }
	#unique H3 { font-size: 1.9rem; }

	.icons
	{
		float: none;
		display: block;
		max-width: 100%;
		margin: 1em auto;
	}

	#blurb
	{
		width: 100%;
	}
}

/* Touch targets on small phones */
@media (max-width: 480px)
{
	NAV UL LI
	{
		flex: 1 1 100%;
	}

	NAV UL LI A
	{
		padding: 1.1em .5em;
	}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce)
{
	*, *::before, *::after
	{
		transition-duration: .01ms !important;
	}
}