/*
Theme Name: Miller Lights
Theme URI: https://miller-lights.com
Author: Miller Lights
Description: Block theme for Miller Lights, solar, battery backup and EV charging in Scottsdale, AZ. Mobile-first. All colors come from the theme.json palette; switch palettes under Appearance > Editor > Styles.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: miller-lights
*/

/* ===== Tokens =====
   Colors come only from theme.json presets. Everything else that the design
   repeats (radius, widths, stripes) lives here so it can be tuned in one place. */
:root {
	--ml-bg: var(--wp--preset--color--bg);
	--ml-surface: var(--wp--preset--color--surface);
	--ml-ink: var(--wp--preset--color--ink);
	--ml-muted: var(--wp--preset--color--muted);
	--ml-faint: var(--wp--preset--color--faint);
	--ml-line: var(--wp--preset--color--line);
	--ml-line-strong: var(--wp--preset--color--line-strong);
	--ml-sand: var(--wp--preset--color--sand);
	--ml-sand-2: var(--wp--preset--color--sand-2);
	--ml-accent: var(--wp--preset--color--accent);
	--ml-on-accent: var(--wp--preset--color--on-accent);
	--ml-accent-soft: var(--wp--preset--color--accent-soft);
	--ml-deep: var(--wp--preset--color--deep);
	--ml-on-dark: var(--wp--preset--color--on-dark);
	--ml-on-dark-muted: var(--wp--preset--color--on-dark-muted);
	--ml-accent-on-dark: var(--wp--preset--color--accent-on-dark);
	--ml-star: var(--wp--preset--color--star);

	--ml-font-display: var(--wp--preset--font-family--display);
	--ml-font-body: var(--wp--preset--font-family--body);
	--ml-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

	--ml-radius-pill: 999px;
	--ml-radius-hero: 22px;
	--ml-radius-card: 18px;
	--ml-radius-btn: 14px;
	--ml-radius-sm: 12px;

	--ml-max: 1120px;
	--ml-flow: 640px;
	--ml-gutter: 20px;
	--ml-shadow-bar: 0 10px 30px rgba(0, 0, 0, 0.22);
	--ml-stripes: repeating-linear-gradient(135deg, var(--ml-sand) 0 10px, var(--ml-sand-2) 10px 20px);
	--ml-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--ml-bg);
	color: var(--ml-ink);
	font-family: var(--ml-font-body);
	-webkit-font-smoothing: antialiased;
	text-size-adjust: 100%;
}
input, button, select, textarea { font-family: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 2px; }

