/**
 * Support & Resources Index
 *
 * Dark hero with section tabs and a three-column support layout.
 */

.support-resources-index {
	display: block;
	width: 100%;
}

.support-resources-index__visually-hidden {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ── Hero / support section ──────────────────────────────────────────────── */

/* Black base under the comp's blurred blue glow. The source vector is 1920×3579
 * — far taller than the hero — and is anchored to the top so only its upper
 * curve shows, with the rest clipped by the section's overflow. Scaling by
 * width (100% auto) keeps that framing at any viewport. Opacity (0.3) and the
 * Gaussian blur are baked into the SVG. */
.support-resources-index__hero {
	background-color: var(--color-black);
	background-image: url(/app/themes/qmation/assets/images/support-resources/hero-glow.svg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	color: var(--color-white);
	overflow: hidden;
	padding-block: var(--spacing-20, 5rem) var(--spacing-20, 5rem);
	position: relative;
}

/* Same dot texture as the site footer: repeat-dot.webp tiled at 12px, 15%. */
.support-resources-index__hero.has-dotted-bg::before {
	background: url(/app/themes/imagemakers-foundation/public/repeat-dot.webp) repeat center top;
	background-size: 0.75rem auto;
	content: '';
	inset: 0;
	opacity: 0.15;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.support-resources-index__container {
	position: relative;
	z-index: 1;
}

.support-resources-index__breadcrumb {
	color: var(--color-gray-300);
	margin-block-end: var(--spacing-24, 6rem);
}

.support-resources-index__breadcrumb .breadcrumb__link:hover,
.support-resources-index__breadcrumb .breadcrumb__link:focus-visible {
	color: var(--color-white);
	text-decoration: underline;
}

.support-resources-index__header {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1.9375rem;
	margin-block-end: 0;
	text-align: center;
	border-block-end: 1px solid #343434;
	padding-block-end: 4.75rem;
}

.support-resources-index__title {
	color: #fff;
	font-family: var(--font-family-heading);
	font-size: clamp(2.25rem, 5vw, 4rem); /* 36px → 64px */
	font-style: normal;
	font-weight: 600;
	line-height: 1.0625; /* 68px / 64px */
	margin: 0;
	max-width: 64.375rem; /* 1030px */
	text-align: center;
}

.support-resources-index__supporting-copy {
	color: #ccc;
	font-family: var(--font-family-sans);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	max-width: 47.5rem;
	text-align: center;
	text-wrap: pretty;
}

.support-resources-index__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	justify-content: center;
}

.support-resources-index__tab {
	--tab-sheen: 0.32;

	align-items: center;
	background: rgb(255 255 255 / 0.07);
	/* Real glass: blur the dot texture and blue wash showing through the pill. */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 0;
	border-radius: 200px;
	box-shadow: 2px 4px 16px 0 rgb(0 0 0 / 0.25);
	overflow: hidden;
	position: relative;
	isolation: isolate;
	color: var(--color-white);
	font-family: var(--font-family-sans);
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: var(--font-weight-medium, 500);
	line-height: normal;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.875rem; /* 30px */
	text-decoration: none;
	text-shadow: 0 4px 10.7px rgb(0 0 0 / 0.25);
	transition: box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.support-resources-index__tab::before {
	border-radius: inherit;
	background:
		radial-gradient(70px 44px at 24px 0, rgb(255 255 255 / var(--tab-sheen)) 0%, rgb(255 255 255 / 0) 72%),
		radial-gradient(70px 44px at calc(100% - 24px) 100%, rgb(255 255 255 / var(--tab-sheen)) 0%, rgb(255 255 255 / 0) 72%),
		linear-gradient(180deg, rgb(255 255 255 / 0.156) 0%, rgb(255 255 255 / 0.118) 100%);
	content: '';
	inset: 0;
	padding: 1px;
	pointer-events: none;
	position: absolute;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.support-resources-index__tab::after {
	background: linear-gradient(126.594deg, #0f9ed5 0%, #0f9ed5 13.99%, #095c7c 100%);
	border-radius: inherit;
	content: '';
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.2s ease;
	z-index: -1;
}

.support-resources-index__tab.is-active::before,
.support-resources-index__tab:hover::before,
.support-resources-index__tab:focus-visible::before {
	display: none;
}

.support-resources-index__tab.is-active::after,
.support-resources-index__tab[aria-current="page"]::after {
	opacity: 0.42;
}

.support-resources-index__tab:hover::after,
.support-resources-index__tab:focus-visible::after,
.support-resources-index__tab.is-active:hover::after,
.support-resources-index__tab[aria-current="page"]:hover::after,
.support-resources-index__tab.is-active:focus-visible::after,
.support-resources-index__tab[aria-current="page"]:focus-visible::after {
	opacity: 1;
}

.support-resources-index__tab:hover,
.support-resources-index__tab:focus-visible,
.support-resources-index__tab.is-active,
.support-resources-index__tab.is-active:hover,
.support-resources-index__tab.is-active:focus-visible {
	background: #095c7c;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 100px;
	box-shadow: none;
	color: var(--color-white);
}

.support-resources-index__tab:hover,
.support-resources-index__tab:focus-visible {
	box-shadow: 0 10px 24px rgb(0 0 0 / 0.28);
	filter: brightness(1.08);
}

.support-resources-index__tab:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ── Support blocks ──────────────────────────────────────────────────────── */

.support-resources-index__blocks {
	display: grid;
	gap: var(--spacing-10, 2.5rem);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: var(--spacing-10, 2.5rem) 0;
}

.support-resources-index__block {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6, 1.5rem);
	min-width: 0;
}

.support-resources-index__block-title {
	color: #fff;
	font-family: var(--font-family-heading);
	font-size: clamp(1.5rem, 2vw, 2rem); /* 24px → 32px */
	font-style: normal;
	font-weight: 600;
	line-height: 1.125; /* 36px / 32px */
	margin: 0 0 0.25rem; /* 4px title → description */
	text-align: left;
	text-wrap: balance;
}

.support-resources-index__block-description {
	color: #ccc;
	font-family: var(--font-family-sans);
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: 1.5; /* 24px / 16px */
	margin: 0 0 1.25rem; /* 20px description → support levels */
	max-width: 21.25rem; /* 340px */
}

/* Columns without support levels run description → contacts, which the comp
 * spaces at 32px rather than 20px. */
.support-resources-index__block-description + .support-resources-index__contacts {
	margin-block-start: 0.75rem;
}

.support-resources-index__levels {
	display: grid;
	gap: var(--spacing-4, 1rem);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0 0 2rem; /* 32px levels → contacts */
	padding: 0;
}

.support-resources-index__level-title {
	color: #ccc;
	font-family: var(--font-family-sans);
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: 1.25; /* 20px / 16px */
	margin: 0 0 0.375rem; /* 6px */
}

.support-resources-index__level-description {
	color: #a3a3a3;
	font-family: var(--font-family-sans);
	font-size: 0.875rem; /* 14px */
	font-style: normal;
	font-weight: 400;
	line-height: 1.4286; /* 20px / 14px */
	margin: 0;
	max-width: 10.875rem; /* 174px */
}

.support-resources-index__contacts {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2.125rem;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.support-resources-index__contact {
	align-items: center;
	display: inline-flex;
	position: relative;
}

.support-resources-index__contact:not(:first-child)::before {
	background-color: #343434;
	content: '';
	display: block;
	left: -1.0625rem;
	flex-shrink: 0;
	height: 1.375rem;
	border-radius: 10px;
	position: absolute;
	width: 1px;
}

.support-resources-index__contact-link {
	color: var(--color-white);
	font-family: var(--font-family-sans);
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.support-resources-index__contact-link:hover,
.support-resources-index__contact-link:focus-visible {
	color: var(--color-white);
	text-decoration: underline;
}

.support-resources-index__contact-link:focus-visible {
	outline: 1px solid var(--color-white);
	outline-offset: 1px;
}

.support-resources-index__contact-link--icon {
	align-items: center;
	display: inline-flex;
	gap: 0.5rem;
}

.support-resources-index__contact-icon {
	color: var(--color-primary);
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.support-resources-index__contact-icon svg {
	display: block;
	height: 1rem;
	width: auto;
}

/* ── Support hours (editor content) ──────────────────────────────────────── */

.support-resources-index__support-hours {
	margin-block-start: 3.5rem;
	max-width: 26.625rem;
}

.support-resources-index__support-hours > :first-child {
	margin-block-start: 0;
}

.support-resources-index__support-hours > :last-child {
	margin-block-end: 0;
}

.support-resources-index__support-hours h2,
.support-resources-index__support-hours h3,
.support-resources-index__support-hours h4,
.support-resources-index__support-hours h5,
.support-resources-index__support-hours h6 {
	color: #ccc;
	font-family: var(--font-family-sans);
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: 400;
	line-height: 1.25; /* 20px / 16px */
	margin: 0 0 0.375rem;
}

.support-resources-index__support-hours p,
.support-resources-index__support-hours li {
	color: #a3a3a3;
	font-family: var(--font-family-sans);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4286;
	margin: 0 0 0.5rem;
}

.support-resources-index__support-hours ul,
.support-resources-index__support-hours ol {
	margin: 0 0 0.5rem;
	padding-inline-start: 1.125rem;
}

.support-resources-index__support-hours a {
	color: var(--color-white);
	display: inline-block;
	font-weight: var(--font-weight-semibold, 600);
	text-decoration: none;
	text-underline-offset: 0.15em;
	transition: color 0.2s ease;
	vertical-align: top;
	white-space: nowrap;
}

.support-resources-index__support-hours a:hover,
.support-resources-index__support-hours a:focus-visible {
	color: var(--color-white);
	text-decoration: underline;
}

.support-resources-index__support-hours a:focus-visible {
	outline: 1px solid var(--color-white);
	outline-offset: 1px;
}

.support-resources-index__subsection {
	padding-block-start: var(--spacing-10, 2.5rem);
}

.support-resources-index__block:nth-child(2) .support-resources-index__subsection {
	border-block-start: 1px solid #343434;
}

.support-resources-index__subsection-title {
	color: #fff;
	font-family: var(--font-family-heading);
	font-size: 1.125rem; /* 18px */
	font-style: normal;
	font-weight: 600;
	line-height: 1.4444; /* 26px / 18px */
	margin: 0 0 0.1875rem; /* 3px */
}

.support-resources-index__subsection-description {
	color: #a3a3a3;
	font-family: var(--font-family-sans);
	font-size: 0.875rem; /* 14px */
	font-style: normal;
	font-weight: 400;
	line-height: 1.4286; /* 20px / 14px */
	margin: 0 0 1.25rem; /* 20px description → CTA */
	max-width: 21.25rem; /* 340px */
}

.support-resources-index__cta-button.button--secondary {
	color: var(--color-white);
	font-family: var(--font-family-sans);
	font-size: 1rem; /* 16px */
	font-style: normal;
	font-weight: var(--font-weight-medium, 500);
	gap: 0.5rem; /* 8px */
	line-height: normal;
}

.support-resources-index__cta-button.button--secondary:hover,
.support-resources-index__cta-button.button--secondary:focus-visible {
	color: var(--color-white);
	text-decoration: underline;
}

.support-resources-index__cta-button.button--secondary:focus-visible {
	outline: 1px solid var(--color-white);
	outline-offset: 1px;
}

.support-resources-index__resources-anchor {
	height: 0;
	overflow: hidden;
	width: 0;
}

#resources,
#events-workshops {
	scroll-margin-top: 5rem;
}

.support-resources-index__ideas {
	background: #fff;
	overflow: visible;
}

.support-resources-index__events-anchor {
	height: 0;
	overflow: hidden;
	width: 0;
}

.support-resources-index__events {
	background: #fff;
}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */

@media (width >= 640px) {
	.support-resources-index__levels {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--spacing-4, 1rem);
	}
}

@media (width >= 900px) {
	/* Bottom padding is the one figure the comp pins down: the dark section ends
	 * at y=1098 and the tallest column ends at y=970, so 128px. The top is split
	 * between the section and the breadcrumb gap below — the comp has no
	 * breadcrumb, so that split is a judgement call, not a measurement. */
	.support-resources-index__breadcrumb {
		margin-block-end: 4.5rem;
	}

	.support-resources-index__blocks {
		gap: 0;
		grid-template-columns: minmax(0, 646fr) minmax(0, 441fr) minmax(0, 441fr);
		padding: 0;
	}

	.support-resources-index__block--primary .support-resources-index__block-description {
		max-width: 29.125rem; /* 466px */
	}

	.support-resources-index__block {
		position: relative;
		padding-inline: var(--spacing-6, 1.5rem);
		padding-top: var(--spacing-6, 1.5rem);
	}
	
	.support-resources-index__block:not(:last-child)::after {
		background-color: #343434;
		border-radius: 10px;
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 1px;
	}

	.support-resources-index__block-title {
		max-width: 15em;
	}

	.support-resources-index__block:first-child {
		padding-inline-start: 0;
	}

	.support-resources-index__block:last-child {
		padding-inline-end: 0;
	}
}

@media (width >= 1024px) {
	.support-resources-index__hero {
		padding-block: 7.125rem 8rem;
	}

	.support-resources-index__breadcrumb {
		margin-bottom: 6.5rem;
	}

	.support-resources-index__block {
		padding-inline: var(--spacing-10, 2.5rem);
		padding-top: var(--spacing-10, 2.5rem);
	}

	#resources,
	#events-workshops {
		scroll-margin-top: 6rem;
	}
}

@media (width >= 1280px) {
	.support-resources-index__breadcrumb {
		margin-bottom: 8.75rem;
	}

	/* Figma leaves 41px between a column's text and the divider beside it. */
	.support-resources-index__block {
		gap: 3.125rem;
		padding-inline: var(--spacing-12, 3rem);
		padding-top: var(--spacing-12, 3rem);
	}

	.support-resources-index__subsection {
		padding-block-start: 3.125rem;
	}
}

/* ── Anchor scroll offset (account for fixed header) ─────────────────────── */
/* Mobile: 64px header + buffer */
.support-resources-index__hero,
.support-resources-index__ideas,
.support-resources-index__events,
.support-resources-index__resources-anchor,
.support-resources-index__events-anchor {
	scroll-margin-top: 4.625rem;
}

/* Desktop (≥768px): 82px header + buffer */
@media (width >= 48rem) {
	.support-resources-index__hero,
	.support-resources-index__ideas,
	.support-resources-index__events,
	.support-resources-index__resources-anchor,
	.support-resources-index__events-anchor {
		scroll-margin-top: 5.75rem;
	}
}

/* WordPress admin bar: adds 46px on mobile, 32px on desktop */
.admin-bar .support-resources-index__hero,
.admin-bar .support-resources-index__ideas,
.admin-bar .support-resources-index__events,
.admin-bar .support-resources-index__resources-anchor,
.admin-bar .support-resources-index__events-anchor {
	scroll-margin-top: 7.5rem;
}

@media (width >= 48rem) {
	.admin-bar .support-resources-index__hero,
	.admin-bar .support-resources-index__ideas,
	.admin-bar .support-resources-index__events,
	.admin-bar .support-resources-index__resources-anchor,
	.admin-bar .support-resources-index__events-anchor {
		scroll-margin-top: 7.75rem;
	}
}