/* Spartan AI redesign: header logo, larger and sharper.
   Loads after sprt-10-header.css and overrides its logo rules only.

   The two <img> files the theme prints are 327x109 and 280x93 with transparent
   padding baked in, so the artwork itself was only about 34px tall on desktop
   and went soft on 2x screens. The same logo exists at 1430x482 in
   uploads/2025/12/The-Spartan-AI-Logo.png (artwork box 1208x287 at 111,95).
   It is painted here as the link background, cropped to the artwork box, and
   the <img> tags stay in the markup as the link's accessible name.

   Everything is derived from --sprt-logo-h, the height of the visible artwork.
   The header row keeps its own paper background, so the logo does not depend
   on whatever sits under the header. */

body.sprt {
	--sprt-logo-h: 36px;     /* phones */
	--sprt-head-h: 68px;     /* was 64px */
}

@media only screen and (min-width: 601px) {
	body.sprt {
		--sprt-logo-h: 44px;
		--sprt-head-h: 76px;
	}
}

@media only screen and (min-width: 1201px) {
	body.sprt {
		--sprt-logo-h: 46px;
		--sprt-head-h: 84px;   /* was 72px */
	}
}

@media only screen and (min-width: 1360px) {
	body.sprt {
		--sprt-logo-h: 54px;
	}
}

body.sprt #firwlMenu .firwl-menu__logo {
	overflow: visible;
}

body.sprt #firwlMenu .firwl-menu__logo .firwl-logolink {
	position: relative;
	display: block;
	flex: 0 0 auto;
	/* 1208 / 287 */
	width: calc(var(--sprt-logo-h) * 4.2091);
	height: var(--sprt-logo-h);
	background-image: url("../../../uploads/2025/12/The-Spartan-AI-Logo.png");
	background-repeat: no-repeat;
	/* 1430 / 287, then the artwork offset 111 / 287 and 95 / 287 */
	background-size: calc(var(--sprt-logo-h) * 4.9826) auto;
	background-position: calc(var(--sprt-logo-h) * -0.3868) calc(var(--sprt-logo-h) * -0.3310);
	border-radius: var(--sprt-radius-control);
	outline-offset: 6px; /* the global :focus-visible ring from the tokens file, moved clear of the artwork */
	transform-origin: left center;
	transition: transform 0.25s ease;
}

/* Keep the images for assistive tech (alt text names the link), not for display */
body.sprt #firwlMenu .firwl-menu__logo .firwl-logolink img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 1px;
	height: 1px;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) {
	body.sprt #firwlMenu .firwl-menu__logo .firwl-logolink:hover {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sprt #firwlMenu .firwl-menu__logo .firwl-logolink {
		transition: none;
	}

	body.sprt #firwlMenu .firwl-menu__logo .firwl-logolink:hover {
		transform: none;
	}
}

/* ---------- Logo on the left, nav after it (1201px and up) ----------
   sprt-10-header.css centred the nav on the page between two equal side
   columns (minmax(0, 1fr) auto minmax(0, 1fr)). The logo column could then
   shrink below the logo's width: at 1201-1360px there were only a few pixels
   to spare, and any wider rendering of the menu (Safari, a zoomed page, a
   longer label) pushed the nav over the logo. Now the logo takes its own
   column at the left edge, the buttons take theirs at the right, and the nav
   is centred in the space left between them, so it can never reach the logo. */
@media only screen and (min-width: 1201px) {
	body.sprt #firwlMenu .firwl-menu__cont {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: clamp(24px, 3vw, 48px);
	}

	body.sprt #firwlMenu .firwl-menu__logo {
		grid-column: 1;
		justify-self: start;
	}

	body.sprt #firwlMenuNav {
		grid-column: 2;
		justify-self: center;
		justify-self: safe center;   /* if the menu ever outgrows its column, it overflows toward the buttons, never back over the logo */
		min-width: 0;
	}

	body.sprt #firwlMenu .firwl-menubtns {
		grid-column: 3;
		justify-self: end;
	}
}