/**
 * CliniEd — Site chrome
 * Header, primary navigation, mobile drawer, hero variants, footer, CTA band.
 */

/* ===========================================================================
 * Header
 * ======================================================================== */
.ce-header {
	position: sticky;
	top: 0;
	z-index: var(--ce-z-header);
	background: var(--ce-bg);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--ce-dur) var(--ce-ease),
		border-color var(--ce-dur) var(--ce-ease),
		box-shadow var(--ce-dur) var(--ce-ease);
}

.ce-header.is-stuck {
	background: var(--ce-bg);
	border-bottom-color: var(--ce-border);
	box-shadow: var(--ce-shadow-sm);
}

.ce-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-6);
	min-height: 64px;
}

/* Announcement bar above the header */
.ce-announce {
	background: var(--ce-accent-solid);
	color: var(--ce-white);
	font-size: var(--ce-fs-sm);
	text-align: center;
}
.ce-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ce-space-3);
	flex-wrap: wrap;
	padding-block: var(--ce-space-2);
	min-height: 40px;
}
.ce-announce a { color: var(--ce-white); font-weight: var(--ce-fw-heading); text-underline-offset: 0.2em; }
.ce-announce__close {
	position: absolute;
	right: var(--ce-gutter);
	background: none;
	border: 0;
	color: inherit;
	opacity: 0.75;
	line-height: 0;
	padding: 4px;
}
.ce-announce__close:hover { opacity: 1; }
.ce-announce__inner { position: relative; }

/* Brand lockup */
.ce-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-3);
	text-decoration: none;
	flex: none;
}
.ce-brand__mark { width: 40px; height: 40px; flex: none; }
.ce-brand__logo {
	/* Size from the height so the lockup keeps its aspect ratio. A bare
	   max-height leaves the flex item with no resolved width. */
	height: 44px;
	width: auto;
	max-width: 100%;
	flex: none;
}
.ce-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.ce-brand__name {
	font-family: var(--ce-font-heading);
	font-size: 1.32rem;
	font-weight: var(--ce-fw-bold);
	letter-spacing: -0.028em;
	color: var(--ce-heading);
}
.ce-brand__tagline {
	font-size: 0.66rem;
	font-weight: var(--ce-fw-heading);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ce-text-muted);
}

/* ===========================================================================
 * Primary navigation (desktop)
 * ======================================================================== */
.ce-nav { display: flex; align-items: center; }

.ce-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ce-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ce-nav__item { position: relative; }

.ce-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ce-space-2);
	padding: 0.62em 0.95em;
	border-radius: var(--ce-radius-sm);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-base);
	font-weight: var(--ce-fw-medium);
	color: var(--ce-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ce-dur-fast) var(--ce-ease), color var(--ce-dur-fast) var(--ce-ease);
}
.ce-nav__link:hover { background: var(--ce-surface-alt); color: var(--ce-primary); }

/*
 * The active item is a soft filled pill, as in the design — not accent text.
 * `.is-current` covers the fallback menu, which has no WordPress classes.
 */
.ce-nav__item.current-menu-item > .ce-nav__link,
.ce-nav__item.current-menu-ancestor > .ce-nav__link,
.ce-nav__item.current_page_item > .ce-nav__link,
.ce-nav__link.is-current {
	background: var(--ce-surface);
	color: var(--ce-ink);
	font-weight: var(--ce-fw-medium);
}

.ce-nav__caret { width: 15px; height: 15px; opacity: 0.6; transition: transform var(--ce-dur-fast) var(--ce-ease); }
.ce-nav__item:hover > .ce-nav__link .ce-nav__caret,
.ce-nav__item:focus-within > .ce-nav__link .ce-nav__caret { transform: rotate(180deg); }

/* Dropdown */
.ce-nav__submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 10;
	min-width: 250px;
	margin: 0;
	padding: var(--ce-space-2);
	list-style: none;
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-md);
	background: var(--ce-bg);
	box-shadow: var(--ce-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--ce-dur-fast) var(--ce-ease),
		transform var(--ce-dur-fast) var(--ce-ease),
		visibility var(--ce-dur-fast) var(--ce-ease);
}

