/*
 * Sounds Amazing - Support page (Figma "support" 336:1550, 1920px frame).
 *
 * Loads on top of shop.css (.sa-shop supplies tokens, hero band, breadcrumb
 * strip and trust strip). Sizes interpolate from the 1024px value to the
 * 1920px design value like the other layers.
 */

/* ------------------------------------------------------------- hero */

.sa-support-hero__wave {
	width: min(283px, 70%);
	margin: 16px 0 0;
}

.sa-support-hero .sa-shop-hero__lead {
	max-width: 418px;
}

/* ------------------------------------------------------------ layout */

/* Sidebar 380 + 62 gap + content 1300 = the 1744px content box. */
.sa-support {
	max-width: var(--content);
	margin: 0 auto;
	padding: clamp(72px, calc(88px + 72 * (100vw - 1024px) / 896), 160px) var(--gutter) clamp(120px, calc(140px + 129 * (100vw - 1024px) / 896), 269px);
	display: grid;
	grid-template-columns: clamp(280px, calc(300px + 80 * (100vw - 1024px) / 896), 380px) minmax(0, 1fr);
	column-gap: clamp(32px, calc(36px + 26 * (100vw - 1024px) / 896), 62px);
	align-items: start;
}

/* ------------------------------------------------------ side nav card */

.sa-support__side {
	position: sticky;
	top: 24px;
}

.sa-support__nav {
	background: linear-gradient(180deg, rgba(232, 215, 245, 0.05) 0%, #fff 100%);
	border: 1px solid rgba(166, 126, 72, 0.5);
	border-radius: 16px;
	padding: 23px 24px 24px;
	box-shadow: 0 4px 6.5px rgba(166, 126, 72, 0.2);
}

.sa-support__nav-label {
	margin: 0 0 16px 9px;
	font: 700 12px / 1 var(--sans);
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--gold);
}

.sa-support__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.sa-support__nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 47px;
	padding: 0 14px;
	border-radius: 60px;
	border: 1px solid rgba(166, 126, 72, 0.4);
	background: #fff;
	font: 600 14px / 1.2 var(--sans);
	letter-spacing: 1px;
	color: var(--ink);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sa-support__nav a::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--icon) center / contain no-repeat;
	/* The exported icons are single-colour line art: force ink, or cream on the active pill. */
	filter: brightness(0);
	opacity: 0.85;
}

.sa-support__nav a:hover {
	border-color: var(--gold);
	background: var(--paper);
}

.sa-support__nav a.is-active {
	background: var(--purple-gradient);
	border-color: var(--gold);
	border-radius: 39px;
	color: var(--cream);
}

.sa-support__nav a.is-active::before {
	filter: brightness(0) invert(1);
	opacity: 1;
}

/* ---------------------------------------------------------- headings */

.sa-support__title {
	margin: 0;
	font: 400 clamp(28px, calc(30px + 6 * (100vw - 1024px) / 896), 36px) / 1.15 var(--serif);
	color: var(--ink);
}

/* --------------------------------------------------- commitment card */

.sa-support-card {
	background: #fcf4ee;
	border: 1px solid rgba(166, 126, 72, 0.5);
	border-radius: 16px;
	padding: clamp(24px, calc(28px + 12 * (100vw - 1024px) / 896), 40px);
}

.sa-support-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sa-support-card__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: var(--purple-deep);
	display: grid;
	place-items: center;
}

.sa-support-card__icon img {
	width: 20px;
	height: 20px;
}

.sa-support-card__text {
	margin: 24px 0 0;
	font: 500 16px / 28px var(--sans);
	letter-spacing: 0.24px;
	color: var(--ink);
	opacity: 0.9;
}

/* ---------------------------------------------------------- sections */

.sa-support-section {
	margin-top: clamp(64px, calc(72px + 56 * (100vw - 1024px) / 896), 128px);
	padding-top: clamp(48px, calc(52px + 20 * (100vw - 1024px) / 896), 72px);
	border-top: 1px solid rgba(166, 126, 72, 0.5);
}

