/* ==========================================================================
   Header Navigation Widget Styles
   Prefix: .mtw-
   ========================================================================== */

.mtw-header-bar {
	width: 100%;
	background-color: var(--bg-body, #F5F3FA);
	padding: 16px 40px;
	box-sizing: border-box;
	font-family: var(--font-body, 'Inter', sans-serif);
	border-bottom: 1px solid var(--border-color, #E6E1F3);
	transition: background-color 0.35s ease, border-color 0.35s ease;
	position: relative;
	z-index: 100;
}

.mtw-header-container {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Logo */
.mtw-header-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.mtw-logo-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-md, 12px);
	background: var(--gradient-primary, linear-gradient(135deg, #8D3497 0%, #1F10BF 100%));
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mtw-logo-text {
	font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
	font-weight: 800;
	font-size: 22px;
	color: var(--text-heading, #0F0926);
	letter-spacing: -0.5px;
	transition: color 0.35s ease;
}

/* Desktop Navigation List */
.mtw-header-nav {
	display: flex;
	align-items: center;
}

.mtw-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 32px;
}

.mtw-nav-item {
	position: relative;
}

.mtw-nav-link {
	font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
	font-weight: 600;
	font-size: 15px;
	color: var(--text-body, #4A4660);
	text-decoration: none;
	padding: 8px 0;
	transition: color 0.25s ease;
	display: inline-block;
}

.mtw-nav-link:hover {
	color: var(--primary-color, #8D3497);
}

.mtw-nav-item.is-active .mtw-nav-link {
	color: var(--primary-color, #8D3497);
}

.mtw-nav-item.is-active::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-primary, linear-gradient(90deg, #8D3497 0%, #1F10BF 100%));
	border-radius: 2px;
}

/* Actions */
.mtw-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mtw-theme-toggle {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-full, 50%);
	background-color: var(--bg-surface, #FFFFFF);
	border: 1px solid var(--border-color, #E6E1F3);
	color: var(--primary-color, #8D3497);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s ease;
	outline: none;
}

.mtw-theme-toggle:hover {
	background-color: var(--bg-surface-elevated, #FFFFFF);
	border-color: var(--primary-color, #8D3497);
	transform: scale(1.05);
}

.mtw-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	background: var(--gradient-primary, linear-gradient(135deg, #8D3497 0%, #1F10BF 100%));
	color: var(--mtw-btn-text, #FFFFFF);
	font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--radius-full, 50px);
	text-decoration: none;
	box-shadow: var(--shadow-glow-primary, 0 8px 20px rgba(141, 52, 151, 0.3));
	transition: all 0.3s ease;
}

.mtw-header-cta:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-xl);
	color: #FFFFFF;
}

/* Mobile Hamburger Toggle Button */
.mtw-mobile-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md, 12px);
	background-color: var(--bg-surface, #FFFFFF);
	border: 1px solid var(--border-color, #E6E1F3);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	outline: none;
	transition: all 0.25s ease;
}

.mtw-mobile-toggle .hamburger-bar {
	width: 20px;
	height: 2.5px;
	background-color: var(--text-heading, #0F0926);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.mtw-mobile-toggle.is-open .hamburger-bar:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

.mtw-mobile-toggle.is-open .hamburger-bar:nth-child(2) {
	opacity: 0;
}

.mtw-mobile-toggle.is-open .hamburger-bar:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile Slide-Down Menu */
.mtw-mobile-nav {
	display: none;
	padding: 20px 0 10px 0;
	border-top: 1px solid var(--border-color, #E6E1F3);
	margin-top: 16px;
}

.mtw-mobile-nav-list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mtw-mobile-nav-link {
	font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
	font-weight: 600;
	font-size: 16px;
	color: var(--text-body, #4A4660);
	text-decoration: none;
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-sm, 10px);
	transition: all 0.2s ease;
}

.mtw-mobile-nav-link:hover,
.mtw-mobile-nav-item.is-active .mtw-mobile-nav-link {
	background-color: var(--bg-surface-elevated, #EDE7F6);
	color: var(--primary-color, #8D3497);
}

.mtw-mobile-nav-cta-wrapper {
	padding: 8px 12px;
}

.mtw-mobile-cta {
	width: 100%;
	box-sizing: border-box;
}

/* ==========================================================================
   Global Dark Theme Styles (.mtw-dark-theme & [data-theme="dark"])
   ========================================================================== */

[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
body.mtw-dark-theme,
html.mtw-dark-theme {
	background-color: var(--bg-body, #090616) !important;
	color: var(--text-body, #B9B4D6) !important;
}

[data-theme="dark"] .mtw-header-bar,
body.mtw-dark-theme .mtw-header-bar,
.mtw-header-bar.mtw-dark-theme {
	background-color: var(--bg-body, #090616);
	border-bottom-color: var(--border-color, #271E4B);
}

[data-theme="dark"] .mtw-logo-text,
body.mtw-dark-theme .mtw-logo-text,
.mtw-header-bar.mtw-dark-theme .mtw-logo-text {
	color: var(--text-heading, #F5F3FF);
}

[data-theme="dark"] .mtw-nav-link,
body.mtw-dark-theme .mtw-nav-link,
.mtw-header-bar.mtw-dark-theme .mtw-nav-link,
[data-theme="dark"] .mtw-mobile-nav-link,
body.mtw-dark-theme .mtw-mobile-nav-link,
.mtw-header-bar.mtw-dark-theme .mtw-mobile-nav-link {
	color: var(--text-body, #B9B4D6);
}

[data-theme="dark"] .mtw-nav-link:hover,
body.mtw-dark-theme .mtw-nav-link:hover,
.mtw-header-bar.mtw-dark-theme .mtw-nav-link:hover,
[data-theme="dark"] .mtw-nav-item.is-active .mtw-nav-link,
body.mtw-dark-theme .mtw-nav-item.is-active .mtw-nav-link,
.mtw-header-bar.mtw-dark-theme .mtw-nav-item.is-active .mtw-nav-link {
	color: var(--primary-light, #B246BD);
}

[data-theme="dark"] .mtw-theme-toggle,
body.mtw-dark-theme .mtw-theme-toggle,
.mtw-header-bar.mtw-dark-theme .mtw-theme-toggle,
[data-theme="dark"] .mtw-mobile-toggle,
body.mtw-dark-theme .mtw-mobile-toggle,
.mtw-header-bar.mtw-dark-theme .mtw-mobile-toggle {
	background-color: var(--bg-surface-elevated, #1B1439);
	border-color: var(--border-color, #271E4B);
	color: var(--primary-light, #B246BD);
}

[data-theme="dark"] .hamburger-bar,
body.mtw-dark-theme .hamburger-bar,
.mtw-header-bar.mtw-dark-theme .hamburger-bar {
	background-color: var(--text-heading, #F5F3FF);
}

/* Global Section & Card Overrides for Dark Theme */
[data-theme="dark"] .mtw-hero-wrapper,
[data-theme="dark"] .mtw-service-wrapper,
[data-theme="dark"] .mtw-testimonial-wrapper,
[data-theme="dark"] .mtw-why-wrapper,
[data-theme="dark"] .mtw-about-hero-wrapper,
[data-theme="dark"] .mtw-story-wrapper,
[data-theme="dark"] .mtw-pillars-wrapper,
[data-theme="dark"] .mtw-srv-grid-wrapper,
[data-theme="dark"] .mtw-sol-header-wrapper,
[data-theme="dark"] .mtw-faq-wrapper,
[data-theme="dark"] .mtw-port-header-wrapper,
[data-theme="dark"] .mtw-port-grid-wrapper,
[data-theme="dark"] .mtw-contact-header-wrapper,
[data-theme="dark"] .mtw-contact-card-wrapper,
body.mtw-dark-theme .mtw-hero-wrapper,
body.mtw-dark-theme .mtw-service-wrapper,
body.mtw-dark-theme .mtw-testimonial-wrapper,
body.mtw-dark-theme .mtw-why-wrapper,
body.mtw-dark-theme .mtw-about-hero-wrapper,
body.mtw-dark-theme .mtw-story-wrapper,
body.mtw-dark-theme .mtw-pillars-wrapper,
body.mtw-dark-theme .mtw-srv-grid-wrapper,
body.mtw-dark-theme .mtw-sol-header-wrapper,
body.mtw-dark-theme .mtw-faq-wrapper,
body.mtw-dark-theme .mtw-port-header-wrapper,
body.mtw-dark-theme .mtw-port-grid-wrapper,
body.mtw-dark-theme .mtw-contact-header-wrapper,
body.mtw-dark-theme .mtw-contact-card-wrapper {
	background-color: var(--bg-body, #090616) !important;
	color: var(--text-body, #B9B4D6) !important;
}

[data-theme="dark"] .mtw-service-card,
[data-theme="dark"] .mtw-testimonial-card,
[data-theme="dark"] .mtw-why-card,
[data-theme="dark"] .mtw-snapshot-card,
[data-theme="dark"] .mtw-pillar-card,
[data-theme="dark"] .mtw-srv-card,
[data-theme="dark"] .mtw-faq-item,
[data-theme="dark"] .mtw-project-card,
[data-theme="dark"] .mtw-contact-form-panel,
[data-theme="dark"] .mtw-contact-info-panel,
[data-theme="dark"] .mtw-estimator-card,
body.mtw-dark-theme .mtw-service-card,
body.mtw-dark-theme .mtw-testimonial-card,
body.mtw-dark-theme .mtw-why-card,
body.mtw-dark-theme .mtw-snapshot-card,
body.mtw-dark-theme .mtw-pillar-card,
body.mtw-dark-theme .mtw-srv-card,
body.mtw-dark-theme .mtw-faq-item,
body.mtw-dark-theme .mtw-project-card,
body.mtw-dark-theme .mtw-contact-form-panel,
body.mtw-dark-theme .mtw-contact-info-panel,
body.mtw-dark-theme .mtw-estimator-card {
	background-color: var(--bg-surface, #120D28) !important;
	border-color: var(--border-color, #271E4B) !important;
	box-shadow: var(--shadow-xl) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .mtw-hero-title,
[data-theme="dark"] .mtw-service-title,
[data-theme="dark"] .mtw-testimonial-title,
[data-theme="dark"] .mtw-why-title,
[data-theme="dark"] .mtw-about-title,
[data-theme="dark"] .mtw-story-title,
[data-theme="dark"] .mtw-pillars-title,
[data-theme="dark"] .mtw-sol-title,
[data-theme="dark"] .mtw-faq-title,
[data-theme="dark"] .mtw-port-title,
[data-theme="dark"] .mtw-contact-title,
[data-theme="dark"] .mtw-card-title,
[data-theme="dark"] .mtw-srv-title,
[data-theme="dark"] .mtw-project-title,
[data-theme="dark"] .mtw-faq-question,
[data-theme="dark"] .mtw-form-title,
[data-theme="dark"] .mtw-info-title,
body.mtw-dark-theme h1,
body.mtw-dark-theme h2,
body.mtw-dark-theme h3,
body.mtw-dark-theme h4,
body.mtw-dark-theme .mtw-hero-title,
body.mtw-dark-theme .mtw-service-title,
body.mtw-dark-theme .mtw-testimonial-title,
body.mtw-dark-theme .mtw-why-title,
body.mtw-dark-theme .mtw-about-title,
body.mtw-dark-theme .mtw-story-title,
body.mtw-dark-theme .mtw-pillars-title,
body.mtw-dark-theme .mtw-sol-title,
body.mtw-dark-theme .mtw-faq-title,
body.mtw-dark-theme .mtw-port-title,
body.mtw-dark-theme .mtw-contact-title,
body.mtw-dark-theme .mtw-card-title,
body.mtw-dark-theme .mtw-srv-title,
body.mtw-dark-theme .mtw-project-title,
body.mtw-dark-theme .mtw-faq-question,
body.mtw-dark-theme .mtw-form-title,
body.mtw-dark-theme .mtw-info-title {
	color: var(--text-heading, #F5F3FF) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .mtw-hero-subtitle,
[data-theme="dark"] .mtw-service-subtitle,
[data-theme="dark"] .mtw-testimonial-subtitle,
[data-theme="dark"] .mtw-why-subtitle,
[data-theme="dark"] .mtw-about-subtitle,
[data-theme="dark"] .mtw-story-subtitle,
[data-theme="dark"] .mtw-pillars-subtitle,
[data-theme="dark"] .mtw-sol-subtitle,
[data-theme="dark"] .mtw-faq-subtitle,
[data-theme="dark"] .mtw-port-subtitle,
[data-theme="dark"] .mtw-contact-subtitle,
[data-theme="dark"] .mtw-card-desc,
[data-theme="dark"] .mtw-srv-desc,
[data-theme="dark"] .mtw-faq-answer,
[data-theme="dark"] .mtw-form-subtitle,
[data-theme="dark"] .mtw-info-subtitle,
body.mtw-dark-theme p,
body.mtw-dark-theme .mtw-hero-subtitle,
body.mtw-dark-theme .mtw-service-subtitle,
body.mtw-dark-theme .mtw-testimonial-subtitle,
body.mtw-dark-theme .mtw-why-subtitle,
body.mtw-dark-theme .mtw-about-subtitle,
body.mtw-dark-theme .mtw-story-subtitle,
body.mtw-dark-theme .mtw-pillars-subtitle,
body.mtw-dark-theme .mtw-sol-subtitle,
body.mtw-dark-theme .mtw-faq-subtitle,
body.mtw-dark-theme .mtw-port-subtitle,
body.mtw-dark-theme .mtw-contact-subtitle,
body.mtw-dark-theme .mtw-card-desc,
body.mtw-dark-theme .mtw-srv-desc,
body.mtw-dark-theme .mtw-faq-answer,
body.mtw-dark-theme .mtw-form-subtitle,
body.mtw-dark-theme .mtw-info-subtitle {
	color: var(--text-body, #B9B4D6) !important;
}

[data-theme="dark"] .mtw-contact-form input,
[data-theme="dark"] .mtw-contact-form select,
[data-theme="dark"] .mtw-contact-form textarea,
body.mtw-dark-theme .mtw-contact-form input,
body.mtw-dark-theme .mtw-contact-form select,
body.mtw-dark-theme .mtw-contact-form textarea {
	background-color: var(--bg-surface-elevated, #1B1439) !important;
	border-color: var(--border-color, #271E4B) !important;
	color: var(--text-heading, #F5F3FF) !important;
}

/* Responsive Breakpoints */
@media (max-width: 991px) {
	.mtw-header-nav.desktop-nav,
	.mtw-header-actions .desktop-cta {
		display: none;
	}

	.mtw-mobile-toggle {
		display: flex;
	}
}

@media (max-width: 575px) {
	.mtw-header-bar {
		padding: 14px 20px;
	}

	.mtw-header-cta {
		padding: 10px 18px;
		font-size: 13px;
	}
}