/* aibotkit-child · banner.css — the seasonal banner (Halloween 2026).
 *
 * Loaded only while the sale runs; inc/seasonal-banner.php says when, and why
 * the theme prints the banner rather than a script moving it.
 *
 * ⭐ THE TEAM'S DRAWING, ON OUR TOKENS (Alpesh, 2026-10-27). The snippet used its
 * own font (Plus Jakarta Sans) and five literal colours. Here: Manrope, the
 * dark brand ground for its near-black green, `brand-on-ink` for its neon
 * green, `warm` (the logo's gold) for its yellow, `ink-heading` and
 * `ink-body` for its white and grey. Every size is a step of the type ladder.
 * Only the art keeps its own colours. */

.abk-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 260px 80px at 8% 110%, color-mix(in oklab, var(--wp--custom--color--brand-on-ink) 35%, transparent), transparent 70%),
		radial-gradient(ellipse 300px 90px at 90% 110%, color-mix(in oklab, var(--wp--custom--color--brand-on-ink) 30%, transparent), transparent 70%),
		var(--wp--custom--color--d-brand-2);
	color: var(--wp--custom--color--ink-heading);
	font-family: inherit; /* Manrope, the site's one family */
}
.abk-banner[hidden] { display: none !important; }
.abk-banner p { margin: 0; }

/* ⛔ THE FIXED HEADER GOES BELOW THE BANNER. `--abk-banner-offset` is the part
 * of the banner still on screen, written by the banner's own script on every
 * scroll. Unlayered, so it beats the header's `tw:top-sm` utility. */
.has-abk-banner .hdr { top: calc(var(--abk-banner-offset, 0px) + var(--wp--custom--space--sm)); }

/* The art: decoration at the two ends, wide screens with a mouse only. */
.abk-banner__art { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.abk-banner__art img { position: absolute; display: block; height: auto; max-width: none; }
.abk-banner__art--left  { left: 0;  width: 300px; }
.abk-banner__art--right { right: 0; width: 360px; }
.abk-banner__cloud-l  { left: -10px; bottom: -30px; width: 150px; opacity: .9; }
.abk-banner__batsm    { left: 62px;  top: 16px;  width: 58px; }
.abk-banner__robot    { left: 118px; top: -6px;  width: 118px; }
.abk-banner__bubble   { left: 228px; top: 10px;  width: 50px; }
.abk-banner__bat      { right: 190px; top: 6px;  width: 96px; opacity: .95; }
.abk-banner__pumpkins { right: 120px; bottom: -6px; width: 150px; }
.abk-banner__castle   { right: 20px; bottom: -30px; width: 130px; }

.abk-banner__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--xl);
	padding: var(--wp--custom--space--sm) var(--wp--custom--space--3-xl);
}
.abk-banner__title {
	font-size: var(--wp--custom--step--display-small);
	font-weight: var(--wp--custom--weight--display);
	line-height: var(--wp--custom--leading--display);
	/* ⛔ TRACKING FOLLOWS THE RENDERED SIZE (check-law.js, assertion 8): 20-27px
	 * takes `lead`, 28px and up takes `display`. `display-small` reaches 28px
	 * at 1344px wide (28 / 2.0834vw). */
	letter-spacing: var(--wp--custom--tracking--lead);
	white-space: nowrap;
}
@media (min-width: 1344px) { .abk-banner__title { letter-spacing: var(--wp--custom--tracking--display); } }
.abk-banner__title span { color: var(--wp--custom--color--warm); }
.abk-banner__sub {
	margin-top: var(--wp--custom--space--xs) !important;
	display: flex; align-items: center; gap: var(--wp--custom--space--sm);
	font-size: var(--wp--custom--step--body-large);
	color: var(--wp--custom--color--ink-body);
	white-space: nowrap;
}
.abk-banner__sub b { color: var(--wp--custom--color--ink-heading); font-weight: var(--wp--custom--weight--display); }
.abk-banner__pill {
	padding: 2px var(--wp--custom--space--sm);
	border-radius: var(--wp--custom--rounded--sm);
	background: var(--wp--custom--color--brand-on-ink);
	color: var(--wp--custom--color--ink);
	font-weight: var(--wp--custom--weight--display);
}

