/*
 * The mobile navigation sheet.
 *
 * Brief: "Mobile header is 50-68px, with a two-line hamburger that opens a full-width white
 * navigation sheet with clean separators and 30px side gutters."
 *
 * Blocksy supplies the sheet, the trigger and the open/close behaviour; all of that is kept. What
 * it ships is a near-black panel with no gutters and no separators, and a three-stroke icon, so
 * only the appearance is changed here.
 */

/* The sheet ---------------------------------------------------------------- */

/* The one !important in the theme, and it is earned: the padding from this very block applies
   while the background does not, which only happens when the value it is fighting is itself
   !important. Blocksy paints its panels near-black; the brief asks for a white sheet. */
#offcanvas .ct-panel-inner {
	background: var(--akem-surface) !important;
	/* The brief asks for a full-width sheet; Blocksy ships a 450px drawer. */
	width: 100%;
	max-width: 100%;
	padding-inline: 30px;
}

#offcanvas .ct-panel-content {
	padding-block: var(--akem-space-4);
}

#offcanvas nav.mobile-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Clean separators: a hairline between items, none trailing the last one. */
#offcanvas nav.mobile-menu ul > li {
	border-block-end: 1px solid var(--akem-line);
}

#offcanvas nav.mobile-menu ul > li:last-child {
	border-block-end: 0;
}

#offcanvas nav.mobile-menu ul > li > a {
	display: block;
	padding-block: 18px;
	font-size: var(--akem-size-body);
	font-weight: 500;
	color: var(--akem-ink);
	text-decoration: none;
}

#offcanvas nav.mobile-menu ul > li > a:hover {
	color: var(--akem-blue);
}

#offcanvas nav.mobile-menu ul > li > a:focus-visible {
	outline: 3px solid var(--akem-blue-focus);
	outline-offset: -3px;
}

/* The close control sits on white now. Its colour was already ink, but the cross is an icon whose
   fill Blocksy sets to translucent white for its dark panel - white on white, invisible. The fill
   is what has to change, not the colour. */
#offcanvas .ct-toggle-close {
	color: var(--akem-ink);
}

#offcanvas .ct-toggle-close .ct-icon,
#offcanvas .ct-toggle-close .ct-icon path {
	fill: var(--akem-ink);
	/* transform belongs in here too: naming only fill replaced Blocksy's own transition, which
	   carried the turn, and the cross stopped turning on hover. */
	transition: fill 180ms ease, transform 180ms ease;
}

#offcanvas .ct-toggle-close:hover .ct-icon,
#offcanvas .ct-toggle-close:hover .ct-icon path {
	fill: var(--akem-blue);
}

#offcanvas .ct-toggle-close:hover .ct-icon {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	#offcanvas .ct-toggle-close .ct-icon,
	#offcanvas .ct-toggle-close .ct-icon path {
		transition: none;
	}
}

/* The trigger: two lines ---------------------------------------------------
   Blocksy draws a three-stroke icon. The brief asks for two, so the icon is replaced by two bars
   drawn on the button itself - no markup is touched and nothing is removed from the parent theme. */

.ct-header-trigger .ct-icon {
	display: none;
}

.ct-header-trigger {
	position: relative;
	width: 24px;
	height: 24px;
}

.ct-header-trigger::before,
.ct-header-trigger::after {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	width: 20px;
	height: 2px;
	background: var(--akem-ink);
}

.ct-header-trigger::before {
	inset-block-start: 8px;
}

.ct-header-trigger::after {
	inset-block-start: 15px;
}