/* =====================================================================
   Frank's Lexus Repair — refreshed stylesheet
   Drop-in replacement for style.css

   Goals:
   - Reliably mobile-friendly (fluid widths, scaling header, capped images)
   - Light visual refresh that keeps the existing navy/orange brand
   - Backward compatible: all original selectors/IDs/classes preserved so
     other pages sharing this file keep working
   ===================================================================== */

/* ---- Brand tokens ---------------------------------------------------- */
:root {
	--navy:        #004678;
	--navy-dark:   #003355;
	--orange:      #FC7A1A;
	--ink:         #1a1a1a;
	--muted:       #5a5a5a;
	--card:        #ffffff;
	--line:        #e2e2e2;
	--link:        #1a4fa0;
	--promo:       #d40000;
	--max-width:   968px;
}

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

HTML, BODY {
	background-color: var(--navy);
	font-size: 100%;
}

BODY {
	margin: 0;
	position: relative;
	width: 100%;
	overflow-x: hidden;                 /* guard against stray wide elements */
	background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%) fixed;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             Arial, Helvetica, sans-serif;
	font-size: 62.5%;                   /* keeps your 1em ˜ 10px math intact */
	line-height: 1.5;
	color: var(--ink);
	-webkit-text-size-adjust: 100%;     /* stop iOS auto-inflating text */
	-webkit-font-smoothing: antialiased;
}

/* Make every image behave on small screens */
IMG { max-width: 100%; height: auto; }

FIGURE { margin: 1.25em 0; text-align: center; }
FIGURE IMG { display: inline-block; }

EM { font-style: italic; }

P {
	line-height: 1.65;
	text-align: left;                   /* was justify — cleaner on mobile */
}

P, LI {
	font-size: 1.6em;                   /* ~16px, was 14px — more readable */
	line-height: 1.6;
}

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

/* (Removed the all-caps first-line flourish: on mobile the "first line"
   is short and random, so it read inconsistently.) */

#partnerLogos, #partnerLogos IMG {
	width: 217px;
	max-width: 100%;
	margin: 1em auto;
}

.icons {
	float: right;
	margin-left: 11px;
}

HR {
	border: 0;
	border-top: 2px solid var(--orange);
	margin: 2.5em auto;
	width: 80%;
}

/* ---- ADDRESS / contact block ---------------------------------------- */
ADDRESS {
	font-size: 1.6em;
	line-height: 1.6;
	font-style: normal;
	margin-bottom: 1em;
}

ADDRESS STRONG EM { color: var(--promo); }

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

/* A tappable phone "button" — wrap the tel: link in a class to use it,
   e.g. <a class="callbtn" href="tel:+17144655199">(714) 465-5199</a> */