.abk-banner__timer { display: flex; gap: var(--wp--custom--space--sm); }
.abk-banner__unit { display: flex; flex-direction: column; align-items: center; gap: var(--wp--custom--space--xs); }
.abk-banner__num {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 44px;
	border-radius: var(--wp--custom--rounded--sm);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp--custom--color--ink-heading) 22%, transparent);
	background: color-mix(in oklab, var(--wp--custom--color--ink-heading) 5%, transparent);
	font-size: var(--wp--custom--step--subsection);
	font-weight: var(--wp--custom--weight--display);
	letter-spacing: var(--wp--custom--tracking--lead); /* 22-24px: the lead tier */
	font-variant-numeric: tabular-nums;
}
.abk-banner__label {
	font-size: var(--wp--custom--step--label);
	letter-spacing: var(--wp--custom--tracking--label);
	color: var(--wp--custom--color--ink-body);
}

/* The one action: the site's button (48px, 8px radius), in the banner's green. */
.btn.abk-banner__cta {
	gap: var(--wp--custom--space--sm);
	white-space: nowrap;
	background: var(--wp--custom--color--brand-on-ink);
	color: var(--wp--custom--color--ink);
	animation: abk-banner-pulse 2.6s ease-out infinite;
}
.btn.abk-banner__cta:hover { background: var(--wp--custom--color--brand-lift); }
.btn.abk-banner__cta:focus-visible { outline: 2px solid var(--wp--custom--color--warm); outline-offset: 3px; }
.abk-banner__cta svg { flex: none; transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing); }
.abk-banner__cta:hover svg { transform: translateX(3px); }
@keyframes abk-banner-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--wp--custom--color--brand-on-ink) 45%, transparent); }
	70%  { box-shadow: 0 0 0 12px color-mix(in oklab, var(--wp--custom--color--brand-on-ink) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--wp--custom--color--brand-on-ink) 0%, transparent); }
}

/* ⛔ 44px, THE LAW'S FLOOR. The snippet's close button was 34px. */
.abk-banner__close {
	position: absolute; top: var(--wp--custom--space--sm); right: var(--wp--custom--space--sm); z-index: 2;
	display: flex; align-items: center; justify-content: center;
	/* ⛔ 8px, NOT A CIRCLE: the pill radius belongs to a badge and a pill only. */
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--wp--custom--rounded--sm);
	background: color-mix(in oklab, var(--wp--custom--color--ink) 55%, transparent);
	color: var(--wp--custom--color--ink-heading);
	cursor: pointer;
}
.abk-banner__close:hover { background: color-mix(in oklab, var(--wp--custom--color--ink) 80%, transparent); }
.abk-banner__close:focus-visible { outline: 2px solid var(--wp--custom--color--brand-on-ink); outline-offset: 2px; }

