/*
 * Mobile slide-in menu revamp (2026-08-23, Kedyn's ask: "doesn't fit the
 * site's current style anymore... use the brand wordmark, accent color,
 * typography choices"). The old panel was the vendor's flat #111 box with
 * 14px uppercase gray links and a bare X - no visual connection to the
 * identity Phase 1 built.
 *
 * Direction: treat the panel as a small dark editorial page, not nav
 * chrome. The light "KEDYN" wordmark anchors the top (markup added in
 * header.php, reusing tg_retina_transparent_logo - the same light-ink
 * asset the transparent header state already ships). Destinations are set
 * LARGE in Fraunces - the same serif voice as the portfolio titles that
 * already live on dark backgrounds - which is a deliberate departure from
 * screen.css's "uppercase nav chrome stays sans" rule: at this size these
 * read as editorial titles, not chrome. A small Work Sans uppercase
 * eyebrow keeps the chrome register for the one label that IS chrome.
 * Warm palette from the darkroom family (reset.css/darkroom.css tokens):
 * #161310 surface, #34302b hairlines, #c9c0b4 muted text, #c48f6a accent
 * (the dark-context sienna - the light-page #92573b lacks contrast here).
 *
 * Loads sitewide after screen.css (functions.php enqueue, dependency
 * declared) so every rule here wins the cascade at equal-or-higher
 * specificity without !important.
 */

.mobile_menu_wrapper {
	background: #161310;
	color: #c9c0b4;
	border-inline-start: 1px solid #34302b;
	padding: 40px 36px;
	max-width: 88vw; /* the fixed 360px panel overflowed sub-360px phones */
}

/* Brand wordmark (markup in header.php, directly under the close button) */
.mobile-menu-brand {
	display: inline-block;
	line-height: 0;
	margin: 2px 0 0;
}
.mobile-menu-brand img {
	width: 104px;
	height: auto;
	display: block;
}

/* Eyebrow label above the destinations - the one piece of actual chrome */
.mobile-menu-eyebrow {
	display: block;
	margin: 44px 0 6px;
	font-family: var(--font-family-button, 'Work Sans', 'Helvetica Neue', Arial, sans-serif);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #7d7468;
}

/* Destinations ----------------------------------------------------------- */

.mobile_menu_wrapper .mobile_main_nav {
	margin-top: 8px;
	margin-bottom: 32px;
}

.mobile_menu_wrapper .mobile_main_nav > li {
	border-bottom: 1px solid #262019;
}
.mobile_menu_wrapper .mobile_main_nav > li:last-child {
	border-bottom: 0;
}

.mobile_menu_wrapper .mobile_main_nav > li > a {
	font-family: var(--font-family-heading, Fraunces, Georgia, serif);
	font-size: 24px;
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: #e9e2d6;
	display: block;
	position: relative;
	padding: 17px 0 17px 0;
	transition: color 0.25s ease, padding-inline-start 0.25s ease;
}

/* Sliding accent dash - hidden at rest, grows in on hover/current so the
 * active state reads at a glance without inventing a second color. */
.mobile_menu_wrapper .mobile_main_nav > li > a::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 0;
	height: 2px;
	margin-top: -1px;
	background: var(--color-accent-dark, #c48f6a);
	transition: width 0.25s ease;
}

.mobile_menu_wrapper .mobile_main_nav > li > a:hover,
.mobile_menu_wrapper .mobile_main_nav > li > a:active,
.mobile_menu_wrapper .mobile_main_nav > li.current-menu-item > a,
.mobile_menu_wrapper .mobile_main_nav > li.current_page_item > a {
	color: var(--color-accent-dark, #c48f6a);
	padding-inline-start: 34px;
}

.mobile_menu_wrapper .mobile_main_nav > li > a:hover::before,
.mobile_menu_wrapper .mobile_main_nav > li > a:active::before,
.mobile_menu_wrapper .mobile_main_nav > li.current-menu-item > a::before,
.mobile_menu_wrapper .mobile_main_nav > li.current_page_item > a::before {
	width: 22px;
}

/* current-menu-item keeps normal weight - the accent + dash carry the
 * state; screen.css's weight-600 bump made Fraunces look inflated. */
.mobile_menu_wrapper .mobile_main_nav li.current-menu-item a {
	font-weight: 400;
}

/* Close button - the same dark circular ghost language as the slider
 * controls and portfolio prev/next buttons. */
#close_mobile_menu {
	width: 42px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	border: 1px solid #34302b;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.03);
	font-size: 15px;
	right: 28px;
	top: 32px;
	transition: border-color 0.25s ease, background 0.25s ease;
}
#close_mobile_menu i {
	color: #c9c0b4;
	transition: color 0.25s ease;
}
#close_mobile_menu:hover,
#close_mobile_menu:active {
	border-color: var(--color-accent-dark, #c48f6a);
	background: rgba(196, 143, 106, 0.08);
}
#close_mobile_menu:hover i,
#close_mobile_menu:active i {
	color: var(--color-accent-dark, #c48f6a);
}
body.admin-bar #close_mobile_menu {
	top: 62px;
}

/* Panel sign-off: a quiet hairline + the site's social row already renders
 * via the sidebar widget when configured; nothing invented here. */

/*
 * Take the closed panel out of the keyboard tab order (2026-08-24 audit).
 *
 * screen.css only slides the panel away with `transform: translate(360px,0)`.
 * A transformed element is still rendered and still focusable, so on EVERY
 * page - including desktop, where the panel cannot even be opened - a
 * keyboard or screen-reader user tabbing off the skip link fell into the
 * whole closed panel first: the close button, the brand link, the search
 * field, every primary nav link a second time, and any widget links, before
 * reaching the real page.
 *
 * visibility (not display) so the slide-out animation still plays: going
 * closed, visibility flips only AFTER the 500ms transform finishes; opening,
 * it flips immediately so the panel is focusable for its whole travel. The
 * transform transition is restated because setting `transition` here would
 * otherwise replace screen.css's own.
 */
/* `body .mobile_menu_wrapper`, not the bare class: screen.css styles this
   element at the same 1-class specificity, and which file wins then depends
   purely on enqueue order - which was NOT reliably in this file's favour
   (measured live: the computed transition was screen.css's `transform`
   alone, so these declarations were losing outright). One extra type
   selector settles it without reaching for !important. */
body .mobile_menu_wrapper {
	visibility: hidden;
	transition: transform 500ms ease, visibility 0s linear 500ms;
}

body.js_nav .mobile_menu_wrapper,
html[data-menu=leftmenu] body.js_nav .mobile_menu_wrapper {
	visibility: visible;
	transition: transform 500ms ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
	.mobile_menu_wrapper,
	.mobile_menu_wrapper .mobile_main_nav > li > a,
	.mobile_menu_wrapper .mobile_main_nav > li > a::before,
	#close_mobile_menu,
	#close_mobile_menu i {
		transition: none;
	}
	/* No transform animation to wait for, so the panel may hide instantly -
	   but keep the delay off rather than inheriting the 500ms above. */
	body .mobile_menu_wrapper {
		transition: none;
	}
}