/*
Theme Name: Mansour's Innovations
Theme URI: https://www.mansoursinnovations.com/
Author: Mansour's Innovations
Author URI: https://www.mansoursinnovations.com
Description: Custom WordPress block theme for Mansour's Innovations - Professional waterproofing, plumbing, excavation, and drainage services in Southeast Michigan.
Requires at least: 6.1
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mansours-innovations
Tags: one-column, wide-blocks, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing
*/

/* ===========================================
   GLOBAL
   =========================================== */
body {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

footer {
	margin-top: 0 !important;
}

/* ===========================================
   NAVIGATION DROPDOWNS
   =========================================== */
header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: none !important;
	font-size: var(--wp--preset--font-size--small);
	border-radius: 12px;
	min-width: 220px !important;
	padding: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	background: var(--wp--preset--color--white);
}

header .wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
	padding: 8px 16px !important;
	border-radius: 8px;
	transition: all 0.2s ease;
}

header .wp-block-navigation :where(.wp-block-navigation__submenu-container) a:hover {
	background: rgba(37, 99, 235, 0.08);
	color: var(--wp--preset--color--primary);
}

/* Mobile Navigation */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 4px;
	border-radius: 3px;
}

.is-menu-open.has-modal-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}

.is-menu-open.has-modal-open .wp-block-navigation-item__content {
	width: 100%;
	padding: 8px 0 !important;
}

.is-menu-open.has-modal-open .wp-block-navigation-item .wp-block-navigation__submenu-container {
	padding: 0 0 0 24px;
	margin-left: 0;
	width: 100% !important;
}

.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none !important;
}

/* ===========================================
   TOP BAR
   =========================================== */
.mi-top-bar {
	background-color: var(--wp--preset--color--bg-dark);
	padding: 10px 0;
}

.mi-top-bar-inner {
	gap: 24px !important;
	align-items: center !important;
}

.mi-top-bar-left,
.mi-top-bar-right {
	gap: 24px !important;
	align-items: center !important;
}

.mi-top-bar p {
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px !important;
	line-height: 1.4;
}

.mi-top-bar a {
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: none !important;
}

.mi-top-bar a:hover {
	color: var(--wp--preset--color--secondary) !important;
}

.mi-top-bar strong {
	color: #fff;
}