.ce-nav__item:hover > .ce-nav__submenu,
.ce-nav__item:focus-within > .ce-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ce-nav__submenu .ce-nav__link {
	display: flex;
	width: 100%;
	padding: 0.62em 0.8em;
	font-weight: var(--ce-fw-body);
	font-size: var(--ce-fs-sm);
}

/* Rich dropdown item with description */
.ce-nav__rich { display: flex; align-items: flex-start; gap: var(--ce-space-3); }
.ce-nav__rich-title { display: block; font-weight: var(--ce-fw-heading); color: var(--ce-heading); }
.ce-nav__rich-desc  { display: block; font-size: var(--ce-fs-xs); color: var(--ce-text-muted); margin-top: 2px; }
.ce-nav__link:hover .ce-nav__rich-title { color: var(--ce-primary); }

/* Header actions */
.ce-header__actions { display: flex; align-items: center; gap: var(--ce-space-3); flex: none; }

/* Hamburger */
.ce-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-sm);
	background: var(--ce-bg);
	color: var(--ce-heading);
}
.ce-burger__bars { position: relative; width: 20px; height: 14px; }
.ce-burger__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--ce-dur) var(--ce-ease), opacity var(--ce-dur-fast) var(--ce-ease);
}
.ce-burger__bars span:nth-child(1) { top: 0; }
.ce-burger__bars span:nth-child(2) { top: 6px; }
.ce-burger__bars span:nth-child(3) { top: 12px; }

.ce-burger[aria-expanded="true"] .ce-burger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ce-burger[aria-expanded="true"] .ce-burger__bars span:nth-child(2) { opacity: 0; }
.ce-burger[aria-expanded="true"] .ce-burger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===========================================================================
 * Mobile drawer
 * ======================================================================== */
.ce-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--ce-z-drawer);
	display: grid;
	grid-template-columns: 1fr min(400px, 88vw);
	visibility: hidden;
	pointer-events: none;
}
.ce-drawer.is-open { visibility: visible; pointer-events: auto; }

.ce-drawer__scrim {
	background: rgba(7, 20, 38, 0.5);
	opacity: 0;
	transition: opacity var(--ce-dur) var(--ce-ease);
	border: 0;
	padding: 0;
	cursor: default;
}
.ce-drawer.is-open .ce-drawer__scrim { opacity: 1; }

.ce-drawer__panel {
	display: flex;
	flex-direction: column;
	gap: var(--ce-space-6);
	padding: var(--ce-space-6) var(--ce-space-6) var(--ce-space-10);
	background: var(--ce-bg);
	box-shadow: var(--ce-shadow-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--ce-dur) var(--ce-ease-out);
}
.ce-drawer.is-open .ce-drawer__panel { transform: translateX(0); }

.ce-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ce-space-4); }
.ce-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-sm);
	background: var(--ce-bg);
	color: var(--ce-heading);
}
.ce-drawer__close svg { width: 20px; height: 20px; }

.ce-drawer__nav ul { margin: 0; padding: 0; list-style: none; }
.ce-drawer__nav > ul { display: flex; flex-direction: column; gap: 2px; }

.ce-drawer__nav a {
	display: block;
	padding: 0.78em 0.9em;
	border-radius: var(--ce-radius-sm);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-lg);
	font-weight: var(--ce-fw-heading);
	color: var(--ce-heading);
	text-decoration: none;
}
.ce-drawer__nav a:hover { background: var(--ce-surface-alt); color: var(--ce-primary); }

