/*
 * Mobile sidebar drawer
 *
 * This file contains shared mobile drawer behavior and the menu-content
 * styles reused by the front page's static equivalent.
 *
 * data-drawer-side controls the inline direction. Set it to "left" to
 * mirror both the button and the off-canvas panel without altering markup.
 */
@media (max-width: 767px) {
	.sidebar-drawer {
		--mobile-drawer-width: 80vw;
		--mobile-drawer-panel-inline-start: auto;
		--mobile-drawer-panel-inline-end: 0;
		--mobile-drawer-button-inline-start: auto;
		--mobile-drawer-button-inline-end: 1rem;
		--mobile-drawer-edge-inline-start: auto;
		--mobile-drawer-edge-inline-end: 0;
		--mobile-drawer-closed-translate: 100%;
		--mobile-drawer-shadow: -0.5rem 0 1rem rgb(0 0 0 / 25%);
	}

	.sidebar-drawer[data-drawer-side="left"] {
		--mobile-drawer-panel-inline-start: 0;
		--mobile-drawer-panel-inline-end: auto;
		--mobile-drawer-button-inline-start: 1rem;
		--mobile-drawer-button-inline-end: auto;
		--mobile-drawer-edge-inline-start: 0;
		--mobile-drawer-edge-inline-end: auto;
		--mobile-drawer-closed-translate: -100%;
		--mobile-drawer-shadow: 0.5rem 0 1rem rgb(0 0 0 / 25%);
	}

	body.mobile-drawer-is-open {
		overflow: hidden;
	}

	#wrap > .sidebar-drawer {
		width: 100%;
		margin-top: 1rem;
	}

	#wrap > .sidebar-drawer > #menu {
		float: none;
		width: 100%;
		text-align: start;
	}

	.sidebar-drawer__toggle,
	.sidebar-drawer__close {
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding: 0.5rem 0.75rem;
		border: 2px solid var(--theme-green);
		border-radius: 0.25rem;
		background: #fff;
		color: var(--theme-text);
		font-weight: 700;
		line-height: 1.2;
	}

	.js .sidebar-drawer__toggle:not([hidden]),
	.js .sidebar-drawer__close:not([hidden]) {
		display: inline-flex;
	}

	.js .sidebar-drawer > .sidebar-drawer__toggle {
		position: fixed;
		inset-block-start: 1rem;
		inset-inline-start: var(--mobile-drawer-button-inline-start);
		inset-inline-end: var(--mobile-drawer-button-inline-end);
		z-index: 999;
		box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 20%);
		touch-action: pan-y;
	}

	.js .sidebar-drawer__edge {
		position: fixed;
		inset-block: 0;
		inset-inline-start: var(--mobile-drawer-edge-inline-start);
		inset-inline-end: var(--mobile-drawer-edge-inline-end);
		z-index: 998;
		display: block;
		width: 2rem;
		touch-action: pan-y;
	}

	.js .sidebar-drawer.is-open > .sidebar-drawer__edge {
		pointer-events: none;
	}

	:is(#menu, .home-primary-guidance) .sidebar-links {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	:is(#menu, .home-primary-guidance) .sidebar-links__link {
		display: block;
		overflow: hidden;
		width: min(100%, 295px);
		margin-inline: auto;
		padding: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto;
		font-size: 0;
		line-height: 0;
		text-decoration: none;
	}

	:is(#menu, .home-primary-guidance) .sidebar-links__link:hover {
		opacity: 0.6;
	}

	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(1) .sidebar-links__link { aspect-ratio: 295 / 76; background-image: url(../../images/bt_donation.png); }
	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(2) .sidebar-links__link { aspect-ratio: 295 / 76; background-image: url(../../images/bt_access.png); }
	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(3) .sidebar-links__link { aspect-ratio: 295 / 76; background-image: url(../../images/bt_contact.png); }
	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(4) .sidebar-links__link { aspect-ratio: 295 / 74; background-image: url(../../images/bt_students.png); }
	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(5) .sidebar-links__link { aspect-ratio: 295 / 74; background-image: url(../../images/bt_takers.png); }
	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(6) .sidebar-links__link { aspect-ratio: 295 / 74; background-image: url(../../images/bt_download.png); }
	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(7) .sidebar-links__link { aspect-ratio: 295 / 75; background-image: url(../../images/bt_archive.png); }
	/* Facebook Primary Logo: 30px mark with at least 7.5px clear space. */
	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(8) {
		display: flex;
		width: 50px;
		margin: 0 0 3px auto;
	}

	:is(#menu, .home-primary-guidance) .sidebar-links__item:nth-child(8) .sidebar-links__link {
		width: 30px;
		height: 30px;
		margin: 7.5px 10px;
		aspect-ratio: 1;
		background-image: url(../../images/Facebook_Logo_Primary.png);
		background-position: center;
		background-size: 30px 30px;
	}

	:is(#menu, .home-primary-guidance) .sidebar__widgets {
		margin-top: 1rem;
	}

	/* The four existing SVG links form the requested 2 × 2 primary grid. */
	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav,
	:is(#menu, .home-primary-guidance) .mobile-navigation__utility #h_menu {
		float: none;
		width: auto;
		height: auto;
		margin: 0;
	}

	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul,
	:is(#menu, .home-primary-guidance) .mobile-navigation__utility #h_menu ul {
		display: grid;
		height: auto;
		margin: 0;
		padding: 0;
	}

	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-bottom: 1rem;
	}

	:is(#menu, .home-primary-guidance) .mobile-navigation__utility #h_menu ul {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 1rem;
		text-align: end;
	}

	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul li,
	:is(#menu, .home-primary-guidance) .mobile-navigation__utility #h_menu ul li {
		width: auto;
		margin: 0;
		padding: 0;
		background: none;
	}

	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul a,
	:is(#menu, .home-primary-guidance) .mobile-navigation__utility #h_menu ul a {
		display: block;
		height: auto;
		padding: 0;
		border: 0;
		color: var(--theme-link);
		line-height: 1.4;
		text-decoration: none;
	}

	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul a {
		min-height: 0;
		margin: 0.3rem;
		aspect-ratio: 110.5 / 30;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto;
		font-size: 0;
		line-height: 0;
		white-space: nowrap;
	}

	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul a#menu1 { background-image: url(../../images/nav_menu_school.svg); }
	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul a#menu2 { background-image: url(../../images/nav_menu_life.svg); }
	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul a#menu3 { background-image: url(../../images/nav_menu_curriculum.svg); }
	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul a#menu4 { background-image: url(../../images/nav_menu_career.svg); }

	:is(#menu, .home-primary-guidance) .mobile-navigation__utility #h_menu ul a {
		min-height: 0;
		padding: 0.5rem 0;
		font-size: 0.9rem;
	}

	:is(#menu, .home-primary-guidance) .mobile-navigation__primary nav#mainNav ul a:hover,
	:is(#menu, .home-primary-guidance) .mobile-navigation__utility #h_menu ul a:hover {
		opacity: 0.6;
		text-decoration: underline;
	}

	.js #wrap > .sidebar-drawer > #menu {
		position: fixed;
		inset-block: 0;
		inset-inline-start: var(--mobile-drawer-panel-inline-start);
		inset-inline-end: var(--mobile-drawer-panel-inline-end);
		z-index: 1001;
		width: var(--mobile-drawer-width);
		height: 100dvh;
		margin: 0;
		padding: 1rem;
		overflow-y: auto;
		background: #fff;
		box-shadow: var(--mobile-drawer-shadow);
		touch-action: pan-y;
		transform: translateX(var(--mobile-drawer-closed-translate));
		visibility: hidden;
		transition: transform 180ms ease, visibility 0s linear 180ms;
	}

	.js #wrap > .sidebar-drawer.is-open > #menu {
		transform: translateX(0);
		visibility: visible;
		transition: transform 180ms ease;
	}

	.js #wrap > .sidebar-drawer.is-dragging > #menu {
		visibility: visible;
		transition: none;
	}

	.js .sidebar-drawer__close:not([hidden]) {
		display: flex;
		margin: 0 0 1rem auto;
	}

	.js .sidebar-drawer__backdrop:not([hidden]) {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: block;
		background: rgb(0 0 0 / 45%);
		opacity: 0;
		pointer-events: none;
		transition: opacity 180ms ease;
	}

	.js .sidebar-drawer.is-open > .sidebar-drawer__backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.js .sidebar-drawer.is-dragging > .sidebar-drawer__backdrop {
		pointer-events: auto;
		transition: none;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.js .sidebar-drawer > #menu,
	.js .sidebar-drawer__backdrop:not([hidden]) {
		transition: none;
	}
}