/**
 * Brands: the A-Z jump bar and the brand accordion on /brands/.
 *
 * Same visual model as the FAQ, deliberately: no borders anywhere, and each
 * brand is a **filled row** with the page background showing through 8px gaps.
 * There are no group headings here - the client asked for one single column
 * ordered alphabetically - so the A-Z bar carries the navigation instead and
 * each letter group is an invisible container holding the anchor.
 *
 * Colours come from the Elementor kit's Global Colors and typography from its
 * Global Fonts, so nothing is duplicated from the kit.
 *
 * Note on specificity: `.elementor-kit-16 a`, `.elementor-kit-16 button` and
 * `.elementor-kit-16 h2` (0,1,1) paint every link, button and heading on this
 * site. Every rule here that touches one is scoped with two classes so it wins
 * without !important.
 *
 * Contrast, measured: navy #2C354B on white 12.2:1, white on navy 12.2:1,
 * navy on the brand teal #69C5C2 about 6:1. White on that teal is only 2:1 and
 * is not used here.
 *
 * @package NightSkyOptics
 */

.c-brands {
	/* Clears the top of the viewport when a jump link lands on a letter. */
	--nso-brands-offset: 120px;
	--nso-brands-radius: 6px;
}

.c-brands__empty {
	margin: 0;
	color: var(--e-global-color-4ee277d, #9b9b9b);
	font-family: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 16px);
	line-height: var(--e-global-typography-text-line-height, 1.7);
}

/* -------------------------------------------------------------------------
 * A-Z jump bar
 * ---------------------------------------------------------------------- */

