/*
 * Generation 22 — button system
 *
 * SITEWIDE section (unchanged): the original generic 3-pill utility classes
 * (.g22-btn / .g22-btn--accent / .g22-btn--ghost / .g22-form button / etc.)
 * that inner pages (pages/*.css, inner-henna.css, inner-studio.css) still
 * depend on. Left as-is — out of scope for the home-page button audit.
 *
 * HOME section (new): the HOME page's real BEM selectors are pulled out of
 * the generic groups above and consolidated into exactly THREE purple-based
 * variants with one unified motion system. This is the single source of
 * truth for their appearance + motion; home-studio.css / home-henna.css /
 * nav-taste.css keep only layout (grid/flex placement, margins) for them.
 *
 *   1. PRIMARY   — purple fill, white text.
 *      .g22-header__cta, .g22-clean__btn,
 *      .g22-cta__submit--yell, .g22-footer__cta
 *   2. SECONDARY — transparent fill, 1.5px purple border + purple text.
 *      .g22-header__consult, .g22-about__cta, .g22-learn__btn,
 *      .g22-news__all, .g22-cta__submit--ink,
 *      .g22-footer__consult, .g22-footer__map (dark-bg contrast flip)
 *   3. LINK      — no box/border/bg, purple text, underline grows on hover.
 *      .g22-why__head-link, .g22-google-reviews__all-link, .g22-hero__cta--link
 *
 * Yellow is not a button fill on the home page (eyebrow dash, badges,
 * review stars, label square only).
 * Brand: #3F2780 · #FFD141 · #1A1A1A
 */

:root {
	--g22-btn-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--g22-btn-h: 48px;
	--g22-btn-pad-x: 24px;
	--g22-btn-font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   SITEWIDE — original generic system (inner pages depend on this; do not
   change values here, only the selector lists have been trimmed of the
   home-only classes that now live in the HOME section below).
   ========================================================================== */

.g22-btn,
.g22-button,
.g22-btn--primary,
.g22-btn--accent,
.g22-btn--ghost,
.g22-btn--outline,
.g22-clean__btn--light,
.g22-cta__btn,
.g22-cta__btn--primary,
.g22-cta__btn--secondary,
.g22-form button,
.g22-form [type="submit"],
.wp-element-button,
.g22h-button,
.g22-about-signup__form-toggle > summary {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--g22-btn-h);
	padding: 0 var(--g22-btn-pad-x);
	border-style: solid;
	border-width: 2px;
	border-radius: var(--g22-btn-radius) !important;
	font-family: var(--g22-btn-font);
	font-size: 0.94rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition:
		background-color 160ms var(--g22-btn-ease),
		border-color 160ms var(--g22-btn-ease),
		color 160ms var(--g22-btn-ease),
		box-shadow 160ms var(--g22-btn-ease),
		transform 160ms var(--g22-btn-ease);
}

.g22-btn:active,
.g22-button:active,
.g22-btn--primary:active,
.g22-btn--accent:active,
.g22-btn--ghost:active,
.g22-btn--outline:active,
.g22-clean__btn--light:active,
.g22-cta__btn:active,
.g22-cta__btn--primary:active,
.g22-cta__btn--secondary:active,
.g22-form button:active,
.g22-form [type="submit"]:active,
.wp-element-button:active,
.g22h-button:active,
.g22-about-signup__form-toggle > summary:active {
	transform: translateY(0) scale(0.98);
}

/* --------------------------------------------------------------------------
   1. PRIMARY — purple fill (generic, sitewide)
   -------------------------------------------------------------------------- */

.g22-btn,
.g22-button,
.g22-btn--primary,
.g22-cta__btn,
.g22-cta__btn--primary,
.g22-form button,
.g22-form [type="submit"],
.wp-element-button,
.g22h-button,
.g22-about-signup__form-toggle > summary {
	border-color: var(--g22-btn-purple);
	background: var(--g22-btn-purple);
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(67, 41, 128, 0.2);
	list-style: none;
}

.g22-about-signup__form-toggle > summary::-webkit-details-marker {
	display: none;
}

.g22-btn:hover,
.g22-button:hover,
.g22-btn--primary:hover,
.g22-cta__btn:hover,
.g22-cta__btn--primary:hover,
.g22-form button:hover,
.g22-form [type="submit"]:hover,
.wp-element-button:hover,
.g22h-button:hover,
.g22-about-signup__form-toggle > summary:hover {
	border-color: var(--g22-btn-purple-hot);
	background: var(--g22-btn-purple-hot);
	color: #fff !important;
	box-shadow: 0 14px 28px rgba(67, 41, 128, 0.28);
	transform: translateY(-1px);
}

