/**
 * Context-aware sidebar widgets — nav/list/affordance polish.
 *
 * Layers ON TOP of css/modern.css §6 (which already turns `.widget` into a
 * modern card: card bg/border/radius/shadow/padding, the widget-title font +
 * red square, and the `ul li` divider colour). This file does NOT redefine the
 * card; it adds:
 *   - sidebar nav-menu list-item affordances (chevron, hover, focus, active)
 *   - styling for the JS-injected count chip (.rr-widget-count) and
 *     "See all ›" footer link (.rr-widget-see-all) from js/sidebar-widgets.js
 *   - current-page item treatment
 *   - tighter, intentional spacing
 *
 * All colour/space/radius/type values come from the design tokens in
 * main.css + modern.css via var(); none are redefined here. Everything is
 * scoped to `.site-sidebar` so footer widgets are untouched.
 *
 * @package runreviews-child
 */

/* ----------------------------------------------------------------------------
 * 1. Generic widget list rows — turn bare <li> links into tappable rows.
 *    modern.css colours the divider; we own padding + the link affordance.
 * ------------------------------------------------------------------------- */
.site-sidebar .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-sidebar .widget li {
	margin: 0;
}

.site-sidebar .widget li a {
	display: flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding-block: var(--rr-space-2);
	color: var(--rr-ink-700);
	font-family: var(--rr-font-sans);
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.15s ease, padding-left 0.15s ease;
}

.site-sidebar .widget li a:hover,
.site-sidebar .widget li a:focus-visible {
	color: var(--rr-red);
}

.site-sidebar .widget li a:focus-visible {
	outline: 2px solid var(--rr-red);
	outline-offset: 2px;
	border-radius: var(--rr-radius-sm);
}

/* ----------------------------------------------------------------------------
 * 2. Nav-menu widgets (.widget_nav_menu) — the primary sidebar pattern.
 *    The JS hides the redundant top-level parent link (its label is the H2)
 *    and exposes the children as the visible list. Give each child row a
 *    chevron affordance that animates on hover.
 * ------------------------------------------------------------------------- */

/* The top-level parent <a> is redundant with the widget H2 — hide it but keep
 * it in the DOM (the JS reads its href for the "See all" link). */
.site-sidebar .widget_nav_menu .menu > .menu-item-has-children > a {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-sidebar .widget_nav_menu .menu,
.site-sidebar .widget_nav_menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-sidebar .widget_nav_menu .sub-menu > li {
	border-bottom: 1px solid var(--rr-ink-100);
}

.site-sidebar .widget_nav_menu .sub-menu > li:last-child {
	border-bottom: 0;
}

.site-sidebar .widget_nav_menu .sub-menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rr-space-2);
	padding-block: var(--rr-space-2);
	color: var(--rr-ink-700);
	font-family: var(--rr-font-sans);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease, padding-left 0.15s ease;
}

/* Chevron affordance, drawn after the label so it sits at the row's end. */
.site-sidebar .widget_nav_menu .sub-menu > li > a::after {
	content: "";
	flex: none;
	width: 0.42em;
	height: 0.42em;
	margin-left: auto;
	border-right: 2px solid var(--rr-ink-300);
	border-bottom: 2px solid var(--rr-ink-300);
	transform: rotate(-45deg);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.site-sidebar .widget_nav_menu .sub-menu > li > a:hover,
.site-sidebar .widget_nav_menu .sub-menu > li > a:focus-visible {
	color: var(--rr-red);
	padding-left: var(--rr-space-1);
}

.site-sidebar .widget_nav_menu .sub-menu > li > a:hover::after,
.site-sidebar .widget_nav_menu .sub-menu > li > a:focus-visible::after {
	border-color: var(--rr-red);
	transform: translateX(2px) rotate(-45deg);
}

/* ----------------------------------------------------------------------------
 * 3. Current / active item — when the sidebar reflects the page you're on.
 *    WordPress adds .current-menu-item / .current_page_item on the matching
 *    <li>; categories add .current-cat.
 * ------------------------------------------------------------------------- */
.site-sidebar .widget .current-menu-item > a,
.site-sidebar .widget .current_page_item > a,
.site-sidebar .widget .current-cat > a {
	color: var(--rr-red-dark);
	font-weight: 700;
}

/* Red rail on the active row to anchor it visually. */
.site-sidebar .widget_nav_menu .sub-menu > li.current-menu-item {
	position: relative;
}

.site-sidebar .widget_nav_menu .sub-menu > li.current-menu-item::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--rr-space-5));
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.15em;
	border-radius: var(--rr-radius-pill);
	background: var(--rr-red);
}

.site-sidebar .widget_nav_menu .sub-menu > li.current-menu-item > a::after {
	border-color: var(--rr-red);
}

/* ----------------------------------------------------------------------------
 * 4. Count chip — js/sidebar-widgets.js appends <span class="rr-widget-count">
 *    to .widget-title with the child count (e.g. "Popular Brands  15").
 *    modern.css makes the title a flex row with a gap, so the chip just needs
 *    its own pill styling.
 * ------------------------------------------------------------------------- */
.site-sidebar .widget-title .rr-widget-count {
	flex: none;
	margin-left: auto;
	min-width: 1.5em;
	padding: 0.1em 0.55em;
	border-radius: var(--rr-radius-pill);
	background: var(--rr-red-50);
	color: var(--rr-red-dark);
	font-family: var(--rr-font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	letter-spacing: 0;
}

/* ----------------------------------------------------------------------------
 * 5. "See all ›" link — js/sidebar-widgets.js appends
 *    <a class="rr-widget-see-all"> after the sub-menu, pointing at the parent
 *    archive. Style it as a quiet footer CTA with an animated arrow.
 * ------------------------------------------------------------------------- */
.site-sidebar .widget .rr-widget-see-all {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-1);
	margin-top: var(--rr-space-3);
	padding-block: var(--rr-space-1);
	color: var(--rr-red);
	font-family: var(--rr-font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: gap 0.15s ease, color 0.15s ease;
}

.site-sidebar .widget .rr-widget-see-all:hover,
.site-sidebar .widget .rr-widget-see-all:focus-visible {
	color: var(--rr-red-dark);
	gap: var(--rr-space-2);
}

.site-sidebar .widget .rr-widget-see-all:focus-visible {
	outline: 2px solid var(--rr-red);
	outline-offset: 2px;
	border-radius: var(--rr-radius-sm);
}

/* ----------------------------------------------------------------------------
 * 6. Inter-widget rhythm + Related Reviews block spacing.
 * ------------------------------------------------------------------------- */
.site-sidebar .widget + .widget {
	margin-top: var(--rr-space-5);
}

/* The single-review "Related Reviews" part renders before the widgets; give
 * it breathing room from the first widget card below it. */
.site-sidebar > :not(.widget) + .widget {
	margin-top: var(--rr-space-5);
}