/**
 * A-Z company directory, style 2.
 *
 * Loaded only when [alphabet_links] is used with style="2", so the original
 * directory markup and its child-theme styling are untouched everywhere else.
 *
 * Everything is scoped to .onc-directory and the tokens are declared on that
 * element, so this file does not depend on any other stylesheet.
 */

.onc-directory {
	--onc-dir-pink-dark: #cd0b50;
	--onc-dir-heading: #363335;
	--onc-dir-line: #E8E8E8;
	--onc-dir-wash: #F3F5F7;
	--onc-dir-white: #fff;
	--onc-dir-width: 1200px;

	box-sizing: border-box;
	padding-block: 34px 38px;
	background: var(--onc-dir-wash);
	border-top: 1px solid var(--onc-dir-line);
}

.onc-directory *,
.onc-directory *::before,
.onc-directory *::after { box-sizing: border-box; }

.onc-directory__inner {
	width: min(var(--onc-dir-width), calc(100% - 64px));
	margin-inline: auto;
}

.onc-directory :where(.onc-directory__title) {
	margin: 0 0 20px;
	color: var(--onc-dir-heading);
	font-size: 19px;
	line-height: 1.4;
}

.onc-directory__letters {
	display: grid;
	grid-template-columns: repeat(26, minmax(0, 1fr));
	gap: 2px;
}

/* Real links, one per letter, each big enough to tap. */
.onc-directory .onc-directory__letters a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 4px;
	color: var(--onc-dir-pink-dark);
	font-size: 15px;
	font-weight: 650;
	text-decoration: none;
}

.onc-directory .onc-directory__letters a:hover {
	background: var(--onc-dir-white);
	color: var(--onc-dir-pink-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.onc-directory .onc-directory__letters a:focus-visible {
	outline: 3px solid #141841;
	outline-offset: 0;
	background: var(--onc-dir-white);
}

@media (max-width: 1240px) {
	.onc-directory__letters { grid-template-columns: repeat(13, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.onc-directory { padding-block: 28px; }
	.onc-directory :where(.onc-directory__title) { font-size: 18px; margin-bottom: 16px; }
	.onc-directory__inner { width: calc(100% - 40px); }
	.onc-directory__letters {
		grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
		gap: 4px;
	}
}

@media (max-width: 380px) {
	.onc-directory__inner { width: calc(100% - 32px); }
}