.g22-btn:focus-visible,
.g22-btn--primary:focus-visible,
.g22-cta__btn:focus-visible,
.g22-cta__btn--primary:focus-visible,
.g22-form button:focus-visible,
.wp-element-button:focus-visible,
.g22-about-signup__form-toggle > summary:focus-visible {
	outline: 3px solid var(--g22-btn-yellow);
	outline-offset: 3px;
}

/* Primary on dark purple surfaces (footer / trial panel): white fill. */
.g22-cta__panel--trial .g22-cta__btn,
.g22-cta__panel--trial .g22-cta__btn--primary,
.g22-about-signup__form-toggle[open] > summary {
	border-color: #fff;
	background: #fff;
	color: var(--g22-btn-purple) !important;
	box-shadow: var(--g22-shadow-sm, 0 8px 18px rgba(26, 26, 26, 0.1));
}

.g22-cta__panel--trial .g22-cta__btn:hover,
.g22-cta__panel--trial .g22-cta__btn--primary:hover,
.g22-about-signup__form-toggle[open] > summary:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.92);
	color: var(--g22-btn-purple) !important;
}

/* --------------------------------------------------------------------------
   2. ACCENT — yellow fill (opt-in only via --accent / --light)
   -------------------------------------------------------------------------- */

.g22-btn--accent,
.g22-clean__btn--light {
	border-color: var(--g22-btn-yellow);
	background: var(--g22-btn-yellow);
	color: var(--g22-btn-ink) !important;
	box-shadow: 0 10px 24px rgba(255, 209, 65, 0.28);
	list-style: none;
}

.g22-btn--accent::-webkit-details-marker,
.g22-clean__btn--light::-webkit-details-marker {
	display: none;
}

.g22-btn--accent:hover,
.g22-btn--accent:focus-visible,
.g22-clean__btn--light:hover,
.g22-clean__btn--light:focus-visible {
	border-color: var(--g22-btn-yellow-hot);
	background: var(--g22-btn-yellow-hot);
	color: var(--g22-btn-ink) !important;
	box-shadow: 0 14px 28px rgba(255, 209, 65, 0.36);
	transform: translateY(-1px);
}

.g22-btn--accent:focus-visible,
.g22-clean__btn--light:focus-visible {
	outline: 3px solid var(--g22-btn-purple);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. GHOST — purple outline (generic, sitewide)
   -------------------------------------------------------------------------- */

.g22-btn--ghost,
.g22-btn--outline,
.g22-btn.g22-btn--ghost,
.g22-btn.g22-btn--outline,
.g22-cta__btn--secondary,
.g22-about-hero__secondary .wp-block-button__link {
	border-color: var(--g22-btn-purple);
	background: transparent;
	color: var(--g22-btn-purple) !important;
	box-shadow: none;
}

.g22-btn--ghost:hover,
.g22-btn--ghost:focus-visible,
.g22-btn--outline:hover,
.g22-btn--outline:focus-visible,
.g22-cta__btn--secondary:hover,
.g22-cta__btn--secondary:focus-visible,
.g22-about-hero__secondary .wp-block-button__link:hover,
.g22-about-hero__secondary .wp-block-button__link:focus-visible {
	border-color: var(--g22-btn-purple);
	background: var(--g22-btn-purple);
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(67, 41, 128, 0.2);
	transform: translateY(-1px);
}

.g22-btn--ghost:focus-visible,
.g22-btn--outline:focus-visible,
.g22-cta__btn--secondary:focus-visible,
.g22-about-hero__secondary .wp-block-button__link:focus-visible {
	outline: 3px solid var(--g22-btn-yellow);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Text-link CTAs that still use button classes — keep pill chrome off
   only when explicitly marked as link (still round chip if needed)
   -------------------------------------------------------------------------- */

.g22-btn--link {
	min-height: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--g22-btn-purple) !important;
	font-size: 0.94rem;
	font-weight: 700;
}

.g22-btn--link:hover,
.g22-btn--link:focus-visible {
	background: transparent !important;
	color: var(--g22-btn-ink) !important;
	box-shadow: none !important;
	transform: none;
}

/* --------------------------------------------------------------------------
   Force round corners on known inner-page one-offs that used square radii
   -------------------------------------------------------------------------- */

.g22-page-content a.g22-clean__btn,
.g22-page-content .g22-form button,
body.page-id-20 .g22-form button,
body.page-eksternat .g22-form button,
.g22-editorial-link--primary {
	border-radius: var(--g22-btn-radius) !important;
}

@media (pointer: coarse) {
	.g22-btn,
	.g22-button,
	.g22-btn--primary,
	.g22-btn--accent,
	.g22-form button {
		min-height: 48px;
	}
}

/* ==========================================================================
   HOME — 3 purple variants, one unified motion (single source of truth)
   ========================================================================== */

/* --- Shared box — PRIMARY + SECONDARY only (LINK has no box, see below) --- */

.g22-header__cta,
.g22-hero__cta:not(.g22-hero__cta--link),
.g22-clean__btn,
.g22-cta__submit,
.g22-footer__cta,
.g22-header__consult,
.g22-about__cta,
.g22-learn__btn,
.g22-news__all,
.g22-footer__consult,
.g22-footer__map,
.g22-about-team__link a,
.g22-about-team__reviews-link a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--g22-space-2);
	min-height: var(--g22-space-7);
	padding: 0 var(--g22-space-5);
	border-style: solid;
	border-width: 1.5px;
	border-radius: var(--g22-r-pill) !important;
	font-family: var(--g22-font-body, "Manrope", sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition:
		transform var(--g22-dur-quick) var(--g22-ease-out),
		background-color var(--g22-dur-quick) var(--g22-ease-out),
		border-color var(--g22-dur-quick) var(--g22-ease-out),
		box-shadow var(--g22-dur-quick) var(--g22-ease-out),
		color var(--g22-dur-quick) var(--g22-ease-out);
}