/* Nested submenu inside the drawer */
.ce-drawer__nav .sub-menu,
.ce-drawer__nav .ce-nav__submenu {
	margin: 2px 0 var(--ce-space-2) var(--ce-space-4);
	padding-left: var(--ce-space-4);
	border-left: 2px solid var(--ce-border);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ce-drawer__nav .sub-menu a,
.ce-drawer__nav .ce-nav__submenu a {
	font-size: var(--ce-fs-base);
	font-weight: var(--ce-fw-body);
	color: var(--ce-text-muted);
	padding: 0.55em 0.7em;
}

.ce-drawer__actions { display: flex; flex-direction: column; gap: var(--ce-space-3); margin-top: auto; }

.ce-drawer__meta {
	padding-top: var(--ce-space-6);
	border-top: 1px solid var(--ce-border);
	font-size: var(--ce-fs-sm);
	color: var(--ce-text-muted);
}

/* Body lock while drawer is open */
body.ce-drawer-open { overflow: hidden; }

/* Breakpoint switch */
@media (max-width: 1080px) {
	.ce-nav { display: none; }
	.ce-burger { display: inline-flex; }
	.ce-header__actions .ce-btn--desktop-only { display: none; }
}

/*
 * On narrow phones the brand, the call to action and the menu button cannot
 * all fit on one row. The drawer already carries both actions, so drop them
 * from the bar rather than letting the header push the page sideways.
 */
@media (max-width: 560px) {
	.ce-header__actions .ce-btn { display: none; }
	.ce-header__inner { min-height: 56px; gap: var(--ce-space-4); }
	.ce-brand__logo { height: 36px; }
}

/* Never let the header be the thing that scrolls the page horizontally. */
.ce-header__inner { min-width: 0; }
.ce-header__actions { min-width: 0; flex-shrink: 0; }
.ce-brand { min-width: 0; }

/* ===========================================================================
 * Hero
 * ---------------------------------------------------------------------------
 * Design: one full-bleed photograph behind the whole band, with a white wash
 * laid over its left half so the copy stays legible. Explicitly NOT a dark
 * overlay, and not a two-column split — the photograph runs edge to edge and
 * the text sits on top of it.
 * ======================================================================== */
.ce-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--ce-bg);
	color: var(--ce-muted);
}

.ce-hero__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--ce-hero-image, none);
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}

.ce-hero__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ce-hero-wash);
}

/*
 * No photograph chosen yet. The wash becomes the ground, so the hero is a
 * clean white band rather than an empty grey box.
 */
.ce-hero--no-image .ce-hero__photo { background: var(--ce-surface); }
.ce-hero--no-image .ce-hero__wash {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.72) 100%);
}

.ce-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: clamp(300px, 34vw, 440px);
	padding-block: clamp(1.5rem, 2.6vw, 2.5rem);
}

.ce-hero__content { max-width: 60%; }
@media (max-width: 900px) { .ce-hero__content { max-width: 100%; } }

.ce-hero :is(h1, h2, h3) { color: var(--ce-ink); }

.ce-hero__title {
	margin: 0 0 var(--ce-space-5);
	font-size: var(--ce-fs-4xl);
	font-weight: var(--ce-fw-heading);
	line-height: var(--ce-lh-tight);
	letter-spacing: var(--ce-tracking-tight);
	color: var(--ce-ink);
	max-width: 20ch;
}

.ce-hero__text {
	max-width: 52ch;
	margin: 0 0 var(--ce-space-8);
	font-size: var(--ce-fs-md);
	line-height: var(--ce-lh-relaxed);
	color: var(--ce-muted);
}

.ce-hero__actions { margin: 0; align-items: center; gap: var(--ce-space-6); }

.ce-hero__note {
	margin: var(--ce-space-5) 0 0;
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}

/*
 * On a narrow screen the wash has to cover the whole photograph, because the
 * copy now runs the full width of the band and there is no clear right-hand
 * side for the image to keep.
 */
@media (max-width: 900px) {
	.ce-hero__wash {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.90) 60%,
			rgba(255, 255, 255, 0.94) 100%
		);
	}
	.ce-hero__inner { min-height: 0; }
}

/* ===========================================================================
 * Page hero (interior pages)
 * ======================================================================== */
.ce-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.75rem, 5.5vw, 5rem);
	background: var(--ce-surface);
	border-bottom: 1px solid var(--ce-border);
}
.ce-page-hero__inner { position: relative; z-index: 1; max-width: 800px; }
.ce-page-hero__title { margin-bottom: var(--ce-space-4); }
.ce-page-hero__text { margin-bottom: 0; }
.ce-page-hero .ce-breadcrumb { margin-bottom: var(--ce-space-5); }

.ce-page-hero--center .ce-page-hero__inner { max-width: 780px; margin-inline: auto; text-align: center; }
.ce-page-hero--center .ce-breadcrumb { justify-content: center; }

.ce-page-hero--dark {
	background: var(--ce-indigo);
	border-bottom-color: transparent;
	color: var(--ce-indigo-text);
}
.ce-page-hero--dark :is(h1, h2) { color: var(--ce-white); }
.ce-page-hero--dark .ce-lead { color: var(--ce-indigo-text); }
.ce-page-hero--dark .ce-breadcrumb { color: rgba(255, 255, 255, 0.6); }
.ce-page-hero--dark .ce-breadcrumb [aria-current="page"] { color: var(--ce-white); }

