/**
 * Zone 1b — Utility Bar
 *
 * Always-visible navigation bar: school picker (left), quick links + widgets (right).
 * Includes Staff Support dropdown, Translate dropdown, and Search toggle/bar.
 */

/* ── Container ── */
.epsd-zone-1b {
	background-color: var(--epsd-surface-inverse);
	border-bottom: 1px solid var(--epsd-border-default);
	padding: var(--epsd-space-sm) var(--epsd-space-lg);
	position: relative;
}

.epsd-zone-1b__inner {
	max-width: var(--epsd-wide-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--epsd-space-xs);
}

/* ── Left Group (Home + Picker) ── */
.epsd-zone-1b__left {
	display: flex;
	align-items: center;
	gap: var(--epsd-space-xs);
}

/* ── Home Link ── */
.epsd-zone-1b__home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--epsd-space-2xs);
	color: var(--epsd-text-inverse);
	transition: color var(--epsd-transition-fast);
	padding: var(--epsd-space-2xs);
	border-radius: var(--epsd-radius-sm);
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: var(--epsd-font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

a.epsd-zone-1b__home:hover {
	color: var(--epsd-color-gold-400);
}
.epsd-zone-1b__home:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
	color: var(--epsd-text-inverse);
}

.epsd-zone-1b__home-icon {
	display: block;
	width: 18px;
	height: 18px;
}

/* ── School Picker ── */
.epsd-zone-1b__picker {
	display: flex;
	align-items: center;
	gap: var(--epsd-space-xs);
	padding-left: var(--epsd-space-sm);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.epsd-zone-1b__picker-label {
	font-family: var(--epsd-font-sans);
	font-size: 0.75rem;
	font-weight: var(--epsd-font-weight-medium);
	color: var(--epsd-text-inverse);
	white-space: nowrap;
}

.epsd-zone-1b__picker-select {
	font-family: var(--epsd-font-sans);
	font-size: 0.75rem;
	color: var(--epsd-text-primary);
	background-color: var(--epsd-surface-primary);
	border: 1px solid var(--epsd-border-default);
	border-radius: var(--epsd-radius-sm);
	padding: var(--epsd-space-2xs) var(--epsd-space-xs);
	min-width: 180px;
	cursor: pointer;
	transition: border-color var(--epsd-transition-fast);
}

.epsd-zone-1b__picker-select:hover {
	border-color: var(--epsd-border-strong);
}

.epsd-zone-1b__picker-select:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

/* ── Quick Access Links ── */
.epsd-zone-1b__links {
	display: flex;
	align-items: center;
	gap: var(--epsd-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.epsd-zone-1b__link-item {
	margin: 0;
	padding: 0;
	position: relative;
}

.epsd-zone-1b__link {
	font-family: var(--epsd-font-sans);
	font-size: 0.75rem;
	color: var(--epsd-text-inverse);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color var(--epsd-transition-fast);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: var(--epsd-space-2xs) 0;
	border-radius: var(--epsd-radius-sm);
}

.epsd-zone-1b__link:hover {
	color: var(--epsd-color-gold-400);
}

.epsd-zone-1b__link:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
	color: var(--epsd-text-inverse);
}

/* ── Dropdown (Staff Support, Translate) ── */
.epsd-zone-1b__dropdown {
	position: relative;
}

.epsd-zone-1b__dropdown-toggle {
	font-family: var(--epsd-font-sans);
	font-size: 0.75rem;
	font-weight: inherit;
	color: var(--epsd-text-inverse);
	background: transparent;
	border: 0;
	padding: var(--epsd-space-2xs) 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--epsd-space-2xs);
	min-height: 24px;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color var(--epsd-transition-fast);
	white-space: nowrap;
}
.epsd-zone-1b .epsd-zone-1b__link:hover,
.epsd-zone-1b .epsd-zone-1b__link:focus,
.epsd-zone-1b .epsd-zone-1b__dropdown-toggle:hover,
.epsd-zone-1b .epsd-zone-1b__dropdown-toggle:focus,
.epsd-zone-1b .epsd-zone-1b__icon-toggle:hover,
.epsd-zone-1b .epsd-zone-1b__icon-toggle:focus{
    color: var(--epsd-color-gold-400) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.epsd-zone-1b__dropdown-toggle:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
	background-color: transparent;
}

.epsd-zone-1b__caret {
	transition: transform var(--epsd-transition-fast);
}

.epsd-zone-1b__dropdown-toggle[aria-expanded="true"] .epsd-zone-1b__caret {
	transform: rotate(180deg);
}

.epsd-zone-1b__dropdown-panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 200px;
	background-color: var(--epsd-surface-primary);
	border: 1px solid var(--epsd-border-default);
	border-radius: var(--epsd-radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0;
	padding: var(--epsd-space-2xs) 0;
	z-index: 999;
	display: none;
}

.epsd-zone-1b__dropdown-panel--right {
	left: auto;
	right: 0;
}

.epsd-zone-1b__dropdown.is-open .epsd-zone-1b__dropdown-panel {
	display: block;
}

.epsd-zone-1b__dropdown-link {
	display: block;
	width: 100%;
	text-align: left;
	padding: var(--epsd-space-xs) var(--epsd-space-md);
	font-family: var(--epsd-font-sans);
	font-size: 0.875rem;
	color: var(--epsd-text-primary);
	background: transparent;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--epsd-transition-fast), color var(--epsd-transition-fast);
}

.epsd-zone-1b__dropdown-link:hover,
.epsd-zone-1b__dropdown-link:focus-visible {
	background-color: var(--epsd-surface-secondary);
	color: var(--epsd-text-link-hover);
}

.epsd-zone-1b__dropdown-link:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: -2px;
}

