/**
 * Magic Hat Section Styles: Hero & Overlapable
 *
 * Category 1: Hero sections and overlapable floating containers.
 * Design Tokens: Uses --mh-color-brand-*, --mh-color-cta-*, --mh-color-surface-*,
 * --mh-glass-*, and standard typography and spacing tokens from variables.css.
 *
 * @package Xophz_Magic_Hat
 */

/* ==========================================================================
   1. Universal Overlap Section Styles
   ========================================================================== */

.mh-section-overlap,
[data-overlap="true"] {
	position: relative;
	z-index: 10;
	margin-top: -80px;
	padding-top: 0 !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.mh-section-overlap,
	[data-overlap="true"] {
		margin-top: -48px;
	}
}

@media (max-width: 767px) {
	.mh-section-overlap,
	[data-overlap="true"] {
		margin-top: 0;
		padding-top: var(--mh-spacing-6) !important;
	}
}

/* Container bounds */
.mh-section .gridContainer,
.mh-section-overlap .gridContainer {
	max-width: var(--mh-content-width, 1200px);
	margin: 0 auto;
	padding: 0 var(--mh-spacing-6);
	width: 100%;
	box-sizing: border-box;
}

.flexbox-list {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
}

/* ==========================================================================
   2. Pure CSS Mock Media Containers
   ========================================================================== */

.mh-mock-media-box {
	background: var(--mh-color-section);
	border: 1px solid var(--mh-color-border-muted);
	border-radius: var(--mh-radius-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	color: var(--mh-color-text-muted);
	padding: var(--mh-spacing-6);
	text-align: center;
	box-sizing: border-box;
	transition: border-color var(--mh-transition-normal), box-shadow var(--mh-transition-normal);
}

.mh-mock-media-box:hover {
	border-color: var(--mh-color-brand-muted);
	box-shadow: var(--mh-shadow-sm);
}

.mh-mock-media-box i,
.mh-mock-media-box svg {
	font-size: var(--mh-text-4xl);
	margin-bottom: var(--mh-spacing-2);
	color: var(--mh-color-border);
	transition: color var(--mh-transition-fast);
}

.mh-mock-media-box:hover i,
.mh-mock-media-box:hover svg {
	color: var(--mh-color-brand-base);
}

.mh-mock-media-box span {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-xs);
	font-weight: 600;
	color: var(--mh-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ==========================================================================
   3. Front Page Hero & Core Hero Sections
   ========================================================================== */

.mh-front-page-hero,
.mh-section-hero,
.mh-section-hero-centered {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid var(--mh-color-border-muted);
	display: flex;
	align-items: center;
	background: var(--mh-color-body);
	box-sizing: border-box;
}

.mh-hero-width-boxed .mh-hero-container {
	max-width: var(--mh-content-width, 1200px);
	margin: 0 auto;
	padding: 0 var(--mh-spacing-6);
	width: 100%;
	box-sizing: border-box;
}

.mh-hero-width-full .mh-hero-container {
	max-width: 100%;
	padding: 0 var(--mh-spacing-12);
	width: 100%;
	box-sizing: border-box;
}

/* Hero Badge */
.mh-hero-badge {
	display: inline-block;
	padding: var(--mh-spacing-1) var(--mh-spacing-3);
	background: color-mix(in srgb, var(--mh-color-brand-base) 12%, transparent);
	color: var(--mh-color-brand-base);
	border-radius: var(--mh-radius-pill);
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-xs);
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-bottom: var(--mh-spacing-4);
}

/* Hero Headings */
.mh-hero-headline {
	font-family: var(--mh-font-heading);
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--mh-color-text-heading);
	margin: 0 0 var(--mh-spacing-4);
	letter-spacing: -0.02em;
}

.mh-hero-subtitle {
	font-family: var(--mh-font-body);
	font-size: var(--mh-text-lg);
	line-height: 1.6;
	color: var(--mh-color-text-muted);
	margin: 0 0 var(--mh-spacing-8);
	max-width: 640px;
}

.mh-hero-centered .mh-hero-subtitle,
.mh-section-hero-centered .mh-hero-subtitle {
	margin-left: auto;
	margin-right: auto;
}

/* Hero Actions / Buttons */
.mh-hero-actions,
.mh-hero-buttons {
	display: flex;
	gap: var(--mh-spacing-4);
	flex-wrap: wrap;
	align-items: center;
}

.mh-hero-centered .mh-hero-actions,
.mh-section-hero-centered .mh-hero-actions {
	justify-content: center;
}

