:root {
	--endo-navy: #0A2559;
	--endo-gold: #D9A03B;
	--endo-red: #E0332F;
	--endo-green: #1D9E75;

	/* Vertical center of the *visible* viewport (updated by
	   quickactions.js on load/resize/orientationchange/scroll via
	   the visualViewport API where available). Falls back to 50%
	   of the layout viewport for browsers without JS/visualViewport
	   support, so the rail is never unstyled. */
	--endo-qa-center-top: 50%;
}

/* ---- Global horizontal-overflow guard.
   position:fixed elements don't normally add scrollable width of
   their own, but on some tablet browsers, combined with the
   viewport-recalculation nudges in header.js (which briefly touch
   html/body width during an orientation change), the page could
   still register extra scrollable width while the quick-actions
   rail sat far from the content container on very wide viewports.
   This is an unconditional belt-and-braces guard: the page should
   never scroll horizontally regardless of the cause. ---- */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

.endo-quickactions * { box-sizing: border-box; }

/* ---- Desktop / tablet / landscape phone: fixed vertical rail,
   sticky and vertically centered on the right edge of the visible
   viewport. This is the DEFAULT for every orientation and screen
   size; only narrow PORTRAIT phones override it below with a
   bottom bar instead. Landscape phones (which used to fall through
   to the old ≤640px width breakpoint and get the bottom bar even
   in landscape) now correctly keep this rail.

   The `right` offset is clamped to the site's 1400px max content
   width: on viewports narrower than that it sits 20px from the
   real screen edge as before; on very wide viewports (desktop,
   or a tablet whose browser chrome reports more width than the
   content container) it instead sits 20px from the CONTENT
   container's edge, so it never floats out past where the page's
   actual content ends. ---- */
.endo-quickactions {
	position: fixed;
	top: var(--endo-qa-center-top, 50%);
	right: max(20px, calc((100vw - 1400px) / 2 + 20px));
	left: auto;
	bottom: auto;
	max-width: calc(100vw - 40px);
	transform: translateY(-50%);
	z-index: 950;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(10, 37, 89, 0.18);
	overflow: hidden;
	/* Auto-hide on inactivity — see quickactions.js. Kept as a
	   variable-driven transform (rather than plain `right`) so the
	   hidden state slides the SAME direction the panel is docked to,
	   whichever edge that ends up being at the current breakpoint. */
	--endo-qa-hide-x: 130%;
	--endo-qa-hide-y: 0%;
	transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
}
.endo-quickactions.endo-qa-hidden {
	transform: translateY(-50%) translate(var(--endo-qa-hide-x), var(--endo-qa-hide-y));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* Respect reduced-motion preferences — snap instead of sliding. */
@media (prefers-reduced-motion: reduce) {
	.endo-quickactions { transition: opacity .15s ease, visibility .15s ease; }
}

.endo-qa-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 78px;
	padding: 14px 6px;
	text-decoration: none;
	color: var(--endo-navy);
	border-bottom: 1px solid #EEF1F6;
	transition: background .15s ease;
}
.endo-qa-item:last-child { border-bottom: 0; }

.endo-qa-item:hover {
	background: #F3F6FC;
}

.endo-qa-item .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: var(--endo-green);
}

.endo-qa-item.endo-qa-faculty .dashicons,
.endo-qa-item.endo-qa-enquire .dashicons {
	color: #2C6FE3;
}

.endo-qa-item.endo-qa-books .dashicons {
	color: var(--endo-gold);
}

.endo-qa-label {
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */

/* ---- Tablets: shrink the rail a little (still the vertical
   right-side rail, in both orientations). ---- */
@media (max-width: 991px) {
	.endo-qa-item {
		width: 66px;
		padding: 11px 4px;
	}
	.endo-qa-label { font-size: 9.5px; }
	.endo-qa-item .dashicons {
		font-size: 18px;
		width: 18px;
		height: 18px;
	}
}

/* ---- Phones in PORTRAIT only: convert to a fixed bottom bar, 4
   items in a row. Deliberately scoped to `orientation: portrait` —
   rotating to landscape (even on a narrow phone) keeps the vertical
   right-side rail from the default rule above instead, per the
   locked landscape layout. ---- */
@media (max-width: 640px) and (orientation: portrait) {
	.endo-quickactions {
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		max-width: 100%;
		transform: none;
		flex-direction: row;
		border-radius: 0;
		box-shadow: 0 -4px 16px rgba(10, 37, 89, 0.18);
		/* Respect iPhone home-indicator safe area. */
		padding-bottom: env(safe-area-inset-bottom, 0);
		/* Bottom bar hides downward, not sideways. */
		--endo-qa-hide-x: 0%;
		--endo-qa-hide-y: 130%;
	}
	.endo-quickactions.endo-qa-hidden {
		transform: translate(var(--endo-qa-hide-x), var(--endo-qa-hide-y));
	}
	.endo-qa-item {
		flex: 1 1 0;
		width: auto;
		padding: 10px 4px;
		border-bottom: 0;
		border-right: 1px solid #EEF1F6;
	}
	.endo-qa-item:last-child { border-right: 0; }

	body {
		padding-bottom: 64px;
	}
}

/* ---- Phones in LANDSCAPE with limited height: keep the vertical
   rail, just shrink it so it doesn't dominate a short viewport. ---- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
	.endo-qa-item {
		width: 56px;
		padding: 8px 4px;
	}
	.endo-qa-label { font-size: 8.5px; }
	.endo-qa-item .dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}
}