/* NKT buttons — the four calls to action the homepage settled on, as one
   component. Used by NKT Buttons and NKT CTA; see includes/buttons.php.

   Every rule doubles the block class (.nkt-btn.nkt-btn, or .nkt-btn.nkt-btn--x)
   to reach 0,2,0. The sites' customizer paints `.site-content a { color: … }` at
   0,1,1, which beats a single class — the usual house pattern of scoping to a
   parent (.nkt-x .nkt-x__y) has nothing to scope to here, because .nkt-btn IS
   the element. The one-class .nkt-btn rule below carries only custom props, so
   a module's per-node `.fl-node-ID .nkt-btn` (also 0,2,0) still overrides them.

   The --nkt-band-* fallbacks are published by a Media Band row (see
   assets/css/nkt-band.css) and are absent outside one, so the brand values below
   stand on an ordinary page.

   CONTRAST: the fills keep the brand orange #f5761a even though white-on-orange
   is 2.81:1, because that is the site's primary CTA and a darker module button
   would clash with the hand-coded ones beside it. Every TEXT role instead uses
   #b95200 (4.91:1) — the a11y orange nkt-podcast-landing/landing.css already
   defines. See includes/buttons.php. */

.nkt-btn {
	--nkt-btn-fill: var(--nkt-band-accent, #f5761a);
	--nkt-btn-fill-hover: #ed6e00;
	--nkt-btn-on-fill: #fff;
	--nkt-btn-line: var(--nkt-band-accent, #f5761a);
	--nkt-btn-ink: #b95200;
	--nkt-btn-ink-mute: var(--nkt-band-ink-soft, #4b5563);
	--nkt-btn-ink-mute-hover: #1f2937;
	--nkt-btn-line-mute: #d1d5db;
	--nkt-btn-line-mute-hover: #9ca3af;
	--nkt-btn-ring: var(--nkt-band-accent, #f5761a);
	--nkt-btn-radius: 8px;
	--nkt-btn-pad-x: 1.25rem;
	--nkt-btn-pad-y: 0.625rem;
	--nkt-btn-text: 0.875rem;
	--nkt-btn-gap: 0.5rem;
	--nkt-btn-gap-hover: 0.75rem;
	--nkt-btn-dur: 0.3s;
}

/* ---- Base, which is also the primary variant ----------------------------- */

.nkt-btn.nkt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nkt-btn-gap);
	padding: var(--nkt-btn-pad-y) var(--nkt-btn-pad-x);
	border: 2px solid transparent;
	border-radius: var(--nkt-btn-radius);
	background: var(--nkt-btn-fill);
	color: var(--nkt-btn-on-fill);
	font-family: inherit;
	font-size: var(--nkt-btn-text);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 6px -1px rgba(245, 118, 26, 0.2), 0 2px 4px -2px rgba(245, 118, 26, 0.2);
	transition: background-color var(--nkt-btn-dur) ease, border-color var(--nkt-btn-dur) ease,
		color var(--nkt-btn-dur) ease, gap var(--nkt-btn-dur) ease;
}

.nkt-btn.nkt-btn:hover,
.nkt-btn.nkt-btn:focus {
	background: var(--nkt-btn-fill-hover);
	color: var(--nkt-btn-on-fill);
	text-decoration: none;
}

/* A span is what a button with no URL renders as — inert, and it must not
   pretend otherwise by lighting up under the cursor. */
span.nkt-btn.nkt-btn {
	cursor: default;
}

/* ---- Focus ---------------------------------------------------------------
   None of the hand-coded homepage CTAs has a focus ring at all — there is not
   one `focus` rule across nkt-home/sections or its Tailwind input. Same ring as
   NKT Accordion's summary, so the two read as one family. */

.nkt-btn.nkt-btn:focus-visible {
	outline: 3px solid var(--nkt-btn-ring);
	outline-offset: 2px;
}

/* Clicking focuses the anchor in Safari; without this the ring lingers after a
   mouse click on browsers that do not scope :focus to keyboard entry. */
.nkt-btn.nkt-btn:focus:not(:focus-visible) {
	outline: none;
}

/* ---- Icon ----------------------------------------------------------------- */

.nkt-btn .nkt-btn__icon {
	flex: none;
	display: inline-flex;
	transition: transform var(--nkt-btn-dur) ease;
}

.nkt-btn .nkt-btn__icon svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

/* ---- Outline — brand ------------------------------------------------------
   Hover inverts to the filled look, which is the homepage's
   `hover:bg-brand hover:text-white` (about-kadampa.php:106). */

.nkt-btn.nkt-btn--outline {
	background: transparent;
	border-color: var(--nkt-btn-line);
	color: var(--nkt-btn-ink);
	box-shadow: none;
}

.nkt-btn.nkt-btn--outline:hover,
.nkt-btn.nkt-btn--outline:focus {
	background: var(--nkt-btn-fill);
	border-color: var(--nkt-btn-fill);
	color: var(--nkt-btn-on-fill);
}

/* ---- Outline — neutral ---------------------------------------------------- */

.nkt-btn.nkt-btn--neutral {
	background: transparent;
	border-color: var(--nkt-btn-line-mute);
	color: var(--nkt-btn-ink-mute);
	box-shadow: none;
}

.nkt-btn.nkt-btn--neutral:hover,
.nkt-btn.nkt-btn--neutral:focus {
	background: transparent;
	border-color: var(--nkt-btn-line-mute-hover);
	color: var(--nkt-btn-ink-mute-hover);
}

/* ---- Text link with arrow -------------------------------------------------
   The signature affordance, and a two-part move: the link widens its own flex
   gap while the arrow ALSO translates, so the mark travels 0.5rem and the label
   does not shift at all. Lifted from nkt-home/sections/founder.php:84-89
   (`gap-2 hover:gap-3 transition-[gap]` + `group-hover:translate-x-1`), which is
   the same thing NKT Callout's Read more toggle already does. */

.nkt-btn.nkt-btn--link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--nkt-btn-ink);
	box-shadow: none;
}

