/**
 * Navigation: header, mobile overlay, section sidebar, active states.
 *
 * Mobile-first throughout. Breakpoint at 1024px for desktop sidebar + inline nav.
 *
 * @see agentic/DESIGN_NOTES.md
 * @see agentic/SITE_SPECS.md
 */

/* ---------------------------------------------------------------------------
   Sticky header
   --------------------------------------------------------------------------- */

/* The header is a Group block (.jofei-header), not a <header> element.
   Sticky positioning + solid cream background by default.
   !important overrides any inline styles from the block editor. */
.jofei-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 99 !important;
}

/* When inside a page with a full-bleed background image (gallery, work pages),
   make the header semi-transparent so the image shows through,
   with a subtle backdrop blur for text legibility.
   !important ensures this beats theme.json or inline styles. */
.jofei-page-wrapper .jofei-header {
}

/* ---------------------------------------------------------------------------
   Active state highlighting (rust accent)
   --------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor>.wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2, #9c3939);
	font-weight: 500;
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.wp-block-navigation.jofei-nav-main .wp-block-navigation-item{
	text-shadow: 0 0 3px #3b3936de;
}
.wp-block-navigation .has-child.open-always.wp-block-navigation-submenu{
	gap: 10px;
}

/* Overlay / submenu: keep contrast on overlay background */
.wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-ancestor>.wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2, #9c3939);
}

