/**
 * Ghost Note — Button system
 *
 * One pill recipe for every button on the site: native theme buttons,
 * Gutenberg, WooCommerce and Elementor's Button widget. Sizes run xs -> xl and
 * are driven entirely by custom properties, so a size class only has to
 * re-point three variables.
 *
 * The Crates Elements plugin styles its own `.ce-btn` so it stays portable
 * across themes, but it reads the `--gn-btn-*` tokens defined here (with its
 * own fallbacks). Change a token below and plugin buttons follow.
 *
 * LOAD ORDER MATTERS. This sheet is enqueued at wp_enqueue_scripts priority 30
 * so it prints AFTER elementor-frontend.css (enqueued at 20). Elementor styles
 * `.elementor-button.elementor-size-md` etc. at specificity 0-2-0 with literal
 * values; the matching rules below are also 0-2-0 and win on source order.
 *
 * Deliberately kept at or below 0-2-0 so Elementor's per-widget generated CSS
 * (`.elementor-59 .elementor-element.elementor-element-abc .elementor-button`,
 * specificity 0-4-0) still overrides everything here. That is what keeps the
 * Style tab — typography, padding, border radius, colours — working normally.
 *
 * @package Ghost_Note
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */

:root {
	--gn-btn-radius: 999px;
	--gn-btn-weight: 600;
	--gn-btn-gap: 9px;
	--gn-btn-line: 1.25;
	--gn-btn-border: 0;

	/* Per-size scale. Padding is split so icon-only buttons can reuse it. */
	--gn-btn-fs-xs: 0.75rem;
	--gn-btn-py-xs: 8px;
	--gn-btn-px-xs: 18px;
	--gn-btn-sq-xs: 32px;

	--gn-btn-fs-sm: 0.8125rem;
	--gn-btn-py-sm: 10px;
	--gn-btn-px-sm: 22px;
	--gn-btn-sq-sm: 38px;

	--gn-btn-fs-md: 0.875rem;
	--gn-btn-py-md: 13px;
	--gn-btn-px-md: 28px;
	--gn-btn-sq-md: 46px;

	--gn-btn-fs-lg: 1rem;
	--gn-btn-py-lg: 16px;
	--gn-btn-px-lg: 36px;
	--gn-btn-sq-lg: 54px;

	--gn-btn-fs-xl: 1.125rem;
	--gn-btn-py-xl: 20px;
	--gn-btn-px-xl: 46px;
	--gn-btn-sq-xl: 62px;

	/* Active size. Medium is the site default; size classes re-point these. */
	--gn-btn-fs: var(--gn-btn-fs-md);
	--gn-btn-py: var(--gn-btn-py-md);
	--gn-btn-px: var(--gn-btn-px-md);
	--gn-btn-sq: var(--gn-btn-sq-md);

	/* Skin. Variant classes re-point these rather than restating rules. */
	--gn-btn-bg: var(--gn-accent);
	--gn-btn-bg-hover: var(--gn-accent-dark);
	--gn-btn-fg: #fff;
	--gn-btn-fg-hover: #fff;
	--gn-btn-shadow: none;
	--gn-btn-shadow-hover: 0 10px 22px -8px rgba(9, 30, 56, 0.4);
	--gn-btn-lift: -2px;
}

/* -------------------------------------------------------------------------
 * 2. Base recipe
 *
 * The selector list is explicit on purpose — a blanket `button` rule would
 * swallow the header's icon controls, the slider arrows and the nav toggle,
 * all of which are their own shapes.
 * ---------------------------------------------------------------------- */