.callbtn {
	display: inline-block;
	background: var(--orange);
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	padding: .55em 1.1em;
	border-radius: 8px;
	margin-top: .4em;
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.callbtn:hover { background: #e56a0d; }

/* ---- Top call-to-action bar (Call Now / Text to book) --------------- */
.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: .25em 0 1.4em;
}

.cta-row .btn {
	flex: 1 1 150px;                    /* sit side-by-side, even on phones */
	max-width: 320px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	text-align: center;
	text-decoration: none;
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.15;
	padding: .75em 1em;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(0,0,0,.22);
	transition: background-color .15s ease, transform .05s ease;
}
.cta-row .btn:active { transform: translateY(1px); }

.cta-row .btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.btn-call { background: var(--orange); color: #fff !important; }
.btn-call:hover { background: #e56a0d; }

.btn-text { background: var(--navy); color: #fff !important; }
.btn-text:hover { background: var(--navy-dark); }

/* ---- Layout shell ---------------------------------------------------- */
#wrapper {
	background-color: var(--card);      /* was gray; clean white card */
	border: 0;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
	margin: 16px auto 24px;
	overflow: hidden;
	position: relative;
	width: auto;                        /* was 968px fixed */
	max-width: var(--max-width);        /* caps on desktop, fluid on mobile */
	z-index: 100;
}

HEADER {
	background-image: url(images/Exertise-op.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom: 1px dotted #6D6D6D;
	color: #FFFFFF;
	display: block;
	position: relative;
	width: 100%;                        /* was 968px fixed */
	aspect-ratio: 968 / 371;            /* scales proportionally, no crop */
}

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

#unique {
	background-color: #FFFFFF;
	float: right;
	padding: 1.5em;
	width: 100%;                        /* originally 639px (with sidebar) */
}

#unique H1, #unique H2, #unique H3, #unique H4 {
	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	font-style: normal;                 /* dropped dated italic */
	color: var(--navy);
	line-height: 1.2;
	margin: .65em 0;
	/* dropped the text-shadow — it hurt readability on the white card */
}

#unique H1 { font-size: 2.7em; padding-top: 3px; }
#unique H2 { font-size: 2.2em; padding-top: 3px; }
#unique H3 { clear: both; font-size: 1.9em; padding-top: 5px; }

#unique P + UL, #unique UL + UL {
	float: left;
	margin-left: 44px;
	width: auto;
}

#unique UL + P { clear: both; }

#unique A:link { text-decoration: none; }
#unique A:link, A:visited { color: var(--link); }
#unique A:hover { background-color: transparent; text-decoration: underline; }

/* ---- Promo / blurb box (cleaned up; unused on homepage) -------------- */
#blurb {
	width: 80%;
	margin: 0 auto 1.25em;
	text-align: center;
	border-radius: 10px;
	padding: .8em 1em;
	background-color: var(--promo);
	color: #fff;
	font-size: 1.6em;
	line-height: 1.7;
	box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

#unique #blurb A { color: #fff; text-decoration: underline; }

/* ---- Side navigation (kept for pages that use it) -------------------- */
NAV {
	background-color: #FFFFFF;
	color: var(--orange);
	display: block;
	float: left;
	height: 100%;
	overflow: hidden;
	padding: 0;
}

NAV, NAV UL, NAV > DIV > UL, NAV UL LI { width: 297px; }

NAV UL {
	border-bottom: 2px solid #D6D6D6;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

NAV UL LI {
	border-top: 1px dashed #D6D6D6;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5;
	list-style: none;
	padding: 0;
}

NAV UL LI, NAV UL LI A { display: block; width: 100%; }

NAV LI A:link, NAV LI A:visited { color: #0030ff; text-decoration: none; }
NAV UL LI A:visited { background-color: #EEEEEE; }

.current, NAV UL LI:hover { background-color: var(--navy); color: #fff; }
NAV UL LI A:hover { color: #fff; text-decoration: none; }
NAV UL LI A:visited:hover { background-color: var(--navy); color: #fff; }

UL LI A[href^="http:"], UL LI A[href^="https:"] {
	background: url(images/remote.png) right center no-repeat;
	padding-right: 17px;
}

/* ---- Footer ---------------------------------------------------------- */
FOOTER {
	max-width: var(--max-width);
	margin: 0 auto 24px;
	color: #cfe0ee;
}
FOOTER P { color: #cfe0ee; font-size: 1.3em; }

/* =====================================================================
   Responsive behaviour
   ===================================================================== */

/* Tablet / small desktop */
@media (max-width: 992px) {
	#wrapper { margin: 12px 10px 20px; }
	FOOTER   { margin: 0 10px 20px; }
}

/* Phones */
@media (max-width: 600px) {
	#unique { padding: 1.1em; }

	#unique H1 { font-size: 2.2em; }
	#unique H2 { font-size: 1.9em; }
	#unique H3 { font-size: 1.7em; }

	P, LI, ADDRESS { font-size: 1.7em; }   /* slightly larger for thumbs */

	/* Sidebar nav: stack full-width above content instead of a fixed column */
	NAV, NAV UL, NAV > DIV > UL, NAV UL LI { width: 100%; }
	NAV   { float: none; }
	#unique { float: none; }

	/* Indented lists shouldn't push off-screen on narrow widths */
	#unique P + UL, #unique UL + UL { float: none; margin-left: 22px; }

	#blurb { width: 100%; }
	HR { width: 92%; }
}

/* Respect users who prefer reduced motion (future-proofing) */
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto; }
}