/**
 * LeoTech brand layer for KBD Announcements (hello bar + takeover).
 * Loaded after the plugin's structural CSS, and in the editor canvas.
 *
 * URLs are root-relative: the editor injects this file inline, where
 * paths relative to the stylesheet don't resolve.
 */

/* Faces the takeover uses; the theme only declares them in front-end CSS. */
@font-face {
	font-family: "TTHovesPro";
	src: url("/wp-content/themes/leotech/assets/fonts/tthover/TTHovesProRegular/font.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "TTHovesPro";
	src: url("/wp-content/themes/leotech/assets/fonts/tthover/TTHovesProBold/font.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PP Neue Machina Inktrap";
	src: url("/wp-content/themes/leotech/assets/fonts/pp-neue/PPNeueMachina-InktrapLight.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PP Neue Machina Inktrap Ullight";
	src: url("/wp-content/themes/leotech/assets/fonts/pp-neue/PPNeueMachina-InktrapUltralight.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

:root {
	--leotech-ann-navy: #001a33;
	--leotech-ann-blue: #035cf9;
	--leotech-ann-slate: #475c6c;
	--leotech-ann-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5'/%3E%3C/svg%3E");
}

/* ---------- Hello bar ---------- */

.kbd-hello-bar {
	background-color: var(--leotech-ann-navy);
	color: #fff;
}

.kbd-hello-bar__inner {
	column-gap: 1.5rem;
	row-gap: 0.25rem;
	align-items: center;
	background-color: var(--leotech-ann-navy);
	color: #fff;
	font-family: "TTHovesPro", "TT Hoves Pro", sans-serif;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}

.kbd-hello-bar__message {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.kbd-hello-bar .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	column-gap: 10px;
	padding: 0;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* Nudged down 2px: flex centering lines it up with the line box, not the lowercase text. */
.kbd-hello-bar .wp-block-button__link::after {
	content: "";
	position: relative;
	top: 2px;
	width: 18px;
	height: 10px;
	background: var(--leotech-ann-arrow) center / contain no-repeat;
	transition: transform 0.35s ease;
}

.kbd-hello-bar .wp-block-button__link:hover::after,
.kbd-hello-bar .wp-block-button__link:focus-visible::after {
	transform: translateX(4px);
}

.kbd-hello-bar__close {
	color: #fff;
}

/*
 * Desktop: the bar overlays the top of the site; the header and page stay put.
 * The open mobile menu (fixed, top: 0, outside <header>) sits above the bar
 * so its logo and close button aren't covered.
 */
.mobile_menu.active {
	z-index: 111;
}

/*
 * Phones: the header has no spare room above the logo, so push the header
 * and page down instead.
 *
 * Keyed to the bar's own .is-in class with the bar's 0.35s ease, not to
 * --kbd-hello-bar-height: the plugin snaps that variable on slide-in, and the
 * header's own `transition: top` chases it on slide-out, which opens a gap.
 * Transform (not top) so it doesn't fight .hide_header's top animation.
 * Margin (not padding) because body padding-top already clears the header.
 */
@media (max-width: 767.98px) {
	body header {
		transition: top 0.35s ease, transform 0.35s ease;
	}

	/* Keeps custom.css's body padding-top transition; :has() outranks its plain `body`. */
	body:has(> .kbd-hello-bar) {
		transition: padding-top 0.35s, margin-top 0.35s ease;
	}

	body:has(> .kbd-hello-bar.is-in:not(.is-hidden)) header {
		transform: translate3d(0, var(--kbd-hello-bar-size, 0px), 0);
	}

	body:has(> .kbd-hello-bar.is-in:not(.is-hidden)) {
		margin-top: var(--kbd-hello-bar-size, 0px);
	}

	body.admin-bar:has(> .kbd-hello-bar.is-in:not(.is-hidden)) header {
		transform: translate3d(0, calc(var(--kbd-hello-bar-size, 0px) + 46px), 0);
	}
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
	body header,
	body:has(> .kbd-hello-bar) {
		transition: none;
	}
}

/* ---------- Takeover: Event (Figma "Leotech takeover V4") ---------- */

/*
 * Sizes are the Figma values at its 1728px frame (card 1600px), scaled
 * down with the viewport via clamp().
 */
.kbd-takeover__layout--leotech-event {
	--ann-pad: clamp(24px, 3.7vw, 64px);
	--ann-gap: clamp(20px, 1.85vw, 32px);

	display: flex;
	flex-direction: column;
	margin: 0;
	background-color: #fff;
	color: var(--leotech-ann-navy);
	border-radius: 10px;
}

/*
 * Text size: the editor sidebar's "Takeover text size" panel adds these
 * classes to the layout group to shrink the headline or the rest of the copy.
 */
.kbd-takeover__layout--title-95 { --ann-title-scale: 0.95; }
.kbd-takeover__layout--title-90 { --ann-title-scale: 0.9; }
.kbd-takeover__layout--title-85 { --ann-title-scale: 0.85; }
.kbd-takeover__layout--title-80 { --ann-title-scale: 0.8; }
.kbd-takeover__layout--title-75 { --ann-title-scale: 0.75; }
.kbd-takeover__layout--title-70 { --ann-title-scale: 0.7; }
.kbd-takeover__layout--text-95 { --ann-text-scale: 0.95; }
.kbd-takeover__layout--text-90 { --ann-text-scale: 0.9; }
.kbd-takeover__layout--text-85 { --ann-text-scale: 0.85; }
.kbd-takeover__layout--text-80 { --ann-text-scale: 0.8; }
.kbd-takeover__layout--text-75 { --ann-text-scale: 0.75; }
.kbd-takeover__layout--text-70 { --ann-text-scale: 0.7; }

.kbd-takeover__layout--leotech-event > *,
.kbd-takeover__layout--leotech-event .wp-block-group > * {
	margin-block: 0;
}

.kbd-takeover::backdrop {
	background-color: rgb(0 26 51 / 0.7);
}

.kbd-takeover__card:has(.kbd-takeover__layout--leotech-event) {
	width: min(100rem, 100%);
	padding: 0;
	background-color: #fff;
	color: var(--leotech-ann-navy);
	border-radius: 10px;
}

/*
 * Close: outlined circle with the design's X, 30% smaller than Figma's
 * 55px / 15px, centered on the same spot.
 */
.kbd-takeover__card:has(.kbd-takeover__layout--leotech-event) .kbd-takeover__close {
	top: clamp(16px, 2.6vw, 45px);
	right: clamp(16px, 2.6vw, 45px);
	width: 38px;
	height: 38px;
	border: 1px solid var(--leotech-ann-navy);
	border-radius: 999px;
	background: url("/wp-content/themes/leotech/assets/images/announcements/close-icon.svg") center / 10.5px 10.5px no-repeat;
	transition: background-color 0.35s ease;
}

.kbd-takeover__card:has(.kbd-takeover__layout--leotech-event) .kbd-takeover__close:hover {
	background-color: #f6f6fc;
}

/* The card takes focus on open (see inc/announcements.php); no ring for that. */
.kbd-takeover__card:focus {
	outline: none;
}

.kbd-takeover__card:has(.kbd-takeover__layout--leotech-event) .kbd-takeover__close svg {
	display: none;
}

.kbd-takeover__card:has(.kbd-takeover__layout--leotech-event) .kbd-takeover__close:focus-visible {
	outline: 2px solid var(--leotech-ann-blue);
	outline-offset: 3px;
}

/* Header: logo row, 129px tall in the design. */
.kbd-takeover__layout--leotech-event .kbd-takeover__header {
	display: flex;
	align-items: center;
	min-height: 65px;
	padding: clamp(16px, 1.85vw, 32px) clamp(80px, 6vw, 96px) clamp(16px, 1.85vw, 32px) var(--ann-pad);
	box-sizing: content-box;
}

.kbd-takeover__logo {
	margin: 0;
	padding-top: 11px;
}

.kbd-takeover__logo img {
	display: block;
	width: clamp(135px, 13vw, 224px);
	height: auto;
}

/* Columns: copy beside media (Figma: 820px + 630px with the image 912px in). */
.kbd-takeover__layout--leotech-event .kbd-takeover__columns {
	display: grid;
	grid-template-columns: minmax(0, 820fr) minmax(0, 630fr);
	column-gap: clamp(20px, 1.6vw, 28px);
	align-items: start;
	padding-inline: var(--ann-pad) clamp(24px, 3.35vw, 58px);
}

.kbd-takeover__layout--leotech-event .kbd-takeover__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ann-gap);
	padding-top: var(--ann-pad);
}

.kbd-takeover__layout--leotech-event .kbd-takeover__title {
	max-width: 798px;
	color: var(--leotech-ann-navy);
	font-family: "PP Neue Machina Inktrap Ullight", "PP Neue Machina Inktrap", sans-serif;
	font-size: calc(clamp(30px, 3.66vw, 63px) * var(--ann-title-scale, 1));
	font-weight: 200;
	line-height: 1.15;
	letter-spacing: 0;
}

.kbd-takeover__layout--leotech-event .kbd-takeover__details {
	display: flex;
	flex-wrap: wrap;
	gap: 16px var(--ann-pad);
}

.kbd-takeover__layout--leotech-event .kbd-takeover__detail {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-left: 16px;
	border-left: 1px solid var(--leotech-ann-slate);
}

.kbd-takeover__layout--leotech-event .kbd-takeover__detail-label {
	color: var(--leotech-ann-slate);
	font-family: "TTHovesPro", sans-serif;
	font-size: calc(clamp(14px, 1.01vw, 17.5px) * var(--ann-text-scale, 1));
	font-weight: 400;
	line-height: 1.55;
}

/* Figma uses PP Neue Machina Regular; the theme ships Light (300) as the closest face. */
.kbd-takeover__layout--leotech-event .kbd-takeover__detail-value {
	color: var(--leotech-ann-navy);
	font-family: "PP Neue Machina Inktrap", sans-serif;
	font-size: calc(clamp(16px, 1.16vw, 20px) * var(--ann-text-scale, 1));
	font-weight: 300;
	line-height: 1.55;
	white-space: nowrap;
}

.kbd-takeover__layout--leotech-event .kbd-takeover__rule {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--leotech-ann-slate);
	background: none;
	opacity: 1;
}

.kbd-takeover__layout--leotech-event .kbd-takeover__body {
	max-width: 681px;
	color: var(--leotech-ann-slate);
	font-family: "TTHovesPro", sans-serif;
	font-size: calc(clamp(17px, 1.39vw, 24px) * var(--ann-text-scale, 1));
	font-weight: 400;
	line-height: 1.55;
}

.kbd-takeover__layout--leotech-event .kbd-takeover__body strong {
	font-weight: 700;
}

.kbd-takeover__layout--leotech-event .kbd-takeover__cta {
	margin: 0;
}

/*
 * Button: solid blue, 20px label, 30px arrow (the Figma asset points up,
 * so it's turned 90deg). Fill and padding sit on the wrapper because
 * custom.css forces `padding: 0; background: transparent` on every
 * .wp-block-button__link.
 */
.kbd-takeover__layout--leotech-event .wp-block-button {
	padding: clamp(12px, 1.04vw, 18px) 24px;
	background-color: var(--leotech-ann-blue);
	border: 1px solid var(--leotech-ann-blue);
	border-radius: 5px;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

.kbd-takeover__layout--leotech-event .wp-block-button:has(.wp-block-button__link:hover),
.kbd-takeover__layout--leotech-event .wp-block-button:has(.wp-block-button__link:focus-visible) {
	background-color: #0249c6;
	border-color: #0249c6;
}

.kbd-takeover__layout--leotech-event .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	column-gap: 8px;
	color: #f7f8f9;
	font-family: "TTHovesPro", sans-serif;
	font-size: calc(clamp(16px, 1.16vw, 20px) * var(--ann-text-scale, 1));
	font-weight: 400;
	line-height: 1.55;
	text-decoration: none;
}

.kbd-takeover__layout--leotech-event .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	background: url("/wp-content/themes/leotech/assets/images/announcements/button-arrow.svg") center / 30px 30px no-repeat;
	transform: rotate(90deg);
	transition: translate 0.35s ease;
}

.kbd-takeover__layout--leotech-event .wp-block-button__link:hover::after,
.kbd-takeover__layout--leotech-event .wp-block-button__link:focus-visible::after {
	translate: 4px 0;
}

.kbd-takeover__layout--leotech-event .wp-block-button__link:focus-visible {
	outline: 2px solid var(--leotech-ann-blue);
	outline-offset: 6px;
}

/* Media column: starts flush under the header, 10px corners. */
.kbd-takeover__layout--leotech-event .kbd-takeover__media {
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

.kbd-takeover__layout--leotech-event .kbd-takeover__media img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Image variant: tall image beside the whole copy column (630 x 654). */
.kbd-takeover__layout--leotech-event-image .kbd-takeover__copy {
	padding-bottom: var(--ann-pad);
}

.kbd-takeover__layout--leotech-event-image .kbd-takeover__media {
	aspect-ratio: 630 / 654;
}

.kbd-takeover__layout--leotech-event-image .kbd-takeover__media img {
	object-fit: cover;
}

/* Graphic variant: logo centered in a 630 x 378 box, then a full-width rule. */
.kbd-takeover__layout--leotech-event-graphic .kbd-takeover__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 630 / 378;
}

.kbd-takeover__layout--leotech-event-graphic .kbd-takeover__media img {
	width: 88.9%;
	height: auto;
	object-fit: contain;
}

.kbd-takeover__layout--leotech-event-graphic > .kbd-takeover__rule {
	width: auto;
	margin: var(--ann-gap) var(--ann-pad) 0;
}

.kbd-takeover__layout--leotech-event-graphic .kbd-takeover__footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ann-gap);
	padding: var(--ann-gap) var(--ann-pad) var(--ann-pad);
}

/* Narrow: stack, media first under the header. */
@media (max-width: 899.98px) {
	.kbd-takeover__layout--leotech-event .kbd-takeover__columns {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--ann-pad);
	}

	.kbd-takeover__layout--leotech-event .kbd-takeover__media {
		order: -1;
	}

	.kbd-takeover__layout--leotech-event-image .kbd-takeover__media {
		aspect-ratio: 16 / 9;
	}

	.kbd-takeover__layout--leotech-event-graphic .kbd-takeover__media {
		aspect-ratio: auto;
		justify-content: flex-start;
	}

	.kbd-takeover__layout--leotech-event-graphic .kbd-takeover__media img {
		width: min(280px, 100%);
	}
}

@media (max-width: 767.98px) {
	.kbd-hello-bar__inner {
		font-size: 14px;
	}

	.kbd-takeover__layout--leotech-event .kbd-takeover__detail-value {
		white-space: normal;
	}
}