/**
 * Limestone theme — shared button styles
 *
 * Every button/CTA "look" from the UI Kit (Figma file tCPZSZmOvF3Je5hJAlEPwi,
 * node 30:805), transcribed 1:1 including hover states, which nothing on the
 * live site had before this file.
 *
 * Two independent axes, both applied as classes on the same element:
 *   size: .ld-button (md) | .ld-button-xl (xl)
 *   type: --primary | --secondary | --black | --white | --white-outline |
 *         --outlined-primary | --outlined-black | --link
 * Plus optional modifiers (either size):
 *   --full       stretches the button to its container's width, for CTAs
 *                that aren't Figma's own hug-content size (e.g. a card's
 *                full-width action button).
 *   --icon-only  square button, no label — pair with a child
 *                `<span class="ld-button__icon">` sized/masked by the
 *                caller's own CSS (the icon artwork is per-instance, this
 *                file only owns the square footprint + currentColor plumbing).
 *   --link-icon  pairs with --link when it carries an icon next to the
 *                label (e.g. a trailing arrow) — sets the icon+label gap.
 *
 * e.g. <a class="ld-button ld-button--primary">Book a call</a>
 *      <a class="ld-button-xl ld-button-xl--outlined-black">Read more</a>
 *      <a class="ld-button-xl ld-button-xl--black ld-button-xl--full">...</a>
 *      <button class="ld-button ld-button--outlined-black ld-button--icon-only">
 *        <span class="ld-button__icon my-component__icon--prev"></span>
 *      </button>
 *      <a class="ld-button-xl ld-button-xl--link ld-button-xl--link-icon">
 *        Learn more <span class="my-component__arrow">→</span>
 *      </a>
 *
 * Colours are hardcoded to the exact Figma values rather than borrowed from
 * tokens.css where a token's value only approximates them (e.g. --ld-soft
 * #fafafb vs this design's #fdfdfc) — tokens.css's own docblock says not to
 * force a mismatch. --ld-purple/--ld-ink/--ld-line are reused where they
 * mirror the Figma value exactly.
 *
 * Not yet wired into any template — this file only defines the classes.
 *
 * @package Limestone
 */

.ld-button,
.ld-button-xl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--ld-font-mono);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ld-button {
	min-height: 40px;
	padding: 8px 24px;
}

.ld-button-xl {
	min-height: 48px;
	padding: 12px 32px;
}

/* ── Primary — solid purple, recedes to an outline on hover ─────────────── */
.ld-button--primary,
.ld-button-xl--primary {
	background-color: var(--ld-purple);
	color: #fdfdfc;
}
.ld-button--primary:hover,
.ld-button-xl--primary:hover {
	background-color: transparent;
	border-color: var(--ld-purple);
	color: var(--ld-purple);
}

/* ── Secondary — soft grey fill, darkens on hover ────────────────────────── */
.ld-button--secondary,
.ld-button-xl--secondary {
	background-color: rgba(104, 104, 104, .12);
	color: #686868;
}
.ld-button--secondary:hover,
.ld-button-xl--secondary:hover {
	background-color: rgba(122, 121, 119, .2);
	color: var(--ld-ink);
}

/* ── Black — solid ink, recedes to an outline on hover ───────────────────── */
.ld-button--black,
.ld-button-xl--black {
	background-color: var(--ld-ink);
	color: #fdfdfc;
}
.ld-button--black:hover,
.ld-button-xl--black:hover {
	background-color: transparent;
	border-color: var(--ld-ink);
	color: var(--ld-ink);
}

/* ── White — filled button, drops to transparent (border/text stay white) on hover ── */
.ld-button--white,
.ld-button-xl--white {
	background-color: #fdfdfc;
	border-color: var(--ld-line);
	color: var(--ld-ink);
}
.ld-button--white:hover,
.ld-button-xl--white:hover {
	background-color: transparent;
	border-color: #fff;
	color: #fdfdfc;
}

