/* ===========================================================================
   Sun Directed — "legacy look" override
   Confidential - do not redistribute without permission

   Re-skins the new static build to match the ORIGINAL sundirected.com
   (Divi 5.0) design. Brand v1.0 (plum/mint + Public Sans) is NOT applied.

   Values below were measured off the live Divi site on 2026-09-18:
     body      Verdana 14px / 1.7, #666666, white ground
     headings  Verdana 700, #333333, tight (1.0) line-height
     h1 22px · h2 18px · h3 16px · h4 13px
     top bar   #0A81BB, white text
     hero band #3BA6EE
     CTA       #E09900, 25px pill, white, 20px/500
     secondary #0066CC, 6px radius
     bands     #E0E1E2 (gray), #C3DDDC (teal-gray)
     footer    #222222

   This file is the ONLY place the legacy look is defined. Deleting the
   <link> to it restores the Brand v1.0 appearance — nothing else was
   altered in the page markup except the injected .sd-topbar and the logo
   swap (see restyle-legacy.sh).
   =========================================================================== */

/* --- 1. Retarget the theme's design tokens -------------------------------- */
/* The Blueprint theme drives nearly everything off these custom properties,
   so remapping them here re-skins the whole site without touching markup. */
:root {
	/* Typeface */
	--wp--preset--font-family--public-sans: Verdana, Helvetica, Arial, Lucida, sans-serif;

	/* Core roles */
	--wp--preset--color--primary: #0A81BB;
	--wp--preset--color--ink: #333333;
	--wp--preset--color--text-body: #666666;
	--wp--preset--color--text-muted: #777777;
	--wp--preset--color--paper: #FFFFFF;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--accent: #E0E1E2;
	--wp--preset--color--border: #D8D8D8;
	--wp--preset--color--border-subtle: #E6E6E6;

	/* Plum scale -> Divi blues */
	--wp--preset--color--plum-50: #EAF4FA;
	--wp--preset--color--plum-100: #D3E9F4;
	--wp--preset--color--plum-300: #8FC9E5;
	--wp--preset--color--plum-500: #3BA6EE;
	--wp--preset--color--plum-700: #0A81BB;
	--wp--preset--color--plum-800: #0A6E9E;
	--wp--preset--color--plum-900: #095C84;
	--wp--preset--color--plum-950: #074B6C;

	/* Mint scale -> Divi amber (the CTA colour) */
	--wp--preset--color--mint-50: #FDF6E8;
	--wp--preset--color--mint-100: #FAEBCB;
	--wp--preset--color--mint-200: #F6DDA6;
	--wp--preset--color--mint-300: #F1CD78;
	--wp--preset--color--mint-400: #E09900;
	--wp--preset--color--mint: #E09900;
	--wp--preset--color--mint-600: #C98A00;
	--wp--preset--color--mint-700: #A87300;
	--wp--preset--color--mint-800: #8A5F00;

	/* Divi content measure */
	--wp--style--global--content-size: 1080px;
	--wp--style--global--wide-size: 1425px;
}

/* --- 2. Typography -------------------------------------------------------- */
body {
	font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	background-color: #FFFFFF;
}

p,
li {
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
	font-weight: 700;
	color: #333333;
	line-height: 1;
}

h1, .wp-block-post-title { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4, h5, h6 { font-size: 13px; }

/* Divi sets generous space under headings, not above */
h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; }

