/* FAQ V1.2 - top-navigation product-help surface.
 * Gutenberg owns page content. This stylesheet owns presentation only.
 * Shared width/gutter geometry comes from Grid & Whitespace v1.1.
 */

.mahamu-faq-page{
	padding-block:var(--wp--custom--space--section-commerce);
	background:var(--wp--custom--color--surface--canvas);
}

.mahamu-faq-frame{
	box-sizing:border-box;
}

.mahamu-faq-intro{
	max-width:52rem;
	margin:0 auto var(--wp--custom--space--section-commerce);
}

.mahamu-faq-intro h1{
	margin:0 0 var(--wp--custom--space--md);
	font-size:clamp(36px,5vw,56px);
	line-height:var(--wp--custom--font--line-height--heading);
	font-weight:var(--wp--custom--font--weight--medium);
}

.mahamu-faq-intro p{
	margin:0;
	max-width:42rem;
	color:var(--wp--custom--color--text--secondary);
	font-size:17px;
	line-height:var(--wp--custom--font--line-height--body);
}

.mahamu-faq-topics{
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	width:100%;
	max-width:64rem;
	margin:0 auto var(--wp--custom--space--section-commerce);
	padding:0;
	border-top:1px solid var(--wp--custom--color--border--soft);
	border-bottom:1px solid var(--wp--custom--color--border--soft);
	list-style:none;
}

.mahamu-faq-topics li{
	margin:0;
	padding:0;
}

.mahamu-faq-topics li + li{
	border-left:1px solid var(--wp--custom--color--border--soft);
}

.mahamu-faq-topics a{
	display:flex;
	min-height:88px;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:var(--wp--custom--space--sm);
	padding:var(--wp--custom--space--md);
	color:var(--wp--custom--color--text--primary);
	font-weight:var(--wp--custom--font--weight--medium);
	line-height:1.35;
	text-align:center;
	text-decoration:none;
}

.mahamu-faq-topics a::before,
.mahamu-faq-section > h2::before{
	content:"";
	display:block;
	width:24px;
	height:24px;
	flex:0 0 24px;
	background:currentColor;
	-webkit-mask:var(--mahamu-faq-icon) center / contain no-repeat;
	mask:var(--mahamu-faq-icon) center / contain no-repeat;
}

.mahamu-faq-support-links a::after{
	content:"→";
	justify-self:end;
	color:var(--wp--custom--color--text--secondary);
	font-size:16px;
	line-height:1;
}

.mahamu-faq-topics a:hover{
	background:var(--wp--custom--color--surface--editorial);
	color:var(--wp--custom--color--action--primary);
}

.mahamu-faq-support-links a:hover{
	color:var(--wp--custom--color--action--primary);
}

.mahamu-faq-topics a:focus-visible,
.mahamu-faq-page summary:focus-visible,
.mahamu-faq-support a:focus-visible{
	outline:2px solid var(--wp--custom--color--accent--focus);
	outline-offset:3px;
}

.mahamu-faq-topics a[href="#choose-product"],
#choose-product > h2{
	--mahamu-faq-icon:url("../icons/faq/choose.svg");
}

.mahamu-faq-topics a[href="#scent"],
#scent > h2{
	--mahamu-faq-icon:url("../icons/faq/scent.svg");
}

.mahamu-faq-topics a[href="#use"],
#use > h2{
	--mahamu-faq-icon:url("../icons/faq/use.svg");
}

.mahamu-faq-topics a[href="#care"],
#care > h2{
	--mahamu-faq-icon:url("../icons/faq/care.svg");
}

.mahamu-faq-topics a[href="#safety"],
#safety > h2{
	--mahamu-faq-icon:url("../icons/faq/safety.svg");
}

.mahamu-faq-section{
	width:100%;
	max-width:var(--wp--custom--layout--content-reading);
	margin:0 auto clamp(72px,8vw,104px);
	scroll-margin-top:var(--wp--custom--space--section-commerce);
}

.mahamu-faq-section:last-of-type{
	margin-bottom:0;
}