.nkt-btn.nkt-btn--link:hover,
.nkt-btn.nkt-btn--link:focus {
	gap: var(--nkt-btn-gap-hover);
	background: none;
	color: var(--nkt-btn-ink);
}

.nkt-btn.nkt-btn--link:hover .nkt-btn__icon,
.nkt-btn.nkt-btn--link:focus .nkt-btn__icon {
	transform: translateX(0.25rem);
}

/* The ring hugs the text rather than sitting 2px off nothing. */
.nkt-btn.nkt-btn--link:focus-visible {
	outline-offset: 4px;
	border-radius: 2px;
}

/* ---- Sizes ----------------------------------------------------------------
   Medium is the default and carries no class. ~40px tall, which is what the
   homepage's px-5 py-2.5 comes to — deliberately not padded out to 44px, or
   module buttons would stand taller than the hand-coded ones beside them.
   40px clears the WCAG 2.2 AA target minimum (24px) comfortably. */

.nkt-btn.nkt-btn--sm {
	--nkt-btn-pad-x: 1rem;
	--nkt-btn-pad-y: 0.5rem;
	--nkt-btn-text: 0.75rem;
}

.nkt-btn.nkt-btn--lg {
	--nkt-btn-pad-x: 1.75rem;
	--nkt-btn-pad-y: 0.75rem;
}

/* The text link has no padding to shrink, so size has to reach its type. */
.nkt-btn.nkt-btn--lg.nkt-btn--link {
	--nkt-btn-text: 1rem;
}

/* ---- Shape and width ------------------------------------------------------ */

.nkt-btn.nkt-btn--pill {
	--nkt-btn-radius: 9999px;
}

.nkt-btn.nkt-btn--block {
	display: flex;
	width: 100%;
	flex: 1 0 100%;
}

/* ---- On a dark row --------------------------------------------------------
   Only the tones move; the geometry is untouched. The filled primary keeps its
   brand orange, which reads well on ink — it is the outline and text roles that
   go unreadable, since their baked colours assume a light page. */

.nkt-btn.nkt-btn--on-dark {
	--nkt-btn-ink: #fff;
	--nkt-btn-ink-mute: rgba(255, 255, 255, 0.8);
	--nkt-btn-ink-mute-hover: #fff;
	--nkt-btn-line-mute: rgba(255, 255, 255, 0.4);
	--nkt-btn-line-mute-hover: rgba(255, 255, 255, 0.7);
	--nkt-btn-ring: #fff;
}

/* ---- On the brand surface -------------------------------------------------
   A brand-orange button on a brand-orange band is invisible, so the fill and
   the ink swap: white fills carrying the a11y orange as their label. */

.nkt-btn.nkt-btn--on-brand {
	--nkt-btn-fill: #fff;
	--nkt-btn-fill-hover: #fff4ed;
	--nkt-btn-on-fill: #b95200;
	--nkt-btn-line: rgba(255, 255, 255, 0.7);
	--nkt-btn-ink: #fff;
	--nkt-btn-ink-mute: rgba(255, 255, 255, 0.85);
	--nkt-btn-ink-mute-hover: #fff;
	--nkt-btn-line-mute: rgba(255, 255, 255, 0.45);
	--nkt-btn-line-mute-hover: #fff;
	--nkt-btn-ring: #fff;
	box-shadow: none;
}

/* ---- The group ------------------------------------------------------------ */

.nkt-buttons {
	/* One value, two axes: it justifies the row, and it is what the stacked
	   phone layout cross-aligns on — so an alignment is added in one place. */
	--nkt-btn-align: flex-start;
	--nkt-btn-row-gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nkt-btn-row-gap);
	justify-content: var(--nkt-btn-align);
}

.nkt-buttons.nkt-buttons--align-center {
	--nkt-btn-align: center;
}

.nkt-buttons.nkt-buttons--align-right {
	--nkt-btn-align: flex-end;
}

/* Two buttons side by side on a phone are close enough to mis-tap. Stacking
   keeps each one's natural width — a deliberately full-width button still
   fills the line, but a text link does not stretch into one. */
@media (max-width: 480px) {
	.nkt-buttons.nkt-buttons--stack {
		flex-direction: column;
		align-items: var(--nkt-btn-align);
	}
}

/* ---- Editor empty state ---------------------------------------------------
   Printed by includes/frontend.php only while the builder is open, and only
   when no row has a label yet. Same dashed placeholder the other modules use;
   it lives here because this module has no stylesheet of its own. */

.nkt-buttons.nkt-buttons--empty {
	display: block;
	padding: 1.5rem;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	color: #6b7280;
	font-size: 0.875rem;
	text-align: center;
}

/* ---- Reduced motion -------------------------------------------------------
   The gap widening and the arrow's travel are the two moving parts; the colour
   change is not motion and stays. */
@media (prefers-reduced-motion: reduce) {
	.nkt-btn.nkt-btn,
	.nkt-btn .nkt-btn__icon {
		transition: none;
	}

	.nkt-btn.nkt-btn--link:hover,
	.nkt-btn.nkt-btn--link:focus {
		gap: var(--nkt-btn-gap);
	}

	.nkt-btn.nkt-btn--link:hover .nkt-btn__icon,
	.nkt-btn.nkt-btn--link:focus .nkt-btn__icon {
		transform: none;
	}
}