.gn-btn,
.elementor-button,
.wp-block-button__link,
.wp-element-button,
.gn-form__submit,
#respond input#submit,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gn-btn-gap);
	padding: var(--gn-btn-py) var(--gn-btn-px);
	border: var(--gn-btn-border);
	border-radius: var(--gn-btn-radius);
	background: var(--gn-btn-bg);
	color: var(--gn-btn-fg);
	font-family: var(--gn-font);
	font-size: var(--gn-btn-fs);
	font-weight: var(--gn-btn-weight);
	line-height: var(--gn-btn-line);
	letter-spacing: var(--gn-tracking-tight);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--gn-btn-shadow);
	transition:
		background-color var(--gn-dur-micro) ease-in-out,
		color var(--gn-dur-micro) ease-in-out,
		border-color var(--gn-dur-micro) ease-in-out,
		box-shadow var(--gn-dur-micro) ease-in-out,
		transform var(--gn-dur-micro) ease-in-out;
}

/*
 * Elementor ships `.elementor a { box-shadow: none }` at specificity 0-1-1,
 * which outranks the 0-1-0 selectors in the base rule above and flattens any
 * button rendered as an anchor inside Elementor content. Doubling the class
 * lifts the declaration to 0-2-0 so the variable survives. The hover rules
 * below are already 0-2-0, which is why the bug presented as a shadow that
 * only appeared on hover. The WooCommerce selectors are 0-2-0 already.
 */
.gn-btn.gn-btn,
.elementor-button.elementor-button,
.wp-block-button__link.wp-block-button__link,
.wp-element-button.wp-element-button {
	box-shadow: var(--gn-btn-shadow);
}

.gn-btn:hover,
.gn-btn:focus-visible,
.elementor-button:hover,
.elementor-button:focus-visible,
.wp-block-button__link:hover,
.wp-element-button:hover,
#respond input#submit:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
	background: var(--gn-btn-bg-hover);
	color: var(--gn-btn-fg-hover);
	box-shadow: var(--gn-btn-shadow-hover);
	transform: translateY(var(--gn-btn-lift));
}

/* Disabled / busy states must not appear clickable. */
.gn-btn[disabled],
.elementor-button[disabled],
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce input.button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * 3. Sizes — xs to xl
 *
 * Each rule re-points the variables AND restates the concrete properties.
 * The variables alone would not be enough: Elementor writes literal
 * `font-size` / `padding` / `border-radius` on `.elementor-button.elementor-size-*`
 * at 0-2-0, which outranks the 0-1-0 base rule above no matter what the
 * variables say.
 * ---------------------------------------------------------------------- */

.gn-btn--xs,
.elementor-button.elementor-size-xs,
.woocommerce .button.gn-btn--xs {
	--gn-btn-fs: var(--gn-btn-fs-xs);
	--gn-btn-py: var(--gn-btn-py-xs);
	--gn-btn-px: var(--gn-btn-px-xs);
	--gn-btn-sq: var(--gn-btn-sq-xs);
	--gn-btn-gap: 6px;
	font-size: var(--gn-btn-fs);
	padding: var(--gn-btn-py) var(--gn-btn-px);
	border-radius: var(--gn-btn-radius);
}

.gn-btn--sm,
.elementor-button.elementor-size-sm,
.woocommerce .button.gn-btn--sm {
	--gn-btn-fs: var(--gn-btn-fs-sm);
	--gn-btn-py: var(--gn-btn-py-sm);
	--gn-btn-px: var(--gn-btn-px-sm);
	--gn-btn-sq: var(--gn-btn-sq-sm);
	--gn-btn-gap: 7px;
	font-size: var(--gn-btn-fs);
	padding: var(--gn-btn-py) var(--gn-btn-px);
	border-radius: var(--gn-btn-radius);
}

.gn-btn--md,
.elementor-button.elementor-size-md,
.woocommerce .button.gn-btn--md {
	--gn-btn-fs: var(--gn-btn-fs-md);
	--gn-btn-py: var(--gn-btn-py-md);
	--gn-btn-px: var(--gn-btn-px-md);
	--gn-btn-sq: var(--gn-btn-sq-md);
	font-size: var(--gn-btn-fs);
	padding: var(--gn-btn-py) var(--gn-btn-px);
	border-radius: var(--gn-btn-radius);
}

