/**
 * Inoforest Anchor Menu
 *
 * Contents
 * 1. Defaults (variables)
 * 2. Box and title
 * 3. Links, icon and badge (Normal / Hover / Active)
 * 4. Editor hint, reduced motion, responsive
 *
 * Colours read the Design System (--inoforest-color-*) with fallbacks. The defaults sit in :where() blocks (no
 * specificity), so the Style tab controls, which set the same variables or properties on the widget, always win.
 */

/* 1. Defaults ------------------------------------------------------------------ */
:where(.inoforest-anchor-menu) {
	--ino-am-columns: 1;
	--ino-am-gap: 6px;
	--ino-am-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ino-am-primary: var(--inoforest-color-primary, #0b7a75);
	--ino-am-line: var(--inoforest-color-border, #e5ebef);
	--ino-am-mark: var(--inoforest-color-accent, #ff6a3d);
	--ino-am-icon-size: 1.2rem;
	--ino-am-badge-size: 28px;

	--ino-am-color: var(--inoforest-color-heading, #0d1b2a);
	--ino-am-bg: transparent;
	--ino-am-icon: var(--ino-am-primary);
	--ino-am-badge-color: var(--ino-am-primary);
	--ino-am-badge-bg: #e5f3f2;
	--ino-am-badge-bg: color-mix(in srgb, var(--ino-am-primary) 10%, #fff);

	--ino-am-hover-color: #fff;
	--ino-am-hover-bg: var(--ino-am-primary);
	--ino-am-hover-icon: #fff;
	--ino-am-hover-badge-color: var(--ino-am-primary);
	--ino-am-hover-badge-bg: #fff;

	--ino-am-active-color: var(--ino-am-hover-color);
	--ino-am-active-bg: var(--ino-am-hover-bg);
	--ino-am-active-icon: var(--ino-am-hover-icon);
	--ino-am-active-badge-color: var(--ino-am-hover-badge-color);
	--ino-am-active-badge-bg: var(--ino-am-hover-badge-bg);
}

/* 2. Box and title ------------------------------------------------------------------ */
.inoforest-anchor-menu {
	padding: 30px 22px;
	background-color: var(--inoforest-color-background, #fff);
	border: 1px solid var(--inoforest-color-border, #e5ebef);
	border-radius: 24px;
}

.inoforest-anchor-menu .inoforest-anchor-menu__title {
	position: relative;
	margin: 0 0 24px;
	padding: 0 0 14px;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--inoforest-color-heading, #0d1b2a);
	border-bottom: 1px solid var(--ino-am-line);
}

.inoforest-anchor-menu__title::after {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 50px;
	height: 2px;
	content: "";
	background-color: var(--ino-am-mark);
}

/* 3. Links ------------------------------------------------------------------ */
.inoforest-anchor-menu .inoforest-anchor-menu__list {
	display: grid;
	grid-template-columns: repeat(var(--ino-am-columns), minmax(0, 1fr));
	gap: var(--ino-am-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.inoforest-anchor-menu__item {
	margin: 0;
	list-style: none;
}

/* Two classes: above the kit's link colours. */
.inoforest-anchor-menu .inoforest-anchor-menu__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ino-am-color);
	text-decoration: none;
	background-color: var(--ino-am-bg);
	border-radius: 10px;
	transition: background-color 0.35s var(--ino-am-ease), color 0.35s var(--ino-am-ease);
}

.inoforest-anchor-menu__icon {
	display: inline-flex;
	flex: none;
	font-size: var(--ino-am-icon-size);
	line-height: 1;
	color: var(--ino-am-icon);
	transition: color 0.35s var(--ino-am-ease);
}

.inoforest-anchor-menu__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.inoforest-anchor-menu__label {
	min-width: 0;
}

.inoforest-anchor-menu .inoforest-anchor-menu__badge {
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	min-width: var(--ino-am-badge-size);
	height: var(--ino-am-badge-size);
	margin-left: auto;
	padding: 0 8px;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ino-am-badge-color);
	background-color: var(--ino-am-badge-bg);
	border-radius: 999px;
	transition: background-color 0.35s var(--ino-am-ease), color 0.35s var(--ino-am-ease);
}

.inoforest-anchor-menu .inoforest-anchor-menu__badge[hidden] {
	display: none;
}

.inoforest-anchor-menu a.inoforest-anchor-menu__link:hover,
.inoforest-anchor-menu a.inoforest-anchor-menu__link:focus-visible {
	color: var(--ino-am-hover-color);
	background-color: var(--ino-am-hover-bg);
}

.inoforest-anchor-menu__link:hover .inoforest-anchor-menu__icon,
.inoforest-anchor-menu__link:focus-visible .inoforest-anchor-menu__icon {
	color: var(--ino-am-hover-icon);
}

.inoforest-anchor-menu__link:hover .inoforest-anchor-menu__badge,
.inoforest-anchor-menu__link:focus-visible .inoforest-anchor-menu__badge {
	color: var(--ino-am-hover-badge-color);
	background-color: var(--ino-am-hover-badge-bg);
}

.inoforest-anchor-menu a.inoforest-anchor-menu__link.is-active {
	color: var(--ino-am-active-color);
	background-color: var(--ino-am-active-bg);
}

.inoforest-anchor-menu__link.is-active .inoforest-anchor-menu__icon {
	color: var(--ino-am-active-icon);
}

.inoforest-anchor-menu__link.is-active .inoforest-anchor-menu__badge {
	color: var(--ino-am-active-badge-color);
	background-color: var(--ino-am-active-badge-bg);
}

/* 4. Editor hint, reduced motion, responsive ------------------------------------------- */
.inoforest-anchor-menu__hint {
	margin: 0;
	padding: 16px;
	font-size: 0.85rem;
	text-align: center;
	border: 1px dashed currentColor;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.inoforest-anchor-menu .inoforest-anchor-menu__link,
	.inoforest-anchor-menu__icon,
	.inoforest-anchor-menu .inoforest-anchor-menu__badge {
		transition: none;
	}
}

/* Tablets: the menu sits above the questions in columns of tinted links. */
@media (max-width: 1024px) {
	:where(.inoforest-anchor-menu) {
		--ino-am-gap: 8px;
		--ino-am-bg: var(--inoforest-color-surface, #f4f8f8);
	}
}

@media (max-width: 767px) {
	.inoforest-anchor-menu {
		padding: 24px 22px;
	}
}