.sa-support-section--first {
	margin-top: clamp(72px, calc(88px + 80 * (100vw - 1024px) / 896), 168px);
	padding-top: 0;
	border-top: 0;
}

.sa-support__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.sa-support__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font: 600 16px / 1.4 var(--sans);
	color: var(--ink);
}

.sa-support__list li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	background: url(../img/support/check.svg) center / contain no-repeat;
}

.sa-support__list--small {
	margin-top: 14px;
	gap: 12px;
}

.sa-support__list--small li {
	gap: 8px;
	font-weight: 500;
	font-size: 15px;
}

.sa-support__list--small li::before {
	margin-top: 2px;
}

.sa-support__list--steps li::before {
	width: 14px;
	height: 14px;
	margin-top: 3px;
	background-image: url(../img/support/corner-down-right.svg);
}

.sa-support-note {
	margin-top: 24px;
	padding: 24px;
	border-radius: 12px;
	background: rgba(197, 162, 118, 0.2);
}

.sa-support-note__eyebrow {
	margin: 0;
	font: 700 12px / 1.3 var(--sans);
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--purple);
}

.sa-support-note__text {
	margin: 8px 0 0;
	font: 500 15px / 22px var(--sans);
	color: var(--ink);
}

/* shipping subsections */

.sa-support__subs {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 24px;
}

.sa-support-sub {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.sa-support-sub__icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: #fcf4ee;
	border: 1px solid var(--gold);
	display: grid;
	place-items: center;
}

.sa-support-sub__icon img {
	width: 20px;
	height: 20px;
}

.sa-support-sub__title {
	margin: 0;
	font: 700 18px / 1.4 var(--sans);
	color: var(--ink);
}

.sa-support-sub__text {
	margin: 6px 0 0;
	font: 500 15px / 22px var(--sans);
	color: var(--ink);
	opacity: 0.8;
}

/* returns */

.sa-support-cols {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 40px;
}

.sa-support-cols__title {
	margin: 0;
	font: 700 16px / 1.4 var(--sans);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ink);
}

.sa-support-notice {
	margin: 24px 0 0;
	padding: 23px 24px;
	border-radius: 12px;
	background: #fcf4ee;
	border: 1px solid var(--gold-2);
	font: 600 15px / 22px var(--sans);
	color: var(--gold);
}

/* faq */

.sa-faq {
	margin-top: clamp(24px, calc(26px + 6 * (100vw - 1024px) / 896), 32px);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.sa-faq__item {
	background: #fcf4ee;
	border: 1px solid #ccb4c5;
	border-radius: 12px;
}

.sa-faq__h {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.sa-shop .sa-faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 23px 24px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font: 700 16px / 1.4 var(--sans);
	color: var(--ink);
	/* The parent theme's button reset sets nowrap; long questions must wrap on phones. */
	white-space: normal;
	min-width: 0;
}

.sa-shop .sa-faq__q::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	background: url(../img/support/plus.svg) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.sa-faq__item.is-open .sa-faq__q::after {
	background-image: url(../img/support/minus.svg);
}

.sa-shop .sa-faq__q:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 12px;
}

.sa-faq__a {
	margin: 0;
	padding: 0 24px 24px;
	font: 500 14px / 20px var(--sans);
	color: var(--ink);
	opacity: 0.8;
}

.sa-faq__a[hidden] {
	display: none;
}

/* ============================================================== tablet */

@media (max-width: 1024px) {
	.sa-support {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.sa-support__side {
		position: static;
	}

	.sa-support__nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.sa-support__nav a {
		min-height: 42px;
	}
}

/* ============================================================== mobile */

@media (max-width: 767px) {
	.sa-support__nav {
		padding: 20px;
	}

	.sa-support__nav a {
		font-size: 13px;
		padding: 0 12px;
	}

	.sa-support-cols,
	.sa-faq {
		grid-template-columns: minmax(0, 1fr);
	}

	.sa-support-card__head {
		align-items: flex-start;
	}

	.sa-shop .sa-faq__q {
		padding: 18px 18px;
	}

	.sa-faq__a {
		padding: 0 18px 18px;
	}
}