@media (max-width: 1280px) {
	.abk-banner__inner { gap: var(--wp--custom--space--lg); padding-inline: var(--wp--custom--space--lg); }
	.abk-banner__art--left  { transform: scale(.85); transform-origin: left bottom; }
	.abk-banner__art--right { transform: scale(.85); transform-origin: right bottom; }
}
/* ⭐ NO ART BELOW 1100px OR ON A TOUCH SCREEN. The images are `loading=lazy`,
 * so a hidden one is never downloaded. */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
	.abk-banner__art { display: none; }
	.abk-banner { background: radial-gradient(ellipse 70% 60px at 50% 120%, color-mix(in oklab, var(--wp--custom--color--brand-on-ink) 35%, transparent), transparent 75%), var(--wp--custom--color--d-brand-2); }
	.abk-banner__inner { padding-inline: var(--wp--custom--space--3-xl); }
}
/* Phones: the copy on top, then the timer and the button side by side. */
@media (max-width: 767px) {
	.abk-banner { min-height: 0; }
	.abk-banner__inner {
		flex-wrap: wrap; justify-content: center; text-align: center; width: 100%;
		gap: var(--wp--custom--space--md);
		padding: var(--wp--custom--space--md) var(--wp--custom--space--md) var(--wp--custom--space--lg);
	}
	.abk-banner__copy { width: 100%; padding-inline: var(--wp--custom--space--2-xl); }
	.abk-banner__title, .abk-banner__sub { white-space: normal; }
	.abk-banner__sub { justify-content: center; flex-wrap: wrap; font-size: var(--wp--custom--step--body); }
	.abk-banner__timer { gap: var(--wp--custom--space--xs); }
	.abk-banner__num { width: 44px; height: 40px; font-size: var(--wp--custom--step--body-large); letter-spacing: var(--wp--custom--tracking--text); }
}
@media (max-width: 380px) {
	.btn.abk-banner__cta { width: 100%; max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
	.btn.abk-banner__cta { animation: none; }
	.has-abk-banner .hdr__bar .abk-strip { transition: none; }
	.abk-banner__cta svg { transition: none; }
}

/* ── The thin strip under the header (Alpesh, 2026-10-27) ─────────────────────
 * It shows once the banner is off screen (`abk-banner-gone`): after scrolling
 * on a tablet or desktop, and FROM THE START on a phone, where the big banner
 * does not show. It goes with the banner when the visitor closes it or the
 * sale ends. It hangs from the header bar's lower edge, inset by the bar's
 * radius, so it follows the bar as the bar narrows on scroll.
 * ⚠ THE "Buy now" LINK IS A STATED EXCEPTION TO THE 44px FLOOR (Alpesh asked
 * for a link in the strip, 2026-10-27). The strip is 24px tall, so the link is
 * a 24px target: WCAG 2.5.8's minimum, not the law's 44px. It is for this
 * campaign only and ends with it. */
.abk-strip { display: none; }
.has-abk-banner.abk-banner-gone .hdr__bar .abk-strip {
	display: block;
	position: absolute;
	left: var(--wp--custom--rounded--md);
	right: var(--wp--custom--rounded--md);
	top: 100%;
	margin: 0;
	height: 24px;
	padding: 0 var(--wp--custom--space--sm);
	border-radius: 0 0 var(--wp--custom--rounded--sm) var(--wp--custom--rounded--sm);
	background: var(--wp--custom--color--d-brand-2);
	color: var(--wp--custom--color--ink-heading);
	font-size: var(--wp--custom--step--label);
	line-height: 24px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}
.abk-strip [data-abk="short"] { color: var(--wp--custom--color--warm); }
/* ⛔ A SHORTER TEXT ON A PHONE. The full line MEASURED wider than the strip at
 * 390 and was cut off (2026-10-27). */
.abk-strip__short { display: none; }
@media (max-width: 599px) {
	.abk-strip__long  { display: none; }
	.abk-strip__short { display: inline; }
}
.abk-strip__cta {
	display: inline-block;
	min-width: 24px;
	line-height: 24px;
	color: var(--wp--custom--color--warm);
	font-weight: var(--wp--custom--weight--display);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.abk-strip__cta:hover { color: var(--wp--custom--color--ink-heading); }
.abk-strip__cta:focus-visible { outline: 2px solid var(--wp--custom--color--warm); outline-offset: -2px; }

/* ⭐ NO BIG BANNER ON A PHONE (Alpesh, 2026-10-27): at 183px tall it filled a
 * fifth of the screen. The strip under the header carries the offer instead;
 * the banner's script still runs, because the strip's countdown and the end
 * time live in it. A hidden banner measures 0px, so the header sits at the top
 * and the strip shows at once. */
@media (max-width: 767px) {
	.abk-banner { display: none; }
	/* ⭐ AT THE TOP OF THE PAGE THE STRIP RUNS EDGE TO EDGE (Alpesh, 2026-10-27),
	 * square, as an announcement band; once the page scrolls it moves in to the
	 * bar's width and hangs from it. The bar sits `--hdr-inset / 2` from each
	 * screen edge, so that negative offset reaches the edges. */
	.has-abk-banner.abk-banner-gone.abk-page-top .hdr__bar .abk-strip {
		left: calc(var(--hdr-inset) / -2);
		right: calc(var(--hdr-inset) / -2);
		border-radius: 0;
	}
	.has-abk-banner .hdr__bar .abk-strip {
		transition: left var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
			right var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
			border-radius var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
	}
}
.has-abk-banner .hdr__bar { position: relative; }

/* ── The offer tag in the paid pricing cards, on yearly plans ───────────────
 * blocks/pricing/render.php prints it inside the billed line while the sale
 * runs, so it sits right above the button. Gold ground, ink text. */
.pricing__deal {
	display: table; /* its own line, as wide as its text */
	margin-top: var(--wp--custom--space--sm);
	padding: var(--wp--custom--space--xs) var(--wp--custom--space--sm);
	border-radius: var(--wp--custom--rounded--sm);
	background: var(--wp--custom--color--warm);
	color: var(--wp--custom--color--ink);
	/* ⛔ `label` SIZE AND ONE LINE. At `bodySmall` it wrapped to two lines and
	 * filled the card's width (seen 2026-10-27). */
	font-size: var(--wp--custom--step--label);
	font-weight: var(--wp--custom--weight--display);
	white-space: nowrap;
}
/* ⛔ THE FREE CARD'S CHIP SITS IN THE SAME ROW AS THE TAG, and a grid item
 * stretches to its row: the chip grew into a tall pill (seen 2026-10-27). */
.pricing__cards > article > .badge { align-self: start; }
.pricing__deal[hidden], .abk-sale-over [data-abk-promo] { display: none !important; }

/* Last in the file, so it beats the strip transition above. */
@media (prefers-reduced-motion: reduce) {
	.has-abk-banner .hdr__bar .abk-strip { transition: none; }
}