/*
 * 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: Kadence ships `.entry-content .wp-block-kadence-advancedbtn
 * .kb-button` at (0,3,2). Our `.entry-content .isjac-btn-row .kb-button` is
 * (0,3,2) too, but we add the `.isjac-btn-row` MARKER class to the wrapper —
 * Kadence reaches the same nodes via the block class. Adding `.isjac-btn`
 * as a co-class on .kb-button (via :where()) keeps specificity equal but
 * lets us win source-order.
 */

/* ==================== 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-font-size-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 150ms ease-out, color 150ms ease-out,
		border-color 150ms ease-out, transform 150ms ease-out,
		box-shadow 150ms ease-out;
}

.isjac-btn:focus,
.entry-content .isjac-btn-row .kb-button:focus { outline: none; }
.isjac-btn:focus-visible,
.entry-content .isjac-btn-row .kb-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==================== 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;
}
.isjac-btn-row[data-align="center"],
.entry-content .wp-block-kadence-advancedbtn.isjac-btn-row[data-align="center"] {
	justify-content: center;
}

/* ==================== LIGHT SURFACE — default ==================== *
 * Applies anywhere unless a dark-surface ancestor overrides below.
 */
.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);
}
/* Reinforce-don't-flip hover: lift the deep navy 20% toward paper. Same
 * mix the 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." */
.isjac-btn--primary:hover,
.isjac-btn--primary:focus-visible,
.entry-content .isjac-btn-row .kb-button:first-child:hover,
.entry-content .isjac-btn-row .kb-button:first-child:focus-visible {
	background: var(--isjac-button-primary-hover);
	border-color: var(--isjac-button-primary-hover);
	color: var(--isjac-color-paper);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(2, 7, 38, 0.18);
}

/* :active fires on mouse-down before :hover/:focus-visible repaint. Without
 * an explicit rule, some browsers (notably Chrome on Mac) briefly fall
 * back to the system's native button text color (a dark slate) before the
 * hover state catches up — readable as a flash of dark text on the dark
 * brand-deep background. Lock the active state to the same paper text +
 * brand-deep bg as the resting/hover states to kill the flash. */
.isjac-btn--primary:active,
.entry-content .isjac-btn-row .kb-button:first-child:active {
	background: var(--isjac-button-primary-hover);
	border-color: var(--isjac-button-primary-hover);
	color: var(--isjac-color-paper);
	transform: translateY(0);
}

/* 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. */
.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);
}
.isjac-btn--secondary:hover,
.isjac-btn--secondary:focus-visible,
.entry-content .isjac-btn-row:not(.isjac-btn-row--ghost-tail) .kb-button:not(:first-child):hover,
.entry-content .isjac-btn-row:not(.isjac-btn-row--ghost-tail) .kb-button:not(:first-child):focus-visible {
	background: var(--isjac-button-secondary-hover);
	color: var(--isjac-color-brand-deep);
	border-color: var(--isjac-color-brand-deep);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(2, 7, 38, 0.12);
}

/* 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;
}
.isjac-btn.isjac-btn--ghost:hover,
.isjac-btn.isjac-btn--ghost:focus-visible,
.entry-content .isjac-btn-row.isjac-btn-row--ghost-tail .kb-button:not(:first-child):hover {
	color: var(--isjac-color-brand-deep);
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
	transform: none;
	box-shadow: none;
}

/* Hero primary stays canonical brand-deep (matches primary buttons everywhere
 * else). Hero overlay is ink-deep gradient, so brand-deep reads cleanly.
 * Hover lightens brand-deep → brand-mid (lift, not invert) — same direction
 * as light-surface primary which goes deep → ink (the lift is "deeper toward
 * the dominant surface tone"; on a dark surface, lighter IS the lift). */
: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-brand-deep);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-brand-deep);
}
:where(.is-style-isjac-hero) :is(.isjac-btn--primary:hover, .entry-content .isjac-btn-row .kb-button:first-child:hover, .entry-content .isjac-btn-row .kb-button:first-child:focus-visible) {
	background: var(--isjac-button-primary-hover);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-button-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(2, 7, 38, 0.35);
}

/* ==================== DARK SURFACE — primary hover lifts (no ink) ==================== *
 * Bottom band + footer: primary base stays brand-deep, but hover goes to
 * brand-mid (lighter) instead of ink (darker). On a dark surface "lift" = lighter.
 * Inheriting the light-surface hover (which goes to ink) reads as "hovering
 * to black" against a navy band. */
:where(.isjac-band--invert, .site-footer) :is(.isjac-btn--primary:hover, .entry-content .isjac-btn-row .kb-button:first-child:hover, .entry-content .isjac-btn-row .kb-button:first-child:focus-visible) {
	background: var(--isjac-button-primary-hover);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-button-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(2, 7, 38, 0.35);
}

/* ==================== 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);
}
:where(.is-style-isjac-hero, .isjac-band--invert, .site-footer) :is(.isjac-btn--secondary:hover, .entry-content .isjac-btn-row:not(.isjac-btn-row--ghost-tail) .kb-button:not(:first-child):hover, .entry-content .isjac-btn-row:not(.isjac-btn-row--ghost-tail) .kb-button:not(:first-child):focus-visible) {
	background: var(--isjac-button-on-dark-hover);
	color: var(--isjac-color-paper);
	border-color: var(--isjac-color-paper);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(2, 7, 38, 0.35);
}

: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;
}
:where(.is-style-isjac-hero, .isjac-band--invert, .site-footer) .isjac-btn--ghost:hover,
:where(.is-style-isjac-hero, .isjac-band--invert, .site-footer) .isjac-btn--ghost: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;
}
.isjac-link:hover,
.isjac-link:focus-visible {
	color: var(--isjac-color-brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Trailing arrow + 3px hover slide. Lives in CSS so authors don't have to
 * remember to type it (and so it renders identically across markup paths
 * — homepage post content, PHP-rendered panels, block output). */
.isjac-link::after,
.isjac-btn.isjac-btn--ghost::after {
	content: " \2192";
	display: inline-block;
	transition: transform 150ms ease-out;
}
.isjac-link:hover::after,
.isjac-link:focus-visible::after,
.isjac-btn.isjac-btn--ghost:hover::after,
.isjac-btn.isjac-btn--ghost:focus-visible::after {
	transform: translateX(3px);
}

/* ==================== 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%; }
}