/*
 * Buttons styles — brand-templated for engagement isjac.
 *
 * Source: vendor/zysys/wp-runtime/assets/css/buttons.css.template
 * Built:  wp-content/zysys-generated/isjac/css/buttons.css
 *
 * The template substitutes isjac at composer install. To change
 * a rule, edit this template and re-run `composer install` (or
 * `composer update`) in the consumer repo.
 *
 * Naming convention: <brand>-<class> per ADR-002.
 */

/*
 * Unified button system — single source of brand button truth.
 *
 * Three variants per brand-guide.html §04 (Buttons & fields):
 *   --primary    navy fill,    paper text                  (light bg)
 *   --secondary  paper fill,   navy text + navy border     (light bg)
 *   --ghost      transparent,  brand-mid text              (light bg)
 *
 * Surface auto-swap: on a dark surface (hero, invert band, site footer),
 * the same variant classes resolve to the brand-spec dark-surface treatment
 * (brand-mid fill for primary, paper-bordered ghost for secondary). This is
 * how we make "wrong button" hard to author — the variant doesn't change,
 * the surface does the right thing.
 *
 * Two ways to opt in:
 *   1. Markup-level — author writes `class="isjac-btn isjac-btn--primary"`
 *      on an <a> directly. Used by core anchors (mission CTA, etc).
 *   2. Wrapper-level — author wraps Kadence buttons in `.isjac-btn-row`.
 *      First child is primary; rest are secondary. Add `--ghost-tail` for
 *      first=primary + rest=ghost. Used by Kadence Advanced Buttons where
 *      we can't attach a className to the singlebtn anchor itself.
 *
 * Specificity note: each variant block keeps its original parallel selector
 * list so specificity stays at (0,1,0) (markup-class form) or (0,3,2)
 * (Kadence wrapper form) — both have to beat a default `a` selector and
 * Kadence's own `.kb-button` styles. Phase B/3 (ADR-013) added native CSS
 * nesting (`&:hover`, `&:active`) so the {state}×{selector-form} grid that
 * used to require 3 separate rule blocks per state collapses into ONE block
 * per variant: each `&:hover` reference expands across the full parent
 * selector list. The selector text doesn't shrink, but the duplication
 * across state blocks does.
 */

/* ==================== BASE ==================== */
.isjac-btn,
.entry-content .isjac-btn-row .kb-button,
.entry-content .isjac-btn-row > .wp-block-kadence-singlebtn > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--isjac-button-min-height);
	padding: 0 var(--isjac-pad-lg);
	border-radius: var(--isjac-radius-md);
	font-family: var(--isjac-font-family);
	font-weight: var(--isjac-font-weight-medium);
	font-size: var(--isjac-button-font-size);
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background-color var(--isjac-dur-base) var(--isjac-ease-standard),
		color            var(--isjac-dur-base) var(--isjac-ease-standard),
		border-color     var(--isjac-dur-base) var(--isjac-ease-standard),
		box-shadow       var(--isjac-dur-base) var(--isjac-ease-standard),
		transform        var(--isjac-dur-fast) var(--isjac-ease-standard);

	&:focus { outline: none; }
	&:focus-visible {
		outline: none;
		box-shadow: var(--isjac-focus-ring);
	}
}

/* ==================== LAYOUT ROW ==================== */
.entry-content .wp-block-kadence-advancedbtn.isjac-btn-row,
.isjac-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--isjac-pad-md);
	margin: var(--isjac-pad-md) 0 0;
	justify-content: flex-start;

	&[data-align="center"] {
		justify-content: center;
	}
}

/* ==================== LIGHT SURFACE — default ==================== *
 * Applies anywhere unless a dark-surface ancestor overrides below.
 *
 * Reinforce-don't-flip hover: lift the deep navy toward paper by the brand-
 * wide --state-lift knob. Same direction footer primary uses, so primary
 * buttons read identically across light and dark surfaces. Going to ink
 * darkens too far and reads as a shadow; flipping to paper-on-deep reads
 * as "unselected." Derived inline via color-mix() against --state-lift —
 * tuning that one token retunes every variant + surface (ADR-013 B/2).
 *
 * :active = pressed-down feel per brand-guide §11 (`.btn:active { transform:
 * translateY(1px) }`). Locks the background/color too so Chrome on Mac can't
 * flash native button slate in the gap before :hover repaints.
 */
.isjac-btn--primary,
.entry-content .isjac-btn-row .kb-button:first-child,
.entry-content .isjac-btn-row > .wp-block-kadence-singlebtn:first-child > a {
	background: var(--isjac-color-brand-deep);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-brand-deep);

	&:hover,
	&:focus-visible {
		background: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
		border-color: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
		color: var(--isjac-color-paper);
	}

	&:active {
		background: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
		border-color: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
		color: var(--isjac-color-paper);
		transform: translateY(1px);
	}
}

/* Secondary = transparent interior with brand-deep border + label.
 * Sits cleanly on any surface (paper, brand-wash, photo) without painting
 * its own background block. Hover gets a subtle wash to confirm interaction —
 * the brand-wash semantic surface, already a color token, no derivation. */
.isjac-btn--secondary,
.entry-content .isjac-btn-row:not(.isjac-btn-row--ghost-tail) .kb-button:not(:first-child),
.entry-content .isjac-btn-row:not(.isjac-btn-row--ghost-tail) > .wp-block-kadence-singlebtn:not(:first-child) > a {
	background: transparent;
	color: var(--isjac-color-brand-deep);
	border-color: var(--isjac-color-brand-deep);

	&:hover,
	&:focus-visible {
		background: var(--isjac-color-brand-wash);
		color: var(--isjac-color-brand-deep);
		border-color: var(--isjac-color-brand-deep);
	}
}

