/* =========================================================
   ZW BRAND LOGO — inc/brand-logo.php
   @version 1.7.0

   Sizes all come from --zwl-h (the logo height you set in the
   Customizer). The icon is a square that tall; the text scales to match.
   ========================================================= */

.zwl-wrap {
	--zwl-h: var(--zwl-h-user, 40px);   /* --zwl-h-user comes from the Customizer */
	--zwl-a: #ffffff;
	--zwl-b: #f59e0b;
	--zwl-icon-color: #f59e0b;
	--zwl-glow: #f59e0b;
	--zwl-span: 60px;          /* distance between top and bottom flare */
	--zwl-overlap: -0.1em;     /* how far WHEAT tucks into the H in ZACH (more negative = more overlap) */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Screen-reader-only text: the brand name, always */
.zwl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- The link ---------- */
.zwl {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--zwl-h) * .22);
	height: calc(var(--zwl-h) + 10px);
	padding: 0 calc(var(--zwl-h) * .3);
	text-decoration: none !important;
	line-height: 1;
}

/* No outline, border or underline on hover/click */
.zwl,
.zwl:hover,
.zwl:active,
.zwl:focus {
	outline: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
/* Keyboard users still get a visible ring (Tab key only, never on mouse click) */
.zwl:focus-visible {
	outline: 1px dashed rgba(245, 194, 107, .7) !important;
	outline-offset: 2px;
}

/* ---------- Icon: always a square, never taller than the logo ---------- */
.zwl-icon {
	flex: none;
	width: var(--zwl-h);
	height: var(--zwl-h);
	display: grid;
	place-items: center;
	color: var(--zwl-icon-color);
}
.zwl-icon svg,
.zwl-icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;      /* wide or tall images shrink to fit the square */
}

/* Glow follows the icon's shape (works on transparent PNGs too) */
.zwl-glow-soft   .zwl-icon.is-svg svg,
.zwl-glow-soft   .zwl-icon.is-glow img { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--zwl-glow) 55%, transparent)); }
.zwl-glow-strong .zwl-icon.is-svg svg,
.zwl-glow-strong .zwl-icon.is-glow img { filter: drop-shadow(0 0 2px var(--zwl-glow)) drop-shadow(0 0 6px var(--zwl-glow)) drop-shadow(0 0 12px var(--zwl-glow)); }

/* LCD font (DSEG7 Classic, SIL Open Font License, see assets/fonts/DSEG-LICENSE.txt).
   Browsers only download it when an LCD line actually shows. */