.mh-hero-cta1,
.mh-section-hero .wp-block-button a,
a.primary_button {
	background: var(--mh-color-cta-base);
	color: var(--mh-color-text-inverse);
	padding: 13px 30px;
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-sm);
	font-weight: 700;
	border-radius: var(--mh-radius-sm);
	text-decoration: none;
	display: inline-block;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--mh-color-cta-base) 35%, transparent);
	transition: transform var(--mh-transition-fast), box-shadow var(--mh-transition-fast), background var(--mh-transition-fast);
	cursor: pointer;
	border: 0;
	box-sizing: border-box;
}

.mh-hero-cta1:hover,
.mh-section-hero .wp-block-button a:hover,
a.primary_button:hover {
	background: var(--mh-color-cta-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--mh-color-cta-base) 45%, transparent);
}

.mh-hero-cta1:active,
a.primary_button:active {
	background: var(--mh-color-cta-active);
	transform: translateY(0);
}

.mh-hero-cta2,
a.secondary_button {
	background: var(--mh-color-card);
	color: var(--mh-color-text-heading);
	border: 1px solid var(--mh-color-border);
	padding: 13px 26px;
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-sm);
	font-weight: 600;
	border-radius: var(--mh-radius-sm);
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition: all var(--mh-transition-fast);
	box-sizing: border-box;
}

.mh-hero-cta2:hover,
a.secondary_button:hover {
	background: var(--mh-color-section);
	border-color: var(--mh-color-brand-base);
	color: var(--mh-color-brand-base);
}

/* Hero Media */
.mh-hero-media {
	text-align: center;
	position: relative;
}

.mh-hero-image-el {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--mh-radius-lg);
	box-shadow: var(--mh-shadow-lg);
	border: 1px solid var(--mh-color-border-muted);
}

/* ==========================================================================
   4. Overlapable Four Boxes Section
   ========================================================================== */

.mh-section-overlap-four-boxes .about-four-boxes-innerrow,
.mh-section-overlap-four-boxes .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	border-radius: var(--mh-radius-lg);
	overflow: hidden;
	box-shadow: var(--mh-shadow-lg);
	background: var(--mh-color-card);
	border: 1px solid var(--mh-color-border-muted);
	margin-bottom: var(--mh-spacing-6);
	gap: 0;
}

.mh-section-overlap-four-boxes .about-four-boxes-imgcol,
.mh-section-overlap-four-boxes .about-four-boxes-imgcol2 {
	flex: 0 0 50%;
	min-height: 280px;
	background: var(--mh-color-section);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
}

.mh-section-overlap-four-boxes .about-four-boxes-textcol {
	flex: 0 0 50%;
	padding: var(--mh-spacing-8);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--mh-color-card);
}

.mh-section-overlap-four-boxes .about-four-boxes-textcol h6,
.mh-section-overlap-four-boxes .about-four-boxes-textcol .mh-subtitle {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--mh-color-brand-base);
	margin: 0 0 var(--mh-spacing-2);
}

.mh-section-overlap-four-boxes .about-four-boxes-textcol h2,
.mh-section-overlap-four-boxes .about-four-boxes-textcol .mh-title {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-2xl);
	font-weight: 800;
	color: var(--mh-color-text-heading);
	margin: 0 0 var(--mh-spacing-3);
	line-height: 1.25;
}

.mh-section-overlap-four-boxes .about-four-boxes-textcol p {
	font-family: var(--mh-font-body);
	font-size: var(--mh-text-base);
	color: var(--mh-color-text-muted);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 767px) {
	.mh-section-overlap-four-boxes .about-four-boxes-innerrow {
		flex-direction: column;
	}

	.mh-section-overlap-four-boxes .about-four-boxes-imgcol,
	.mh-section-overlap-four-boxes .about-four-boxes-imgcol2,
	.mh-section-overlap-four-boxes .about-four-boxes-textcol {
		flex: 0 0 100%;
		width: 100%;
		padding: var(--mh-spacing-6);
	}
}

/* ==========================================================================
   5. Overlapable Coloured Icon Boxes Section
   ========================================================================== */

.mh-section-overlap-coloured-boxes .features-coloured-icon-boxes-innerrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-spacing-6);
	justify-content: center;
}

