/* =========================================================
   TT4 Responsive Navigation Drawer (LEFT, 1/3 width)
   + allow page scroll behind
   + submenu ripple (staggered reveal)
   ========================================================= */
/* Drawer on the LEFT, 1/3 width */
.wp-block-navigation__responsive-container {
	left: 0 !important;
	right: auto !important;
	width: 33.333vw !important;
	max-width: 480px !important;
	min-width: 320px !important;
	z-index: 999999 !important;
	overflow: visible !important;
/* don't clip expanding submenus */
}

/* Closed/off-canvas state */
.wp-block-navigation__responsive-container:not(.is-menu-open) {
	transform: translateX(-100%) !important;
}

/* Open state */
.wp-block-navigation__responsive-container.is-menu-open {
	transform: translateX(0) !important;
}

/* Close row + X on the LEFT */
.wp-block-navigation__responsive-container-close {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	padding: 1rem 1.25rem !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 1000000 !important;
}

.wp-block-navigation__responsive-container-close button,
.wp-block-navigation__responsive-close {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Drawer content scrolls */
.wp-block-navigation__responsive-container-content {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: calc(100vh - 56px) !important;
/* room for close row */
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 1.5rem 1.25rem !important;
}

/* Force LTR text */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container * {
	direction: ltr !important;
}

/* Ensure labels aren't inheriting transforms */
.wp-block-navigation__responsive-container .wp-block-navigation-item__label {
	transform: none !important;
}

/* IMPORTANT FIX:
   Only force visibility/opacity on TOP-LEVEL items.
   Do NOT force submenu items to opacity:1 (that kills ripple). */
.wp-block-navigation__responsive-container
  .wp-block-navigation__container
  > .wp-block-navigation-item,
.wp-block-navigation__responsive-container
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content
  .wp-block-navigation-item__label {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure submenu toggle is visible/clickable */
.wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Remove click/focus highlight box but keep underline */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:active,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content a,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content a:focus,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content a:focus-visible,
.wp-block-navigation__responsive-container .wp-block-navigation-item__content a:active {
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Underline on hover/focus inside submenus */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container a:hover,
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container a:focus-visible {
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* ---------------------------------------------------------
   Allow scroll on the page BEHIND the open drawer
   --------------------------------------------------------- */
body.has-modal-open,
html.has-modal-open {
	overflow: auto !important;
	position: static !important;
	width: auto !important;
	top: auto !important;
}

/* Disable pointer events on overlay so page can scroll behind */
.wp-block-navigation__responsive-container-overlay {
	pointer-events: none !important;
}

/* Re-enable pointer events INSIDE the drawer */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container * {
	pointer-events: auto !important;
}

/* =========================================================
   Submenu ripple (robust)
   Triggers on .is-open AND (if supported) :has([aria-expanded="true"])
   ========================================================= */
/* Keep submenu in layout so transitions can run */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
	display: block !important;
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translateY(6px);
	transition: max-height .55s ease, opacity .35s ease, transform .35s ease, visibility 0 linear .35s !important;
}

/* OPEN state (classic TT4) */
.wp-block-navigation__responsive-container
  .wp-block-navigation-item.has-child.is-open
  > .wp-block-navigation__submenu-container {
	max-height: 1400px !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateY(0);
	transition: max-height .6s ease, opacity .4s ease, transform .4s ease, visibility 0 linear 0 !important;
}

/* OPEN state (modern browsers): parent item contains an expanded toggle */
@supports selector(.x:has(.y)) {
	.wp-block-navigation__responsive-container
	    .wp-block-navigation-item.has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"])
	    > .wp-block-navigation__submenu-container {
		max-height: 1400px !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0);
		transition: max-height .6s ease, opacity .4s ease, transform .4s ease, visibility 0 linear 0 !important;
	}
}

/* ---------- Ripple items ---------- */
/* Start hidden */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li,
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li > a,
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li > button {
	opacity: 0 !important;
	transform: translateY(10px) !important;
	transition: opacity .45s ease, transform .45s ease !important;
}

/* When open (via .is-open), reveal */
.wp-block-navigation__responsive-container
  .wp-block-navigation-item.has-child.is-open
  > .wp-block-navigation__submenu-container
  > li,
.wp-block-navigation__responsive-container
  .wp-block-navigation-item.has-child.is-open
  > .wp-block-navigation__submenu-container
  > li > a,
.wp-block-navigation__responsive-container
  .wp-block-navigation-item.has-child.is-open
  > .wp-block-navigation__submenu-container
  > li > button {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* When open (via :has expanded toggle), reveal */
@supports selector(.x:has(.y)) {
	.wp-block-navigation__responsive-container
	    .wp-block-navigation-item.has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"])
	    > .wp-block-navigation__submenu-container
	    > li,
	  .wp-block-navigation__responsive-container
	    .wp-block-navigation-item.has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"])
	    > .wp-block-navigation__submenu-container
	    > li > a,
	  .wp-block-navigation__responsive-container
	    .wp-block-navigation-item.has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"])
	    > .wp-block-navigation__submenu-container
	    > li > button {
		opacity: 1 !important;
		transform: translateY(0) !important;
	}
}

/* Stagger delays on LI (controls the ripple) */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(1) {
	transition-delay: 0 !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(2) {
	transition-delay: 140ms !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(3) {
	transition-delay: 280ms !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(4) {
	transition-delay: 420ms !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(5) {
	transition-delay: 560ms !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(6) {
	transition-delay: 700ms !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(7) {
	transition-delay: 840ms !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(8) {
	transition-delay: 980ms !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(9) {
	transition-delay: 1120ms !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li:nth-child(10) {
	transition-delay: 1260ms !important;
}

/* Make links/buttons inherit the same delay as their LI */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li > a,
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li > button {
	transition-delay: inherit !important;
}

/* Reduced motion (ONLY reduced motion — not wrapping normal rules!) */
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		max-height: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		transition: none !important;
	}
	
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li,
	  .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li > a,
	  .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > li > button {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}