/* ─────────────────────────────────────────────────────────────
   GTD Desco — site buttons.

   Brings every button on the site onto the geometry the hero
   established: square corners, one size, .14em tracking, and a
   chevron that follows the text colour instead of being swapped
   for a second SVG on hover.

   MARKUP IS UNCHANGED. There are 69 button instances across the
   templates; restyling the existing classes in place is complete
   by construction, where a class rename would have been a hunt.
   The class names stay historical (.green-info-button has been
   red since before this rebuild) — that is a separate cleanup.

   Loaded after sass/style.css, so it overrides by order. The few
   !important declarations below exist only to answer !important
   in sass/_partials/buttons.scss; each one is marked.

   Not a Sass partial for the same reason as css/hero.css: the
   theme compiles through Compass (config.rb, Ruby), which nobody
   has confirmed still runs.
   ───────────────────────────────────────────────────────────── */

:root {
	--gtd-red: #c60000;
	--gtd-red-lift: #e11414;
	--gtd-ink: #101d1d;
	--gtd-btn-ease: cubic-bezier(.16, 1, .3, 1);
	--gtd-btn-pad: 1.05rem 1.9rem;
}

/* ── shared shell ─────────────────────────────────────────── */

.info-button,
.red-info-button,
.green-info-button,
.geoweights-info-button,
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form input[type="submit"],
.wpforms-submit,
#wpforms-submit-199 {
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;

	padding: var(--gtd-btn-pad);
	/* The old buttons were 23px/500 with a 9px radius. The hero set the
	   system at .82rem/700 with .14em tracking and no radius; matching it
	   is the whole point of this file. */
	font: 700 .82rem/1 "eurostile", sans-serif;
	/* !important: css/type.css sets p/a/li site-wide with !important, which
	   beats a non-important rule here regardless of specificity. */
	font-size: .82rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;

	border: 1px solid transparent;
	border-radius: 0;
	margin-top: 20px;

	transition:
		background-color .25s var(--gtd-btn-ease),
		border-color .25s var(--gtd-btn-ease),
		color .25s var(--gtd-btn-ease),
		transform .25s var(--gtd-btn-ease),
		box-shadow .25s var(--gtd-btn-ease);
}

/*
 * The contact form's submit is targeted by ID in sass/_partials/buttons.scss,
 * with !important on every declaration including a white background. An ID
 * plus !important beats everything above, so this rule has to answer it in
 * kind — otherwise that one button stays white while every other submit on
 * the site is red.
 */
#wpforms-submit-199 {
	/* display too: the old rule's inline-block was clipping the button to 41px
	   (below the 44px touch minimum) and taking the chevron out of the flex
	   row. */
	display: inline-flex !important;
	height: auto !important;
	padding: var(--gtd-btn-pad) !important;
	font-size: .82rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	border-radius: 0 !important;
	background-color: var(--gtd-red) !important;
	color: #fff !important;
	border: 1px solid var(--gtd-red) !important;
}

.info-button:focus-visible,
.red-info-button:focus-visible,
.green-info-button:focus-visible,
.geoweights-info-button:focus-visible,
div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible,
.wpforms-submit:focus-visible,
#wpforms-submit-199:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ── chevron ──────────────────────────────────────────────── */

/*
 * Was: a background-image on ::after, absolutely nudged into place, with a
 * second SVG (union_maroon) swapped in on hover to change its colour.
 *
 * Now: the same artwork used as a mask and painted with currentColor, so it
 * takes the button's text colour automatically — in every state, on every
 * variant, including ones that do not exist yet. One asset, no swap.
 */
.info-button::after,
.red-info-button::after,
.green-info-button::after,
.geoweights-info-button::after,
div.wpforms-container-full .wpforms-form button[type="submit"]::after {
	content: "" !important;          /* the old rule used !important here */
	display: block;
	width: 20px;
	height: 15px;
	flex: none;

	background: none;
	background-color: currentColor;
	-webkit-mask: url(../images/union_white.svg) no-repeat center / contain;
	mask: url(../images/union_white.svg) no-repeat center / contain;

	/* Unwind the old absolute nudging. */
	position: static;
	margin: 0 !important;            /* was margin-left: 15px !important */
	top: auto;
	left: auto;
	transform: none;
	opacity: 1;

	transition: transform .25s var(--gtd-btn-ease);
}

.info-button:hover::after,
.red-info-button:hover::after,
.green-info-button:hover::after,
.geoweights-info-button:hover::after,
div.wpforms-container-full .wpforms-form button[type="submit"]:hover::after {
	background: none;
	background-color: currentColor;
	transform: translateX(4px);
}

/* ── variants ─────────────────────────────────────────────── */

/* Light surface, red mark. */
.info-button {
	background-color: #fff;
	color: var(--gtd-red);
	border-color: rgba(198, 0, 0, .18);
}
.info-button:hover {
	background-color: var(--gtd-red);
	border-color: var(--gtd-red);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(16, 29, 29, .18);
}