.ml-mono {
	font-family: var(--ml-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

/* ===== Header ===== */
.ml-header {
	position: sticky;
	top: var(--ml-admin-bar);
	z-index: 20;
	background: color-mix(in srgb, var(--ml-bg) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ml-line);
}
.ml-header__inner {
	max-width: var(--ml-max);
	margin: 0 auto;
	padding: 4px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ml-logo {
	display: block;
	width: 124px;
	height: 68px;
	background-image: var(--ml-logo-url);
	background-position: -25px -26px;
	background-size: 174px auto;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	flex: none;
}
.ml-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: none; }
.ml-nav__link {
	padding: 10px 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ml-ink);
	text-decoration: none;
	white-space: nowrap;
}
.ml-nav__cta {
	background: var(--ml-ink);
	color: var(--ml-bg);
	border-radius: var(--ml-radius-pill);
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.ml-nav__cta:hover { color: var(--ml-bg); background: var(--ml-accent); }

/* ===== Sections ===== */
.ml-main { margin: 0; }
.ml-main > * { margin-block: 0; }
.ml-section {
	max-width: var(--ml-max);
	margin: 0 auto !important;
	padding: 40px var(--ml-gutter);
}
.ml-section > * { margin-block: 0; }
.ml-section--tight-bottom { padding-bottom: 24px; }
.ml-section--loose { padding-top: 56px; padding-bottom: 56px; }
.ml-h2 {
	font-family: var(--ml-font-display);
	font-weight: 600;
	font-size: clamp(28px, 5vw, 40px);
	line-height: 1.1;
	margin: 0 0 20px !important;
}
.ml-h3 {
	font-family: var(--ml-font-display);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.15;
	margin: 0 !important;
}
.ml-lead {
	font-size: 17px;
	line-height: 1.5;
	color: var(--ml-muted);
	max-width: 560px;
	text-wrap: pretty;
	margin: -8px 0 20px !important;
}
.ml-band {
	background: var(--ml-deep);
	color: var(--ml-on-dark);
	margin: 0 !important;
}
.ml-band .ml-lead { color: var(--ml-on-dark-muted); margin-bottom: 28px !important; }

/* ===== Buttons (core/button styles + plain links) ===== */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.wp-block-button__link,
.ml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 16px 24px;
	border-radius: var(--ml-radius-btn);
	border: 1.5px solid transparent;
	background: var(--ml-accent);
	color: var(--ml-on-accent);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.wp-block-button__link:hover, .ml-btn:hover { color: var(--ml-on-accent); filter: brightness(1.06); }
/* Extra specificity: in the Site Editor, WordPress's own button styles load after the theme's. */
.wp-block-buttons .wp-block-button .wp-block-button__link { border: 1.5px solid transparent; }
.wp-block-buttons .is-style-ml-outline .wp-block-button__link,
.is-style-ml-outline .wp-block-button__link,
.ml-btn--outline {
	background: transparent;
	color: var(--ml-ink);
	border: 1.5px solid var(--ml-ink);
	font-weight: 600;
	padding-inline: 22px;
}
.wp-block-buttons .is-style-ml-outline .wp-block-button__link:hover, .ml-btn--outline:hover { color: var(--ml-accent); border-color: var(--ml-accent); filter: none; }
.is-style-ml-ink .wp-block-button__link, .ml-btn--ink { background: var(--ml-ink); color: var(--ml-bg); }
.is-style-ml-ink .wp-block-button__link:hover, .ml-btn--ink:hover { color: var(--ml-bg); }
.ml-btn--sm { min-height: 48px; padding: 0 18px; font-size: 15px; font-weight: 600; border-radius: var(--ml-radius-sm); }

/* ===== Photo placeholders =====
   Striped box with a mono label. To use a real photo, replace the group with an Image block. */
.ml-photo {
	background: var(--ml-stripes);
	border-radius: var(--ml-radius-card);
	display: flex;
	align-items: flex-end;
	padding: 12px;
	margin: 0 !important;
	overflow: hidden;
}
.ml-photo__label {
	font-family: var(--ml-font-mono);
	font-size: 11px;
	background: var(--ml-bg);
	padding: 4px 8px;
	border-radius: 5px;
	color: var(--ml-muted);
	margin: 0 !important;
}
.ml-photo--hero { aspect-ratio: 4 / 5; max-height: 560px; width: 100%; border-radius: var(--ml-radius-hero); padding: 18px; }
.ml-photo--hero .ml-photo__label { font-size: 12px; padding: 6px 10px; border-radius: 6px; }
.ml-photo--card { height: 170px; border-radius: 0; }
.ml-photo--square { aspect-ratio: 1; border-radius: var(--ml-radius-btn); padding: 10px; }
.ml-photo-img img, .ml-photo-img { border-radius: var(--ml-radius-hero); margin: 0; }
.ml-photo-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-height: 560px; }

/* ===== Hero ===== */
.ml-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px;
	align-items: center;
	padding-bottom: 28px;
}
.ml-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.ml-hero__copy > * { margin: 0 !important; }
.ml-hero__title {
	font-family: var(--ml-font-display);
	font-weight: 600;
	font-size: clamp(52px, 10vw, 96px);
	line-height: 0.95;
	text-wrap: balance;
}
.ml-hero__title--page { font-size: clamp(44px, 8vw, 72px); }
.ml-hero__lead {
	font-size: 19px;
	line-height: 1.5;
	color: var(--ml-muted);
	max-width: 460px;
	text-wrap: pretty;
}
.ml-arrow-link { font-size: 15px; }
.ml-arrow-link a { color: var(--ml-ink); text-decoration: none; font-weight: 600; }
.ml-arrow-link a::after { content: " →"; color: var(--ml-muted); font-weight: 400; }

/* ===== Service cards ===== */
.ml-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 14px;
}
.ml-cards > * { margin: 0 !important; }
.ml-card {
	position: relative;
	background: var(--ml-surface);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--ml-ink);
}
.ml-card:hover { border-color: var(--ml-line-strong); }
.ml-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ml-card__body > * { margin: 0 !important; }
.ml-card__title { font-family: var(--ml-font-display); font-size: 30px; font-weight: 600; line-height: 1.1; }
.ml-card__text { font-size: 16px; line-height: 1.5; color: var(--ml-muted); }
.ml-card__more { font-size: 15px; font-weight: 600; margin-top: 6px !important; }
.ml-card__more a { color: var(--ml-ink); text-decoration: none; }
/* Whole card is tappable: the "Get a ___ quote" link stretches over it. */
.ml-card__more a::before { content: ""; position: absolute; inset: 0; }
.ml-card__more a:hover { color: var(--ml-accent); }

.ml-soon {
	margin-top: 14px !important;
	border: 1px dashed var(--ml-line-strong);
	border-radius: var(--ml-radius-card);
	padding: 18px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	justify-content: space-between;
}
.ml-soon > * { margin: 0 !important; }
.ml-soon__muted { color: var(--ml-muted); }
.ml-soon a { font-size: 15px; font-weight: 600; color: var(--ml-ink); padding: 8px 0; display: inline-block; }