@font-face {
	font-family: "ZWL DSEG7";
	src: url("../fonts/DSEG7Classic-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* ---------- Text ---------- */
.zwl-text {
	display: inline-flex;
	align-items: center;
	font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
	font-size: calc(var(--zwl-h) * 1.02);
	letter-spacing: .03em;
	white-space: nowrap;
	/* Bebas sits a hair high; nudge it to optical center */
	padding-top: .06em;
}
.zwl-type { display: inline-flex; align-items: center; }
.zwl-a { color: var(--zwl-a); }
.zwl-b { color: var(--zwl-b); margin-left: var(--zwl-overlap); }
.zwl-msg { white-space: pre; }

/* ---------- LCD lines ("{time} | | lcd") ---------- */
.zwl-lcd {
	--zwl-lcd: var(--zwl-b);
	position: relative;
	display: inline-block;
	font-family: "ZWL DSEG7", var(--zwl-mono, "DM Mono", monospace);
	font-weight: 700;
	font-size: calc(var(--zwl-h) * .6);
	line-height: 1;
	letter-spacing: .02em;
	white-space: pre;
	margin-top: -.02em;
}
/* Unlit segments behind the digits, like a real display */
.zwl-lcd-ghost { color: color-mix(in srgb, var(--zwl-lcd) 9%, transparent); }
.zwl-lcd-on {
	position: absolute;
	left: 0; top: 0;
	color: var(--zwl-lcd);
	text-shadow: 0 0 8px color-mix(in srgb, var(--zwl-lcd) 60%, transparent), 0 0 2px var(--zwl-lcd);
}
.zwl-lcd-colon { animation: zwl-colon 1s steps(1) infinite; }
@keyframes zwl-colon { 50% { opacity: .15; } }
.zwl-lcd-ampm {
	align-self: flex-end;
	margin: 0 0 .2em .35em;
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: calc(var(--zwl-h) * .26);
	letter-spacing: .1em;
	opacity: .85;
}
.zwl.is-lcd .zwl-cursor { display: none !important; }

/* Glowing cursor (from the cursor-logo mockup) */
.zwl-cursor { display: none; }
.zwl.has-cursor .zwl-cursor {
	display: inline-block;
	width: max(2px, calc(var(--zwl-h) * .07));
	height: .72em;
	margin-left: .08em;
	margin-top: -.08em;
	border-radius: 1px;
	background: #fff;
	box-shadow: 0 0 4px rgba(255,255,255,.9), 0 0 10px rgba(255,255,255,.6), 0 0 20px rgba(255,255,255,.3);
	animation: zwl-blink 1.2s step-end infinite;
}
.zwl.is-typing .zwl-cursor { animation: none; opacity: 1; }
@keyframes zwl-blink { 50% { opacity: 0; box-shadow: none; } }

/* ---------- Solar flares (top + bottom edge) ---------- */
/* Built in: bright white-hot center, amber body, fading to a sharp point at each end */
.zwl-flares-css::before,
.zwl-flares-css::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 8px;
	pointer-events: none;
	background:
		radial-gradient(50% 22% at 50% 50%, #fff7e0 0%, var(--zwl-glow) 38%, transparent 100%),
		radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--zwl-glow) 55%, transparent) 0%, transparent 100%);
}
/* With flares on, the logo box is as tall as the flare spread (60px default).
   In the 64px header the top flare rides the top edge and the bottom flare
   lands on the amber border line: a sun breaking over the horizon. */
.zwl.zwl-flares-css,
.zwl.zwl-flares-image { height: var(--zwl-span); }
.zwl-flares-css::before { top: -4px; }
.zwl-flares-css::after  { bottom: -4px; }

/* Your own flare image, stretched edge to edge behind the logo */
.zwl-flares-image {
	background: var(--zwl-flare-img) center / 100% 100% no-repeat;
}

/* ---------- Sister sites dropdown ---------- */
.zwl-more {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 4px;
	background: none;
	color: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: color .2s, border-color .2s, transform .2s;
}
.zwl-more svg { width: 12px; height: 8px; transition: transform .2s; }
.zwl-more:hover { color: var(--zwl-b); }
.zwl-more:focus { outline: none; }
.zwl-more:focus-visible { border-color: rgba(245, 194, 107, .6); }
.zwl-more[aria-expanded="true"] { color: var(--zwl-b); }
.zwl-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.zwl-sites {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 200;
	min-width: 100%;
	display: grid;
	gap: 2px;
	padding: 8px;
	background: #0a1524;
	border: 1px solid rgba(245, 194, 107, .25);
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.zwl-sites[hidden] { display: none; }
.zwl-sites a {
	display: flex;
	align-items: center;
	height: calc(var(--zwl-h) + 12px);
	padding: 0 10px;
	border-radius: 5px;
	text-decoration: none !important;
	border: 0 !important;
	outline: none;
}
.zwl-sites a:hover,
.zwl-sites a:focus-visible { background: rgba(245, 158, 11, .08); }
.zwl-sites img {
	height: var(--zwl-h);
	width: auto;
	max-width: 260px;
	object-fit: contain;
	display: block;
}
.zwl-site-name {
	font-family: "Bebas Neue", Impact, sans-serif;
	font-size: calc(var(--zwl-h) * .7);
	letter-spacing: .04em;
	color: #fff;
	white-space: nowrap;
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
	.zwl-wrap { --zwl-h: min(var(--zwl-h-user, 40px), 32px); }
}

@media (prefers-reduced-motion: reduce) {
	.zwl.has-cursor .zwl-cursor,
	.zwl-lcd-colon { animation: none; }
}