/* ===========================================================================
 * CTA band
 * ======================================================================== */
.ce-cta-band {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 5.5rem);
	background: var(--ce-indigo);
	color: var(--ce-indigo-text);
}
.ce-cta-band :is(h2, h3) { color: var(--ce-white); }
/* Copy on the left, a single outlined action on the right. */
.ce-cta-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
}
/*
 * min-width:0 because a flex item defaults to min-width:auto, and a heading
 * carrying a long unbreakable token — "dengue.clinied.com" — then pushes past
 * the container on a narrow screen. body{overflow-x:hidden} would hide the
 * scrollbar but the text would still be clipped.
 */
.ce-cta-band__copy { max-width: 640px; min-width: 0; overflow-wrap: break-word; }
.ce-cta-band__copy > :last-child { margin-bottom: 0; }
.ce-cta-band__text { margin-bottom: 0; font-size: var(--ce-fs-md); color: var(--ce-indigo-text); }
.ce-cta-band__note { margin-top: var(--ce-space-5); font-size: var(--ce-fs-sm); color: var(--ce-indigo-text); opacity: 0.85; }


/* Boxed CTA variant that sits inside a normal section */
.ce-cta-box {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--ce-space-8);
	align-items: center;
	padding: clamp(2rem, 4vw, 3.25rem);
	border-radius: var(--ce-radius-lg);
	background: var(--ce-indigo);
	color: var(--ce-indigo-text);
}
.ce-cta-box :is(h2, h3) { color: var(--ce-white); margin-bottom: var(--ce-space-3); }
@media (max-width: 800px) {
	.ce-cta-box { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.ce-cta-box .ce-cluster { justify-content: center; }
}

/* ===========================================================================
 * Footer
 * ======================================================================== */
.ce-footer {
	background: var(--ce-surface);
	border-top: 1px solid var(--ce-divider);
	color: var(--ce-muted);
	font-size: var(--ce-fs-base);
}

/*
 * Brand column, then four link columns. The Account column carries an email
 * address — a single long unbreakable token — so it gets a slightly wider
 * track than its neighbours and its links are allowed to wrap mid-string.
 */
.ce-footer__main {
	display: grid;
	grid-template-columns:
		minmax(220px, 1.35fr)
		repeat(2, minmax(120px, 0.85fr))
		minmax(150px, 1fr)
		minmax(130px, 0.9fr);
	gap: clamp(2rem, 4vw, 3.25rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

@media (max-width: 1024px) {
	.ce-footer__main {
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	}
}
@media (max-width: 760px) {
	.ce-footer__main { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
	.ce-footer__brand-col { grid-column: 1 / -1; }
}

.ce-footer__brand-col { max-width: 360px; }
.ce-footer__tagline { margin: var(--ce-space-4) 0 var(--ce-space-6); color: var(--ce-muted); font-size: var(--ce-fs-base); line-height: var(--ce-lh-relaxed); }
.ce-footer__brand-col .ce-footer__heading { margin-bottom: var(--ce-space-3); }
.ce-footer__note { margin: var(--ce-space-3) 0 0; font-size: var(--ce-fs-sm); color: var(--ce-grey-400); }

/* Long addresses in the Account column must wrap rather than push the page. */
.ce-footer__list a { overflow-wrap: break-word; }

.ce-footer .ce-brand__name { color: var(--ce-ink); }
.ce-footer .ce-brand__tagline { color: var(--ce-muted); }

.ce-footer__heading {
	margin-bottom: var(--ce-space-4);
	font-family: var(--ce-font-heading);
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-bold);
	letter-spacing: var(--ce-tracking-label);
	text-transform: uppercase;
	color: var(--ce-ink);
}

.ce-footer__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--ce-space-3); }
.ce-footer__list a {
	color: var(--ce-muted);
	text-decoration: none;
	font-size: var(--ce-fs-base);
	transition: color var(--ce-dur-fast) var(--ce-ease);
}
.ce-footer__list a:hover { color: var(--ce-ink); }

/* Contact list */
.ce-footer__contact { display: flex; flex-direction: column; gap: var(--ce-space-3); }
.ce-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--ce-space-3);
	min-width: 0;
}

