/* ===========================================================================
   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;
}

/* Divi's hero eyebrow is amber, not white */
[style*="color:#FFFFFF"] > p:first-child {
	color: #E09900 !important;
	font-weight: 700;
}

/* 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.jpg");
	background-size: cover;
	background-position: center 60%;
	padding-top: 120px !important;
	padding-bottom: 120px !important;
}

.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);
}

/* Divi's hero subhead is amber */
.page-home .entry-content > .wp-block-group:first-child p:first-of-type {
	color: #E09900 !important;
	font-weight: 700;
}

/* 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; }
}