/*
Theme Name: Pressure Washers Greenville SC
Description: Custom theme for pressurewashersgreenvillesc.com, built from the Povash design.
Author: Pressure Washers Greenville SC
Version: 1.0
Text Domain: pwgsc
*/

/* ---- Custom additions on top of the Povash design system ---- */

.main-footer .footer-top .footer-logo .logo img { max-width: 150px; width: 100%; height: auto; }

.pwgsc-footer-map { position: relative; line-height: 0; }
.pwgsc-footer-map iframe { display: block; filter: grayscale(0.15); }

.pwgsc-faq { margin-top: 20px; }
.pwgsc-faq-item {
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	margin-bottom: 15px;
	overflow: hidden;
}
.pwgsc-faq-q {
	width: 100%;
	text-align: left;
	background: #f7f7f7;
	border: none;
	padding: 18px 45px 18px 20px;
	font-family: 'Barlow', sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #1a1a1a;
	cursor: pointer;
	position: relative;
}
.pwgsc-faq-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; }
.pwgsc-faq-icon::before, .pwgsc-faq-icon::after {
	content: '';
	position: absolute;
	background: #0078e0;
	transition: transform 0.2s ease;
}
.pwgsc-faq-icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.pwgsc-faq-icon::after { top: 0; left: 6px; width: 2px; height: 14px; }
.pwgsc-faq-item.active .pwgsc-faq-icon::after { transform: rotate(90deg); opacity: 0; }
.pwgsc-faq-item.active .pwgsc-faq-q { background: #0b306e; color: #fff; }
.pwgsc-faq-item.active .pwgsc-faq-icon::before { background: #fff; }
.pwgsc-faq-a { display: none; padding: 0 20px; }
.pwgsc-faq-item.active .pwgsc-faq-a { padding: 18px 20px; }
.pwgsc-faq-a p { margin: 0; color: #666; line-height: 1.7; }

.pwgsc-local-factor {
	background: #f7f7f7;
	border-left: 3px solid #0078e0;
	padding: 20px 24px;
	margin: 25px 0;
	border-radius: 0 5px 5px 0;
}
.pwgsc-local-factor h4 { margin: 0 0 8px; font-size: 18px; }
.pwgsc-local-factor p { margin: 0; }

.form-status { display: none; padding: 12px 16px; border-radius: 5px; margin-top: 12px; font-size: 14px; }
.form-status.success { background: #e6f4ea; color: #1e7e34; display: block; }
.form-status.error { background: #fde8e8; color: #c0392b; display: block; }

/* We intentionally don't show a Google Map (no public business address) -
   cancel the template's negative margin that was designed to overlap the map. */
.google-map-section.no-map { padding-top: 60px; padding-bottom: 60px; }
.google-map-section.no-map .lower-content .inner-container { margin-top: 0; }

/* The contact page's map section (with its ~550px height) normally pushes the
   address-box down below the hero. We don't show a map (no public address),
   so restore that spacing directly on the contact section instead. */
.contact-section { padding-top: 100px; }

/* ==========================================================================
   Mega-menu polish: icons, tighter spacing, hover state, promo column
   ========================================================================== */
.pwgsc-services-menu .megamenu { padding: 35px 40px; }
.pwgsc-services-menu .megamenu .column:not(.pwgsc-mega-promo) ul { padding-right: 10px; }
.pwgsc-services-menu .megamenu li.pwgsc-mega-heading { margin-bottom: 6px; }
.pwgsc-services-menu .megamenu li.pwgsc-mega-heading h4 {
	margin: 0;
	padding: 3px 0 10px;
	border-bottom: 2px solid rgba(255,255,255,0.25);
}
.pwgsc-services-menu .megamenu li.pwgsc-mega-heading h4 a {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.pwgsc-services-menu .megamenu .column ul li > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 8px;
	border-radius: 6px;
	transition: background 200ms ease, padding-left 200ms ease;
}
.pwgsc-services-menu .megamenu .column ul li > a:hover {
	background: rgba(255,255,255,0.08);
	padding-left: 14px;
}
.pwgsc-services-menu .megamenu .column ul li > a i {
	font-size: 20px;
	color: #00b8f8;
	flex-shrink: 0;
	width: 22px;
	text-align: center;
}
.pwgsc-mega-promo { padding-left: 20px; }
.pwgsc-mega-promo-box {
	position: relative;
	height: 100%;
	min-height: 260px;
	border-radius: 8px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}
.pwgsc-mega-promo-overlay {
	position: relative;
	width: 100%;
	padding: 22px;
	background: linear-gradient(180deg, rgba(11,48,110,0) 0%, rgba(8,32,74,0.94) 55%);
}
.pwgsc-mega-promo-overlay h4 { color: #fff; font-size: 18px; margin: 0 0 8px; }
.pwgsc-mega-promo-overlay p { color: rgba(255,255,255,0.85); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.pwgsc-mega-promo-overlay .theme-btn-one { display: inline-block; padding: 11px 22px; font-size: 13px; }
.pwgsc-mega-phone {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}
.pwgsc-mega-phone i { color: #00b8f8; font-size: 18px; }

/* ==========================================================================
   Mobile menu: full-width, white background (overrides the template's
   300px-wide dark slide-out panel)
   ========================================================================== */
.mobile-menu { width: 100%; padding-right: 0; }
.mobile-menu .menu-box { background: #ffffff; }

.mobile-menu .nav-logo {
	padding: 18px 25px;
	border-bottom: 1px solid #ececec;
}
.mobile-menu .nav-logo img { max-width: 170px; width: 100%; height: auto; }

.mobile-menu .close-btn {
	right: 20px;
	top: 20px;
	width: 38px;
	height: 38px;
	line-height: 38px;
	color: #0b306e;
	background: #f2f5fa;
	border-radius: 50%;
}
.mobile-menu .close-btn:hover { background: #0078e0; color: #fff; }

.mobile-menu .navigation li { border-top: 1px solid #ececec; }
.mobile-menu .navigation:last-child { border-bottom: 1px solid #ececec; }
.mobile-menu .navigation li > ul > li:first-child { border-top: 1px solid #ececec; }

.mobile-menu .navigation li > a {
	color: #14213d;
	font-weight: 600;
}
.mobile-menu .navigation li > a:before { border-left-color: #0078e0; }

.mobile-menu .navigation li ul li > a { color: #4a5568; font-weight: 500; }

.mobile-menu .navigation li.dropdown .dropdown-btn {
	color: #0b306e;
	background: #f2f5fa;
}
.mobile-menu .navigation li.dropdown .dropdown-btn.open {
	background: #0078e0;
	color: #fff;
}

.mobile-menu .navigation .megamenu .row { display: block; }
.mobile-menu .navigation .megamenu .column ul li > a i { color: #0078e0; margin-right: 10px; width: 18px; display: inline-block; text-align: center; }
.mobile-menu .navigation .pwgsc-mega-promo { display: none; }
/* The template hides every megamenu column's first <li> on mobile/tablet
   (its own "Elements 1"/"Elements 2" plain-text labels weren't real links).
   Ours are, so restore it — specificity alone beats that rule, !important
   just guards against the media-query load order. */
.mobile-menu .navigation li.pwgsc-mega-heading { display: block !important; }
.mobile-menu .navigation li.pwgsc-mega-heading h4 { margin: 0; padding: 14px 25px 6px; }
.mobile-menu .navigation li.pwgsc-mega-heading h4 a { color: #8a94a6; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

.mobile-menu .social-links li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f2f5fa;
	color: #0b306e;
}
.mobile-menu .social-links li a:hover { background: #0078e0; color: #fff; }

.mobile-menu .contact-info {
	padding: 30px 25px;
	background: #f8fafc;
	margin-top: 10px;
}
.mobile-menu .contact-info h4 { color: #14213d; }
.mobile-menu .contact-info ul li { color: #4a5568; }
.mobile-menu .contact-info ul li a { color: #0078e0; font-weight: 700; }

/* ==========================================================================
   Page-title breadcrumb badge: the template's diagonal clip-path notch is
   percentage-based, so its cut grows/distorts with the badge's own width -
   fine at the desktop width it was designed for, but a visibly broken wedge
   once the breadcrumb wraps to two lines on narrower screens. Replace it
   with a plain rounded badge that holds its shape at every width.
   ========================================================================== */
.page-title .content-box .bread-crumb {
	clip-path: none;
	border-radius: 6px;
	max-width: 100%;
}
@media only screen and (max-width: 767px) {
	.page-title .content-box .bread-crumb {
		display: block;
		float: none;
		margin: 0 auto;
		text-align: center;
		padding: 10px 18px;
	}
	.page-title .content-box .title-box {
		margin-bottom: 20px;
		text-align: center;
	}
	.page-title .content-box .bread-crumb li {
		white-space: normal;
	}
}