/* TuffWrap button system — Bootstrap-style utility classes.
 *
 * Canonical copy: angie-components/site-mu-plugins/tfw-buttons.css
 * Loaded sitewide (front end + Elementor editor/preview) by
 * angie-components/site-mu-plugins/tfw-button-styles.php.
 *
 * The model
 * ---------
 * A button is its accent colour at a low alpha, with a 2px solid border and
 * label in the same accent. Context is one modifier:
 *
 *   default (on a light background) : fill alpha 0.2, accent label
 *   .tfw-btn-on-light (light section): fill alpha 0.08, accent label — a faint tint
 *   .tfw-btn-on-dark (over a photo) : fill alpha 0.4, white label
 *   .tfw-btn-solid                  : opaque fill, white label
 *
 * Hover fills the button solid with a white label in every case.
 *
 * Usage — class attribute in an Angie component template, or Elementor's
 * Advanced -> CSS Classes field on a Button widget:
 *
 *     <a class="tfw-btn tfw-btn-primary" href="…">Meet our team</a>
 *     <a class="tfw-btn tfw-btn-danger tfw-btn-on-dark" href="…">Request a quote</a>
 *     <a class="tfw-btn tfw-btn-danger tfw-btn-rounded tfw-btn-block" href="…">Find your regional contact</a>
 *
 * Base:      tfw-btn                (required on every button)
 * Colour:    tfw-btn-primary        blue   rgb(18 140 205)   #128ccd
 *            tfw-btn-danger         red    rgb(220 39 45)    #dc272d
 *            tfw-btn-ink            near-black neutral
 * Context:   tfw-btn-on-dark        over a dark image — alpha 0.4, white label
 *            tfw-btn-on-light       faint tint (alpha 0.08) over a light section, accent label
 *            tfw-btn-solid          opaque fill, white label
 * Shape:     tfw-btn-rounded (12px)  tfw-btn-pill  tfw-btn-square
 * Size:      tfw-btn-lg  tfw-btn-sm            tfw-btn-block (full width)
 *
 * Colour variant rules use a doubled class (`.tfw-btn.tfw-btn-primary`,
 * specificity 0-2-0) so they beat Hello Elementor's element+class resets on
 * <button> without any !important. Each accent is stored as space-separated RGB
 * channels so one value drives border, label and the alpha fill — override
 * `--tfw-btn-rgb` on a wrapper to re-theme a region.
 */

:root {
	--tfw-red-rgb:  220 39 45;   /* #dc272d */
	--tfw-blue-rgb: 18 140 205;  /* #128ccd */
	--tfw-ink-rgb:  31 36 38;    /* #1f2426 */

	--tfw-btn-fill-alpha:     0.2;
	--tfw-btn-fill-alpha-light: 0.08;
	--tfw-btn-radius:         4px;
	--tfw-btn-radius-rounded: 12px;
	--tfw-btn-pad-y:          18px;
	--tfw-btn-pad-x:          40px;
	--tfw-btn-font-size:      1rem;
	--tfw-btn-font-weight:    700;
	--tfw-btn-letter-spacing: 0.02em;
	--tfw-btn-border-width:   2px;
	--tfw-btn-transition:     background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* ---- base ------------------------------------------------------------------ */

.tfw-btn,
a.tfw-btn,
button.tfw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: var(--tfw-btn-pad-y) var(--tfw-btn-pad-x);
	border: var(--tfw-btn-border-width) solid transparent;
	border-radius: var(--tfw-btn-radius);
	background-color: transparent;
	color: inherit;
	font-family: "azo-sans-web", "Helvetica Neue", Arial, sans-serif;
	font-size: var(--tfw-btn-font-size);
	font-weight: var(--tfw-btn-font-weight);
	line-height: 1.2;
	letter-spacing: var(--tfw-btn-letter-spacing);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: var(--tfw-btn-transition);
	-webkit-appearance: none;
	appearance: none;
}

.tfw-btn:hover,
.tfw-btn:focus {
	text-decoration: none;
}

.tfw-btn:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.tfw-btn[disabled],
.tfw-btn.is-disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* ---- colour variants ---------------------------------------------------- */