/* Social icons in top bar - override all WP defaults */
.mi-top-bar .wp-block-social-links {
	gap: 12px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.mi-top-bar .wp-block-social-links .wp-social-link {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	color: rgba(255, 255, 255, 0.7) !important;
	transition: all 0.3s ease;
}

.mi-top-bar .wp-block-social-links .wp-social-link a {
	padding: 0 !important;
	color: inherit !important;
}

.mi-top-bar .wp-block-social-links .wp-social-link svg {
	width: 16px !important;
	height: 16px !important;
	fill: currentColor;
}

.mi-top-bar .wp-block-social-links .wp-social-link:hover {
	transform: translateY(-1px);
	color: #fff !important;
}

/* Social hover colors by service class */
.mi-top-bar .wp-social-link-facebook:hover { color: #1877F2 !important; }
.mi-top-bar .wp-social-link-instagram:hover { color: #E4405F !important; }
.mi-top-bar .wp-social-link-linkedin:hover { color: #0A66C2 !important; }
.mi-top-bar .wp-social-link-tiktok:hover { color: #69C9D0 !important; }
.mi-top-bar .wp-social-link-pinterest:hover { color: #E60023 !important; }
.mi-top-bar .wp-social-link-x:hover { color: #1DA1F2 !important; }
.mi-top-bar .wp-social-link-youtube:hover { color: #FF0000 !important; }
.mi-top-bar .wp-social-link-yelp:hover { color: #D32323 !important; }
.mi-top-bar .wp-social-link-nextdoor:hover { color: #8ED500 !important; }
.mi-top-bar .wp-social-link-threads:hover { color: #ccc !important; }
.mi-top-bar .wp-social-link-tumblr:hover { color: #35465C !important; }
.mi-top-bar .wp-social-link-reddit:hover { color: #FF4500 !important; }

/* ===========================================
   MAIN HEADER
   =========================================== */
.mi-main-header {
	background: var(--wp--preset--color--white);
	padding: 16px 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mi-main-header-inner {
	gap: 40px !important;
	align-items: center !important;
}

.mi-main-header .wp-block-site-logo {
	flex-shrink: 0;
}

.mi-main-header .wp-block-site-logo img {
	height: 50px !important;
	width: auto !important;
	max-height: 50px;
}

/* Navigation */
.mi-main-header .wp-block-navigation {
	flex: 1;
	justify-content: center;
}

.mi-main-header .wp-block-navigation .wp-block-navigation__container {
	gap: 8px !important;
}

.mi-main-header .wp-block-navigation-item a {
	padding: 10px 16px !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--text-dark) !important;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.mi-main-header .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--primary) !important;
	background: rgba(37, 99, 235, 0.06);
}

/* Hamburger menu button */
.mi-main-header .wp-block-navigation__responsive-container-open {
	width: 44px !important;
	height: 44px !important;
}

.mi-main-header .wp-block-navigation__responsive-container-open svg {
	width: 24px !important;
	height: 24px !important;
}

/* Quote button in header */
.mi-quote-btn {
	flex-shrink: 0;
}

.mi-quote-btn .wp-block-button__link {
	padding: 12px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
	transition: all 0.3s ease;
	white-space: nowrap;
}

.mi-quote-btn .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

/* ===========================================
   HERO SECTION
   =========================================== */
.mi-hero-section {
	margin-top: 0 !important;
}

.mi-hero-features {
	list-style: none !important;
	padding-left: 0 !important;
}

.mi-hero-features li {
	padding-left: 0;
}

.mi-hero-form-card {
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ===========================================
   STATS BAR
   =========================================== */
.mi-stats-bar {
	margin-top: 0 !important;
}

.mi-stats-bar .mi-stat-number {
	font-family: var(--wp--preset--font-family--work-sans);
	font-weight: 800;
	line-height: 1;
	margin-bottom: 4px;
}

/* ===========================================
   SERVICE CARDS
   =========================================== */
.mi-service-card {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 16px !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	overflow: hidden;
}

.mi-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ===========================================
   PROMISE / WHY CHOOSE US
   =========================================== */
.mi-progress-bar {
	width: 100%;
	height: 8px;
	background: var(--wp--preset--color--border-light);
	border-radius: 9999px;
	overflow: hidden;
	margin-bottom: 16px;
}

.mi-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-light));
	border-radius: 9999px;
}

.mi-experience-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-radius: 50%;
	text-align: center;
	box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
}

/* ===========================================
   TESTIMONIALS
   =========================================== */
.mi-testimonial-card {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 16px !important;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.mi-testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.mi-author-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--work-sans);
	font-weight: 700;
	font-size: 16px;
}

/* ===========================================
   FINANCING
   =========================================== */
.mi-financing-card {
	border: 2px solid var(--wp--preset--color--border-light);
	border-radius: 16px !important;
}

.mi-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--wp--preset--color--secondary) !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--work-sans);
	font-weight: 600;
	border-radius: 9999px !important;
	box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
	transition: all 0.3s ease;
	text-decoration: none;
}

.mi-btn-secondary:hover {
	background: var(--wp--preset--color--secondary-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
	color: var(--wp--preset--color--white) !important;
}

/* ===========================================
   SERVICE AREAS
   =========================================== */
.mi-city-tag {
	display: inline-block;
	padding: 6px 14px;
	background: var(--wp--preset--color--bg-light);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 9999px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--text-medium);
	margin: 0 6px 8px 0;
}

/* ===========================================
   FOOTER
   =========================================== */
.mi-footer {
	margin-top: 0 !important;
}

.mi-footer-top {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mi-footer-top a {
	color: rgba(255, 255, 255, 0.7) !important;
	text-decoration: none;
}

.mi-footer-top a:hover {
	color: var(--wp--preset--color--secondary) !important;
}

.mi-footer-top ul {
	list-style: none;
	padding-left: 0;
}

.mi-footer-top li {
	margin-bottom: 10px;
}

.mi-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mi-footer-bottom a {
	color: rgba(255, 255, 255, 0.5) !important;
}

.mi-footer-bottom a:hover {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 781px) {
	.mi-top-bar-inner {
		justify-content: center !important;
	}

	.mi-top-bar-left {
		display: none !important;
	}

	.mi-top-bar-right {
		gap: 16px !important;
	}

	.mi-top-bar .wp-block-social-links {
		display: none;
	}

	.mi-main-header-inner {
		gap: 16px !important;
	}

	.mi-main-header .wp-block-site-logo img {
		height: 40px !important;
		max-height: 40px;
	}

	.mi-quote-btn {
		display: none !important;
	}
}