/* Press feedback — identical for primary + secondary. */
.g22-header__cta:active,
.g22-hero__cta:not(.g22-hero__cta--link):active,
.g22-clean__btn:active,
.g22-cta__submit:active,
.g22-footer__cta:active,
.g22-header__consult:active,
.g22-about__cta:active,
.g22-learn__btn:active,
.g22-news__all:active,
.g22-footer__consult:active,
.g22-footer__map:active,
.g22-about-team__link a:active,
.g22-about-team__reviews-link a:active {
	transform: translateY(0) scale(0.98);
}

/* --- 1. PRIMARY — purple fill, white text --- */

body .g22-header__cta,
body.home .g22-header__cta,
.g22-header__cta,
.g22-hero__cta:not(.g22-hero__cta--link),
.g22-clean__btn {
	background: var(--g22-purple) !important;
	border-color: var(--g22-purple) !important;
	color: #fff !important;
	box-shadow: var(--g22-shadow-sm);
}

/* Home CTA primary summary sits on the PURPLE trial slice, so a purple fill
   is invisible there — it is the one primary action that must stay yellow
   (client fix, 2026-07): the button-normalization pass above wrongly folded
   --yell into the purple group. Yellow fill + ink text keeps AA on the
   purple panel. */
.g22-cta__submit--yell {
	background: var(--g22-yellow) !important;
	border-color: var(--g22-yellow) !important;
	color: var(--g22-ink) !important;
	box-shadow: var(--g22-shadow-sm);
}

/* Primary on the dark purple footer: white fill so it stays readable. */
.g22-footer__cta {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--g22-purple) !important;
	box-shadow: var(--g22-shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
	body .g22-header__cta:hover,
	body .g22-header__cta:focus-visible,
	body.home .g22-header__cta:hover,
	body.home .g22-header__cta:focus-visible,
	.g22-header__cta:hover,
	.g22-header__cta:focus-visible,
	.g22-hero__cta:not(.g22-hero__cta--link):hover,
	.g22-hero__cta:not(.g22-hero__cta--link):focus-visible,
	.g22-clean__btn:hover,
	.g22-clean__btn:focus-visible {
		background: var(--g22-purple-hot) !important;
		border-color: var(--g22-purple-hot) !important;
		color: #fff !important;
		box-shadow: var(--g22-shadow-md);
		transform: translateY(-2px);
	}

	.g22-cta__submit--yell:hover,
	.g22-cta__submit--yell:focus-visible {
		background: var(--g22-yellow-hot) !important;
		border-color: var(--g22-yellow-hot) !important;
		color: var(--g22-ink) !important;
		box-shadow: var(--g22-shadow-md);
		transform: translateY(-2px);
	}

	.g22-footer__cta:hover,
	.g22-footer__cta:focus-visible {
		background: rgba(255, 255, 255, 0.92) !important;
		border-color: #fff !important;
		color: var(--g22-purple) !important;
		box-shadow: var(--g22-shadow-md);
		transform: translateY(-2px);
	}
}