.tfw-btn.tfw-btn-primary { --tfw-btn-rgb: var(--tfw-blue-rgb); }
.tfw-btn.tfw-btn-danger  { --tfw-btn-rgb: var(--tfw-red-rgb); }
.tfw-btn.tfw-btn-ink     { --tfw-btn-rgb: var(--tfw-ink-rgb); }

.tfw-btn.tfw-btn-primary,
.tfw-btn.tfw-btn-danger,
.tfw-btn.tfw-btn-ink {
	border-color: rgb(var(--tfw-btn-rgb));
	color: rgb(var(--tfw-btn-rgb));
	background-color: rgb(var(--tfw-btn-rgb) / var(--tfw-btn-fill-alpha));
}

.tfw-btn.tfw-btn-primary:hover,
.tfw-btn.tfw-btn-primary:focus-visible,
.tfw-btn.tfw-btn-danger:hover,
.tfw-btn.tfw-btn-danger:focus-visible,
.tfw-btn.tfw-btn-ink:hover,
.tfw-btn.tfw-btn-ink:focus-visible {
	background-color: rgb(var(--tfw-btn-rgb));
	border-color: rgb(var(--tfw-btn-rgb));
	color: #fff;
}

/* ---- context modifiers ------------------------------------------------- */

/* Over a dark photo: deeper wash so the label reads, and the label goes white. */
.tfw-btn.tfw-btn-on-dark {
	--tfw-btn-fill-alpha: 0.4;
	color: #fff;
}

/* Over a light section: a faint tint of the accent, label stays in the accent.
   The alpha is its own token so the tint can be tuned without touching the
   on-dark or default washes. */
.tfw-btn.tfw-btn-on-light {
	--tfw-btn-fill-alpha: var(--tfw-btn-fill-alpha-light);
}

/* Opaque fill (e.g. a primary CTA on a plain section). */
.tfw-btn.tfw-btn-solid {
	background-color: rgb(var(--tfw-btn-rgb));
	color: #fff;
}

/* ---- shape + size modifiers -------------------------------------------- */

.tfw-btn.tfw-btn-rounded { border-radius: var(--tfw-btn-radius-rounded); }
.tfw-btn.tfw-btn-pill    { border-radius: 999px; }
.tfw-btn.tfw-btn-square  { border-radius: 0; }

.tfw-btn.tfw-btn-lg {
	--tfw-btn-pad-y: 22px;
	--tfw-btn-pad-x: 52px;
	--tfw-btn-font-size: 1.125rem;
}
.tfw-btn.tfw-btn-sm {
	--tfw-btn-pad-y: 12px;
	--tfw-btn-pad-x: 24px;
	--tfw-btn-font-size: 0.875rem;
}

.tfw-btn.tfw-btn-block {
	display: flex;
	width: 100%;
}

/* ---- placeholder-anchor guard --------------------------------------------- *
 * Hello Elementor's reboot greys out any <a> that has neither href nor
 * tabindex:
 *     a:not([href]):not([tabindex]) { color: inherit }      // spec 0-2-1
 * That outweighs the 0-2-0 colour-variant rules above, so a button rendered as
 * a bare anchor — an unlinked CTA, or Elementor's editor preview, which emits
 * `<a class="tfw-btn …">` with no href — loses its label colour. Re-assert it
 * with an `a`-qualified selector (0-3-1 / 0-4-1 on hover) so the button wins
 * whether or not it ends up with an href. No !important. */
a.tfw-btn.tfw-btn-primary,
a.tfw-btn.tfw-btn-danger,
a.tfw-btn.tfw-btn-ink {
	color: rgb(var(--tfw-btn-rgb));
}

a.tfw-btn.tfw-btn-on-dark,
a.tfw-btn.tfw-btn-solid {
	color: #fff;
}

a.tfw-btn.tfw-btn-primary:hover,
a.tfw-btn.tfw-btn-primary:focus-visible,
a.tfw-btn.tfw-btn-danger:hover,
a.tfw-btn.tfw-btn-danger:focus-visible,
a.tfw-btn.tfw-btn-ink:hover,
a.tfw-btn.tfw-btn-ink:focus-visible {
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.tfw-btn { transition: none; }
}