/* ------------------------------------------------------------------ *
 * Light mobile navigation drawer.
 *
 * Kadence ships the mobile off-canvas drawer dark: header.min.css sets
 *   .popup-drawer .drawer-inner { background:#090c10; color:#fff }
 * and the generated customizer CSS colors the menu links with the light
 * palette8 (#fbf5ef) plus white-on-dark dividers
 * (rgba(255,255,255,0.1)). Re-skinning the panel to a light surface
 * therefore means flipping every one of those onto the brand's dark
 * tones, or the menu text/close-icon/dividers vanish on the new
 * background.
 *
 * Scope: #mobile-drawer ONLY. The search overlay (#search-drawer) shares
 * the .drawer-inner class but is intentionally left dark
 * (rgba(9,12,16,.97)) — don't lighten it here.
 *
 * Specificity: #mobile-drawer (an id) beats Kadence's class-level
 * defaults and the inline customizer CSS, so no !important is needed.
 * Colors come from the Kadence global palette so they track any future
 * Customizer palette change.
 * ------------------------------------------------------------------ */

/* Panel surface + base text colour. */
#mobile-drawer .drawer-inner {
	background: var(--global-palette8);   /* #fbf5ef warm cream */
	color: var(--global-palette4);        /* #4a2418 body brown */
}

#mobile-drawer .drawer-content {
	color: var(--global-palette4);
}

/* Close (X) button: .toggle-close-bar is background:currentColor, so the
   button's text colour drives the icon. Use strong text brown. */
#mobile-drawer .drawer-header {
	border-bottom: 1px solid rgba(74, 36, 24, 0.12);
}

#mobile-drawer .drawer-toggle {
	color: var(--global-palette3);        /* #2d1305 strong */
}

/* Larger type for readability + bigger tap targets. Kadence defaults the
   mobile menu to 14px; the 1em vertical padding scales off this, so 19px
   also makes each row taller and easier to press. */
#mobile-drawer .mobile-navigation ul li {
	font-size: 19px;
}

/* Menu links + parent-row drop-wraps. */
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
	color: var(--global-palette4);
}

/* Hover / focus — accent-hover brown (gold fails contrast on cream). */
#mobile-drawer .mobile-navigation ul li > a:hover,
#mobile-drawer .mobile-navigation ul li > a:focus,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap:hover {
	color: var(--global-palette2);        /* #81403c */
}

/* Current page — brown + weight so it reads as active on the light panel. */
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
	color: var(--global-palette2);
	font-weight: 600;
}

/* Row dividers: swap Kadence's white-on-dark hairlines for a warm dark tint. */
#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a {
	border-bottom: 1px solid rgba(74, 36, 24, 0.12);
}

#mobile-drawer .mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button {
	border-left: 1px solid rgba(74, 36, 24, 0.12);
}