/* --- 2. SECONDARY — transparent fill, purple outline + text --- */

.g22-header__consult,
.g22-about__cta,
.g22-learn__btn,
.g22-news__all,
.g22-cta__submit--ink,
.g22-about-team__link a,
.g22-about-team__reviews-link a {
	background: transparent;
	background-image: none !important;
	border-color: var(--g22-purple);
	color: var(--g22-purple) !important;
	box-shadow: none;
	text-decoration: none !important;
}

@media (hover: hover) and (pointer: fine) {
	.g22-header__consult:hover,
	.g22-header__consult:focus-visible,
	.g22-about__cta:hover,
	.g22-about__cta:focus-visible,
	.g22-learn__btn:hover,
	.g22-learn__btn:focus-visible,
	.g22-news__all:hover,
	.g22-news__all:focus-visible,
	.g22-cta__submit--ink:hover,
	.g22-cta__submit--ink:focus-visible,
	.g22-about-team__link a:hover,
	.g22-about-team__link a:focus-visible,
	.g22-about-team__reviews-link a:hover,
	.g22-about-team__reviews-link a:focus-visible {
		background: var(--g22-purple);
		border-color: var(--g22-purple);
		color: #fff !important;
		box-shadow: var(--g22-shadow-md);
		transform: translateY(-2px);
	}
}

/* Secondary on the dark purple footer: white outline (same box + motion). */
.g22-footer__consult,
.g22-footer__map {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.72);
	color: #fff !important;
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.g22-footer__consult:hover,
	.g22-footer__consult:focus-visible,
	.g22-footer__map:hover,
	.g22-footer__map:focus-visible {
		background: #fff;
		border-color: #fff;
		color: var(--g22-purple) !important;
		box-shadow: var(--g22-shadow-md);
		transform: translateY(-2px);
	}
}

/* --- Arrow micro-interaction — shared by every button/link that has one --- */

.g22-hero-cine__cta-arrow,
.g22-about__cta-arrow,
.g22-learn__btn-arrow,
.g22-news__all-arrow {
	transition: transform var(--g22-dur-quick) var(--g22-ease-out);
}

.g22-hero__cta:not(.g22-hero__cta--link):hover .g22-hero-cine__cta-arrow,
.g22-hero__cta:not(.g22-hero__cta--link):focus-visible .g22-hero-cine__cta-arrow,
.g22-about__cta:hover .g22-about__cta-arrow,
.g22-about__cta:focus-visible .g22-about__cta-arrow,
.g22-learn__btn:hover .g22-learn__btn-arrow,
.g22-learn__btn:focus-visible .g22-learn__btn-arrow,
.g22-news__all:hover .g22-news__all-arrow,
.g22-news__all:focus-visible .g22-news__all-arrow {
	transform: translateX(4px);
}

/* Footer CTA/map ship their arrow as a plain aria-hidden span, not a
   dedicated class — nudge it the same 4px on hover for consistency. */
.g22-footer__cta > span[aria-hidden],
.g22-footer__map > span[aria-hidden] {
	display: inline-block;
	transition: transform var(--g22-dur-quick) var(--g22-ease-out);
}

.g22-footer__cta:hover > span[aria-hidden],
.g22-footer__cta:focus-visible > span[aria-hidden],
.g22-footer__map:hover > span[aria-hidden],
.g22-footer__map:focus-visible > span[aria-hidden] {
	transform: translateX(4px);
}

/* --- 3. LINK — no box/border/bg; purple text; underline grows on hover --- */

.g22-why__head-link,
.g22-google-reviews__all-link,
.g22-hero__cta--link,
.g22-about-hero__text-link a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--g22-space-2);
	min-height: 44px;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	color: var(--g22-purple) !important;
	font-family: var(--g22-font-body, "Manrope", sans-serif);
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none !important;
	text-decoration-color: transparent !important;
	cursor: pointer;
	transition: color var(--g22-dur-quick) var(--g22-ease-out);
}

/* Underline bar — 0 → 100% scale from the left, purple. */
.g22-why__head-link::before,
.g22-google-reviews__all-link::before,
.g22-hero__cta--link::before,
.g22-about-hero__text-link a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--g22-dur-quick) var(--g22-ease-out);
	pointer-events: none;
}

