/**
 * Front-end styling for [gmd_brochure_button] — GMD gold OUTLINE (secondary) button.
 *
 * Pairs with the solid-gold "Download brochure" button beside it; this is the
 * outline variant with a slide-fill hover (::before gold layer slides in, text
 * flips to --bg), copied from the homepage outline-button behaviour.
 *
 * Uses the GMD design tokens already defined on the page — --gold (#c9a87c),
 * --bg (#0a0a0a), --gold-soft, --ease — and does NOT redefine them. Hard-coded
 * hex/ease fallbacks in the var() calls only kick in if a token is out of scope
 * on a given property page, so the button is never left as a faint text link.
 *
 * Selectors are scoped as `a.gmd-brochure-btn` and the visual properties use
 * !important so they beat the theme's generic <a> / .entry-content a styles.
 *
 * The print document itself is fully self-contained (styles inline in
 * templates/brochure.php); this file is not loaded there.
 */

a.gmd-brochure-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 16px 40px !important;
	border: 1px solid var(--gold, #c9a87c) !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--gold, #c9a87c) !important;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.5s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Slide-fill layer — gold panel parked off-canvas, slides in on hover. */
a.gmd-brochure-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gold, #c9a87c);
	transform: translateX(-101%);
	transition: transform 0.5s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
	z-index: 0;
	pointer-events: none;
}

/* Content rides above the fill layer. */
a.gmd-brochure-btn .gmd-brochure-btn__inner {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Hover / focus: fill slides in, text + icon invert to the dark bg. */
a.gmd-brochure-btn:hover::before,
a.gmd-brochure-btn:focus-visible::before {
	transform: translateX(0);
}

a.gmd-brochure-btn:hover,
a.gmd-brochure-btn:focus-visible {
	color: var(--bg, #0a0a0a) !important;
	border-color: var(--gold, #c9a87c) !important;
	background: transparent !important; /* the fill is the ::before layer, not the button bg */
}

/* Print icon: inherits currentColor (gold → --bg on hover) via its SVG stroke. */
a.gmd-brochure-btn .gmd-brochure-btn__icon {
	display: block;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: inherit;
	transition: color 0.5s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

a.gmd-brochure-btn .gmd-brochure-btn__label {
	display: inline-block;
	color: inherit;
}

/* Real, visible keyboard focus. */
a.gmd-brochure-btn:focus-visible {
	outline: 2px solid var(--gold-soft, var(--gold, #c9a87c));
	outline-offset: 3px;
}