/*
 * The parchment and torn edge are intentionally baked into one bitmap.
 * This prevents the edge from drifting or scaling independently of the paper.
 */
.site-header {
	isolation: isolate;
	overflow: visible;
	background: transparent !important;
	box-shadow: none !important;
}

.site-header::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0 0 -20px;
	pointer-events: none;
	background-image: url("untold-texas-header-combined-desktop-v1.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 100%;
	filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.24));
}

.site-header::after {
	display: none !important;
	content: none !important;
}

.site-header .header-inner {
	position: relative;
	z-index: 1;
}

@media (max-width: 980px) {
	.site-header::before {
		background-image: url("untold-texas-header-combined-tablet-v1.png");
	}
}

@media (max-width: 700px) {
	.site-header::before {
		background-image: url("untold-texas-header-mobile-v2.webp");
	}
}

/*
 * The community panel is also a single image. Its parchment center and both
 * torn edges are baked into the same responsive bitmap.
 */
.community {
	isolation: isolate;
	overflow: visible;
	background: transparent !important;
}

.community::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: -34px !important;
	right: 0;
	bottom: -34px;
	left: 0;
	height: auto !important;
	pointer-events: none;
	background: url("untold-community-desktop-v1.webp") center / 100% 100% no-repeat !important;
	filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.20));
	transform: none !important;
}

.community::after {
	display: none !important;
	content: none !important;
}

.community .community-inner {
	position: relative;
	z-index: 1;
}

@media (max-width: 1100px) {
	.community::before {
		top: -46px !important;
		bottom: -46px;
		background-image: url("untold-community-tablet-v1.webp") !important;
	}
}

@media (max-width: 700px) {
	.community::before {
		top: -40px !important;
		bottom: -40px;
		background-image: url("untold-community-mobile-v1.webp") !important;
	}
}

/*
 * Field-journal icon finish.
 * Keep the theme's clear CSS pictograms, but make them feel printed and
 * collected instead of like generic app icons.
 */
.pathway-icon {
	color: #efc27e !important;
	filter: drop-shadow(1px 2px 0 rgba(24, 12, 6, 0.72));
	transform: rotate(-1.2deg);
}

.pathway:nth-child(even) .pathway-icon {
	transform: rotate(1.1deg);
}

.stat-icon {
	color: #6f3a22 !important;
	filter: drop-shadow(1px 2px 0 rgba(255, 244, 218, 0.36));
	transform: rotate(-1deg);
}

.stat:nth-child(2) .stat-icon {
	transform: rotate(1.2deg);
}

@media (max-width: 700px) {
	.mobile-dock {
		padding: 9px 5px 7px !important;
		border: 1px solid rgba(232, 192, 126, 0.58) !important;
		border-radius: 10px 15px 11px 14px !important;
		background:
			linear-gradient(rgba(35, 20, 12, 0.93), rgba(21, 12, 8, 0.97)),
			repeating-linear-gradient(2deg, transparent 0 6px, rgba(255, 255, 255, 0.025) 7px 8px) !important;
		box-shadow: 0 0 0 2px rgba(72, 42, 22, 0.38), 0 14px 28px rgba(0, 0, 0, 0.46) !important;
	}

	.mobile-dock a {
		padding: 5px 2px 4px !important;
		color: #ead2aa !important;
		font-family: var(--hand, "Segoe Print", cursive) !important;
		font-size: 0.72rem !important;
		font-weight: 700;
		letter-spacing: 0.015em !important;
		line-height: 1.05;
		text-transform: none !important;
	}

	.mobile-dock .dock-icon {
		width: 22px !important;
		height: 22px !important;
		margin-bottom: 7px !important;
		border: 1px solid rgba(70, 39, 21, 0.72);
		border-radius: 3px 6px 4px 5px;
		background: #d8b77f;
		color: #321c11 !important;
		box-shadow: 0 0 0 2px rgba(232, 207, 165, 0.28), 1px 3px 0 rgba(5, 2, 1, 0.48);
		filter: none;
		transform: rotate(-2deg);
	}

	.mobile-dock a:nth-child(even) .dock-icon {
		transform: rotate(1.5deg);
	}

	.mobile-dock a:hover,
	.mobile-dock a:focus-visible,
	.mobile-dock a[aria-current="page"],
	body.home .mobile-dock a:nth-child(1),
	body.post-type-archive-ut_story .mobile-dock a:nth-child(2),
	body.single-ut_story .mobile-dock a:nth-child(2),
	body.post-type-archive-ut_film .mobile-dock a:nth-child(3),
	body.single-ut_film .mobile-dock a:nth-child(3),
	body.post-type-archive-ut_place .mobile-dock a:nth-child(4),
	body.single-ut_place .mobile-dock a:nth-child(4),
	body.page-id-75 .mobile-dock a:nth-child(5) {
		color: #f0bd72 !important;
	}

	.mobile-dock a:hover .dock-icon,
	.mobile-dock a:focus-visible .dock-icon,
	.mobile-dock a[aria-current="page"] .dock-icon,
	body.home .mobile-dock a:nth-child(1) .dock-icon,
	body.post-type-archive-ut_story .mobile-dock a:nth-child(2) .dock-icon,
	body.single-ut_story .mobile-dock a:nth-child(2) .dock-icon,
	body.post-type-archive-ut_film .mobile-dock a:nth-child(3) .dock-icon,
	body.single-ut_film .mobile-dock a:nth-child(3) .dock-icon,
	body.post-type-archive-ut_place .mobile-dock a:nth-child(4) .dock-icon,
	body.single-ut_place .mobile-dock a:nth-child(4) .dock-icon,
	body.page-id-75 .mobile-dock a:nth-child(5) .dock-icon {
		border-color: #6e2d15;
		background: #a94922;
		color: #fff0d2 !important;
		box-shadow: 0 0 0 2px rgba(224, 157, 75, 0.34), 1px 3px 0 rgba(5, 2, 1, 0.52);
	}

	.mobile-dock .dock-icon--stories::before {
		box-shadow: 7px 0 0 -1.7px #d8b77f, 7px 0 0 0 currentColor !important;
	}

	.mobile-dock a:hover .dock-icon--stories::before,
	.mobile-dock a:focus-visible .dock-icon--stories::before,
	.mobile-dock a[aria-current="page"] .dock-icon--stories::before,
	body.post-type-archive-ut_story .mobile-dock a:nth-child(2) .dock-icon--stories::before,
	body.single-ut_story .mobile-dock a:nth-child(2) .dock-icon--stories::before {
		box-shadow: 7px 0 0 -1.7px #a94922, 7px 0 0 0 currentColor !important;
	}
}