.g22-why__head-link:hover,
.g22-why__head-link:focus-visible,
.g22-google-reviews__all-link:hover,
.g22-google-reviews__all-link:focus-visible,
.g22-hero__cta--link:hover,
.g22-hero__cta--link:focus-visible,
.g22-about-hero__text-link a:hover,
.g22-about-hero__text-link a:focus-visible {
	color: var(--g22-purple-hot) !important;
}

.g22-why__head-link:hover::before,
.g22-why__head-link:focus-visible::before,
.g22-google-reviews__all-link:hover::before,
.g22-google-reviews__all-link:focus-visible::before,
.g22-hero__cta--link:hover::before,
.g22-hero__cta--link:focus-visible::before,
.g22-about-hero__text-link a:hover::before,
.g22-about-hero__text-link a:focus-visible::before {
	transform: scaleX(1);
}

/* .g22-why__head-link has no arrow in markup — added as generated content. */
.g22-why__head-link::after {
	content: "↗";
	display: inline-block;
	transition: transform var(--g22-dur-quick) var(--g22-ease-out);
}

.g22-why__head-link:hover::after,
.g22-why__head-link:focus-visible::after {
	transform: translate(4px, -4px);
}

/* .g22-google-reviews__all-link ships its arrow as a real span. */
.g22-google-reviews__all-link > span[aria-hidden] {
	display: inline-block;
	transition: transform var(--g22-dur-quick) var(--g22-ease-out);
}

.g22-google-reviews__all-link:hover > span[aria-hidden],
.g22-google-reviews__all-link:focus-visible > span[aria-hidden] {
	transform: translateX(4px);
}

/* --- Focus-visible — identical ring for every HOME variant --- */

.g22-header__cta:focus-visible,
.g22-hero__cta:focus-visible,
.g22-clean__btn:focus-visible,
.g22-cta__submit:focus-visible,
.g22-footer__cta:focus-visible,
.g22-header__consult:focus-visible,
.g22-about__cta:focus-visible,
.g22-learn__btn:focus-visible,
.g22-news__all:focus-visible,
.g22-footer__consult:focus-visible,
.g22-footer__map:focus-visible,
.g22-why__head-link:focus-visible,
.g22-google-reviews__all-link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--g22-purple-24);
}

/* --- Touch targets — never below 48px, even if a section file forgets --- */

@media (pointer: coarse) {
	.g22-header__cta,
	.g22-hero__cta,
	.g22-clean__btn,
	.g22-cta__submit,
	.g22-footer__cta,
	.g22-header__consult,
	.g22-about__cta,
	.g22-learn__btn,
	.g22-news__all,
	.g22-footer__consult,
	.g22-footer__map {
		min-height: var(--g22-space-7);
	}
}

/* --- Reduced motion — drop translate/scale, keep color changes --- */

@media (prefers-reduced-motion: reduce) {
	.g22-header__cta,
	.g22-hero__cta,
	.g22-clean__btn,
	.g22-cta__submit,
	.g22-footer__cta,
	.g22-header__consult,
	.g22-about__cta,
	.g22-learn__btn,
	.g22-news__all,
	.g22-footer__consult,
	.g22-footer__map,
	.g22-why__head-link,
	.g22-google-reviews__all-link,
	.g22-hero-cine__cta-arrow,
	.g22-about__cta-arrow,
	.g22-learn__btn-arrow,
	.g22-news__all-arrow,
	.g22-footer__cta > span[aria-hidden],
	.g22-footer__map > span[aria-hidden],
	.g22-google-reviews__all-link > span[aria-hidden],
	.g22-why__head-link::after {
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   Narrow-viewport safety: allow pill buttons with long labels to wrap instead
   of forcing horizontal page overflow. Base component sets white-space:nowrap
   + line-height:1 (good on desktop); on the smallest phones a long Ukrainian
   CTA (e.g. "Як влаштований навчальний процес") exceeds its column and pushes
   the 320px reflow floor. Wrapping is strictly better than a scrollbar here.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	.g22-header__cta,
	.g22-hero__cta,
	.g22-clean__btn,
	.g22-header__consult,
	.g22-about__cta,
	.g22-learn__btn,
	.g22-news__all,
	.g22-footer__consult,
	.g22-footer__map,
	.g22-about-team__link a,
	.g22-about-team__reviews-link a {
		white-space: normal;
		line-height: 1.15;
		text-align: center;
	}
}