a { color: #0A81BB; }
a:hover { color: #E09900; }

/* Sections that set their own light text keep it. The heading/paragraph rules
   above are direct matches, so they beat inheritance — these put white back on
   the coloured bands (the block editor writes that colour inline). */
[style*="color:#FFFFFF"],
[style*="color:#FFFFFF"] h1,
[style*="color:#FFFFFF"] h2,
[style*="color:#FFFFFF"] h3,
[style*="color:#FFFFFF"] h4,
[style*="color:#FFFFFF"] h5,
[style*="color:#FFFFFF"] h6,
[style*="color:#FFFFFF"] p,
[style*="color:#FFFFFF"] li,
[style*="color:#FFFFFF"] strong {
	color: #FFFFFF !important;
}

/* The theme colours the FIRST paragraph of every group as an eyebrow (mint
   originally, amber after the palette swap). That's right for a real eyebrow
   but wrong for hero body copy — and the homepage lost its eyebrow, which
   promoted the body paragraph into that slot. So: everything directly inside a
   light-text hero is white... */
[style*="color:#FFFFFF"] > p {
	color: #FFFFFF !important;
}

/* ...except a genuine eyebrow, i.e. the paragraph immediately before the
   headline. :has() raises specificity, so this wins regardless of order. */
[style*="color:#FFFFFF"] > p:has(+ h1),
[style*="color:#FFFFFF"] > p:has(+ h2) {
	color: #E09900 !important;
	font-weight: 700;
}

/* ...but a panel NESTED inside a light-text hero keeps its own dark text.
   Without this the blanket rule above paints white text onto a light card. */
[style*="color:#FFFFFF"] .wp-block-group.has-background,
[style*="color:#FFFFFF"] .wp-block-group.has-background > p,
[style*="color:#FFFFFF"] .wp-block-group.has-background > p:first-of-type,
[style*="color:#FFFFFF"] .wp-block-group.has-background ul li,
[style*="color:#FFFFFF"] .wp-block-group.has-background h1,
[style*="color:#FFFFFF"] .wp-block-group.has-background h2,
[style*="color:#FFFFFF"] .wp-block-group.has-background h3,
[style*="color:#FFFFFF"] .wp-block-group.has-background h4,
[style*="color:#FFFFFF"] .wp-block-group.has-background p,
[style*="color:#FFFFFF"] .wp-block-group.has-background li,
[style*="color:#FFFFFF"] .wp-block-group.has-background strong {
	color: #333333 !important;
}

/* The theme ships font-size utility classes sized for Brand v1.0 — pull them
   back to Divi's much smaller scale so nothing renders oversized. */
.has-x-large-font-size { font-size: 22px !important; line-height: 1.1 !important; }
.has-large-font-size   { font-size: 18px !important; line-height: 1.2 !important; }
.has-medium-font-size  { font-size: 16px !important; }
.has-small-font-size   { font-size: 14px !important; }

/* --- 3. Top bar (injected markup) ---------------------------------------- */
.sd-topbar {
	background: #0A81BB;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 1;
	padding: 10px 0;
	text-align: center;
}

.sd-topbar a {
	color: #FFFFFF;
	text-decoration: none;
	font-weight: 700;
}

.sd-topbar a:hover { color: #FFFFFF; text-decoration: underline; }

/* --- 4. Header ------------------------------------------------------------ */
.sd-header {
	background-color: #FFFFFF !important;
	color: #333333 !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}


.sd-nav a,
.sd-header .wp-block-navigation-item__content {
	color: rgba(0, 0, 0, .6) !important;
	font-size: 14px !important;
	font-weight: 600;
	text-decoration: none;
}

.sd-nav a:hover,
.sd-header .wp-block-navigation-item__content:hover { color: #0A81BB !important; }

.sd-header .wp-block-navigation__submenu-container {
	background-color: #FFFFFF !important;
	border: 1px solid #E6E6E6;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.sd-phone,
.sd-phone a {
	color: #333333 !important;
	font-weight: 700;
	font-size: 14px !important;
	text-decoration: none;
}

/* --- 5. Buttons ----------------------------------------------------------- */
/* Divi's buttons: 20px/500, white label, 2px border, generous horizontal pad.
   Primary (was mint) is the amber pill; secondary (was plum) is the blue
   6px-radius button. */
.wp-block-button__link {
	font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
	font-size: 20px !important;
	font-weight: 500 !important;
	padding: 6px 20px !important;
	border-radius: 6px !important;
	border: 2px solid #FFFFFF !important;
	background-color: #0066CC !important;
	color: #FFFFFF !important;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.wp-block-button__link:hover {
	background-color: #0A81BB !important;
	color: #FFFFFF !important;
}

/* Primary CTA — the amber pill */
.wp-block-button__link.has-mint-background-color,
.wp-block-button__link.has-mint-400-background-color,
.wp-block-button.is-style-fill .wp-block-button__link.has-mint-background-color {
	background-color: #E09900 !important;
	border-color: rgba(255, 255, 255, 0) !important;
	border-radius: 25px !important;
	color: #FFFFFF !important;
}

.wp-block-button__link.has-mint-background-color:hover,
.wp-block-button__link.has-mint-400-background-color:hover {
	background-color: #C98A00 !important;
}

/* Outline buttons (were plum-on-transparent).
   Default to blue-on-light — a white outline is invisible on the white page
   and on the grey bands. The white treatment is re-applied below, but only
   inside sections that set light text. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.has-transparent-background-color {
	background-color: transparent !important;
	border: 2px solid #0A81BB !important;
	color: #0A81BB !important;
	border-radius: 6px !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.has-transparent-background-color:hover {
	background-color: #0A81BB !important;
	color: #FFFFFF !important;
}

[style*="color:#FFFFFF"] .wp-block-button.is-style-outline .wp-block-button__link,
[style*="color:#FFFFFF"] .wp-block-button__link.has-transparent-background-color {
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}

[style*="color:#FFFFFF"] .wp-block-button.is-style-outline .wp-block-button__link:hover,
[style*="color:#FFFFFF"] .wp-block-button__link.has-transparent-background-color:hover {
	background-color: rgba(255, 255, 255, .18) !important;
	color: #FFFFFF !important;
}

/* --- 6. Section bands ----------------------------------------------------- */
/* Divi sections are 54px 0. Colour bands map onto the theme's tinted groups. */
.entry-content > .wp-block-group {
	padding-top: 54px !important;
	padding-bottom: 54px !important;
}

.has-plum-900-background-color,
.has-plum-800-background-color,
.has-plum-700-background-color {
	background-color: #3BA6EE !important;
	color: #FFFFFF !important;
}

.has-plum-900-background-color h1, .has-plum-900-background-color h2,
.has-plum-900-background-color h3, .has-plum-900-background-color p,
.has-plum-800-background-color h1, .has-plum-800-background-color h2,
.has-plum-800-background-color h3, .has-plum-800-background-color p,
.has-plum-700-background-color h1, .has-plum-700-background-color h2,
.has-plum-700-background-color h3, .has-plum-700-background-color p {
	color: #FFFFFF !important;
}

.has-plum-50-background-color,
.has-accent-background-color {
	background-color: #E0E1E2 !important;
	color: #666666 !important;
}

.has-mint-50-background-color,
.has-mint-100-background-color {
	background-color: #C3DDDC !important;
	color: #666666 !important;
}

/* Cards / bordered panels */
.wp-block-group.has-border-color,
.wp-block-columns .wp-block-column.has-background {
	border-radius: 12px;
	border-color: #E0E1E2 !important;
}

/* --- 7. Homepage hero ----------------------------------------------------- */
/* The original homepage leads with a full-bleed photo and white headline.
   Scoped to .page-home so interior pages keep the flat blue band. */
.page-home .entry-content > .wp-block-group:first-child {
	background-color: #3BA6EE !important;
	background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)),
		url("/wp-content/uploads/2026/09/residential-solar-home.webp");
	background-size: cover;
	background-position: center 60%;
	padding-top: 120px !important;
	padding-bottom: 120px !important;
}

/* The "What we install" panel sits inside the hero, on the photo. No box:
   it reads as part of the hero, white text straight on the image, with the
   same shadow the headline gets so it stays legible. */
.page-home .entry-content > .wp-block-group:first-child .wp-block-group.has-background {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.page-home .entry-content > .wp-block-group:first-child .wp-block-group.has-background p,
.page-home .entry-content > .wp-block-group:first-child .wp-block-group.has-background li,
.page-home .entry-content > .wp-block-group:first-child .wp-block-group.has-background strong {
	color: #FFFFFF !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* Restored electric-bill section */
.sd-bill .wp-block-columns { gap: 2.5rem; align-items: center; }
.sd-bill figure { margin: 0; }
.sd-bill img {
	max-width: 100%;
	height: auto;
	border: 1px solid #D8D8D8;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.sd-bill h2 { margin-bottom: 14px; }

/* Direct children only — a `p` descendant selector here outranks the
   nested-card rule above and would whiten text on the white card. */
.page-home .entry-content > .wp-block-group:first-child > h1,
.page-home .entry-content > .wp-block-group:first-child > h2,
.page-home .entry-content > .wp-block-group:first-child > p {
	color: #FFFFFF !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* NB: there was an amber `p:first-of-type` rule here for the hero eyebrow.
   It was removed when the eyebrow came out — :first-of-type then promoted the
   hero BODY copy (and the first paragraph of the nested card) into it, turning
   both amber. Eyebrow colouring now lives on the `:has(+ h1)` rule further up,
   which only ever matches a paragraph sitting directly above a headline. */

/* The archive-style page title above the content isn't part of the Divi look */
main > .wp-block-post-title { display: none; }

/* --- 8. Footer ------------------------------------------------------------ */
footer .wp-block-group,
.wp-site-blocks > footer {
	background-color: #222222 !important;
	color: #999999 !important;
}

footer p,
footer li,
footer .wp-block-paragraph { color: #999999 !important; font-size: 12px; }

footer a { color: #CCCCCC !important; }
footer a:hover { color: #FFFFFF !important; }

footer h1, footer h2, footer h3, footer h4 { color: #FFFFFF !important; }

/* Footer logo is sized by the SAME rule as the header's, so the two render
   identically at any viewport. The header <img> carries an inline width, so
   both need !important to land on the same number. */
.sd-header img,
footer .wp-block-site-logo img,
footer .custom-logo {
	width: 180px !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
}

/* Footer link list (injected by content-edits.py) */
.sd-footer-nav { margin: 18px 0 0; }

.sd-footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sd-footer-nav li { margin: 0; }

.sd-footer-nav a {
	color: #CCCCCC !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.sd-footer-nav a:hover { color: #FFFFFF !important; text-decoration: underline; }

/* --- 9. Mobile ------------------------------------------------------------ */
@media (max-width: 782px) {
	.page-home .entry-content > .wp-block-group:first-child {
		padding-top: 70px !important;
		padding-bottom: 70px !important;
	}

	.sd-header img { max-height: 42px; }
}

/* --- 10. Content density -------------------------------------------------
   Jacob, 2026-09-18: "/solar/centre-county-cost-factors/ looks like a word
   document". The text pages are headings + paragraphs on flat white with no
   structure. Divi broke the same content into cards on tinted bands, so:
   content columns become cards, and headings get room to breathe.
   Scoped to .entry-content columns, so hero and footer layouts are untouched. */
.entry-content .wp-block-columns:not(.sd-bill .wp-block-columns) {
	gap: 1.5rem;
}

.entry-content > .wp-block-group .wp-block-columns > .wp-block-column {
	background: #FFFFFF;
	border: 1px solid #E0E1E2;
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/* Cards sitting on a tinted band get a plain white face, no double border */
.has-accent-background-color .wp-block-columns > .wp-block-column,
[style*="background-color:#E0E1E2"] .wp-block-columns > .wp-block-column {
	border-color: #D0D1D2;
}

/* The bill section is a two-up image/text layout, not a card grid */
.sd-bill .wp-block-columns > .wp-block-column {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Card headings sit tight to their copy */
.entry-content .wp-block-column > h3:first-child,
.entry-content .wp-block-column > h4:first-child {
	margin-top: 0;
}

/* Give stacked sections visible separation instead of an undifferentiated run */
.entry-content > .wp-block-group + .wp-block-group {
	border-top: 1px solid #EDEDED;
}

/* Section eyebrow labels read as labels, not body copy */
.entry-content > .wp-block-group > p:first-child:has(+ h2) {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 12px !important;
	font-weight: 700;
	color: #0A81BB !important;
	margin-bottom: 6px;
}

/* Lists get usable spacing */
.entry-content .wp-block-list li { margin-bottom: .5rem; }

/* --- 11. Homestead story video ------------------------------------------
   Two-up layout matching the original: story copy left, video right. The
   video only downloads when clicked (preload="none" + poster). */
.sd-video { margin: 0; }

.sd-video video {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
	border-radius: 8px;
	background: #000;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
	cursor: pointer;
}

.sd-video__caption {
	font-size: 12px !important;
	font-style: italic;
	margin-top: .5rem;
	max-width: 320px;
}

@media (min-width: 900px) {
	.sd-story {
		display: grid !important;
		grid-template-columns: 2fr 1fr;
		column-gap: 2.5rem;
		align-items: start;
	}

	.sd-story > * { grid-column: 1; }

	.sd-story > .sd-video {
		grid-column: 2;
		grid-row: 1 / span 20;
		justify-self: end;
	}

	.sd-video video, .sd-video__caption { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   Original-site photography (placed by place-original-images.py).

   The source images mix portrait and landscape at wildly different
   aspect ratios, so an un-normalized gallery row ranged from 124px to
   312px tall and the captions never lined up. Cropping to a fixed 3:2
   box fixes the rhythm.

   Scoped to .sd-gallery on purpose: the pre-existing homepage galleries
   use the same wp-block-image markup, and a bare
   `.wp-block-columns .wp-block-image img` rule would silently re-crop
   those too.
   --------------------------------------------------------------------- */
.wp-block-image.sd-gallery img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.wp-block-image.sd-gallery figcaption {
	margin-top: 0.5rem;
	font-size: 0.85em;
	text-align: center;
}

/* Section icons carried over from the original pages. */
.wp-block-image.is-resized img[src*="/assets/img/icon-"] {
	margin: 0 auto 0.5rem;
}

/* App/controller screenshots are square or portrait UI captures. The 3:2
   gallery crop above would slice the top and bottom off the chart, so
   these fit inside the box instead of filling it. */
.wp-block-image.sd-gallery img[src*="tesla-app"],
.wp-block-image.sd-gallery img[src*="daikin-one-controller"] {
	object-fit: contain;
	background: #fff;
}

/* Square product shots on white (e.g. the Daikin Entra unit) render taller
   than the viewport at full width. Cap and centre them. */
.wp-block-image.sd-product {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-image.sd-product img { width: 100%; height: auto; display: block; }

.wp-block-image.sd-product figcaption {
	text-align: center;
	font-size: 0.85em;
}

/* ---------------------------------------------------------------------
   Click-to-play story video (homepage).

   The still photo is the video's `poster`, so the section looks exactly
   as it did until someone clicks. The play badge is injected by script,
   so with JS off the native controls sit over the poster and the video
   still plays — nothing dead is ever rendered.
   --------------------------------------------------------------------- */
.sd-playable {
	position: relative;
	margin: 0;
	line-height: 0;
}

/* `aspect-ratio` is load-bearing, not decoration: with preload="none" the
   video has no intrinsic size until someone clicks, so without it the box
   has no height and everything below jumps when the poster paints. The
   ratio is the source video's own 1015x1800. Width fills the column, which
   is what the <img> it replaced did. */
.sd-playable__video {
	width: 100%;
	height: auto;
	aspect-ratio: 1015 / 1800;
	display: block;
	background: #222;
}

/* Tracks the video box, not the whole figure — a plain `inset: 0` also
   covered the caption, putting caption text inside the click target. */
.sd-playable__button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1015 / 1800;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.18);
	transition: background 0.15s ease;
}

.sd-playable__button:hover,
.sd-playable__button:focus-visible {
	background: rgba(0, 0, 0, 0.32);
}

.sd-playable__button:focus-visible {
	outline: 3px solid #E09900;
	outline-offset: -3px;
}

/* Amber disc with a white triangle, matching the pill CTAs. */
.sd-playable__icon {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #E09900;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	position: relative;
}

.sd-playable__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 15px 0 15px 25px;
	border-color: transparent transparent transparent #fff;
}

.sd-playable.is-playing .sd-playable__button {
	display: none;
}

.sd-playable .wp-element-caption {
	line-height: 1.7;
	margin-top: 0.5rem;
	font-size: 0.85em;
}

@media (prefers-reduced-motion: reduce) {
	.sd-playable__button { transition: none; }
}

/* On a phone the video column is ~221px wide, where a 76px badge covers a
   third of the frame. */
@media (max-width: 600px) {
	.sd-playable__icon { width: 56px; height: 56px; }
	.sd-playable__icon::after { border-width: 11px 0 11px 18px; }
}

/* Hero bullet list (homepage). Sits on the blue band, so it inherits the
   hero's white text; the default list styling indents further than the
   heading above it, which looked misaligned against the left edge. */
.sd-hero-list {
	margin: 0.75rem 0 1.25rem;
	padding-left: 1.15rem;
	line-height: 1.65;
}

.sd-hero-list li {
	margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------------
   Homepage hero, centred 2026-09-18.

   Scoped to the hero's DIRECT children on purpose: the "What we install"
   card is nested inside the same group, and a blanket
   `.sd-hero { text-align: center }` would centre that card's list too.
   --------------------------------------------------------------------- */
.sd-hero > h1,
.sd-hero > .wp-block-paragraph {
	text-align: center;
}

/* The list is centred as a BLOCK with its items left-aligned, so the
   bullets stay in a straight column. Centring the <li> text instead
   scatters the bullets down a ragged edge. */
.sd-hero > .sd-hero-list {
	display: table;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	font-size: 18px;   /* h2 size in this theme */
}

.sd-hero > .wp-block-buttons {
	justify-content: center;
}