.mahamu-faq-section > h2{
	display:flex;
	align-items:center;
	gap:var(--wp--custom--space--md);
	margin:0 0 var(--wp--custom--space--lg);
	font-size:clamp(26px,3vw,34px);
	line-height:1.15;
	font-weight:var(--wp--custom--font--weight--medium);
}

.mahamu-faq-section > h2::before{
	width:28px;
	height:28px;
	flex-basis:28px;
	color:var(--wp--custom--color--action--primary);
}

.mahamu-faq-list{
	border-top:1px solid var(--wp--custom--color--border--soft);
}

.mahamu-faq-item{
	margin:0;
	padding:0;
	border-bottom:1px solid var(--wp--custom--color--border--soft);
	transition:background-color .15s ease;
}

.mahamu-faq-item[open]{
	background:var(--wp--custom--color--surface--editorial);
	box-shadow:inset 2px 0 0 var(--wp--custom--color--action--primary);
}

.mahamu-faq-item > summary{
	display:flex;
	min-height:60px;
	align-items:center;
	justify-content:space-between;
	gap:var(--wp--custom--space--lg);
	padding:var(--wp--custom--space--md);
	color:var(--wp--custom--color--text--primary);
	font-size:17px;
	font-weight:var(--wp--custom--font--weight--medium);
	line-height:1.5;
	cursor:pointer;
	list-style:none;
}

.mahamu-faq-item > summary::-webkit-details-marker{
	display:none;
}

.mahamu-faq-item > summary::after{
	content:"+";
	display:grid;
	place-items:center;
	flex:0 0 32px;
	width:32px;
	height:32px;
	border:1px solid var(--wp--custom--color--border--soft);
	border-radius:50%;
	color:var(--wp--custom--color--text--secondary);
	font-size:20px;
	font-weight:var(--wp--custom--font--weight--regular);
	line-height:1;
}

.mahamu-faq-item[open] > summary::after{
	content:"−";
	border-color:var(--wp--custom--color--action--primary);
	color:var(--wp--custom--color--action--primary);
}

.mahamu-faq-item > :not(summary){
	max-width:var(--wp--custom--layout--content-reading);
}

.mahamu-faq-item p,
.mahamu-faq-item ul,
.mahamu-faq-item ol{
	margin-top:0;
	margin-bottom:0;
	padding:0 var(--wp--custom--space--xl) var(--wp--custom--space--lg) var(--wp--custom--space--md);
	color:var(--wp--custom--color--text--secondary);
	font-size:16px;
	line-height:1.7;
}

.mahamu-faq-item a{
	color:var(--wp--custom--color--action--primary);
	text-underline-offset:3px;
}

.mahamu-faq-support{
	width:100%;
	max-width:var(--wp--custom--layout--content-reading);
	margin:var(--wp--custom--space--xl) auto 0;
	padding-top:var(--wp--custom--space--xl);
	border-top:1px solid var(--wp--custom--color--border--soft);
}

.mahamu-faq-support > h2{
	margin:0 0 var(--wp--custom--space--sm);
	font-size:clamp(26px,3vw,34px);
	line-height:1.15;
	font-weight:var(--wp--custom--font--weight--medium);
}

.mahamu-faq-support > p{
	margin:0 0 var(--wp--custom--space--lg);
	color:var(--wp--custom--color--text--secondary);
	line-height:1.7;
}

.mahamu-faq-support-links{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	margin:0;
	padding:0;
	border-top:1px solid var(--wp--custom--color--border--soft);
	list-style:none;
}

.mahamu-faq-support-links li{
	margin:0;
	padding:0;
	border-bottom:1px solid var(--wp--custom--color--border--soft);
}

.mahamu-faq-support-links li:nth-child(odd){
	border-right:1px solid var(--wp--custom--color--border--soft);
}

.mahamu-faq-support-links a{
	display:grid;
	grid-template-columns:minmax(0,1fr) 18px;
	gap:var(--wp--custom--space--sm);
	min-height:60px;
	align-items:center;
	padding:var(--wp--custom--space--md) var(--wp--custom--space--lg);
	color:var(--wp--custom--color--text--primary);
	font-weight:var(--wp--custom--font--weight--medium);
	line-height:1.35;
	text-decoration:none;
}

