/* Halloween 2026 - remove after the event, together with the marked blocks of header.php, footer.php, main/index.php, main/head_styles.php,
   main/hero.php and main/seo.php. The look of the event on every page: the bar above the header, the menu item, the drawer row, the footer
   link and event line and the front page banner. main/head_styles.php loads this sheet only while the switch ($lkHalloweenOn, top of
   header.php) is on. The event's pumpkin colours on Loki's own tokens and shapes (loki.css). */
.lk-hwc-bar, .lk-hwc-foot, .lk-hw-menu, .lk-hw-drawer, .lk-hw-foot, .lk-hw-banner { --hw-pumpkin: #ee8b36; --hw-pumpkin-2: #ffb071; --hw-pumpkin-3: #ffd6b3; --hw-ink: #2a1204; --hw-grad: linear-gradient(135deg, #ffb071, #ee8b36 55%, #d9731f); }
.lk-hw-pumpkin { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em; }

/* The bar above the header, on every page: it scrolls away with the page while the header stays. Wide screens: pumpkin, title, the event
   in one sentence, Guide and Leaderboard; under 1024 px the sentence goes, under 480 px the chips' icons, under 360 px the pumpkin. On touch
   screens both links are 44 px tall. */
:root { --hwc-bar-h: 40px; }
@media (pointer: coarse), (max-width: 767.98px) { :root { --hwc-bar-h: 44px; } }
.lk-hwc-bar {
	height: var(--hwc-bar-h);
	overflow: hidden;
	background: radial-gradient(42% 180% at 50% 0, rgba(238, 139, 54, .2), rgba(238, 139, 54, 0) 72%), linear-gradient(90deg, var(--lk-bg), var(--lk-surface-2) 50%, var(--lk-bg));
	border-bottom: 1px solid rgba(238, 139, 54, .38);
	color: var(--lk-text-2);
	font: 600 var(--lk-fs-xs)/1.25 var(--lk-font);
}
.lk-hwc-bar__inner { display: flex; align-items: stretch; justify-content: center; gap: 10px; height: 100%; }
.lk-hwc-bar a { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit !important; text-decoration: none; }
.lk-hwc-bar a:hover { color: var(--lk-text) !important; }
.lk-hwc-bar a:focus-visible { outline-offset: -3px; }
.lk-hwc-bar__main { flex: 0 1 auto; }
.lk-hwc-bar__board { flex: none; }
.lk-hwc-bar__main > .lk-hw-pumpkin { width: 22px; height: 22px; color: var(--hw-pumpkin); }
.lk-hwc-bar__title { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hw-pumpkin-2); font: 700 var(--lk-fs-sm)/1.2 var(--lk-font-display); }
.lk-hwc-bar__text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-hwc-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 12px; border-radius: var(--lk-radius-pill); background: rgba(238, 139, 54, .16); color: var(--hw-pumpkin-3); font: 700 var(--lk-fs-xs)/1 var(--lk-font-display); transition: background-color .18s var(--lk-ease), filter .18s var(--lk-ease); }
.lk-hwc-chip i { font-size: 12px; }
.lk-hwc-chip--main { background: var(--hw-grad); color: var(--hw-ink); }
.lk-hwc-bar__main:hover .lk-hwc-chip--main { filter: brightness(1.08); }
.lk-hwc-bar__board:hover .lk-hwc-chip { background: rgba(238, 139, 54, .32); color: var(--lk-text); }
@media (max-width: 1023.98px) { .lk-hwc-bar__text { display: none; } }
@media (max-width: 479.98px) {
	.lk-hwc-bar__inner, .lk-hwc-bar a { gap: 8px; }
	.lk-hwc-bar__title { flex: 0 1 auto; min-width: 0; }
	.lk-hwc-chip { padding: 0 10px; }
	.lk-hwc-chip i { display: none; }
}
@media (max-width: 359.98px) { .lk-hwc-bar__main > .lk-hw-pumpkin { display: none; } }
@media print { .lk-hwc-bar { display: none; } }

/* The drawer hangs under the header from the top of the window, so while the bar is in view its first rows would slide under the header. */
.lk-hwc-bar ~ .lk-drawer { padding-top: calc(16px + var(--hwc-bar-h)); }

/* The item of the Guides menu */
.lk-hw-menu { color: var(--hw-pumpkin-2) !important; }
.lk-hw-menu .lk-hw-pumpkin { color: var(--hw-pumpkin); }

/* The drawer row */
.lk-hw-drawer { color: var(--hw-pumpkin-2) !important; }
.lk-hw-drawer .lk-hw-pumpkin { width: 20px; height: 20px; color: var(--hw-pumpkin); }

/* The footer link and the event line under the description */
.lk-footer a.lk-hw-foot { color: var(--hw-pumpkin-2) !important; }
.lk-footer a.lk-hw-foot:hover { color: var(--hw-pumpkin-3) !important; }
.lk-footer .lk-hwc-foot { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; padding: 10px 14px; border: 1px solid rgba(238, 139, 54, .3); border-radius: var(--lk-radius); background: linear-gradient(135deg, rgba(238, 139, 54, .1), rgba(161, 53, 255, .08)); color: var(--lk-text-2); line-height: 1.5; }
.lk-hwc-foot > .lk-hw-pumpkin { width: 20px; height: 20px; margin-top: 1px; color: var(--hw-pumpkin); }
.lk-hwc-foot strong { color: var(--hw-pumpkin-2); }
.lk-footer .lk-hwc-foot a { color: var(--hw-pumpkin-2) !important; text-decoration: underline; }
.lk-footer .lk-hwc-foot a:hover { color: var(--lk-text) !important; }

/* The front page banner, under the server facts */
.lk-hw-banner { position: relative; padding-block: 32px 0; }
.lk-hw-banner__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	padding: 24px;
	border: 1px solid rgba(238, 139, 54, .42);
	border-radius: var(--lk-radius-lg);
	background: radial-gradient(60% 140% at 0 50%, rgba(238, 139, 54, .22), rgba(238, 139, 54, 0) 70%), radial-gradient(50% 120% at 100% 0, rgba(161, 53, 255, .24), rgba(161, 53, 255, 0) 70%), var(--lk-surface-2);
	box-shadow: var(--lk-shadow);
}
.lk-hw-banner__icon { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: var(--lk-radius-lg); background: rgba(238, 139, 54, .16); color: var(--hw-pumpkin-2); }
.lk-hw-banner__icon .lk-hw-pumpkin { width: 44px; height: 44px; }
.lk-hw-banner__text { flex: 1 1 320px; min-width: 0; }
.lk-hw-banner__text .lk-eyebrow { color: var(--hw-pumpkin-2); }
.lk-hw-banner__text h2 { margin: 6px 0 8px; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.lk-hw-banner__text p:last-child { margin: 0; color: var(--lk-text-2); }
.lk-btn.lk-hw-banner__cta { flex: none; --lk-btn-bg: var(--hw-grad); --lk-btn-bg-hover: var(--hw-grad); color: var(--hw-ink) !important; }
.lk-btn.lk-hw-banner__cta:hover { color: var(--hw-ink) !important; filter: brightness(1.06); }
@media (max-width: 559.98px) {
	.lk-hw-banner__text { flex-basis: 100%; }
	.lk-btn.lk-hw-banner__cta { flex: 1 1 100%; justify-content: center; }
}