/* Ghost is the brand-guide §A "link" treatment, not a button. Drops every
 * piece of button chrome (padding, min-height, border, uppercase, letter-
 * spacing) so it reads as inline brand-mid text with an arrow — matches
 * .isjac-link exactly. Same selector lives on Kadence Advanced Buttons
 * tail-ghost rows so block-authored CTAs match. */
.isjac-btn.isjac-btn--ghost,
.entry-content .isjac-btn-row.isjac-btn-row--ghost-tail .kb-button:not(:first-child) {
	display: inline;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--isjac-color-brand-mid);
	font-family: var(--isjac-font-family);
	font-size: inherit;
	font-weight: var(--isjac-font-weight-medium);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	transition: color 150ms ease-out, text-decoration-color 150ms ease-out;

	&:hover,
	&:focus-visible {
		color: var(--isjac-color-brand-deep);
		background: transparent;
		text-decoration: underline;
		text-underline-offset: 3px;
		transform: none;
		box-shadow: none;
	}
}

/* Hero primary = on-dark-primary per brand-guide §11. Paper-knockout on the
 * ink/brand-deep overlay — the CTA is what pops off the dark surface, not
 * the surface itself. Hover lifts to brand-wash (paper warmed) so the button
 * stays visually anchored without inverting. */
:where(.is-style-isjac-hero) :is(.isjac-btn--primary, .entry-content .isjac-btn-row .kb-button:first-child, .entry-content .isjac-btn-row > .wp-block-kadence-singlebtn:first-child > a) {
	background: var(--isjac-color-paper);
	color: var(--isjac-color-brand-deep);
	border-color: var(--isjac-color-paper);

	&:hover,
	&:focus-visible {
		background: var(--isjac-color-brand-wash);
		color: var(--isjac-color-brand-deep);
		border-color: var(--isjac-color-brand-wash);
	}
}

/* ==================== DARK SURFACE — primary = on-dark-primary ==================== *
 * Bottom band + footer = ink/brand-deep surfaces; primary CTA per brand-guide
 * §11 is paper fill + brand-deep label (paper-knockout), matching the hero
 * variant above. Hover lifts toward brand-wash (paper warmed), keeping the
 * button anchored without inverting tone. */
:where(.isjac-band--invert, .site-footer) :is(.isjac-btn--primary, .entry-content .isjac-btn-row .kb-button:first-child, .entry-content .isjac-btn-row > .wp-block-kadence-singlebtn:first-child > a) {
	background: var(--isjac-color-paper);
	color: var(--isjac-color-brand-deep);
	border-color: var(--isjac-color-paper);

	&:hover,
	&:focus-visible {
		background: var(--isjac-color-brand-wash);
		color: var(--isjac-color-brand-deep);
		border-color: var(--isjac-color-brand-wash);
	}
}

/* ==================== DARK SURFACE — secondary becomes ghost-on-dark ==================== *
 * Hero + invert band + footer: a paper-fill secondary button would dominate
 * over the primary on dark surfaces, so secondary becomes a paper-bordered
 * outlined button (which the brand guide calls Ghost-on-dark). Primary stays
 * brand-deep on the band/footer (per above) so it pairs correctly with this.
 */
:where(.is-style-isjac-hero, .isjac-band--invert, .site-footer) :is(.isjac-btn--secondary, .entry-content .isjac-btn-row:not(.isjac-btn-row--ghost-tail) .kb-button:not(:first-child), .entry-content .isjac-btn-row:not(.isjac-btn-row--ghost-tail) > .wp-block-kadence-singlebtn:not(:first-child) > a) {
	background: transparent;
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-paper);

	&:hover,
	&:focus-visible {
		background: color-mix(in oklch, transparent, var(--isjac-color-paper) var(--isjac-state-lift));
		color: var(--isjac-color-paper);
		border-color: var(--isjac-color-paper);
	}
}

:where(.is-style-isjac-hero, .isjac-band--invert, .site-footer) .isjac-btn--ghost {
	color: var(--isjac-color-paper);
	background: transparent;
	border-color: transparent;
	text-decoration: underline;
	text-decoration-color: rgba(255, 250, 252, 0.5);
	text-underline-offset: 0.25em;

	&:hover,
	&:focus-visible {
		color: var(--isjac-color-paper);
		text-decoration-color: var(--isjac-color-paper);
		background: transparent;
	}
}

/* ==================== Inline link ====================
 * Brand guide §Direction A: brand-mid (#5384AA) by default, brand-deep
 * (#15526F) underlined on hover. Used where a CTA shouldn't read as a
 * button — e.g. soft "available with paid membership" messaging that
 * sits inside a content band, not a primary action row. Inherits font
 * sizing from context so it can sit inline in body copy. */
.isjac-link {
	color: var(--isjac-color-brand-mid);
	font-weight: var(--isjac-font-weight-medium);
	text-decoration: none;
	transition: color 150ms ease-out, text-decoration-color 150ms ease-out;

	&:hover,
	&:focus-visible {
		color: var(--isjac-color-brand-deep);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}
/* Trailing arrow removed by the brand-conform pass. Brand guide §11 / §13
 * shows ghost links and prose links bare, no decorative glyph. If the arrow
 * is intentionally part of a ISJAC link treatment, add an `--isjac-link-
 * trailing-glyph` token to plugin/tokens.css and reinstate via that token. */

/* ==================== Mobile ==================== */
@media (max-width: 640px) {
	.entry-content .wp-block-kadence-advancedbtn.isjac-btn-row,
	.isjac-btn-row {
		flex-direction: column;
		align-items: stretch;
	}
	.entry-content .isjac-btn-row .kb-button,
	.isjac-btn-row .isjac-btn { width: 100%; }
}