/* ── White Outline — for dark sections; fills light grey on hover ───────── */
.ld-button--white-outline,
.ld-button-xl--white-outline {
	background-color: transparent;
	border-color: var(--ld-line);
	color: #fdfdfc;
}
.ld-button--white-outline:hover,
.ld-button-xl--white-outline:hover {
	background-color: #e6e9ee;
	border-color: #e6e9ee;
	color: var(--ld-ink);
}

/* ── Outlined Primary — purple outline, fills solid purple on hover ─────── */
.ld-button--outlined-primary,
.ld-button-xl--outlined-primary {
	background-color: transparent;
	border-color: var(--ld-purple);
	color: var(--ld-purple);
}
.ld-button--outlined-primary:hover,
.ld-button-xl--outlined-primary:hover {
	background-color: var(--ld-purple);
	border-color: var(--ld-purple);
	color: #fdfdfc;
}

/* ── Outlined Black — ink outline, fills solid ink on hover ──────────────── */
.ld-button--outlined-black,
.ld-button-xl--outlined-black {
	background-color: transparent;
	border-color: var(--ld-ink);
	color: var(--ld-ink);
}
.ld-button--outlined-black:hover,
.ld-button-xl--outlined-black:hover {
	background-color: var(--ld-ink);
	border-color: var(--ld-ink);
	color: #fdfdfc;
}

/* ── Link — no fill/border/padding, underlines on hover ──────────────────── */
.ld-button--link,
.ld-button-xl--link {
	background-color: transparent;
	min-height: 0;
	padding: 0;
	border-color: transparent;
	color: var(--ld-purple);
}
.ld-button--link:hover,
.ld-button-xl--link:hover,
.ld-button--link:focus-visible,
.ld-button-xl--link:focus-visible {
	background-color: transparent;
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Pair with --link on a link that carries an icon next to the label
   (e.g. a trailing arrow) — sets the gap between them, matching each
   size's own icon+label gap from the UI Kit. */
.ld-button--link-icon {
	gap: 12px;
}
.ld-button-xl--link-icon {
	gap: 16px;
}

/* ── Full — stretches the button to its container's width ───────────────── */
.ld-button--full,
.ld-button-xl--full {
	width: 100%;
}

/* ── Mobile — xl collapses to md's size, uniformly across every button ────
 * Excludes --link: it has no padding/min-height to shrink (always 0), and
 * without the exclusion this rule's later position in the cascade would
 * silently reintroduce them on mobile. */
@media (max-width: 767px) {
	.ld-button-xl:not(.ld-button-xl--link) {
		min-height: 40px;
		padding: 8px 24px;
	}
}

/* ── Icon-only — square button, no label ─────────────────────────────────
 * Same min-height as the text variant, width matched to it, padding
 * dropped so a single centred icon child sits flush. The icon itself is
 * `.ld-button__icon`: a currentColor mask box the caller sizes/points at
 * its own artwork via a second, instance-specific class (mask-image can't
 * be generic — the shape differs per use, e.g. a prev vs. next arrow). */
.ld-button--icon-only,
.ld-button-xl--icon-only {
	padding: 0;
}
.ld-button--icon-only {
	width: 40px;
}
.ld-button-xl--icon-only {
	width: 48px;
}
.ld-button__icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain;
	        mask: no-repeat center / contain;
}

/* ── Disabled — sitewide default, any size/type ───────────────────────────── */
.ld-button[disabled],
.ld-button-xl[disabled] {
	cursor: default;
}

/* ── Shared arrow icon — trailing arrow for --link buttons ───────────────
 * One icon everywhere rather than a differently-sized/shaped arrow per
 * section. Reuse this as-is; add a new icon class only for a genuinely
 * different icon need, not a per-section variant of this one. */
.ld-icon-arrow-right {
	display: inline-block;
	width: 16px;
	height: 13px;
	background-color: currentColor;
	flex-shrink: 0;
	-webkit-mask: url("../images/home/s7-sla-card-link-arrow.svg") no-repeat center / contain;
	        mask: url("../images/home/s7-sla-card-link-arrow.svg") no-repeat center / contain;
}