/* ── Icon Toggle (Translate, Search) ── */
.epsd-zone-1b__icon-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--epsd-text-inverse);
	background: transparent;
	border: 0;
	border-radius: var(--epsd-radius-sm);
	cursor: pointer;
	padding: 0;
	transition: color var(--epsd-transition-fast), background-color var(--epsd-transition-fast);
}

.epsd-zone-1b__icon-toggle:hover {
	color: var(--epsd-text-link-hover);
	background-color: var(--epsd-surface-tertiary);
}

.epsd-zone-1b__icon-toggle:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
	background-color: transparent;
}

.epsd-zone-1b__icon-toggle[aria-expanded="true"] {
	color: var(--epsd-text-link-hover);
	background-color: var(--epsd-surface-tertiary);
}

/* ── Search Bar (full-width slide-down) ── */
.epsd-zone-1b__search-bar {
	display: none;
	padding: var(--epsd-space-sm) var(--epsd-space-lg);
}

.epsd-zone-1b__search-bar.is-open {
	display: block;
}

.epsd-zone-1b__search-form {
	max-width: var(--epsd-wide-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--epsd-space-xs);
}

.epsd-zone-1b__search-label {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--epsd-space-xs);
	background-color: var(--epsd-surface-secondary);
	border: 1px solid var(--epsd-border-default);
	border-radius: var(--epsd-radius-md, 6px);
	padding: var(--epsd-space-xs) var(--epsd-space-md);
	transition: border-color var(--epsd-transition-fast);
}

.epsd-zone-1b__search-label:focus-within {
	border-color: var(--epsd-interactive-primary);
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

.epsd-zone-1b__search-icon {
	color: var(--epsd-text-secondary);
	flex-shrink: 0;
}

.epsd-zone-1b .epsd-zone-1b__search-input {
	all: unset;
	padding:var(--epsd-space-2xs);
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--epsd-font-sans);
	font-size: 1rem;
	color: var(--epsd-text-primary);
	min-width: 0;
}
.epsd-zone-1b__search-bar input[type=search]:focus {
    outline: none;
}
.epsd-zone-1b__search-input::placeholder {
	color: var(--epsd-text-secondary);
}

.epsd-zone-1b .epsd-zone-1b__search-submit {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--epsd-accent-primary);
	color: var(--epsd-interactive-primary);
	border: 0;
	border-radius: var(--epsd-radius-md, 6px);
	cursor: pointer;
	transition: background-color var(--epsd-transition-fast);
}

.epsd-zone-1b__search-submit:hover {
	background-color: var(--epsd-interactive-primary-hover);
}

.epsd-zone-1b__search-submit:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

.epsd-zone-1b .epsd-zone-1b__search-close {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	color: var(--epsd-text-inverse);
	border: 0;
	border-radius: var(--epsd-radius-md, 6px);
	cursor: pointer;
	transition: background-color var(--epsd-transition-fast), color var(--epsd-transition-fast);
}

.epsd-zone-1b__search-close:hover {
	background-color: var(--epsd-surface-tertiary);
	color: var(--epsd-text-primary);
}

.epsd-zone-1b__search-close:focus-visible {
	outline: var(--epsd-focus-ring);
	outline-offset: var(--epsd-focus-ring-offset);
}

/* ── Hide Google Translate branding (banner/iframe) ──
   GT inserts a top banner and writes `style="top: 40px"` directly onto the
   <body> element. The element-style cascade requires our reset to match the
   body, but GT does NOT add the `translated-ltr/rtl` class on this build —
   only injects a `<div class="skiptranslate">` child. Scope via `:has()` to
   that injection marker so the reset only fires when GT is actually active
   and doesn't trample any other plugin that legitimately positions <body>.
   `:has()` support: Safari 15.4+, Chrome 105+, Firefox 121+. */
.goog-te-banner-frame,
.skiptranslate > iframe {
	display: none !important;
}

body:has(> .skiptranslate) {
	top: 0 !important;
}

/* Remove hidden Google Translate widget from tab order. */
#epsd-google-translate {
	display: none !important;
}

/* ── Drawer-active widths (≤1199px) ── */
/* When the Zone 2 drawer is reachable, the utility bar's text links and
   school picker are duplicates of items inside the drawer. Hide them here
   so the drawer is the single entry point for those destinations. */
@media (max-width: 1199px) {

	/* Hide utility text links — drawer Quick Links covers Calendars,
	   Employment, Athletics, Meal Menus, Staff Portal, PowerSchool. */
	.epsd-zone-1b__link-item:not(:has(.epsd-zone-1b__icon-toggle)) {
		display: none;
	}

	/* Hide school picker when Zone 2 is active — drawer Schools accordion
	   covers this destination. Sites without Zone 2 keep the picker; the
	   body class only appears when epsd_functions_zone2_active() is true. */
	body.epsd-zone-2-active .epsd-zone-1b__picker {
		display: none;
	}
}

/* ── Mobile (≤768px) — physical small-screen density ── */
@media (max-width: 768px) {

	.epsd-zone-1b {
		padding: var(--epsd-space-xs) var(--epsd-space-md);
	}

	/* Visually hide label but keep it for screen readers */
	.epsd-zone-1b__picker-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.epsd-zone-1b__links {
		gap: var(--epsd-space-xs);
	}

	.epsd-zone-1b__dropdown-panel {
		min-width: 180px;
	}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.epsd-zone-1b__caret,
	.epsd-zone-1b__dropdown-toggle,
	.epsd-zone-1b__icon-toggle,
	.epsd-zone-1b__search-label,
	.epsd-zone-1b__search-submit,
	.epsd-zone-1b__search-close,
	.epsd-zone-1b__link,
	.epsd-zone-1b__home,
	.epsd-zone-1b__picker-select,
	.epsd-zone-1b__dropdown-link {
		transition: none;
	}
}