.mh-section-overlap-coloured-boxes .features-coloured-icon-boxes-featurecol {
	flex: 1 1 calc(25% - var(--mh-spacing-6));
	min-width: 220px;
	background: var(--mh-color-card);
	border: 1px solid var(--mh-color-border-muted);
	border-radius: var(--mh-radius-lg);
	padding: var(--mh-spacing-8) var(--mh-spacing-6);
	text-align: center;
	box-shadow: var(--mh-shadow-md);
	transition: transform var(--mh-transition-normal), box-shadow var(--mh-transition-normal), border-color var(--mh-transition-normal);
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.mh-section-overlap-coloured-boxes .features-coloured-icon-boxes-featurecol:hover {
	transform: translateY(-6px);
	box-shadow: var(--mh-shadow-lg);
	border-color: var(--mh-color-brand-muted);
}

.mh-section-overlap-coloured-boxes .features-coloured-icon-boxes-iconcontainer {
	width: 64px;
	height: 64px;
	border-radius: var(--mh-radius-pill);
	background: var(--mh-color-brand-muted);
	color: var(--mh-color-brand-base);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--mh-spacing-4);
	font-size: var(--mh-text-2xl);
	transition: background var(--mh-transition-fast), color var(--mh-transition-fast), transform var(--mh-transition-fast);
}

.mh-section-overlap-coloured-boxes .features-coloured-icon-boxes-featurecol:hover .features-coloured-icon-boxes-iconcontainer {
	background: var(--mh-color-brand-base);
	color: var(--mh-color-text-inverse);
	transform: scale(1.08);
}

.mh-section-overlap-coloured-boxes h4 {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-lg);
	font-weight: 700;
	color: var(--mh-color-text-heading);
	margin: 0 0 var(--mh-spacing-2);
}

.mh-section-overlap-coloured-boxes p {
	font-family: var(--mh-font-body);
	font-size: var(--mh-text-sm);
	color: var(--mh-color-text-muted);
	line-height: 1.6;
	margin: 0 0 var(--mh-spacing-6);
	flex-grow: 1;
}

.mh-section-overlap-coloured-boxes .features-coloured-button {
	display: inline-block;
	padding: var(--mh-spacing-2) var(--mh-spacing-4);
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-xs);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--mh-color-brand-base);
	background: var(--mh-color-brand-muted);
	border-radius: var(--mh-radius-sm);
	text-decoration: none;
	transition: all var(--mh-transition-fast);
}

.mh-section-overlap-coloured-boxes .features-coloured-button:hover {
	background: var(--mh-color-brand-base);
	color: var(--mh-color-text-inverse);
}

@media (max-width: 1023px) {
	.mh-section-overlap-coloured-boxes .features-coloured-icon-boxes-featurecol {
		flex: 1 1 calc(50% - var(--mh-spacing-6));
	}
}

@media (max-width: 767px) {
	.mh-section-overlap-coloured-boxes .features-coloured-icon-boxes-featurecol {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   6. Overlapable Image Cards Section
   ========================================================================== */

.mh-section-overlap-image-cards .features-image-cards-innerrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-spacing-6);
	justify-content: center;
}

.mh-section-overlap-image-cards .features-image-cards-cardcol {
	flex: 1 1 calc(33.333% - var(--mh-spacing-6));
	min-width: 260px;
	box-sizing: border-box;
}

.mh-section-overlap-image-cards .features-image-cards-cardrow {
	background: var(--mh-color-card);
	border: 1px solid var(--mh-color-border-muted);
	border-radius: var(--mh-radius-lg);
	overflow: hidden;
	box-shadow: var(--mh-shadow-md);
	transition: transform var(--mh-transition-normal), box-shadow var(--mh-transition-normal);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.mh-section-overlap-image-cards .features-image-cards-cardrow:hover {
	transform: translateY(-6px);
	box-shadow: var(--mh-shadow-lg);
}

.mh-section-overlap-image-cards .features-image-cards-cardrow .mh-mock-media-box {
	border-radius: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

.mh-section-overlap-image-cards .features-image-cards-cardtextrow {
	padding: var(--mh-spacing-6);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	box-sizing: border-box;
}

.mh-section-overlap-image-cards h4 {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-xl);
	font-weight: 700;
	color: var(--mh-color-text-heading);
	margin: 0 0 var(--mh-spacing-2);
}

.mh-section-overlap-image-cards p {
	font-family: var(--mh-font-body);
	font-size: var(--mh-text-sm);
	color: var(--mh-color-text-muted);
	line-height: 1.6;
	margin: 0 0 var(--mh-spacing-4);
	flex-grow: 1;
}

.mh-section-overlap-image-cards .features-image-cards-separator {
	border: 0;
	border-top: 1px solid var(--mh-color-border-muted);
	margin: var(--mh-spacing-4) 0;
}

.mh-section-overlap-image-cards .features-image-cards-cardtextrow a {
	color: var(--mh-color-brand-base);
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-sm);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--mh-spacing-2);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color var(--mh-transition-fast);
}

