/*
 * Carefree Honeybee — cookie consent banner.
 *
 * Written against the theme's own tokens rather than hard-coded hexes, so if
 * the palette is ever retuned in theme.json the banner follows. Fallbacks are
 * supplied for every var() so the banner is still legible if it somehow renders
 * before the theme's global stylesheet (or under a different theme).
 *
 * The look is the same flat letterpress as the rest of the site: cream panel,
 * hairline ink border, square corners, no drop shadow. The one borrowed motif
 * is the double rule along the top edge — 2px over 1px with a 3px gap, matching
 * .is-style-honeybee-rule — which ties the banner to the page instead of
 * letting it read as a third-party widget bolted on.
 */

.honeybee-consent {
	position: fixed;
	z-index: 99999;
	right: 0;
	bottom: 0;
	left: 0;

	background-color: var( --wp--preset--color--cream, #F7F2E6 );
	color: var( --wp--preset--color--ink, #2C2317 );

	/* The double rule, built as two borders on a 6px pseudo-element strip. */
	border-top: 1px solid var( --wp--preset--color--ink, #2C2317 );

	font-family: var( --wp--preset--font-family--body, 'Jost', -apple-system, 'Segoe UI', sans-serif );

	/*
	 * No entry animation, deliberately. It had a slide-up here and it came out
	 * for two reasons:
	 *
	 *   1. This site has no motion anywhere else — that is a settled decision,
	 *      not an omission — and a banner sliding up was the only thing moving.
	 *
	 *   2. A transform-based entry animation is genuinely unsafe for a consent
	 *      control. A CSS animation's timeline does not advance while the
	 *      document is hidden, so a page opened in a BACKGROUND tab parks the
	 *      element on its first keyframe — translateY(100%), i.e. entirely below
	 *      the fold. Confirmed in-browser: playState "running", currentTime
	 *      stuck at 0, transform translateY(137.8px). It unsticks when the tab
	 *      is focused, so it is survivable, but a compliance control should not
	 *      depend on an animation clock to be visible at all. Fill mode does not
	 *      help — at t=0 the animation is already in its active phase, so the 0%
	 *      keyframe applies regardless of `fill`.
	 */
}

.honeybee-consent[hidden] {
	display: none;
}

/* The thick half of the double rule, sitting above the 1px border-top. */
.honeybee-consent::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	top: -4px;
	height: 3px;
	box-sizing: border-box;
	border-top: 2px solid var( --wp--preset--color--ink, #2C2317 );
	background-color: var( --wp--preset--color--base, #EFE7D6 );
}

.honeybee-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2.5rem;

	/* Matches the theme's alignwide measure so the banner's content lines up
	 * with the footer columns above it rather than running edge to edge. */
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding: 1.35rem 1.5rem;
}

.honeybee-consent__text {
	flex: 1 1 26rem;
}

.honeybee-consent__title {
	margin: 0 0 0.3rem;
	font-family: var( --wp--preset--font-family--display, 'Vollkorn', Georgia, serif );
	font-size: var( --wp--preset--font-size--large, 1.375rem );
	font-weight: 500;
	line-height: 1.2;
}

.honeybee-consent__body {
	margin: 0;
	max-width: 62ch;
	font-size: var( --wp--preset--font-size--x-small, 0.8125rem );
	line-height: 1.6;
	color: var( --wp--preset--color--muted, #6E6151 );
}

.honeybee-consent__link {
	color: var( --wp--preset--color--amber-deep, #4A3A22 );
	text-underline-offset: 0.2em;
}

.honeybee-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/*
 * ACCEPT AND DECLINE ARE VISUALLY IDENTICAL, AND THAT IS THE POINT.
 *
 * One class, both buttons — there is deliberately no ".honeybee-consent__btn--
 * primary". Making "accept" a solid filled button while "reject" is a faint
 * outline is the single most common dark pattern in consent design, and
 * regulators have repeatedly called it out: a choice is only free if refusing is
 * as easy as agreeing. That was the state of the CookieAdmin banner this
 * replaces. If anyone is ever tempted to make accept "stand out a bit more",
 * this comment is the reason not to.
 */
.honeybee-consent__btn {
	flex: 0 0 auto;
	min-width: 9.5rem;

	padding: 0.7rem 1.4rem;
	border: 1px solid var( --wp--preset--color--ink, #2C2317 );
	border-radius: 0;
	background-color: transparent;
	color: var( --wp--preset--color--ink, #2C2317 );

	font-family: inherit;
	font-size: var( --wp--preset--font-size--caps, 0.6875rem );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;

	transition: background-color 120ms ease-out, color 120ms ease-out;
}

.honeybee-consent__btn:hover,
.honeybee-consent__btn:focus-visible {
	background-color: var( --wp--preset--color--ink, #2C2317 );
	color: var( --wp--preset--color--base, #EFE7D6 );
}

/* Keyboard focus must stay obvious even though hover inverts the button. */
.honeybee-consent__btn:focus-visible,
.honeybee-consent__reopen:focus-visible {
	outline: 2px solid var( --wp--preset--color--amber, #7A5B2E );
	outline-offset: 2px;
}

/*
 * The footer's withdrawal control. Styled as text, not a button, because it
 * sits in the fine print among the copyright line — but it is a real <button>
 * element, so it is keyboard-reachable and announced correctly.
 */
.honeybee-consent__reopen {
	padding: 0;
	border: 0;
	background: none;

	/* Colour and size are set rather than inherited: the shortcode block renders
	 * the button as a bare flex child of .honeybee-fineprint with no paragraph
	 * wrapper, so there is nothing carrying the fine print's own styling to
	 * inherit from. These match the sibling paragraphs in the footer. */
	color: var( --wp--preset--color--muted-light, #A79B85 );
	font-family: var( --wp--preset--font-family--body, 'Jost', -apple-system, 'Segoe UI', sans-serif );
	font-size: var( --wp--preset--font-size--x-small, 0.8125rem );
	line-height: 1.6;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.honeybee-consent__reopen:hover {
	color: var( --wp--preset--color--base, #EFE7D6 );
}

@media ( prefers-reduced-motion: reduce ) {
	/* The banner itself no longer animates, so the only motion left to suppress
	 * is the buttons' hover fade. */
	.honeybee-consent__btn {
		transition: none;
	}
}

/*
 * On a narrow screen the buttons go full width and side by side. They keep
 * equal widths (flex: 1 1 0 on both) so the balance survives the breakpoint —
 * this is where a lot of banners quietly let "accept" become the wider target.
 */
@media ( max-width: 600px ) {
	.honeybee-consent__inner {
		padding: 1.1rem 1.15rem;
		gap: 1rem;
	}

	.honeybee-consent__actions {
		width: 100%;
		flex-wrap: nowrap;
	}

	.honeybee-consent__btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 0.7rem 0.6rem;
	}
}