/* ========================================================================================
 * button.css - .btn and its modifiers (L2 layer).
 * Ported from the design source's .cd-btn family (docs/design-source/homepage-template.html,
 * search ".cd-btn"), rewritten in the brief's variable style so Theme Colors changes
 * (Appearance > Theme Colors) flow straight through --cd-accent into --btn-bg without any
 * CSS edit.
 * ======================================================================================== */

.btn{--btn-bg:transparent;--btn-fg:var(--cd-ink-strong);--btn-border:transparent;
	--btn-bg-hover:var(--btn-bg);--btn-fg-hover:var(--btn-fg);--btn-border-hover:var(--btn-border);
	display:inline-flex;align-items:center;justify-content:center;gap:var(--cd-2);
	min-height:48px;padding:var(--cd-3) var(--cd-6);border:2px solid var(--btn-border);
	border-radius:var(--cd-r-pill);background:var(--btn-bg);color:var(--btn-fg);
	font:700 var(--cd-body)/1.2 var(--cd-font);text-decoration:none;cursor:pointer;
	transition:background-color .2s,color .2s,border-color .2s}
.btn:hover,.btn:focus-visible{background:var(--btn-bg-hover);color:var(--btn-fg-hover);border-color:var(--btn-border-hover)}
.btn:focus-visible{outline:3px solid var(--cd-focus);outline-offset:2px}
.btn--primary{--btn-bg:var(--cd-accent);--btn-fg:var(--cd-accent-ink);--btn-border:var(--cd-accent);
	--btn-bg-hover:var(--cd-accent-hover);--btn-border-hover:var(--cd-accent-hover)}
.btn--ghost{--btn-fg:var(--cd-ink-strong);--btn-border:currentColor;
	--btn-bg-hover:var(--cd-ink-strong);--btn-fg-hover:var(--cd-ground);--btn-border-hover:var(--cd-ink-strong)}
.btn--quiet{--btn-bg:var(--cd-ground-tint);--btn-border:var(--cd-line);--btn-border-hover:var(--cd-line-strong)}
.btn--link{--btn-fg:var(--cd-ink-accent);min-height:0;padding:0;border:0;border-radius:0;
	text-decoration:underline;text-underline-offset:.2em}
/* Restates .btn's own color at (0,2,0) specificity, one class higher than base.css's
   .on-dark a{color:var(--cd-white)} (0,1,1): without it, that rule wins on specificity
   alone and forces every .btn variant to white text inside .on-dark, including
   .btn--link (should stay --cd-ink-accent orange) and .btn--quiet (should stay dark text
   on its own light chip). Each variant's --btn-fg already carries the color that is
   correct for it; this just lets that custom property win again in a dark ancestor. */
.on-dark .btn{color:var(--btn-fg)}
.on-dark .btn:hover,.on-dark .btn:focus-visible{color:var(--btn-fg-hover)}
.on-dark .btn--ghost{--btn-fg:var(--cd-white);--btn-border:var(--cd-white);
	--btn-bg-hover:var(--cd-white);--btn-fg-hover:var(--cd-ground-deep);--btn-border-hover:var(--cd-white)}
.btn--sm{min-height:44px;padding:var(--cd-2) var(--cd-4);font-size:var(--cd-small)}
.btn--lg{min-height:56px;padding:var(--cd-4) var(--cd-7);font-size:var(--cd-body-lg)}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--cd-3)}

/* --center: a centered button row (e.g. "Read more reviews" under a testimonial slider). */
.btn-row--center{justify-content:center;margin-top:var(--cd-6)}