.gn-btn--lg,
.elementor-button.elementor-size-lg,
.woocommerce .button.gn-btn--lg {
	--gn-btn-fs: var(--gn-btn-fs-lg);
	--gn-btn-py: var(--gn-btn-py-lg);
	--gn-btn-px: var(--gn-btn-px-lg);
	--gn-btn-sq: var(--gn-btn-sq-lg);
	--gn-btn-gap: 11px;
	font-size: var(--gn-btn-fs);
	padding: var(--gn-btn-py) var(--gn-btn-px);
	border-radius: var(--gn-btn-radius);
}

.gn-btn--xl,
.elementor-button.elementor-size-xl,
.woocommerce .button.gn-btn--xl {
	--gn-btn-fs: var(--gn-btn-fs-xl);
	--gn-btn-py: var(--gn-btn-py-xl);
	--gn-btn-px: var(--gn-btn-px-xl);
	--gn-btn-sq: var(--gn-btn-sq-xl);
	--gn-btn-gap: 12px;
	font-size: var(--gn-btn-fs);
	padding: var(--gn-btn-py) var(--gn-btn-px);
	border-radius: var(--gn-btn-radius);
}

/* Big buttons need a little air on small screens or they run edge to edge. */
@media (max-width: 680px) {

	:root {
		--gn-btn-px-lg: 30px;
		--gn-btn-px-xl: 34px;
		--gn-btn-fs-xl: 1rem;
		--gn-btn-py-xl: 17px;
	}
}

/* -------------------------------------------------------------------------
 * 4. Variants
 * ---------------------------------------------------------------------- */

.gn-btn--dark {
	--gn-btn-bg: var(--gn-secondary);
	--gn-btn-bg-hover: #0d2a4d;
}

.gn-btn--light {
	--gn-btn-bg: #fff;
	--gn-btn-bg-hover: #fff;
	--gn-btn-fg: var(--gn-secondary);
	--gn-btn-fg-hover: var(--gn-accent);
	--gn-btn-shadow: 0 6px 20px rgba(9, 30, 56, 0.18);
	--gn-btn-shadow-hover: 0 10px 26px rgba(9, 30, 56, 0.24);
}

.gn-btn--outline {
	--gn-btn-bg: transparent;
	--gn-btn-bg-hover: var(--gn-accent);
	--gn-btn-fg: var(--gn-secondary);
	--gn-btn-fg-hover: #fff;
	--gn-btn-border: 1px solid var(--gn-accent);
	/* Keep the box the same height as a filled button of the same size. */
	padding: calc(var(--gn-btn-py) - 1px) calc(var(--gn-btn-px) - 1px);
}

.gn-btn--ghost {
	--gn-btn-bg: transparent;
	--gn-btn-bg-hover: rgba(184, 148, 119, 0.12);
	--gn-btn-fg: var(--gn-secondary);
	--gn-btn-fg-hover: var(--gn-accent);
	--gn-btn-shadow-hover: none;
	--gn-btn-lift: 0px;
}

.gn-btn--block {
	display: flex;
	width: 100%;
}

/* Icon-only: a perfect circle at the size's square metric. */
.gn-btn--icon {
	width: var(--gn-btn-sq);
	height: var(--gn-btn-sq);
	padding: 0;
	gap: 0;
	flex: 0 0 auto;
}

.gn-btn--icon svg {
	width: 1.1em;
	height: 1.1em;
}

.gn-btn svg,
.elementor-button svg {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * 5. WooCommerce specifics
 *
 * These replace the ad-hoc button block that used to live in layout.css.
 * The product-card footer keeps its own 40px circular controls: those are
 * matched at 0-4-1 in woocommerce.css and outrank everything here.
 * ---------------------------------------------------------------------- */

/* The primary calls to action are a step up from the default medium. */
.woocommerce div.product form.cart .button,
.woocommerce #payment #place_order,
.woocommerce .checkout-button.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	--gn-btn-fs: var(--gn-btn-fs-lg);
	--gn-btn-py: var(--gn-btn-py-lg);
	--gn-btn-px: var(--gn-btn-px-lg);
	font-size: var(--gn-btn-fs);
	padding: var(--gn-btn-py) var(--gn-btn-px);
}