.c-brands__nav {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px 16px;
	margin: 0 0 44px;
	padding: 20px 22px;
	border-radius: var(--nso-brands-radius);
	background-color: var(--e-global-color-f9ce99a, #f3fbfb);
}

.c-brands__nav-label {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	color: var(--e-global-color-50b1913, #508f8d);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.c-brands__nav-count {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	margin: 0;
	color: var(--e-global-color-4ee277d, #9b9b9b);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
	white-space: nowrap;
}

.c-brands__nav-list {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-brands__nav-item {
	margin: 0;
}

.c-brands__nav-list .c-brands__nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 9px;
	border: 0;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(44, 53, 75, 0.08);
	color: var(--e-global-color-primary, #2c354b);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.c-brands__nav-list .c-brands__nav-link:hover,
.c-brands__nav-list .c-brands__nav-link:focus-visible {
	background-color: var(--e-global-color-secondary, #69c5c2);
	box-shadow: 0 3px 10px rgba(105, 197, 194, 0.4);
	color: var(--e-global-color-primary, #2c354b);
}

.c-brands__nav-list .c-brands__nav-link:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #2c354b);
	outline-offset: 2px;
}

/* A letter nobody stocks: present, so the alphabet stays readable, but inert. */
.c-brands__nav-list .c-brands__nav-link--empty {
	background-color: transparent;
	box-shadow: none;
	color: #b9c0cc;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * The list - one single column, A-Z
 * ---------------------------------------------------------------------- */

.c-brands__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * One container per letter. It carries the jump anchor and nothing else: the
 * same 8px gap as the list itself, so the rows read as one uninterrupted
 * column rather than as grouped blocks.
 */
.c-brands__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	scroll-margin-top: var(--nso-brands-offset, 120px);
}

.c-brands__item {
	border-radius: var(--nso-brands-radius);
	background-color: var(--e-global-color-43f00c0, #f7f7f7);
	scroll-margin-top: var(--nso-brands-offset, 120px);
	transition: background-color 0.2s ease;
}

.c-brands__item:hover {
	background-color: #eef1f2;
}

.c-brands__item[open] {
	background-color: var(--e-global-color-f9ce99a, #f3fbfb);
}

.c-brands__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-radius: var(--nso-brands-radius);
	cursor: pointer;
	color: var(--e-global-color-primary, #2c354b);
	list-style: none;
	transition: color 0.2s ease;
}

/* Remove the browser's own disclosure triangle. */
.c-brands__summary::-webkit-details-marker {
	display: none;
}

.c-brands__summary::marker {
	content: "";
}

.c-brands__summary:focus-visible {
	outline: 2px solid var(--e-global-color-secondary, #69c5c2);
	outline-offset: -2px;
}

/* The kit paints every h2, so margin and type are reset explicitly here. */
.c-brands__summary .c-brands__name {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-accent-font-size, 16px);
	font-weight: var(--e-global-typography-accent-font-weight, 600);
	letter-spacing: normal;
	line-height: var(--e-global-typography-accent-line-height, 1.5);
	text-transform: none;
}

.c-brands__item[open] > .c-brands__summary {
	color: var(--e-global-color-50b1913, #508f8d);
}

/* Plus that becomes a minus. */
.c-brands__marker {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.c-brands__marker::before,
.c-brands__marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: currentColor;
	transform: translate(-50%, -50%);
}

.c-brands__marker::before {
	width: 14px;
	height: 1.5px;
}

.c-brands__marker::after {
	width: 1.5px;
	height: 14px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.c-brands__item[open] .c-brands__marker::after {
	opacity: 0;
	transform: translate(-50%, -50%) scaleY(0);
}

/* -------------------------------------------------------------------------
 * The open panel - bio on the left, logo on the right
 * ---------------------------------------------------------------------- */

.c-brands__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	align-items: start;
	gap: 24px 32px;
	padding: 0 22px 22px;
}

.c-brands__bio {
	max-width: 72ch;
	color: var(--e-global-color-text, #394460);
	font-family: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 16px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	line-height: var(--e-global-typography-text-line-height, 1.7);
}

.c-brands__bio > :first-child {
	margin-top: 0;
}

.c-brands__bio > :last-child {
	margin-bottom: 0;
}

.c-brands .c-brands__bio a {
	color: var(--e-global-color-50b1913, #508f8d);
	text-decoration: underline;
}

.c-brands .c-brands__bio a:hover {
	color: var(--e-global-color-accent, #c6488e);
}

.c-brands__bio ul,
.c-brands__bio ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.c-brands__bio li + li {
	margin-top: 0.35em;
}

/* Navy fill, white label: 12.2:1. The kit's own pink would be 4.45:1. */
.c-brands__body .c-brands__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	padding: 11px 18px;
	border: 0;
	border-radius: 8px;
	background-color: var(--e-global-color-primary, #2c354b);
	color: #fff;
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.c-brands__body .c-brands__cta:hover,
.c-brands__body .c-brands__cta:focus-visible {
	background-color: var(--e-global-color-text, #394460);
	box-shadow: 0 4px 12px rgba(44, 53, 75, 0.22);
	color: #fff;
}

.c-brands__body .c-brands__cta:focus-visible {
	outline: 2px solid var(--e-global-color-secondary, #69c5c2);
	outline-offset: 2px;
}

.c-brands__cta-arrow {
	transition: transform 0.2s ease;
}

.c-brands__body .c-brands__cta:hover .c-brands__cta-arrow {
	transform: translateX(3px);
}

/*
 * A white tile behind the logo. The files are a mix of transparent PNG/WebP and
 * JPEGs with a white background, so a white tile is the one ground that suits
 * both without retouching 36 images.
 */
.c-brands__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: 18px;
	border-radius: var(--nso-brands-radius);
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(44, 53, 75, 0.08);
}

.c-brands__logo .c-brands__logo-image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 96px;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
 * Back to the top
 * ---------------------------------------------------------------------- */

.c-brands .c-brands__back {
	display: inline-block;
	margin-top: 24px;
	color: var(--e-global-color-4ee277d, #9b9b9b);
	font-family: var(--e-global-typography-accent-font-family, "Open Sans"), sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-brands .c-brands__back::before {
	content: "\2191";
	margin-right: 6px;
}

.c-brands .c-brands__back:hover,
.c-brands .c-brands__back:focus-visible {
	color: var(--e-global-color-50b1913, #508f8d);
}

/* -------------------------------------------------------------------------
 * Motion and responsive
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.c-brands__item,
	.c-brands__summary,
	.c-brands__marker::after,
	.c-brands__cta-arrow,
	.c-brands__nav-list .c-brands__nav-link,
	.c-brands__body .c-brands__cta,
	.c-brands .c-brands__back {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.c-brands__panel {
		grid-template-columns: minmax(0, 1fr) 200px;
		gap: 20px 24px;
	}
}

@media (max-width: 767px) {
	.c-brands {
		--nso-brands-offset: 90px;
	}

	.c-brands__nav {
		margin-bottom: 32px;
		padding: 16px 16px 18px;
	}

	.c-brands__nav-list {
		gap: 5px;
	}

	.c-brands__nav-list .c-brands__nav-link {
		min-width: 31px;
		height: 31px;
		padding: 0 7px;
		font-size: 13px;
	}

	.c-brands__summary {
		padding: 16px;
	}

	/* Logo first on a narrow screen: identify the brand, then read about it. */
	.c-brands__panel {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 0 16px 18px;
	}

	.c-brands__logo {
		order: -1;
		min-height: 0;
		padding: 16px;
	}

	.c-brands__logo .c-brands__logo-image {
		max-height: 72px;
	}

	.c-brands__body .c-brands__cta {
		margin-top: 16px;
	}
}