*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#082b49;--navy2:#0d4169;--orange:#ff941f;--orange2:#ffad3b;--green:#1b9b56;--text:#102a43;--muted:#64748b;--light:#f4f9fd}
html{scroll-behavior:smooth;scroll-padding-top:86px} body{font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.55}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,calc(100% - 36px));margin:auto}

/* HEADER */
header{height:86px;background:#fff;position:sticky;top:0;border-bottom:1px solid #edf1f5;display:flex;align-items:center;z-index:5;box-shadow:0 2px 14px rgba(8,43,73,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo-lockup{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{height:46px!important;width:auto!important;max-width:none!important;display:block}
.logo-text{font-weight:900;font-size:19px;line-height:1.15;color:var(--navy);display:flex;flex-direction:column;letter-spacing:.3px;white-space:nowrap}
.logo-text small{font-weight:700;font-size:9px;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
.navlinks{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:800;color:#17324d;list-style:none;margin:0;padding:0}
.menu-toggle{display:none}
.navlinks li{list-style:none;margin:0;padding:0}
.navlinks a{padding:31px 0;position:relative}
.navlinks a.active,
.navlinks li.current-menu-item>a,
.navlinks li.current_page_item>a{color:var(--orange)}
.navlinks a.active:after,
.navlinks li.current-menu-item>a:after,
.navlinks li.current_page_item>a:after{content:"";position:absolute;height:3px;background:var(--orange);left:0;right:0;bottom:21px;border-radius:5px}
a.call{background:var(--orange);color:#fff!important;padding:13px 20px!important;border-radius:25px;box-shadow:0 7px 18px rgba(255,148,31,.22)}

/* Shop menu item - a lighter, outlined pill (distinct from the solid orange
   "call" CTA) to make it stand out from the plain text links without
   competing with the phone button for attention. */
a.shop-highlight,
.navlinks li.shop-highlight>a{
	background:rgba(255,148,31,.12);
	color:var(--navy)!important;
	border:1.5px solid var(--navy);
	border-radius:20px;
	padding:8px 16px!important;
	display:inline-flex;
	align-items:center;
	gap:6px;
}
a.shop-highlight:before,
.navlinks li.shop-highlight>a:before{content:"🛒";font-size:14px}
a.shop-highlight:after,
.navlinks li.shop-highlight>a:after{display:none!important}
/* WordPress's menu editor puts a custom CSS class on the <li>, not the <a>
   inside it - style that case too so the button looks right either way. */
.navlinks li.call{list-style:none}
.navlinks li.call>a{background:var(--orange);color:var(--navy)!important;padding:10px 20px!important;border:1.5px solid var(--navy);border-radius:25px;box-shadow:0 7px 18px rgba(255,148,31,.22)}
.navlinks li.call>a:after{display:none!important}
a.call:after{display:none!important}

/* HERO */
.hero{min-height:545px;position:relative;overflow:hidden;background:#eef7fc}
.hero-photo{position:absolute;right:0;top:0;width:59%;height:100%;background:url("/wp-content/themes/solar-expert-theme/assets/images/hero-solar-house.jpg") center/cover no-repeat}
.hero-photo:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eef7fc 0%,rgba(238,247,252,.9) 9%,rgba(238,247,252,.15) 48%,rgba(238,247,252,0) 100%)}
.hero-content{position:relative;z-index:2;min-height:545px;display:flex;align-items:center}
.hero-copy{width:54%;padding:45px 0 55px}
.kicker{font-size:14px;letter-spacing:1.5px;font-weight:900;color:var(--orange);text-transform:uppercase;margin-bottom:13px}
h1{font-size:clamp(42px,5vw,66px);line-height:1.04;letter-spacing:-2px;color:#11194e;margin-bottom:18px}
h1 span{color:var(--orange)}
.hero-copy p{font-size:18px;color:#243b53;max-width:545px;margin-bottom:28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{min-height:49px;padding:0 22px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.primary{background:var(--orange);color:#fff;box-shadow:0 9px 22px rgba(255,148,31,.25)}
.secondary{border:1px solid #8da0b3;background:#fff;color:#153b5c}
.stats{margin-top:27px;display:flex;gap:27px;color:#53677b;font-size:12px;font-weight:700}
.stats strong{display:block;color:var(--navy);font-size:21px}

/* SERVICE STRIP */
.service-strip{background:var(--navy);color:#fff}
.service-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.service{min-height:91px;padding:15px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-right:1px solid rgba(255,255,255,.22)}
.service:last-child{border:0}
.service .ico{font-size:24px;color:var(--orange);margin-bottom:4px}
.service b{font-size:13px}.service small{color:#bcd0e1;font-size:11px}

/* ABOUT */
.about{padding:78px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about-image{height:390px;border-radius:22px;background:url("/wp-content/themes/solar-expert-theme/assets/images/about-illustration.jpg") center/cover no-repeat;position:relative;overflow:hidden}
.about-image:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(8,43,73,.08),rgba(255,148,31,.18))}
.badge{position:absolute;right:22px;bottom:22px;z-index:2;background:#fff;padding:17px 22px;border-radius:15px;box-shadow:0 10px 30px rgba(15,39,64,.18)}
.badge strong{font-size:25px;color:var(--navy);display:block}.badge span{font-size:12px;color:var(--muted)}
.about h2,.services h2{font-size:40px;line-height:1.12;color:var(--navy);margin-bottom:17px}
.underline{width:52px;height:4px;background:var(--orange);border-radius:5px;margin-bottom:18px}
.about p{color:var(--muted);font-size:15px;max-width:500px}
.checks{list-style:none;margin:22px 0 27px;display:grid;gap:10px}
.checks li{font-size:14px;font-weight:700}.checks li:before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:9px;border-radius:50%;background:#fff0dc;color:var(--orange);font-weight:900}
.dark-btn{background:var(--navy);color:#fff}

/* SERVICES */
.services{background:var(--light);padding:76px 0 83px}
.center{text-align:center;max-width:680px;margin:0 auto 39px}
.center .underline{margin:0 auto 17px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}

/* Reusable full-width page banner (Projects, and any future non-shop page) -
   same look as the homepage hero: light background, photo fading in from the
   right, navy heading with an orange kicker label above it. */
.solarexpert-page-banner{background-color:#eef7fc;background-size:cover;background-position:right center;background-repeat:no-repeat}
.solarexpert-page-banner-overlay{background:linear-gradient(90deg,#eef7fc 0%,rgba(238,247,252,.92) 35%,rgba(238,247,252,.4) 68%,rgba(238,247,252,.05) 100%);padding:70px 0}
.solarexpert-page-banner .page-title{color:var(--navy);font-size:42px;margin:0}
@media(max-width:600px){.solarexpert-page-banner-overlay{padding:45px 0;background:linear-gradient(90deg,#eef7fc 15%,rgba(238,247,252,.85) 60%,rgba(238,247,252,.3) 100%)}.solarexpert-page-banner .page-title{font-size:30px}}

/* Projects grid - reuses .cards/.card look from the Services section */
.projects-section{padding:70px 0 80px}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.project-card{background:#fff;border:1px solid #e2eaf1;border-radius:15px;overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.project-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(8,43,73,.08)}
.project-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.project-card .project-card-body{padding:20px 22px 24px}
.project-card h3{font-size:18px;color:var(--navy);margin-bottom:8px}
.project-card .project-meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.project-card .project-meta>span{background:var(--light);border-radius:6px;padding:3px 9px}
.project-card .project-meta .price-badge{background:none;padding:0;color:var(--orange);font-weight:800;font-size:15px}
.project-card .project-meta .price-badge del{color:#94a3b8;font-weight:500;margin-right:6px}
.project-card p{font-size:14px;color:var(--muted)}
.project-card .btn{margin-top:14px}
@media(max-width:900px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.projects-grid{grid-template-columns:1fr}}

/* Single project page */
.single-project-content{padding:60px 0 80px}
.single-project-content .project-meta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.single-project-content .project-meta span{background:var(--light);border-radius:8px;padding:8px 16px;font-size:14px;font-weight:700;color:var(--navy)}
.single-project-content img.project-featured{width:100%;max-height:480px;object-fit:cover;border-radius:15px;margin-bottom:30px}
.single-project-content .project-body{font-size:15px;color:var(--muted);max-width:800px;line-height:1.7}
.card{background:#fff;border:1px solid #e2eaf1;border-radius:15px;padding:27px 23px;min-height:188px;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(8,43,73,.08)}
.card-icon{font-size:30px;margin-bottom:13px}.card h3{font-size:18px;color:var(--navy);margin-bottom:7px}.card p{font-size:13px;color:var(--muted)}

/* CTA */
.cta{background:var(--navy);color:#fff;padding:40px 0}
.cta-grid{display:grid;grid-template-columns:1.4fr 1fr auto;align-items:center;gap:30px}
.cta h2{font-size:28px;margin-bottom:6px}.cta p{font-size:14px;color:#bcd0e1}
.contact{text-align:center;border-left:1px solid rgba(255,255,255,.2);border-right:1px solid rgba(255,255,255,.2);padding:0 27px}
.contact small{display:block;color:#bcd0e1}.contact strong{font-size:18px}

/* FOOTER */
footer{padding:27px 0;background:#061f35;color:#b5c7d7;font-size:12px}
.footer{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer strong{color:#fff;font-size:15px}

/* MOBILE */
@media(max-width:900px){
.navlinks{gap:14px}
/* Hide every menu item except the phone/call button on mobile. Two rules,
   each scoped with a direct-child combinator so they only apply to the
   markup shape they're meant for: real WordPress menus wrap each link in
   an <li> (class="call" lands there), while the flat fallback header markup
   has bare <a> tags with class="call" directly on them. Using ">" keeps
   these from cross-matching and accidentally hiding the call button's own
   text/icon. */
.navlinks > li:not(.call){display:none}
.navlinks > a:not(.call){display:none}

/* Hamburger toggle button - hidden on desktop, shown on mobile only */
.menu-toggle{display:block;background:none;border:none;font-size:24px;line-height:1;color:var(--navy);cursor:pointer;padding:8px;margin-left:8px}

/* When header.nav-open (toggled by JS), reveal every item as a full-width
   dropdown panel below the header instead of the normal inline row. */
header.nav-open .navlinks{
	position:absolute;top:100%;left:0;right:0;
	background:#fff;flex-direction:column;align-items:stretch;gap:0;
	box-shadow:0 12px 24px rgba(8,43,73,.14);
	padding:6px 0;
}
header.nav-open .navlinks > li:not(.call),
header.nav-open .navlinks > a:not(.call){display:block;width:100%}
header.nav-open .navlinks > li > a,
header.nav-open .navlinks > a{padding:14px 24px;display:block;width:100%}
/* The active-link underline is positioned for the desktop horizontal nav's
   tall padding - in this compact vertical dropdown it cuts through the text
   instead of sitting below it, so just suppress it here and rely on the
   orange text color alone to show the active item. */
header.nav-open .navlinks a:after{display:none!important}
header.nav-open .navlinks > li.call,
header.nav-open a.call{margin:8px 24px;width:auto;display:inline-flex}
header.nav-open .navlinks > li.shop-highlight,
header.nav-open a.shop-highlight{margin:8px 24px;width:auto;display:inline-flex}
.hero-photo{width:100%;opacity:.42}.hero-photo:before{background:linear-gradient(90deg,#eef7fc 5%,rgba(238,247,252,.82) 52%,rgba(238,247,252,.25) 100%)}
.hero-copy{width:72%}
.service-grid{grid-template-columns:repeat(3,1fr)}
.service:nth-child(3){border-right:0}.service:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.22)}
.about-grid{grid-template-columns:1fr;gap:35px}.about-image{order:2}
.cta-grid{grid-template-columns:1fr 1fr}.cta .btn{grid-column:1/-1;justify-self:start}
}
@media(max-width:600px){
.container{width:calc(100% - 28px)}
header{height:74px}.logo{height:57px}a.call,.navlinks li.call>a{padding:10px 14px!important;font-size:12px}
.hero,.hero-content{min-height:600px}.hero-photo{width:100%;opacity:.30}.hero-copy{width:100%;padding-top:75px}
h1{font-size:45px}.hero-copy p{font-size:16px}.stats{gap:15px}
.service-grid{grid-template-columns:repeat(2,1fr)}.service:nth-child(3){border-right:1px solid rgba(255,255,255,.22)}.service:nth-child(2n){border-right:0}.service:nth-child(3),.service:nth-child(4){border-bottom:1px solid rgba(255,255,255,.22)}
.about{padding:58px 0}.about h2,.services h2{font-size:32px}.about-image{height:300px}
.cards{grid-template-columns:1fr}.services{padding:58px 0}
.cta-grid{grid-template-columns:1fr}.contact{border:0;padding:10px 0;text-align:left}.cta .btn{grid-column:auto}
.footer{flex-direction:column;align-items:flex-start}
}

/* Constrain the logo, whatever form it takes (WordPress Customizer's
   custom-logo output, or anything else). <header> should never legitimately
   contain any image except the logo, so targeting "any img in header" is
   bulletproof - it can't be defeated by WooCommerce's .woocommerce-page img
   rule (which matches every image site-wide on shop pages) or by guessing
   wrong about WordPress's exact class names/markup structure. */
header img:not(.logo-icon) {
	height: 67px !important;
	max-height: 67px !important;
	width: auto !important;
	max-width: 260px !important;
	display: block !important;
	object-fit: contain;
}
@media (max-width: 600px) {
	header img:not(.logo-icon) {
		height: 57px !important;
		max-height: 57px !important;
	}
	.logo-icon{height:38px!important}
	.logo-text{font-size:15px}
	.logo-text small{font-size:7.5px}
}

/* Offer popup - a promotional deal shown once per visitor on the homepage,
   managed via the "Offers" post type in wp-admin. */
.solarexpert-offer-overlay{
	position:fixed;inset:0;background:rgba(8,43,73,.55);
	display:flex;align-items:center;justify-content:center;
	z-index:1000;padding:20px;
}
.solarexpert-offer-overlay[hidden]{display:none}
.solarexpert-offer-box{
	background:#fff;border-radius:18px;max-width:440px;width:100%;
	position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(8,43,73,.35);
	animation:solarexpert-offer-pop .25s ease;
}
@keyframes solarexpert-offer-pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.solarexpert-offer-close{
	position:absolute;top:12px;right:12px;z-index:2;
	background:rgba(255,255,255,.9);border:none;border-radius:50%;
	width:34px;height:34px;font-size:16px;color:var(--navy);cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.solarexpert-offer-image img{width:100%;max-height:220px;object-fit:cover;display:block}
.solarexpert-offer-body{padding:26px 28px 30px}
.solarexpert-offer-body h3{font-size:22px;color:var(--navy);margin-bottom:10px}
.solarexpert-offer-text{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:18px}
.solarexpert-offer-body .btn{width:100%}
@media(max-width:480px){
	.solarexpert-offer-body{padding:20px 20px 24px}
	.solarexpert-offer-body h3{font-size:19px}
}