/* =========================================================
		   CROAKITOAD DESIGN TOKENS
		   ========================================================= */

		:root {
			--croaki-header-bg: #06100c;
			--croaki-header-bg-solid: #030906;
			--croaki-header-panel: #0c1913;
			--croaki-header-panel-hover: #13251c;

			--croaki-green: #69e68d;
			--croaki-green-light: #96ffae;
			--croaki-green-dark: #173d27;

			--croaki-white: #f5fff7;
			--croaki-muted: #a9beb0;

			--croaki-border: rgba(105, 230, 141, 0.22);
			--croaki-border-strong: rgba(105, 230, 141, 0.42);

			--croaki-header-height: 82px;
			--croaki-header-radius: 10px;

			--croaki-header-shadow:
				0 12px 36px rgba(0, 0, 0, 0.32);

			--croaki-dropdown-shadow:
				0 18px 48px rgba(0, 0, 0, 0.48);
		}


		/* =========================================================
		   GLOBAL HEADER SHELL
		   ========================================================= */

		.site-header {
			position: relative;
			z-index: 9999;
			width: 100%;
			background:
				linear-gradient(
					180deg,
					rgba(8, 24, 16, 0.98) 0%,
					rgba(3, 11, 7, 0.98) 100%
				);
			border-bottom: 1px solid var(--croaki-border);
			box-shadow: var(--croaki-header-shadow);
		}

		.site-header::after {
			content: "";
			position: absolute;
			z-index: 3;
			left: 0;
			right: 0;
			bottom: -1px;
			height: 2px;
			background:
				linear-gradient(
					90deg,
					transparent 0%,
					rgba(105, 230, 141, 0.25) 8%,
					var(--croaki-green) 30%,
					var(--croaki-green-light) 50%,
					var(--croaki-green) 70%,
					rgba(105, 230, 141, 0.25) 92%,
					transparent 100%
				);
			opacity: 0.85;
			pointer-events: none;
		}

		.site-header,
		.inside-header,
		.main-navigation,
		.main-navigation .inside-navigation {
			background-color: transparent;
		}


		/* =========================================================
		   DESKTOP HEADER LAYOUT
		   ========================================================= */

		@media (min-width: 1025px) {

			.site-header .inside-header {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				gap: 32px;
				min-height: var(--croaki-header-height);
				padding: 12px 26px;
			}

			.site-branding,
			.site-logo {
				flex: 0 0 auto;
				min-width: 260px;
				margin: 0;
			}

			.main-navigation {
				flex: 1 1 auto;
				min-width: 0;
				border: 0;
			}

			.main-navigation .inside-navigation {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				padding: 0;
			}

			.main-navigation .main-nav {
				flex: 1 1 auto;
			}

			.main-navigation .main-nav > ul {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				flex-wrap: nowrap;
				gap: 4px;
				width: 100%;
			}
		}


		/* =========================================================
		   BRANDING
		   ========================================================= */

		.site-branding {
			position: relative;
		}

		.site-title {
			margin: 0;
			font-size: clamp(1.15rem, 1.6vw, 1.55rem);
			font-weight: 950;
			line-height: 1.05;
			letter-spacing: -0.035em;
		}

		.site-title a {
			display: inline-block;
			color: var(--croaki-white);
			text-decoration: none;
			text-shadow:
				0 0 22px rgba(105, 230, 141, 0.08);
			transition:
				color 180ms ease,
				text-shadow 180ms ease,
				transform 180ms ease;
		}

		.site-title a:hover,
		.site-title a:focus-visible {
			color: var(--croaki-green-light);
			text-shadow:
				0 0 24px rgba(105, 230, 141, 0.24);
			transform: translateY(-1px);
		}

		.site-description {
			margin: 5px 0 0;
			color: var(--croaki-muted);
			font-size: 0.72rem;
			font-weight: 700;
			line-height: 1.25;
			letter-spacing: 0.095em;
			text-transform: uppercase;
		}

		.site-logo img,
		.custom-logo {
			display: block;
			width: auto;
			max-width: 230px;
			max-height: 58px;
			object-fit: contain;
		}


		/* =========================================================
		   MAIN NAVIGATION
		   ========================================================= */

		.main-navigation {
			position: relative;
			z-index: 20;
		}

		.main-navigation .main-nav > ul > li {
			position: relative;
			background: transparent;
		}

		.main-navigation .main-nav > ul > li > a {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 46px;
			padding: 13px 14px;

			color: var(--croaki-white);
			background: transparent;

			border: 1px solid transparent;
			border-radius: var(--croaki-header-radius);

			font-size: 0.78rem;
			font-weight: 850;
			line-height: 1;
			letter-spacing: 0.055em;
			text-transform: uppercase;
			white-space: nowrap;

			transition:
				color 180ms ease,
				background-color 180ms ease,
				border-color 180ms ease,
				box-shadow 180ms ease,
				transform 180ms ease;
		}

		.main-navigation .main-nav > ul > li > a::after {
			content: "";
			position: absolute;
			left: 50%;
			right: 50%;
			bottom: 6px;
			height: 2px;
			background: var(--croaki-green);
			border-radius: 999px;
			opacity: 0;
			transition:
				left 180ms ease,
				right 180ms ease,
				opacity 180ms ease;
		}

		.main-navigation .main-nav > ul > li > a:hover,
		.main-navigation .main-nav > ul > li.sfHover > a {
			color: var(--croaki-green-light);
			background: rgba(105, 230, 141, 0.07);
			border-color: rgba(105, 230, 141, 0.12);
			transform: translateY(-1px);
		}

		.main-navigation .main-nav > ul > li > a:hover::after,
		.main-navigation .main-nav > ul > li.sfHover > a::after {
			left: 24%;
			right: 24%;
			opacity: 0.75;
		}

		.main-navigation .main-nav > ul > li.current-menu-item > a,
		.main-navigation .main-nav > ul > li.current-menu-ancestor > a,
		.main-navigation .main-nav > ul > li.current_page_item > a,
		.main-navigation .main-nav > ul > li.current_page_ancestor > a {
			color: var(--croaki-green-light);
			background:
				linear-gradient(
					180deg,
					rgba(105, 230, 141, 0.13),
					rgba(105, 230, 141, 0.07)
				);
			border-color: rgba(105, 230, 141, 0.16);
			box-shadow:
				inset 0 1px 0 rgba(255, 255, 255, 0.035),
				0 0 22px rgba(105, 230, 141, 0.06);
		}

		.main-navigation .main-nav > ul > li.current-menu-item > a::after,
		.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after,
		.main-navigation .main-nav > ul > li.current_page_item > a::after,
		.main-navigation .main-nav > ul > li.current_page_ancestor > a::after {
			left: 20%;
			right: 20%;
			opacity: 1;
		}


		/* =========================================================
		   DROPDOWN INDICATORS
		   ========================================================= */

		.main-navigation .dropdown-menu-toggle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin-left: 6px;
			padding: 0;
			color: var(--croaki-green);
			transition:
				color 180ms ease,
				transform 180ms ease;
		}

		.main-navigation li.sfHover > a .dropdown-menu-toggle,
		.main-navigation a:hover .dropdown-menu-toggle {
			color: var(--croaki-green-light);
			transform: translateY(1px);
		}


		/* =========================================================
		   DROPDOWN PANELS
		   ========================================================= */

		.main-navigation ul ul {
			min-width: 235px;
			padding: 8px;
			background:
				linear-gradient(
					180deg,
					rgba(17, 36, 26, 0.99),
					rgba(7, 20, 13, 0.99)
				);
			border: 1px solid var(--croaki-border-strong);
			border-radius: 12px;
			box-shadow: var(--croaki-dropdown-shadow);
			overflow: hidden;
		}

		.main-navigation ul ul::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background:
				linear-gradient(
					135deg,
					rgba(255, 255, 255, 0.035),
					transparent 40%
				);
			pointer-events: none;
		}

		.main-navigation ul ul li {
			position: relative;
			z-index: 2;
			background: transparent;
		}

		.main-navigation ul ul li + li {
			margin-top: 3px;
		}

		.main-navigation ul ul li a {
			display: flex;
			align-items: center;
			min-height: 42px;
			padding: 11px 13px;

			color: var(--croaki-white);
			background: transparent;

			border: 1px solid transparent;
			border-radius: 8px;

			font-size: 0.84rem;
			font-weight: 700;
			line-height: 1.3;
			letter-spacing: 0.01em;
			text-transform: none;

			transition:
				color 160ms ease,
				background-color 160ms ease,
				border-color 160ms ease,
				padding-left 160ms ease;
		}

		.main-navigation ul ul li a:hover,
		.main-navigation ul ul li.sfHover > a,
		.main-navigation ul ul li.current-menu-item > a {
			color: var(--croaki-green-light);
			background: rgba(105, 230, 141, 0.09);
			border-color: rgba(105, 230, 141, 0.13);
			padding-left: 18px;
		}
			/* =========================================================
		   WATCH LIVE BUTTON
		   The final top-level menu item must be Watch Live.
		   ========================================================= */

		@media (min-width: 1025px) {

			.main-navigation .main-nav > ul > li.croakitoad-nav-live {
				margin-left: auto;
				padding-left: 14px;
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live > a {
				min-height: 44px;
				padding: 12px 21px;

				color: #031008;
				background:
					linear-gradient(
						135deg,
						#9dffb5 0%,
						var(--croaki-green) 55%,
						#58d87e 100%
					);

				border: 1px solid rgba(255, 255, 255, 0.28);
				border-radius: 999px;

				font-weight: 950;
				letter-spacing: 0.045em;

				box-shadow:
					0 9px 24px rgba(105, 230, 141, 0.19),
					inset 0 1px 0 rgba(255, 255, 255, 0.34);

				transition:
					color 180ms ease,
					background 180ms ease,
					border-color 180ms ease,
					box-shadow 180ms ease,
					transform 180ms ease;
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live > a::before {
				content: "";
				display: inline-block;
				width: 8px;
				height: 8px;
				margin-right: 8px;
				background: #073e1b;
				border-radius: 50%;
				box-shadow:
					0 0 0 3px rgba(7, 62, 27, 0.12),
					0 0 10px rgba(7, 62, 27, 0.24);
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live > a::after {
				display: none;
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live > a:hover,
			.main-navigation .main-nav > ul > li.croakitoad-nav-live.sfHover > a,
			.main-navigation .main-nav > ul > li.croakitoad-nav-live.current-menu-item > a {
				color: #020b05;
				background:
					linear-gradient(
						135deg,
						#c1ffcf 0%,
						#91ffab 55%,
						#70ec91 100%
					);

				border-color: rgba(255, 255, 255, 0.43);

				box-shadow:
					0 13px 31px rgba(105, 230, 141, 0.3),
					0 0 25px rgba(105, 230, 141, 0.11),
					inset 0 1px 0 rgba(255, 255, 255, 0.5);

				transform: translateY(-2px);
			}
		}


		/* =========================================================
		   OPTIONAL SEARCH / MENU ICONS
		   ========================================================= */

		.menu-bar-items {
			display: flex;
			align-items: center;
			gap: 4px;
			margin-left: 8px;
		}

		.menu-bar-item > a,
		.search-item > a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			padding: 0;

			color: var(--croaki-white);
			background: rgba(255, 255, 255, 0.025);

			border: 1px solid rgba(255, 255, 255, 0.055);
			border-radius: 10px;

			transition:
				color 180ms ease,
				background-color 180ms ease,
				border-color 180ms ease,
				transform 180ms ease;
		}

		.menu-bar-item > a:hover,
		.search-item > a:hover {
			color: var(--croaki-green-light);
			background: rgba(105, 230, 141, 0.08);
			border-color: rgba(105, 230, 141, 0.16);
			transform: translateY(-1px);
		}

		.navigation-search {
			background: var(--croaki-header-panel);
			border-top: 1px solid var(--croaki-border);
			box-shadow: var(--croaki-dropdown-shadow);
		}

		.navigation-search input[type="search"] {
			color: var(--croaki-white);
			background: var(--croaki-header-panel);
			border: 1px solid var(--croaki-border);
			border-radius: 9px;
		}

		.navigation-search input[type="search"]::placeholder {
			color: var(--croaki-muted);
		}


		/* =========================================================
		   UNIVERSAL FIXED GLASS HEADER — v4.8.4
		   NASA-style behavior: the complete Croakitoad header/menu remains
		   attached to the viewport while the hero and page content scroll.
		   Core JS measures the real closed header height and reserves that
		   space on the page so content never jumps underneath it.
		   ========================================================= */

		body.croakitoad-core-active .site-header {
			position: fixed !important;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 9998;
			backdrop-filter: blur(15px);
			-webkit-backdrop-filter: blur(15px);
			transform: translateZ(0);
			will-change: transform;
		}

		body.admin-bar.croakitoad-core-active .site-header {
			top: 32px;
		}

		@media screen and (max-width: 782px) {
			body.admin-bar.croakitoad-core-active .site-header {
				top: 46px;
			}
		}

		body.croakitoad-core-active {
			padding-top: var(--croaki-sticky-header-height, var(--croaki-header-height, 82px));
		}

		html {
			scroll-padding-top: calc(var(--croaki-sticky-header-height, var(--croaki-header-height, 82px)) + 16px);
		}


		/* =========================================================
		   MEDIUM DESKTOP AND SMALL LAPTOPS
		   ========================================================= */

		@media (min-width: 1025px) and (max-width: 1280px) {

			.site-header .inside-header {
				gap: 18px;
				padding-left: 18px;
				padding-right: 18px;
			}

			.site-branding,
			.site-logo {
				min-width: 205px;
			}

			.main-navigation .main-nav > ul {
				gap: 1px;
			}

			.main-navigation .main-nav > ul > li > a {
				padding-left: 10px;
				padding-right: 10px;
				font-size: 0.72rem;
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live {
				padding-left: 8px;
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live > a {
				padding-left: 16px;
				padding-right: 16px;
			}
		}


		/* =========================================================
		   TABLET AND MOBILE HEADER
		   ========================================================= */

		@media (max-width: 1024px) {

			.site-header .inside-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 16px;
				min-height: 70px;
				padding: 12px 18px;
			}

			.site-branding,
			.site-logo {
				flex: 1 1 auto;
				min-width: 0;
				margin: 0;
			}

			.site-title {
				font-size: 1.25rem;
			}

			.site-description {
				font-size: 0.65rem;
				letter-spacing: 0.075em;
			}

			.site-logo img,
			.custom-logo {
				max-width: 190px;
				max-height: 50px;
			}

			.main-navigation {
				width: 100%;
				border-top: 1px solid rgba(255, 255, 255, 0.045);
			}

			.main-navigation .inside-navigation {
				display: block;
				padding: 0;
			}

			.menu-toggle {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				min-height: 50px;
				padding: 12px 18px;

				color: var(--croaki-white);
				background: rgba(3, 10, 6, 0.96);

				border: 0;
				border-radius: 0;

				font-size: 0.78rem;
				font-weight: 900;
				letter-spacing: 0.07em;
				text-transform: uppercase;

				transition:
					color 180ms ease,
					background-color 180ms ease;
			}

			.menu-toggle:hover,
			.menu-toggle:focus {
				color: var(--croaki-green-light);
				background: var(--croaki-header-panel);
			}

			.main-navigation.toggled .main-nav > ul {
				display: block;
				padding: 10px 14px 18px;
				background:
					linear-gradient(
						180deg,
						rgba(5, 16, 10, 0.99),
						rgba(2, 8, 5, 0.99)
					);
				border-top: 1px solid var(--croaki-border);
			}

			.main-navigation .main-nav > ul > li {
				width: 100%;
				margin: 0;
			}

			.main-navigation .main-nav > ul > li + li {
				margin-top: 4px;
			}

			.main-navigation .main-nav > ul > li > a {
				justify-content: flex-start;
				min-height: 47px;
				padding: 13px 15px;
				font-size: 0.78rem;
				border-radius: 8px;
			}

			.main-navigation .main-nav > ul > li > a::after {
				display: none;
			}

			.main-navigation .dropdown-menu-toggle {
				margin-left: auto;
				padding-left: 14px;
			}

			.main-navigation ul ul {
				position: static;
				width: auto;
				min-width: 0;
				margin: 4px 8px 10px;
				padding: 6px;

				background: rgba(13, 30, 20, 0.98);
				border-color: rgba(105, 230, 141, 0.17);
				border-radius: 9px;
				box-shadow: none;
			}

			.main-navigation ul ul li a {
				min-height: 41px;
				padding: 10px 13px;
				font-size: 0.81rem;
			}

			.main-navigation ul ul li a:hover,
			.main-navigation ul ul li.sfHover > a,
			.main-navigation ul ul li.current-menu-item > a {
				padding-left: 17px;
			}

			/* Watch Live becomes a full-width mobile action button. */
			.main-navigation .main-nav > ul > li.croakitoad-nav-live {
				margin-top: 13px;
				padding-top: 12px;
				border-top: 1px solid rgba(105, 230, 141, 0.15);
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live > a {
				justify-content: center;
				min-height: 49px;
				padding: 13px 18px;

				color: #031008;
				background:
					linear-gradient(
						135deg,
						var(--croaki-green-light),
						var(--croaki-green)
					);

				border: 1px solid rgba(255, 255, 255, 0.26);
				border-radius: 999px;

				font-weight: 950;

				box-shadow:
					0 8px 22px rgba(105, 230, 141, 0.2),
					inset 0 1px 0 rgba(255, 255, 255, 0.34);
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live > a::before {
				content: "";
				display: inline-block;
				width: 8px;
				height: 8px;
				margin-right: 8px;
				background: #073e1b;
				border-radius: 50%;
			}

			.main-navigation .main-nav > ul > li.croakitoad-nav-live > a:hover {
				color: #020b05;
				background:
					linear-gradient(
						135deg,
						#c1ffcf,
						#82fda0
					);
			}

			.menu-bar-items {
				justify-content: center;
				margin: 0;
				padding: 8px 14px 14px;
				background: var(--croaki-header-bg-solid);
			}
		}


		/* =========================================================
		   SMALL PHONES
		   ========================================================= */

		@media (max-width: 480px) {

			.site-header .inside-header {
				min-height: 62px;
				padding: 10px 14px;
			}

			.site-title {
				font-size: 1.08rem;
			}

			.site-description {
				display: none;
			}

			.site-logo img,
			.custom-logo {
				max-width: 160px;
				max-height: 44px;
			}

			.main-navigation.toggled .main-nav > ul {
				padding-left: 10px;
				padding-right: 10px;
			}
		}


		/* =========================================================
		   ACCESSIBILITY AND MOTION
		   ========================================================= */

		.site-title a:focus-visible,
		.main-navigation a:focus-visible,
		.menu-toggle:focus-visible,
		.menu-bar-item > a:focus-visible {
			outline: 2px solid var(--croaki-green-light);
			outline-offset: 3px;
		}

		@media (prefers-reduced-motion: reduce) {

			.site-title a,
			.main-navigation a,
			.main-navigation .dropdown-menu-toggle,
			.menu-toggle,
			.menu-bar-item > a {
				transition: none !important;
			}
		}
		/* =========================================================
		   CROAKITOAD HEADER FINAL COLOR CORRECTIONS
		   ========================================================= */

		/* Force all desktop navigation states into the Croakitoad
		   green palette and prevent GeneratePress blue from leaking in. */
		.main-navigation .main-nav > ul > li > a,
		.main-navigation .main-nav > ul > li > a:visited {
			color: var(--croaki-white) !important;
		}

		.main-navigation .main-nav > ul > li > a:hover,
		.main-navigation .main-nav > ul > li > a:focus,
		.main-navigation .main-nav > ul > li.sfHover > a,
		.main-navigation .main-nav > ul > li.current-menu-item > a,
		.main-navigation .main-nav > ul > li.current-menu-ancestor > a,
		.main-navigation .main-nav > ul > li.current_page_item > a,
		.main-navigation .main-nav > ul > li.current_page_ancestor > a {
			color: var(--croaki-green-light) !important;
			background-color: rgba(105, 230, 141, 0.10) !important;
			border-color: rgba(105, 230, 141, 0.19) !important;
		}

		/* Force dropdown labels to remain visible. */
		.main-navigation .main-nav ul ul li > a,
		.main-navigation .main-nav ul ul li > a:visited,
		.main-navigation ul ul li a,
		.main-navigation ul ul li a:visited {
			color: #f5fff7 !important;
			background-color: transparent !important;
			opacity: 1 !important;
			text-shadow: none !important;
		}

		.main-navigation .main-nav ul ul li > a:hover,
		.main-navigation .main-nav ul ul li > a:focus,
		.main-navigation .main-nav ul ul li.sfHover > a,
		.main-navigation .main-nav ul ul li.current-menu-item > a {
			color: var(--croaki-green-light) !important;
			background-color: rgba(105, 230, 141, 0.11) !important;
			border-color: rgba(105, 230, 141, 0.18) !important;
		}

		/* Keep dropdown arrows green rather than theme blue. */
		.main-navigation .dropdown-menu-toggle,
		.main-navigation a:hover .dropdown-menu-toggle,
		.main-navigation li.sfHover > a .dropdown-menu-toggle {
			color: var(--croaki-green) !important;
		}

		/* Preserve the special Watch Live button colors despite
		   the stronger navigation overrides above. */
		.main-navigation .main-nav > ul > li.croakitoad-nav-live > a,
		.main-navigation .main-nav > ul > li.croakitoad-nav-live > a:visited {
			color: #031008 !important;
			background:
				linear-gradient(
					135deg,
					#9dffb5 0%,
					var(--croaki-green) 55%,
					#58d87e 100%
				) !important;
		}

		.main-navigation .main-nav > ul > li.croakitoad-nav-live > a:hover,
		.main-navigation .main-nav > ul > li.croakitoad-nav-live > a:focus {
			color: #020b05 !important;
			background:
				linear-gradient(
					135deg,
					#c1ffcf 0%,
					#91ffab 55%,
					#70ec91 100%
				) !important;
		}
			/* =========================================================
		   CROAKITOAD HEADER POLISH — LOGO, SPACING & ANIMATION
		   ========================================================= */

		/* Give the branding area enough room for a horizontal logo. */
		@media (min-width: 1281px) {
			.site-branding,
			.site-logo {
				flex: 0 0 auto;
				width: auto;
				min-width: 235px;
				max-width: 285px;
			}

			.site-logo img,
			.custom-logo {
				width: auto;
				max-width: 270px;
				max-height: 62px;
				object-fit: contain;
				object-position: left center;
			}
		}

		/* Slightly more breathing room between desktop menu items. */
		@media (min-width: 1281px) {
			.main-navigation .main-nav > ul {
				gap: 8px;
			}

			.main-navigation .main-nav > ul > li > a {
				padding-left: 15px;
				padding-right: 15px;
			}
		}

		/* Balanced spacing for laptops and medium desktop screens. */
		@media (min-width: 1025px) and (max-width: 1280px) {
			.site-branding,
			.site-logo {
				min-width: 205px;
				max-width: 230px;
			}

			.site-logo img,
			.custom-logo {
				max-width: 220px;
				max-height: 56px;
			}

			.main-navigation .main-nav > ul {
				gap: 3px;
			}
		}

		/* Make the active-page underline slightly stronger. */
		.main-navigation .main-nav > ul > li > a::after {
			height: 3px;
			bottom: 5px;
			box-shadow:
				0 0 9px rgba(105, 230, 141, 0.25);
		}

		.main-navigation .main-nav > ul > li.current-menu-item > a::after,
		.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after,
		.main-navigation .main-nav > ul > li.current_page_item > a::after,
		.main-navigation .main-nav > ul > li.current_page_ancestor > a::after {
			left: 18%;
			right: 18%;
			opacity: 1;
		}

		/* Add a slow, restrained shimmer to the green divider line. */
		.site-header::after {
			background-size: 220% 100%;
			animation: croaki-header-shimmer 8s ease-in-out infinite;
			will-change: background-position;
		}

		@keyframes croaki-header-shimmer {
			0%,
			100% {
				background-position: 100% 50%;
				opacity: 0.68;
			}

			50% {
				background-position: 0% 50%;
				opacity: 0.92;
			}
		}

		/* A little more depth while the fixed header floats above the page. */
		body.croakitoad-core-active .site-header {
			box-shadow:
				0 12px 34px rgba(0, 0, 0, 0.36),
				0 1px 0 rgba(105, 230, 141, 0.07);
		}

		/* Keep the logo crisp and naturally proportioned. */
		.site-logo a,
		.custom-logo-link {
			display: inline-flex;
			align-items: center;
			justify-content: flex-start;
			line-height: 0;
		}

		.site-logo img,
		.custom-logo {
			height: auto;
			image-rendering: auto;
			transition:
				transform 180ms ease,
				filter 180ms ease;
		}

		.site-logo a:hover img,
		.custom-logo-link:hover img {
			transform: translateY(-1px);
			filter:
				drop-shadow(0 0 10px rgba(105, 230, 141, 0.16));
		}

		/* Tablet logo sizing. */
		@media (min-width: 481px) and (max-width: 1024px) {
			.site-logo img,
			.custom-logo {
				max-width: 210px;
				max-height: 52px;
			}
		}

		/* Small-phone logo sizing. */
		@media (max-width: 480px) {
			.site-logo img,
			.custom-logo {
				max-width: 175px;
				max-height: 46px;
			}
		}

		/* Respect visitors who disable motion effects. */
		@media (prefers-reduced-motion: reduce) {
			.site-header::after {
				animation: none !important;
				background-position: 50% 50%;
			}

			.site-logo img,
			.custom-logo {
				transition: none !important;
			}
		}


/* =========================================================
   v3.0.5 — COMPACT GLOBAL HEADER SPACING
   Match the tighter CPW masthead position across every page.
   Layout-only override: no markup, scripts, or plugin behavior changed.
   ========================================================= */
@media (min-width: 1025px) {
	body.croakitoad-core-active .site-header .inside-header {
		min-height: var(--croaki-header-height) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}


/* =========================================================
   TWITCH LIVE-AWARE NAVIGATION BUTTON
   Framework 3.0.6
   ========================================================= */
.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live > a,
.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live > a:visited {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff5c63 0%, #e5222c 52%, #b90f18 100%) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow: 0 10px 26px rgba(229, 34, 44, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}

.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live > a::before {
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 0 13px rgba(255,255,255,.72) !important;
    animation: croakitoad-live-pulse 1.55s ease-in-out infinite;
}

.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live > a:hover,
.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live > a:focus,
.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live.sfHover > a,
.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live.current-menu-item > a {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff7379 0%, #f12f39 52%, #cf151f 100%) !important;
    box-shadow: 0 13px 32px rgba(229, 34, 44, 0.42), 0 0 24px rgba(229, 34, 44, 0.18), inset 0 1px 0 rgba(255,255,255,.38) !important;
}

@keyframes croakitoad-live-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.72); opacity: .56; }
}

@media (prefers-reduced-motion: reduce) {
    .main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live > a::before {
        animation: none;
    }
}

/* v4: Watch Live styling is semantic; menu order no longer matters. */
.main-navigation .main-nav > ul > li.croakitoad-nav-live > a {
    border-color: rgba(105,230,141,.38);
    background: linear-gradient(135deg,rgba(105,230,141,.18),rgba(105,230,141,.08));
    color: var(--croaki-green-light);
}
.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live > a {
    border-color: rgba(255,92,92,.68);
    background: linear-gradient(135deg,#e73838,#a81717);
    color:#fff;
    box-shadow:0 0 0 3px rgba(231,56,56,.12),0 8px 24px rgba(0,0,0,.25);
}
.main-navigation .main-nav > ul > li.croakitoad-nav-live.is-live > a::before {
    content:"";
    width:8px;height:8px;border-radius:999px;background:#fff;margin-right:7px;
    box-shadow:0 0 0 4px rgba(255,255,255,.15);
}