/*
 * Zellige Atelier — Architect Specification Pack button/section.
 *
 * Site palette declared once, every declaration carries a literal fallback,
 * square corners, visible focus ring.
 */

.za-spec-pack {
	--za-ivory: #F6F1E8;
	--za-green: #193D35;
	--za-brass: #AD916A;
	--za-charcoal: #222722;

	margin: 1.25rem 0;
	padding: 0;
}

.za-spec-pack__button {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;

	box-sizing: border-box;
	padding: 0.8em 1.4em;

	border: 1px solid var(--za-brass, #AD916A);
	border-radius: 0; /* square corners */

	background: var(--za-green, #193D35);
	color: var(--za-ivory, #F6F1E8);

	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: left;

	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.za-spec-pack__button::before {
	content: "PDF";
	flex: none;
	padding: 0.25em 0.45em;

	border: 1px solid rgba(246, 241, 232, 0.6); /* ivory @ 60% */
	border-radius: 0;

	background: rgba(173, 145, 106, 0.22); /* brass @ 22% */
	color: inherit;

	font-size: 0.6875rem;
	letter-spacing: 0.1em;
}

.za-spec-pack__button:hover,
.za-spec-pack__button:focus {
	background: var(--za-charcoal, #222722);
	border-color: var(--za-brass, #AD916A);
	color: var(--za-ivory, #F6F1E8);
}

.za-spec-pack__button:focus-visible {
	outline: 3px solid var(--za-brass, #AD916A); /* visible focus ring */
	outline-offset: 3px;
}

.za-spec-pack__label {
	display: inline-block;
}

.za-spec-pack__hint {
	margin: 0.6rem 0 0;
	color: var(--za-charcoal, #222722);
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.8;
}

/* Section wrapper variant (pages that group the button with copy). */
.za-spec-pack--section {
	margin: 2rem 0;
	padding-top: 1rem;
	border-top: 1px solid var(--za-brass, #AD916A); /* brass hairline */
}

.za-spec-pack--section .za-spec-pack__title {
	margin: 0 0 0.5rem;
	color: var(--za-green, #193D35);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.5rem;
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.za-spec-pack__button {
		transition: none;
	}
}