/*
 * Solid red. Two classes, one appearance: .green-info-button has been
 * #c60000 for as long as the stylesheet has existed.
 *
 * Hover was black. The hero settled on a lift to #e11414 — staying in the
 * brand rather than dropping to a colour the palette does not otherwise use.
 */
.red-info-button,
.green-info-button,
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form input[type="submit"],
.wpforms-submit,
#wpforms-submit-199 {
	background-color: var(--gtd-red);
	color: #fff;
	border-color: var(--gtd-red);
}

/* WPForms' own default is scoped with :not(:hover):not(:active); this matches
   that shape so the resting state is not handed back to the plugin's blue. */
div.wpforms-container-full .wpforms-form button[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full .wpforms-form input[type="submit"]:not(:hover):not(:active) {
	background-color: var(--gtd-red);
	color: #fff;
	border-color: var(--gtd-red);
	font: 700 .82rem/1 "eurostile", sans-serif;
	font-size: .82rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 0;
	padding: var(--gtd-btn-pad);
	height: auto;
}

.red-info-button:hover,
.green-info-button:hover,
div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form input[type="submit"]:hover,
.wpforms-submit:hover {
	background-color: var(--gtd-red-lift);
	border-color: var(--gtd-red-lift);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(198, 0, 0, .28);
}
#wpforms-submit-199:hover {
	background-color: var(--gtd-red-lift) !important;
	border-color: var(--gtd-red-lift) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(198, 0, 0, .28);
}

/* Geoweights keeps its own colour — it is a sub-brand, not a variant — and
   takes the same geometry as everything else. */
.geoweights-info-button {
	background-color: #f2562d;
	color: #fff;
	border-color: #f2562d;
}
.geoweights-info-button:hover {
	background-color: #d9451f;
	border-color: #d9451f;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(242, 86, 45, .3);
}

/* ── small screens ────────────────────────────────────────── */

/*
 * responsive_styles_global.scss sets `font-size: 18px !important` and
 * `margin-top: 10px !important` on all three button classes below 800px —
 * which is why the buttons were still 18px on a phone while the desktop had
 * moved to .82rem. These two blocks answer that, matching the hero's own
 * breakpoint behaviour: .82rem down to 560px, .74rem below it.
 */
@media (max-width: 800px) {
	.info-button,
	.red-info-button,
	.green-info-button,
	.geoweights-info-button {
		font-size: .82rem !important;
		margin-top: 20px !important;
	}
}

@media (max-width: 560px) {
	.info-button,
	.red-info-button,
	.green-info-button,
	.geoweights-info-button,
	div.wpforms-container-full .wpforms-form button[type="submit"],
	.wpforms-submit,
	#wpforms-submit-199 {
		/* 1rem, not the hero's .95rem: with an 11.8px label the smaller value
		   lands at 44.2px, right on the touch minimum rather than clear of it. */
		--gtd-btn-pad: 1rem 1.35rem;
		font-size: .74rem !important;
	}
	.info-button,
	.red-info-button,
	.green-info-button,
	.geoweights-info-button {
		font-size: .74rem !important;
	}
	div.wpforms-container-full .wpforms-form button[type="submit"]:not(:hover):not(:active) {
		padding: var(--gtd-btn-pad);
		font-size: .74rem;
	}
	#wpforms-submit-199 { font-size: .74rem !important; }
}

@media (prefers-reduced-motion: reduce) {
	.info-button,
	.red-info-button,
	.green-info-button,
	.geoweights-info-button,
	.wpforms-submit,
	#wpforms-submit-199,
	.info-button::after,
	.red-info-button::after,
	.green-info-button::after,
	.geoweights-info-button::after {
		transition: none !important;
	}
}

/* ═════════════════════════════════════════════════════════════
   THE WHATSAPP BUTTON — a plugin's colour, corrected here

   The floating chat button belongs to wp-whatsapp-chat, and its
   label "How can I help you?" was #ffffff on the WhatsApp brand
   green #25d366 at 21px regular. That is 1.98:1 where WCAG AA
   asks for 4.5:1 — Lighthouse scored the whole colour-contrast
   audit 0 on it, and it was the only failure in that audit.

   The plugin writes its palette as custom properties in a style
   ATTRIBUTE on div.qlwapp, so a plain rule cannot reach it: an
   author !important declaration is the one thing that outranks an
   inline one. Redefining the brand token rather than the button's
   background means the modal header, which is painted from the
   same token and would have failed the same way once opened,
   moves with it.

   #075e54 is WhatsApp's own dark green — the colour of their app
   header — so the button still reads as WhatsApp. White on it is
   7.7:1.

   This belongs in the plugin's own colour setting, and should be
   deleted the day someone sets it there (or the day the plugin
   goes, which is the plan).
   ═════════════════════════════════════════════════════════════ */

.qlwapp {
	--qlwapp-scheme-brand: #075e54 !important;
}