/* ===== Steps (dark band) ===== */
.ml-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 24px;
}
.ml-steps > * { margin: 0 !important; }
.ml-step { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ml-accent-on-dark); padding-top: 16px; }
.ml-step > * { margin: 0 !important; }
.ml-step__num { font-family: var(--ml-font-mono); font-size: 13px; color: var(--ml-accent-on-dark); }
.ml-step__title { font-size: 20px; font-weight: 700; }
.ml-step__text { font-size: 16px; line-height: 1.5; color: var(--ml-on-dark-muted); }

/* ===== Gallery ===== */
.ml-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 240px), 1fr));
	gap: 10px;
}
.ml-gallery > * { margin: 0 !important; }
.ml-gallery .wp-block-image img { aspect-ratio: 1; object-fit: cover; border-radius: var(--ml-radius-btn); width: 100%; }

/* ===== Columns of short facts (trust row, etc.) ===== */
.ml-trio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 28px;
}
.ml-trio > * { margin: 0 !important; }
.ml-trio__item { display: flex; flex-direction: column; gap: 10px; }
.ml-trio__item > * { margin: 0 !important; }
.ml-trio__item p { font-size: 16px; line-height: 1.55; color: var(--ml-muted); }

/* ===== Note band (E15) ===== */
.ml-note {
	background: var(--ml-surface);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius-card);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ml-note > * { margin: 0 !important; }
.ml-note p { font-size: 16px; line-height: 1.55; color: var(--ml-muted); }
.ml-note__source { font-size: 13px !important; color: var(--ml-faint) !important; }

/* ===== FAQ ===== */
.ml-faq { display: flex; flex-direction: column; border-top: 1px solid var(--ml-line); max-width: 760px; }
.ml-faq > * { margin: 0 !important; }
.ml-faq .wp-block-details { border-bottom: 1px solid var(--ml-line); padding: 0; }
.ml-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 32px 18px 0;
	font-size: 17px;
	font-weight: 700;
	position: relative;
	min-height: 46px;
}
.ml-faq summary::-webkit-details-marker { display: none; }
.ml-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 22px; font-weight: 400; color: var(--ml-muted); }
.ml-faq details[open] summary::after { content: "–"; }
.ml-faq details > :not(summary) { margin: 0 0 18px !important; font-size: 16px; line-height: 1.55; color: var(--ml-muted); }

/* ===== Lists on service pages ===== */
.ml-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ml-checks li { position: relative; padding-left: 28px; font-size: 17px; line-height: 1.45; }
.ml-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ml-accent); font-weight: 700; }

/* ===== CTA band ===== */
.ml-cta { text-align: left; }
.ml-cta .ml-h2 { margin-bottom: 8px !important; }
.ml-cta .ml-lead { margin: 0 0 22px !important; }

/* ===== Footer ===== */
.ml-footer { border-top: 1px solid var(--ml-line); }
.ml-footer__inner {
	max-width: var(--ml-max);
	margin: 0 auto;
	padding: 28px var(--ml-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	font-size: 14px;
	color: var(--ml-muted);
}
.ml-footer__inner > * { margin: 0 !important; }
.ml-footer a { color: var(--ml-muted); }
.ml-footer a:hover { color: var(--ml-accent); }
.ml-footer__name { font-weight: 700; color: var(--ml-ink); }

/* Room for the fixed mobile action bar so it never covers the footer. */
@media (max-width: 819.98px) {
	body.ml-has-bar .wp-site-blocks { padding-bottom: 96px; }
}

/* ===== Generic pages (privacy, terms, anything new the owner adds) ===== */
.ml-page { padding: 32px 0 56px; }
.ml-page > :where(:not(.ml-section):not(.ml-band):not(.alignfull):not(.alignwide)) {
	max-width: min(var(--ml-flow), calc(100% - 2 * var(--ml-gutter)));
	margin-left: auto !important;
	margin-right: auto !important;
}
.ml-page > .ml-section:first-child, .ml-page > .ml-band:first-child { margin-top: -32px !important; }
.ml-page h1 { font-family: var(--ml-font-display); font-size: 42px; line-height: 1.05; }
.ml-page p, .ml-page li { font-size: 17px; line-height: 1.6; }
.ml-placeholder-note {
	font-family: var(--ml-font-mono);
	font-size: 12px;
	color: var(--ml-muted);
	background: var(--ml-accent-soft);
	border-radius: 8px;
	padding: 10px 12px;
}

/* ===== Flow pages (quote, tracker, booking) ===== */
.ml-flow-main { margin: 0; }
.ml-flow-main > * { margin-block: 0; }

/* 404 */
.ml-404 { padding: 64px var(--ml-gutter); max-width: var(--ml-flow); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ml-404 > * { margin: 0 !important; }