/*
 * App-style bottom navigation dock.
 *
 * The textured bg.jpg surface runs edge to edge, and the site's rainbow
 * gradient rides the top border as a thin rule.
 */

:root {
	--mc-dock-height: 68px;
	--mc-dock-edge: 2px;
	--mc-dock-ink: var(--wp--preset--color--secondary, #eaeaec);
	--mc-dock-hot: var(--wp--preset--color--accent-1, #f27db2);
	--mc-dock-acid: var(--wp--preset--color--accent-3, #f5ed5f);
	--mc-dock-void: var(--wp--preset--color--primary, #090909);
	--mc-dock-rainbow: var(
		--wp--preset--gradient--rainbow,
		linear-gradient(135deg, #70cbd0 0%, #70cbd0 20%, #f5ed5f 40%, #f4a352 60%, #f27db2 80%, #a37ddc 100%)
	);
}

html {
	scroll-padding-bottom: calc(var(--mc-dock-height) + 1rem);
}

/* Keeps the fixed dock from covering the end of the page. */
.mc-dock-spacer {
	height: calc(var(--mc-dock-height) + env(safe-area-inset-bottom, 0px));
}

.mc-dock {
	position: fixed;
    z-index: 1000;
    padding-bottom: 0;
    pointer-events: none;
    bottom: 0 !important;
    width: 100%;
}

.mc-dock__bg {
	position: absolute;
	inset: 0;
}

.mc-dock__surface {
	position: absolute;
	inset: 0;
	display: block;
	background-color: #0b0b0b;
	background-image:
		linear-gradient(to bottom, rgba(9, 9, 9, 0.12), rgba(9, 9, 9, 0.6)),
		url("../images/bg.jpg");
	background-repeat: repeat, repeat;
	background-size: auto, 460px auto;
}

/* Gradient rule sitting on the top border of the dock. */
.mc-dock__edge {
	position: absolute;
	inset: 0 0 auto 0;
	display: block;
	height: var(--mc-dock-edge);
	background-image: var(--mc-dock-rainbow);
}

.mc-dock .mc-dock__list {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	height: var(--mc-dock-height);
	max-width: 560px;
	margin: 0 auto;
	padding: 0 max(6px, env(safe-area-inset-left, 0px)) 0 max(6px, env(safe-area-inset-right, 0px));
	list-style: none;
	pointer-events: auto;
}

.mc-dock .mc-dock__item {
	flex: 1 1 0;
	margin: 0;
	padding: 0;
}

.mc-dock .mc-dock__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 6px 2px;
	border-radius: 6px;
	color: var(--mc-dock-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.mc-dock .mc-dock__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 26px;
	color: var(--mc-dock-ink);
	transition: color 0.16s ease, transform 0.16s ease;
}

.mc-dock .mc-dock__glyph {
	display: block;
	width: 23px;
	height: 23px;
}

/* Labels read as strips of tape once active or hovered. */
.mc-dock .mc-dock__label {
	display: block;
	padding: 2px 7px 1px;
	font-family: "Heavitas", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: nowrap;
	color: inherit;
	text-transform: uppercase;
	background-color: transparent;
	transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.mc-dock .mc-dock__link.is-current .mc-dock__icon {
	color: var(--mc-dock-hot);
}

.mc-dock .mc-dock__link.is-current .mc-dock__label {
	color: var(--mc-dock-void);
	background-color: var(--mc-dock-hot);
	transform: rotate(-1.6deg);
}

@media (hover: hover) {
	.mc-dock .mc-dock__link:hover .mc-dock__icon {
		color: var(--mc-dock-acid);
		transform: translateY(-3px);
	}

	.mc-dock .mc-dock__link:hover .mc-dock__label {
		color: var(--mc-dock-void);
		background-color: var(--mc-dock-acid);
		transform: rotate(-1.6deg);
	}
}

.mc-dock .mc-dock__link:focus-visible {
	outline: 2px solid var(--mc-dock-acid);
	outline-offset: 1px;
}

.mc-dock .mc-dock__link:active .mc-dock__icon {
	transform: translateY(0) scale(0.92);
}

@media (min-width: 800px) {
	:root {
		--mc-dock-height: 78px;
		--mc-dock-edge: 2px;
	}

	.mc-dock .mc-dock__list {
		gap: 10px;
		max-width: 680px;
		margin: 10px auto;
	}

	.mc-dock .mc-dock__icon {
		width: 44px;
		height: 38px;
	}

	.mc-dock .mc-dock__glyph {
		width: 35px;
		height: 35px;
	}

	.mc-dock .mc-dock__label {
		font-size: 13px;
		letter-spacing: 0.03em;
	}
}

@media (max-width: 380px) {
	.mc-dock .mc-dock__glyph {
		width: 21px;
		height: 21px;
	}

	.mc-dock .mc-dock__label {
		padding: 2px 4px 1px;
		font-size: 10px;
		letter-spacing: 0.01em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-dock .mc-dock__icon,
	.mc-dock .mc-dock__label {
		transition: none;
	}

	.mc-dock .mc-dock__link:hover .mc-dock__icon,
	.mc-dock .mc-dock__link:active .mc-dock__icon {
		transform: none;
	}
}

@media print {
	.mc-dock,
	.mc-dock-spacer {
		display: none;
	}
}