/**
 * SectionMenus front-end styles.
 *
 * Public-sector / institutional sidebar nav for ГБДОУ детский сад №15.
 * Design language: trust-first, restrained motion, clear hierarchy,
 * single accent (palette1 #5B9BE3), one radius scale (10px),
 * full keyboard accessibility (focus-visible), reduced-motion support.
 *
 * Palette CSS variables are provided by the project (style.css / Kadence):
 *   --global-palette1 #5B9BE3  primary blue accent
 *   --global-palette2 #82B957  green (hover/active hint)
 *   --global-palette3 #32425A  strong text
 *   --global-palette4 #5F6875  body text
 *   --global-palette5 #7D8794  muted text
 *   --global-palette7 #EAF5FD  soft blue tint
 *   --global-palette8 #F7FBFF  site background
 *   --global-palette9 #FFFFFF  surface
 *
 * Selectors use the `det-sad-menu__` BEM-style prefix to stay isolated from
 * the parent Kadence stylesheet.
 */

/* ============================================================
   Design tokens (local to this component)
   ============================================================ */
.det-sad-menu {
	--dsm-radius: 10px;
	--dsm-radius-sm: 6px;
	--dsm-space-xxs: 0.25rem;
	--dsm-space-xs: 0.5rem;
	--dsm-space-sm: 0.75rem;
	--dsm-space-md: 1rem;
	--dsm-space-lg: 1.25rem;
	--dsm-accent: var( --global-palette1, #5B9BE3 );
	--dsm-accent-soft: var( --global-palette7, #EAF5FD );
	--dsm-accent-hover: var( --global-palette2, #82B957 );
	--dsm-text: var( --global-palette3, #32425A );
	--dsm-text-body: var( --global-palette4, #5F6875 );
	--dsm-text-muted: var( --global-palette5, #7D8794 );
	--dsm-surface: var( --global-palette9, #FFFFFF );
	--dsm-surface-tint: var( --global-palette8, #F7FBFF );
	--dsm-border: rgba( 95, 104, 117, 0.16 );
	--dsm-border-strong: rgba( 91, 155, 227, 0.28 );
	--dsm-shadow-sm: 0 1px 2px rgba( 50, 66, 90, 0.04 );
	--dsm-shadow-md: 0 4px 14px rgba( 50, 66, 90, 0.06 );
	--dsm-transition: 180ms cubic-bezier( 0.16, 1, 0.3, 1 );

	font-family: var( --global-body-font-family ), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.82rem;
	line-height: 1.25;
	color: var( --dsm-text );
}

/* ============================================================
   Base list reset (shared by every variant)
   ============================================================ */
.det-sad-menu__list,
.det-sad-menu__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.det-sad-menu__item {
	margin: 0;
	padding: 0;
}

/* ============================================================
   Row: a single grid row holds [icon | link | toggle].
   Each child sits in its own grid cell, so the link is never
   overlapped by the toggle button and clicks never collide.
   ============================================================ */
.det-sad-menu__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var( --dsm-space-xs );
	padding: 0 var( --dsm-space-xs );
	border-radius: var( --dsm-radius-sm );
	transition: background var( --dsm-transition );
}

/* Rows without an icon badge collapse the first column. */
.det-sad-menu__item:not( .det-sad-menu__item--has-children ) .det-sad-menu__row,
.det-sad-menu__sublist .det-sad-menu__row {
	grid-template-columns: 1fr;
}

/* Rows with children keep the chevron column on the right. */
.det-sad-menu__item--has-children .det-sad-menu__row {
	grid-template-columns: auto 1fr auto;
}

/* Top-level rows without the parent_icon badge collapse the icon column. */
.det-sad-menu__item--has-children .det-sad-menu__row:not( :has( .det-sad-menu__icon ) ) {
	grid-template-columns: 1fr auto;
}

/* ============================================================
   Item links — live in the middle grid cell, never overlapped.
   ============================================================ */
.det-sad-menu__link,
.det-sad-menu__sublink {
	display: flex;
	align-items: center;
	gap: var( --dsm-space-sm );
	padding: var( --dsm-space-sm ) var( --dsm-space-xs );
	text-decoration: none;
	text-decoration-line: none;
	text-underline-offset: 0;
	color: var( --dsm-text );
	background: transparent;
	border: 0;
	border-radius: var( --dsm-radius-sm );
	min-width: 0;
	transition:
		background var( --dsm-transition ),
		color var( --dsm-transition );
}

/* Defensive: тема может наследовать underline на a:hover — гасим явно. */
.det-sad-menu__link:hover,
.det-sad-menu__link:focus,
.det-sad-menu__link:focus-visible,
.det-sad-menu__sublink:hover,
.det-sad-menu__sublink:focus,
.det-sad-menu__sublink:focus-visible {
	text-decoration: none;
	text-decoration-line: none;
}

.det-sad-menu__sublink {
	padding-top: var( --dsm-space-xs );
	padding-bottom: var( --dsm-space-xs );
	color: var( --dsm-text-body );
}

/* ============================================================
   Row-level hover: highlight the whole row, not only the link.
   The toggle button keeps its own interactive area; the link and
   icon pick up the accent colour when the row is hovered.
   Hover is suppressed while any descendant holds keyboard focus,
   so the focus ring stays the single strongest signal on the row.
   ============================================================ */
@media ( hover: hover ) {
	.det-sad-menu__row:hover {
		background: var( --dsm-accent-soft );
	}
	.det-sad-menu__row:hover > .det-sad-menu__link,
	.det-sad-menu__row:hover > .det-sad-menu__sublink {
		color: var( --dsm-accent );
	}
	/* Do not tint the row when a child is keyboard-focused; the focus
	   ring and the element's own focus background carry the signal. */
	.det-sad-menu__row:focus-within {
		background: transparent;
	}
}

/* Keyboard focus on a link/toggle paints its own background so the
   user sees both the ring and the filled state (matches hover weight). */
.det-sad-menu__link:focus-visible,
.det-sad-menu__sublink:focus-visible {
	background: var( --dsm-accent-soft );
	color: var( --dsm-accent );
}

/* ============================================================
   Focus-visible for LINKS (keyboard accessibility, WCAG 2.4.7).
   The outline sits OUTSIDE the element (positive offset) so the
   neighbouring grid cell, hover tint, or sublist background never
   overlaps it. The focused element is lifted above siblings via
   position:relative + z-index so the ring stays fully visible.
   Only :focus-visible fires (mouse clicks do not show a ring).

   The TOGGLE button has its own focus rule further below, where it
   also neutralises the Kadence global button styles.
   ============================================================ */
.det-sad-menu__link:focus-visible,
.det-sad-menu__sublink:focus-visible {
	outline: 2px solid var( --dsm-accent );
	outline-offset: 2px;
	border-radius: var( --dsm-radius-sm );
	position: relative;
	z-index: 2;
}

/* ============================================================
   Icon badge (top-level parents only)
   ============================================================ */
.det-sad-menu__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1rem;
	line-height: 1;
	color: var( --dsm-accent );
	background: var( --dsm-accent-soft );
	border-radius: var( --dsm-radius-sm );
	transition:
		background var( --dsm-transition ),
		color var( --dsm-transition );
}

/* The icon badge sits in its own grid cell inside the row (not inside the
   link), so we drive its hover/active styling from the row state. */
@media ( hover: hover ) {
	.det-sad-menu__row:hover > .det-sad-menu__icon {
		background: var( --dsm-accent );
		color: var( --dsm-surface );
	}
}

.det-sad-menu__item.is-current > .det-sad-menu__row > .det-sad-menu__icon {
	background: var( --dsm-accent );
	color: var( --dsm-surface );
}

.det-sad-menu__label {
	flex: 1 1 auto;
}

/* ============================================================
   Leaf bullet: small marker dot for descendant items that have
   no further children. Reads like a <ul> marker so the user can
   tell "leaf" items apart from branch items (which get a chevron).
   ============================================================ */
.det-sad-menu__bullet {
	flex: 0 0 auto;
	width: 0.3rem;
	height: 0.3rem;
	margin-right: var( --dsm-space-xs );
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	align-self: center;
	transition: opacity var( --dsm-transition ), transform var( --dsm-transition );
}

@media ( hover: hover ) {
	.det-sad-menu__row:hover > .det-sad-menu__sublink .det-sad-menu__bullet {
		opacity: 0.7;
	}
}

/* Active leaf: bullet pops to full opacity and tint grows slightly. */
.det-sad-menu__item.is-current > .det-sad-menu__row .det-sad-menu__bullet {
	opacity: 1;
	transform: scale( 1.25 );
}

/* ============================================================
   Active states — applied to the row, so the whole row tints.
   ============================================================ */
.det-sad-menu__item.is-current > .det-sad-menu__row {
	background: var( --dsm-accent-soft );
}
.det-sad-menu__item.is-current > .det-sad-menu__row > .det-sad-menu__link,
.det-sad-menu__item.is-current > .det-sad-menu__row > .det-sad-menu__sublink {
	font-weight: 600;
	color: var( --dsm-accent );
}

/* ============================================================
   Toggle button: own grid cell, visible, self-contained hit area.
   Never overlays the link. Holds the Phosphor chevron that rotates
   when the branch is expanded.

   HARD RESET: Kadence applies global button styles (.wp-element-button,
   button:focus, etc.) to every <button>. Those paint hover/focus/active
   with palette2 green, button background, and a 15px drop shadow — none
   of which belong on an accordion chevron. We neutralise every Kadence
   button property on our toggle with !important, scoped to our component.
   ============================================================ */
.det-sad-menu__toggle,
.det-sad-menu__toggle:hover,
.det-sad-menu__toggle:focus,
.det-sad-menu__toggle:focus-visible,
.det-sad-menu__toggle:active,
.det-sad-menu__toggle:visited {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 1.75rem !important;
	height: 1.75rem !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var( --dsm-radius-sm ) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	transform: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	color: var( --dsm-text-muted ) !important;
	transition:
		background var( --dsm-transition ),
		color var( --dsm-transition ) !important;
}

@media ( hover: hover ) {
	.det-sad-menu__toggle:hover {
		background: rgba( 91, 155, 227, 0.16 ) !important;
		color: var( --dsm-accent ) !important;
	}
}

/* Keyboard focus: outline + soft tint, never Kadence green/shadow. */
.det-sad-menu__toggle:focus-visible {
	outline: 2px solid var( --dsm-accent ) !important;
	outline-offset: 2px !important;
	background: var( --dsm-accent-soft ) !important;
	color: var( --dsm-accent ) !important;
	position: relative !important;
	z-index: 2 !important;
}

/* Chevron lives inside the toggle button now; rotates on expand. */
.det-sad-menu__chevron {
	display: block;
	font-size: 0.8rem;
	line-height: 1;
	transition: transform var( --dsm-transition );
}

.det-sad-menu__item--has-children.is-expanded > .det-sad-menu__row > .det-sad-menu__toggle .det-sad-menu__chevron {
	transform: rotate( 180deg );
	color: var( --dsm-accent );
}

/* Legacy border-drawn toggle icon is no longer used. */
.det-sad-menu__toggle-icon {
	display: none;
}

/* ============================================================
   Sub-list collapse (CSS-driven, JS only toggles .is-expanded)
   ============================================================ */
.det-sad-menu__item--has-children:not( .is-expanded ) > .det-sad-menu__sublist {
	display: none;
}

.det-sad-menu__sublist {
	padding: var( --dsm-space-xxs ) 0;
	margin-top: var( --dsm-space-xxs );
}

.det-sad-menu__sublist .det-sad-menu__item + .det-sad-menu__item {
	margin-top: 1px;
}

/* Deeper nesting: each level indents via padding so the bullet/chevron
   lines up neatly under the parent's label. Reduced from the previous
   values now that the leaf bullet carries the leftmost visual weight. */
.det-sad-menu__sublink--depth-1 {
	padding-left: var( --dsm-space-md );
}
.det-sad-menu__sublink--depth-2 {
	padding-left: calc( var( --dsm-space-md ) + var( --dsm-space-sm ) );
	font-size: 0.74rem;
}
.det-sad-menu__sublink--depth-3 {
	padding-left: calc( var( --dsm-space-md ) + var( --dsm-space-sm ) * 2 );
	font-size: 0.72rem;
}

/* ============================================================
   Container variants
   ============================================================ */

/* Accordion: sidebar card */
.det-sad-menu--accordion {
	background: var( --dsm-surface );
	border: 1px solid var( --dsm-border );
	border-radius: var( --dsm-radius );
	padding: var( --dsm-space-xs );
	box-shadow: var( --dsm-shadow-sm );
}

/* Kadence adds left padding to widget lists with a more specific rule.
   Reset only the accordion's outer list so root rows keep equal gutters. */
.det-sad-menu.det-sad-menu--accordion > .det-sad-menu__list {
	padding-inline: 0;
}

/* Top-level parents sit in their own card; tighten the inner padding. */
.det-sad-menu--accordion .det-sad-menu__link {
	padding: var( --dsm-space-xs ) var( --dsm-space-sm );
	font-size: 0.82rem;
}

/* Root row — the section heading that carries the icon badge. Stronger
   typography than the rest so it reads as a heading, not a list item. */
.det-sad-menu--accordion .det-sad-menu__row--root > .det-sad-menu__link {
	padding: var( --dsm-space-sm ) var( --dsm-space-sm );
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: -0.01em;
}

.det-sad-menu--accordion .det-sad-menu__sublink {
	padding: var( --dsm-space-xxs ) var( --dsm-space-sm );
	font-size: 0.78rem;
}

.det-sad-menu--accordion .det-sad-menu__icon {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 0.9rem;
}

.det-sad-menu--accordion .det-sad-menu__list > .det-sad-menu__item + .det-sad-menu__item {
	margin-top: 2px;
}

.det-sad-menu--accordion .det-sad-menu__list > .det-sad-menu__item:first-child {
	margin-top: 0;
}

/* Flat: horizontal bar (secondary nav) */
.det-sad-menu--flat .det-sad-menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	align-items: center;
}

.det-sad-menu--flat .det-sad-menu__item {
	flex: 0 0 auto;
}

.det-sad-menu--flat .det-sad-menu__link {
	padding: var( --dsm-space-xs ) var( --dsm-space-sm );
	font-size: 0.78rem;
	color: var( --dsm-text-body );
}

.det-sad-menu--flat .det-sad-menu__item.is-current .det-sad-menu__link {
	color: var( --dsm-accent );
	background: transparent;
	box-shadow: inset 0 -2px 0 var( --dsm-accent );
	border-radius: 0;
	font-weight: 600;
}

/* Mobile: off-canvas drawer */
.det-sad-menu--mobile .det-sad-menu__link {
	padding: var( --dsm-space-md );
	font-size: 0.92rem;
	border-bottom: 1px solid var( --dsm-border );
}

.det-sad-menu--mobile .det-sad-menu__sublink {
	padding: var( --dsm-space-sm ) var( --dsm-space-lg );
	font-size: 0.85rem;
}

.det-sad-menu--mobile .det-sad-menu__toggle {
	width: 2.5rem;
	height: 2.5rem;
}

/* ============================================================
   Reduced motion: all transitions collapse to instant
   ============================================================ */
@media ( prefers-reduced-motion: reduce ) {
	.det-sad-menu *,
	.det-sad-menu__link,
	.det-sad-menu__sublink,
	.det-sad-menu__toggle,
	.det-sad-menu__toggle-icon,
	.det-sad-menu__icon {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   High-contrast mode: strengthen borders and outlines
   ============================================================ */
@media ( prefers-contrast: more ) {
	.det-sad-menu {
		--dsm-border: rgba( 50, 66, 90, 0.5 );
		--dsm-border-strong: rgba( 50, 66, 90, 0.7 );
	}

	.det-sad-menu__link,
	.det-sad-menu__sublink {
		border: 1px solid transparent;
	}

	.det-sad-menu__link:focus-visible,
	.det-sad-menu__sublink:focus-visible,
	.det-sad-menu__toggle:focus-visible {
		outline-width: 3px;
		outline-offset: 3px;
	}
}

/* ============================================================
   Hard kill on inherited underlines.
   The parent theme (Kadence) and WordPress core both inject
   text-decoration on anchors under various states and specificities.
   This final block uses the highest specificity we can without
   !important, scoped tightly to our component subtree.
   ============================================================ */
.det-sad-menu a.det-sad-menu__link,
.det-sad-menu a.det-sad-menu__sublink,
.det-sad-menu a.det-sad-menu__link:hover,
.det-sad-menu a.det-sad-menu__sublink:hover,
.det-sad-menu a.det-sad-menu__link:focus,
.det-sad-menu a.det-sad-menu__sublink:focus,
.det-sad-menu a.det-sad-menu__link:focus-visible,
.det-sad-menu a.det-sad-menu__sublink:focus-visible,
.det-sad-menu a.det-sad-menu__link:active,
.det-sad-menu a.det-sad-menu__sublink:active,
.det-sad-menu a.det-sad-menu__link:visited,
.det-sad-menu a.det-sad-menu__sublink:visited {
	text-decoration: none !important;
	text-decoration-line: none !important;
	box-shadow: none;
}