/*
 * Email addresses and phone numbers are single unbreakable tokens. In a narrow
 * footer column they will push the page sideways unless they are allowed to
 * wrap mid-string.
 */
.ce-footer__contact-item > :not(svg) {
	min-width: 0;
	/*
	 * break-word, not anywhere: it still prevents the overflow, but only
	 * breaks when the line genuinely cannot fit, so an address like
	 * info@clinied.com is not split mid-word when there is room.
	 */
	overflow-wrap: break-word;
}
.ce-footer__contact-item svg { flex: none; width: 18px; height: 18px; margin-top: 0.2em; color: var(--ce-accent); }
.ce-footer__contact-item a { color: var(--ce-ink); text-decoration: none; }
.ce-footer__contact-item a:hover { color: var(--ce-ink); }

/* Social */
.ce-social { display: flex; flex-wrap: wrap; gap: var(--ce-space-2); }
.ce-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-md);
	background: var(--ce-bg);
	color: var(--ce-muted);
	transition: background-color var(--ce-dur-fast) var(--ce-ease), color var(--ce-dur-fast) var(--ce-ease), border-color var(--ce-dur-fast) var(--ce-ease);
}
.ce-social__link:hover {
	background: var(--ce-accent-solid);
	border-color: var(--ce-accent-solid);
	color: var(--ce-white);
}
.ce-social__link svg { width: 19px; height: 19px; }

/* Newsletter */
.ce-newsletter { display: flex; gap: var(--ce-space-2); flex-wrap: wrap; }
.ce-newsletter input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	border-color: var(--ce-divider);
	background: var(--ce-bg);
	color: var(--ce-ink);
	border-radius: var(--ce-radius-pill);
	padding: 0.8em 1.2em;
}
.ce-newsletter input[type="email"]::placeholder { color: var(--ce-grey-400); }
.ce-newsletter input[type="email"]:focus { border-color: var(--ce-accent); box-shadow: var(--ce-focus-ring); }

/* Footer bottom bar */
.ce-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ce-space-4);
	padding-block: var(--ce-space-6);
	border-top: 1px solid var(--ce-divider);
	font-size: var(--ce-fs-sm);
	color: var(--ce-muted);
}
.ce-footer__legal { display: flex; flex-wrap: wrap; gap: var(--ce-space-2) var(--ce-space-5); }
.ce-footer__legal a { color: var(--ce-muted); text-decoration: none; }
.ce-footer__legal a:hover { color: var(--ce-ink); }

.ce-footer__disclaimer {
	padding-bottom: var(--ce-space-8);
	font-size: var(--ce-fs-xs);
	line-height: var(--ce-lh-relaxed);
	color: var(--ce-grey-400);
}

/* ===========================================================================
 * Back to top
 * ======================================================================== */
.ce-to-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ce-border);
	border-radius: 50%;
	background: var(--ce-bg);
	color: var(--ce-primary);
	box-shadow: var(--ce-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--ce-dur) var(--ce-ease), transform var(--ce-dur) var(--ce-ease), visibility var(--ce-dur) var(--ce-ease);
}
.ce-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.ce-to-top:hover { background: var(--ce-primary); color: var(--ce-ink); border-color: var(--ce-primary); }
.ce-to-top svg { width: 20px; height: 20px; }

/* ===========================================================================
 * Drawer submenu toggle (injected by app.js)
 * ======================================================================== */
.ce-drawer__nav .menu-item-has-children { position: relative; }

.ce-drawer__submenu-toggle {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ce-border);
	border-radius: var(--ce-radius-sm);
	background: var(--ce-bg);
	color: var(--ce-text-muted);
	transition: transform var(--ce-dur) var(--ce-ease), color var(--ce-dur-fast) var(--ce-ease);
}
.ce-drawer__submenu-toggle:hover { color: var(--ce-primary); border-color: var(--ce-primary); }
.ce-drawer__submenu-toggle.is-open { transform: rotate(180deg); color: var(--ce-primary); }

/* Leave room for the toggle so long labels do not run underneath it */
.ce-drawer__nav .menu-item-has-children > a { padding-right: 3rem; }