/* Quantity box sits next to add-to-cart, so round it to match. */
.woocommerce .quantity .qty {
	height: 100%;
	min-height: 52px;
	padding: 0 10px;
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-btn-radius);
	background: var(--gn-bg);
	color: var(--gn-secondary);
	font-weight: 600;
	text-align: center;
}

/* Secondary controls read as outlines rather than a wall of accent. */
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"],
.woocommerce .woocommerce-message a.button,
.woocommerce .return-to-shop a.button {
	--gn-btn-bg: transparent;
	--gn-btn-bg-hover: var(--gn-accent);
	--gn-btn-fg: var(--gn-secondary);
	--gn-btn-fg-hover: #fff;
	--gn-btn-border: 1px solid var(--gn-border);
}

/*
 * TI Wishlist renders its single-product control as a bare text link, which
 * looks unfinished sitting directly under the new Add to cart pill. Its own
 * sheet reaches `div.product form.cart .tinvwl_add_to_wishlist_button`
 * (0-3-2), so this has to be at least as specific to land.
 */
.single-product div.product form.cart .tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: calc(var(--gn-btn-py-sm) - 1px) calc(var(--gn-btn-px-sm) - 1px);
	border: 1px solid var(--gn-border);
	border-radius: var(--gn-btn-radius);
	background: transparent;
	color: var(--gn-secondary);
	font-family: var(--gn-font);
	font-size: var(--gn-btn-fs-sm);
	font-weight: var(--gn-btn-weight);
	line-height: var(--gn-btn-line);
	letter-spacing: var(--gn-tracking-tight);
	text-decoration: none;
	transition:
		border-color var(--gn-dur-micro) ease-in-out,
		color var(--gn-dur-micro) ease-in-out;
}

.single-product div.product form.cart .tinvwl_add_to_wishlist_button:hover {
	border-color: var(--gn-accent);
	color: var(--gn-accent);
}

/* WooCommerce's own spinner is positioned for a square button. */
.woocommerce a.button.loading,
.woocommerce button.button.loading {
	padding-right: calc(var(--gn-btn-px) + 16px);
}

/* -------------------------------------------------------------------------
 * 6. Elementor
 * ---------------------------------------------------------------------- */

/*
 * Elementor lays its label and icon out with its own flex wrapper. Ours adds
 * a second flex context, so neutralise the inner one to avoid double gaps.
 */
.elementor-button .elementor-button-content-wrapper {
	gap: var(--gn-btn-gap);
	align-items: center;
}

.elementor-button .elementor-button-text {
	line-height: inherit;
}

/*
 * Elementor's four semantic button types set their own background at 0-2-0.
 * Route them through the variable so they pick up the hover behaviour and
 * stay overridable from the Style tab.
 */
.elementor-element.elementor-button-info .elementor-button {
	--gn-btn-bg: #5bc0de;
	--gn-btn-bg-hover: #3bafda;
}

.elementor-element.elementor-button-success .elementor-button {
	--gn-btn-bg: #5cb85c;
	--gn-btn-bg-hover: #4a9d4a;
}

.elementor-element.elementor-button-warning .elementor-button {
	--gn-btn-bg: #f0ad4e;
	--gn-btn-bg-hover: #ec971f;
}

.elementor-element.elementor-button-danger .elementor-button {
	--gn-btn-bg: #d9534f;
	--gn-btn-bg-hover: #c9302c;
}

/*
 * Inside the editor the lift on hover fights with Elementor's own drag
 * affordances and makes elements feel loose. Keep the colour change only.
 */
.elementor-editor-active .elementor-button:hover,
.elementor-editor-preview .elementor-button:hover {
	transform: none;
}

/* -------------------------------------------------------------------------
 * 7. Motion preferences
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.gn-btn,
	.elementor-button,
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		--gn-btn-lift: 0px;
		transition: none;
	}
}