.mh-section-overlap-image-cards .features-image-cards-cardtextrow a:hover {
	color: var(--mh-color-brand-hover);
}

@media (max-width: 1023px) {
	.mh-section-overlap-image-cards .features-image-cards-cardcol {
		flex: 1 1 calc(50% - var(--mh-spacing-6));
	}
}

@media (max-width: 767px) {
	.mh-section-overlap-image-cards .features-image-cards-cardcol {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   7. Overlapable Icons Section
   ========================================================================== */

.mh-section-overlap-icons .features-overlapped-icons-featuresrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-spacing-6);
	justify-content: center;
}

.mh-section-overlap-icons .features-large-icons-featcol {
	flex: 1 1 calc(25% - var(--mh-spacing-6));
	min-width: 220px;
	box-sizing: border-box;
}

.mh-section-overlap-icons .features-overlapped-icons-featinnerrow {
	background: var(--mh-color-card);
	border: 1px solid var(--mh-color-border-muted);
	border-radius: var(--mh-radius-lg);
	padding: var(--mh-spacing-6);
	box-shadow: var(--mh-shadow-md);
	transition: transform var(--mh-transition-normal), box-shadow var(--mh-transition-normal), border-color var(--mh-transition-normal);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
}

.mh-section-overlap-icons .features-overlapped-icons-featinnerrow:hover {
	transform: translateY(-6px);
	box-shadow: var(--mh-shadow-lg);
	border-color: var(--mh-color-brand-muted);
}

.mh-section-overlap-icons .features-icon-container {
	width: 56px;
	height: 56px;
	border-radius: var(--mh-radius-md);
	background: var(--mh-color-brand-muted);
	color: var(--mh-color-brand-base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--mh-text-xl);
	margin-bottom: var(--mh-spacing-4);
	transition: background var(--mh-transition-fast), color var(--mh-transition-fast);
}

.mh-section-overlap-icons .features-overlapped-icons-featinnerrow:hover .features-icon-container {
	background: var(--mh-color-brand-base);
	color: var(--mh-color-text-inverse);
}

.mh-section-overlap-icons h4 {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-lg);
	font-weight: 700;
	color: var(--mh-color-text-heading);
	margin: 0 0 var(--mh-spacing-2);
}

.mh-section-overlap-icons p {
	font-family: var(--mh-font-body);
	font-size: var(--mh-text-sm);
	color: var(--mh-color-text-muted);
	line-height: 1.6;
	margin: 0 0 var(--mh-spacing-4);
	flex-grow: 1;
}

.mh-section-overlap-icons a {
	color: var(--mh-color-brand-base);
	font-family: var(--mh-font-heading);
	font-size: var(--mh-text-sm);
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: inline-flex;
	align-items: center;
	transition: color var(--mh-transition-fast);
}

.mh-section-overlap-icons a:hover {
	color: var(--mh-color-brand-hover);
}

@media (max-width: 1023px) {
	.mh-section-overlap-icons .features-large-icons-featcol {
		flex: 1 1 calc(50% - var(--mh-spacing-6));
	}
}

@media (max-width: 767px) {
	.mh-section-overlap-icons .features-large-icons-featcol {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   8. Responsive Column Clearings & Helpers
   ========================================================================== */

.cp3cols {
	flex: 1 1 calc(25% - var(--mh-spacing-6));
	box-sizing: border-box;
}

.cp4cols {
	flex: 1 1 calc(33.333% - var(--mh-spacing-6));
	box-sizing: border-box;
}

.cp6cols {
	flex: 1 1 calc(50% - var(--mh-spacing-6));
	box-sizing: border-box;
}

.cp12cols {
	flex: 1 1 100%;
	box-sizing: border-box;
}

@media (max-width: 1023px) {
	.cp6cols-tablet {
		flex: 1 1 calc(50% - var(--mh-spacing-6));
	}
}

@media (max-width: 767px) {
	.cp3cols,
	.cp4cols,
	.cp6cols,
	.cp6cols-tablet {
		flex: 1 1 100%;
	}
}