/* Nested items: only emphasize the top-level / direct ancestor row */
.wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-ancestor>.wp-block-navigation-item__content {
	font-weight: inherit;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2, #9c3939);
	font-weight: 500;
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------------------
   Sticky sidebar
   --------------------------------------------------------------------------- */
.sidebarNav.sticky,
.jofei-section-sidebar {
	position: sticky;
	top: 40px;
	z-index: 90;
}

/* ---------------------------------------------------------------------------
   Desktop / mobile header nav toggle
   --------------------------------------------------------------------------- */

/* Mobile-first: hide desktop inline nav, show mobile hamburger */
.jofei-nav-main {
	display: none !important;
}

.jofei-nav-mobile {
	display: flex;
}

/* Tablet landscape + desktop (≥1024px): show inline nav, hide hamburger */
@media (min-width: 1024px) {
	.jofei-nav-main {
		display: flex !important;
	}

	.jofei-nav-mobile {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Sidebar visibility by breakpoint
   --------------------------------------------------------------------------- */

/*
 * Mobile + tablet portrait: hide sidebar columns entirely.
 *
 * We target the column wrapper (.wp-block-column) — hiding it removes the
 * entire sidebar from the flex/grid layout. The attribute selector
 * [style*="flex-basis"] beats WP's inline style specificity.
 */
.jofei-section-sidebar-column[style*="flex-basis"],
.jofei-work-sidebar-column[style*="flex-basis"] {
	display: none !important;
}

/* Fallback: hide by class name alone */
.jofei-section-sidebar-column,
.jofei-work-sidebar-column {
	display: none !important;
}

/* Tablet landscape + desktop: show sidebar column */
@media (min-width: 1024px) {
	.jofei-section-sidebar-column[style*="flex-basis"],
	.jofei-work-sidebar-column[style*="flex-basis"] {
		display: block !important;
	}

	.jofei-section-sidebar-column,
	.jofei-work-sidebar-column {
		display: block !important;
	}
}

/* ---------------------------------------------------------------------------
   Page wrapper (for full-bleed background images)
   --------------------------------------------------------------------------- */

/* Wrapper that contains header + main, but NOT footer.
   Background image is set on this Group block in the editor. */
.jofei-page-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* Background image set via editor — these are fallbacks */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Ensure the main content area grows to fill available space */
.jofei-page-wrapper > main {
	flex: 1 0 auto;
}

/* ---------------------------------------------------------------------------
   Work sidebar: expanded submenus with page-load animation
   --------------------------------------------------------------------------- */

/* Force ALL sidebar submenus to be permanently visible on work pages.
   This targets every submenu container regardless of parent state.
   The JS adds .is-open and .jofei-sidebar-animated for animation only. */
.jofei-section--work .jofei-section-sidebar .wp-block-navigation__submenu-container {
	display: block !important;
	visibility: visible !important;
	opacity: 1;
	position: static !important;
	transform: none;
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
	min-width: auto !important;
	padding-left: var(--wp--preset--spacing--40, 1.5rem) !important;
	padding-right: 0 !important;
	margin-top: 0;/*var(--wp--preset--spacing--10, 0.5rem);*/
	gap: var(--wp--preset--spacing--20, 0.5rem);
}

/* Desktop only (≥1024px): animate each submenu item individually with
   a staggered delay. The JS sets --jofei-delay on each <li>. */
@media (min-width: 1024px) {
	/* Each submenu item starts invisible and shifted up */
	.jofei-section--work .jofei-section-sidebar.jofei-sidebar-animated .wp-block-navigation__submenu-container .wp-block-navigation-item {
		opacity: 0;
		transform: translateY(-10px);
		animation: jofei-submenu-item-reveal 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--jofei-delay, 0s) forwards;
	}
}

@keyframes jofei-submenu-item-reveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.jofei-section--work .jofei-section-sidebar .wp-block-navigation__submenu-container {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Mobile overlay navigation styling
   --------------------------------------------------------------------------- */

/* Overlay panel background and padding */
.wp-block-navigation__responsive-container {
	background-color: var(--wp--preset--color--base, #ffffff);
	color: var(--wp--preset--color--contrast, #111111);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50, 1.5rem);
	padding-bottom: calc(var(--wp--preset--spacing--50, 1.5rem) + env(safe-area-inset-bottom, 0px));
	/* Cap height so overflow-y scrolls; 100vh clips on mobile Safari */
	min-height: 100dvh;
	max-height: 100dvh;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Let the dialog grow with menu content inside the scroll container */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	flex: 1 1 auto;
	width: 100%;
}

/* Extra space so the last items clear the close button + home indicator */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

/* Top-level menu items: large, spaced, act as section headers */
.wp-block-navigation__responsive-container .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

/* Each top-level item */
.wp-block-navigation__responsive-container .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.1px;
}

/* Top-level links */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
	padding: 0.25rem 0;
	color: var(--wp--preset--color--contrast, #111111);
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{
	padding: 0;
}
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
	padding: 0.25rem 0;
	color: var(--wp--preset--color--contrast, #501b1b);
}
.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{
	padding-top: 0;
}

/* Parent items with children: rust accent + border separator */
.wp-block-navigation__responsive-container .wp-block-navigation-item.has-child {
	border-bottom: 1px solid var(--wp--preset--color--accent-6, rgba(0, 0, 0, 0.1));
	padding-right: 0;/*var(--wp--preset--spacing--40, 1.5rem);*/
}
/* Parent items with children: rust accent + border separator */
.wp-block-navigation-submenu.nav-mob-lvl-2 {
	padding-right: var(--wp--preset--spacing--40, 1.5rem);
}

/* Top-level parents only: no right padding (nested levels keep spacing above) */
.wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item.has-child {
	padding-right: 0;
}

/* Parent item label (the clickable toggle) */
.wp-block-navigation__responsive-container .wp-block-navigation-item.has-child>.wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2, #9c3939);
	font-weight: 500;
}

/* Submenu container: indented, smaller, grouped under parent */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	gap: var(--wp--preset--spacing--30, 1rem);
	margin-top: 0;
	padding-left: var(--wp--preset--spacing--40, 1.5rem) !important;
	padding-right: 0 !important;
}

/* Submenu items: smaller, lighter */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--large, 1.125rem);
	font-weight: 300;
	line-height: 1.4;
}

/* Submenu links */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast, #111111);
}

/* Third-level items (grandchildren): even smaller, more indent */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	padding-left: var(--wp--preset--spacing--40, 1.5rem) !important;
	margin-top: var(--wp--preset--spacing--10, 0.5rem);
	gap: var(--wp--preset--spacing--20, 0.5rem);
}

.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--accent-4, #686868);
}

/* Close button styling */
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast, #111111);
	padding: var(--wp--preset--spacing--30, 1rem);
}

/* Hamburger trigger button */
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--accent-1, #c3770d);
	padding: var(--wp--preset--spacing--20, 0.5rem);
}

/* Touch targets for mobile */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
	min-height: 44px;
	display: flex;
	align-items: center;
}