@media (prefers-reduced-motion:reduce){
	.mahamu-faq-item{
		transition:none;
	}
}

@media (max-width:900px){
	.mahamu-faq-topics{
		grid-template-columns:repeat(6,minmax(0,1fr));
		margin-bottom:var(--wp--custom--space--section-commerce);
	}

	.mahamu-faq-topics li{
		grid-column:span 2;
		border-left:0;
	}

	.mahamu-faq-topics li:nth-child(2),
	.mahamu-faq-topics li:nth-child(3),
	.mahamu-faq-topics li:nth-child(5){
		border-left:1px solid var(--wp--custom--color--border--soft);
	}

	.mahamu-faq-topics li:nth-child(n+4){
		grid-column:span 3;
		border-top:1px solid var(--wp--custom--color--border--soft);
	}

	.mahamu-faq-topics a{
		min-height:80px;
		padding:var(--wp--custom--space--md);
	}

	.mahamu-faq-section{
		margin-bottom:var(--wp--custom--space--section-commerce);
	}
}

@media (max-width:640px){
	.mahamu-faq-page{
		padding-block:var(--wp--custom--space--section-mobile);
	}

	.mahamu-faq-intro{
		margin-bottom:var(--wp--custom--space--lg);
	}

	.mahamu-faq-intro h1{
		font-size:36px;
	}

	.mahamu-faq-intro p{
		font-size:16px;
	}

	.mahamu-faq-topics{
		grid-template-columns:repeat(2,minmax(0,1fr));
		margin-bottom:var(--wp--custom--space--section-mobile);
	}

	.mahamu-faq-topics li{
		grid-column:auto;
		border-left:0;
		border-top:0;
	}

	.mahamu-faq-topics li:nth-child(1),
	.mahamu-faq-topics li:nth-child(2),
	.mahamu-faq-topics li:nth-child(3),
	.mahamu-faq-topics li:nth-child(4){
		grid-column:auto / span 1;
	}

	.mahamu-faq-topics li:nth-child(2),
	.mahamu-faq-topics li:nth-child(3),
	.mahamu-faq-topics li:nth-child(5){
		border-left:0;
	}

	.mahamu-faq-topics li:nth-child(even):not(:last-child){
		border-left:1px solid var(--wp--custom--color--border--soft);
	}

	.mahamu-faq-topics li:nth-child(n+3){
		border-top:1px solid var(--wp--custom--color--border--soft);
	}

	.mahamu-faq-topics li:last-child{
		grid-column:1 / -1;
	}

	.mahamu-faq-topics a{
		min-height:72px;
		padding:var(--wp--custom--space--sm) var(--wp--custom--space--md);
		font-size:15px;
	}

	.mahamu-faq-section{
		margin-bottom:var(--wp--custom--space--section-mobile);
		scroll-margin-top:var(--wp--custom--space--section-mobile);
	}

	.mahamu-faq-section > h2{
		margin-bottom:var(--wp--custom--space--md);
	}

	.mahamu-faq-item > summary{
		min-height:56px;
		gap:var(--wp--custom--space--md);
		padding:var(--wp--custom--space--md) var(--wp--custom--space--sm);
		font-size:16px;
	}

	.mahamu-faq-item > summary::after{
		flex-basis:30px;
		width:30px;
		height:30px;
	}

	.mahamu-faq-item p,
	.mahamu-faq-item ul,
	.mahamu-faq-item ol{
		padding-right:var(--wp--custom--space--md);
		padding-left:var(--wp--custom--space--sm);
	}

	.mahamu-faq-support{
		margin-top:var(--wp--custom--space--section-mobile);
	}

	.mahamu-faq-support-links{
		grid-template-columns:1fr;
	}

	.mahamu-faq-support-links li:nth-child(odd){
		border-right:0;
	}

	.mahamu-faq-support-links a{
		min-height:56px;
		padding-inline:var(--wp--custom--space--sm);
	}
}