/*
 * SAU overrides for the CampusTours AnyTour map  —  live on /map/ + /virtual-tour/ (Oct 2026; designed on the since-removed /map-demo/)
 *
 * The app and its client stylesheet (style.ctpprojects.com/client/saumag.embed.css) belong to
 * CampusTours; we can only restyle from the host page. Their rules are written as
 * `#ct-app #ct-app-header ...` (two IDs), so every rule here starts `html body #ct-app#ct-app#ct-app` to
 * outrank them -- the base app CSS (anyre.base.css) goes up to 2 IDs + 3 classes. !important is used only where the app sets inline styles
 * or Google Maps owns the element.
 *
 * Audit findings this answers (mobile 375px unless noted):
 *  1. Off-brand blues (#2a54b1 / #3d63c8) on every control; brand is #003DA5 / gold #FAD200.
 *  2. Template placeholder colours left in the vendor CSS (magenta layer icons, yellow-on-lime
 *     active header items).
 *  3. Touch targets under 44px: panel close / view-on-map 28px, toolbar 36px, map-type 31px.
 *  4. Directions has a heavy offset shadow; Satellite/Roadmap have none.
 *  5. Toolbar is a translucent grey box that stops short of the screen edge.
 *  6. "Powered by" + "Keyboard Shortcuts" render in 12px Helvetica on white boxes over the map,
 *     and Keyboard Shortcuts is meaningless on a phone.
 *  7. Menu: the real calls to action (Schedule a Tour, Apply) are the weakest items; rows hug
 *     the left edge.
 *  8. Building panel body text is 14px; side padding is tight.
 *  9. The map panel's close (X) drops people from the map onto the intro screen.
 * 10. No visible keyboard focus on most custom controls.
 *
 * Not fixable from CSS (vendor list): initial zoom fits the whole 1,491-acre property (farm
 * included) so main campus is small on load; map takes several seconds to draw.
 */

:root {
	--sau-blue: #003da5;
	--sau-blue-dark: #002d79;
	--sau-blue-ink: #001f55;
	--sau-gold: #fad200;
	--sau-ink: #1f2937;
	--sau-muted: #5b6472;
	--sau-line: #e3e7ee;
	--sau-surface: #ffffff;
	--sau-radius: 10px;
	--sau-shadow: 0 2px 10px rgba(0, 31, 85, 0.22);
	--sau-tap: 44px;
	--sau-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--sau-body: "Nunito", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base type ---------- */

html body #ct-app#ct-app#ct-app {
	font-family: var(--sau-body);
	color: var(--sau-ink);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Focus (finding 10) ---------- */

html body #ct-app#ct-app#ct-app [role="button"]:focus-visible,
html body #ct-app#ct-app#ct-app button:focus-visible,
html body #ct-app#ct-app#ct-app a:focus-visible,
html body #ct-app#ct-app#ct-app input:focus-visible,
html body #ct-app#ct-app#ct-app .ct-list-item-button:focus-visible,
html body #ct-app#ct-app#ct-app [tabindex]:focus-visible {
	outline: 3px solid var(--sau-gold);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--sau-blue-ink);
}

/* ---------- Header + menu (findings 1, 2, 7) ---------- */

html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-menubutton {
	width: var(--sau-tap);
	height: var(--sau-tap);
	border-radius: var(--sau-radius);
	background: transparent;
	color: #fff;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-menubutton:hover,
html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-menubutton.ct-hover {
	background: rgba(255, 255, 255, 0.14);
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav.ct-active #ct-nav-menubutton {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
}

html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button {
	background: var(--sau-blue);
	color: #fff;
	min-height: 48px;
	padding: 12px 20px;
	font-family: var(--sau-head);
	font-weight: 600;
	font-size: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
}
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item.ct-active > .ct-list-item-button,
html body #ct-app#ct-app#ct-app #ct-app-header .ct-list-item.ct-active:not(.ct-layer-item) > .ct-list-item-button {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
}

/* Sub-lists and search results (tour stops etc.) */
html body #ct-app#ct-app#ct-app #ct-app-header .ct-list-item-list .ct-list-item > .ct-list-item-button,
html body #ct-app#ct-app#ct-app #ct-app-header .ct-search-results .ct-list-item > .ct-list-item-button {
	min-height: var(--sau-tap);
	padding: 11px 20px;
	font-size: 16px;
	color: var(--sau-ink);
	background: var(--sau-surface);
	border-bottom: 1px solid var(--sau-line);
}

/* Calls to action: Apply = gold primary, Schedule a Tour = outlined. Colours apply at every width;
   the side-by-side pill layout is phone-only (on desktop the CTAs sit in the header's top-right
   corner at the app's own size, and the 44px pills clipped there). */
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
	font-family: var(--sau-head);
	font-weight: 700;
}
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button a {
	color: inherit;
	text-decoration: none;
}
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-callstoaction > .ct-list-item:last-child > .ct-list-item-button {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
	box-shadow: none;
}
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button:hover {
	filter: brightness(1.06);
}

html body #ct-app#ct-app#ct-app #ct-app-header .ct-search-box-input {
	font-size: 16px; /* 16px stops iOS zooming the page on focus; height left to the app so the icon stays aligned */
	border-radius: var(--sau-radius);
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-share {
	min-height: var(--sau-tap);
	padding: 0 20px;
	display: flex;
	align-items: center;
	background: var(--sau-blue);
	color: #fff;
	font-family: var(--sau-head);
	font-weight: 600;
	font-size: 15px;
}

/* Placeholder colours from the vendor template (finding 2) */
html body #ct-app#ct-app#ct-app .ct-layer-item > .ct-list-item-button > .ct-layer-item-icon {
	border-color: var(--sau-blue);
	color: var(--sau-blue);
}

/* ---------- Map overlay controls (findings 1, 3, 4, 5, 9) ---------- */

html body #ct-app#ct-app#ct-app .ct-googlemappanel-directionsbutton,
html body #ct-app#ct-app#ct-app .ct-googlemappanel-maptypes-type,
html body #ct-app#ct-app#ct-app .ct-mappanel-lists-content > li > .ct-list-item-button,
html body #ct-app#ct-app#ct-app .ct-mappanel-controls-reset {
	background: var(--sau-blue);
	color: #fff;
	min-height: var(--sau-tap);
	border-radius: 999px;
	box-shadow: var(--sau-shadow);
	font-family: var(--sau-head);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 150ms ease, transform 150ms ease;
}
html body #ct-app#ct-app#ct-app .ct-googlemappanel-directionsbutton,
html body #ct-app#ct-app#ct-app .ct-googlemappanel-maptypes-type,
html body #ct-app#ct-app#ct-app .ct-mappanel-lists-content > li > .ct-list-item-button {
	padding: 0 18px;
	height: var(--sau-tap);
}
html body #ct-app#ct-app#ct-app .ct-googlemappanel-directionsbutton:hover,
html body #ct-app#ct-app#ct-app .ct-googlemappanel-maptypes-type:hover,
html body #ct-app#ct-app#ct-app .ct-mappanel-lists-content > li > .ct-list-item-button:hover,
html body #ct-app#ct-app#ct-app .ct-mappanel-controls-reset:hover {
	background: var(--sau-blue-dark);
}
html body #ct-app#ct-app#ct-app .ct-googlemappanel-directionsbutton:active,
html body #ct-app#ct-app#ct-app .ct-mappanel-lists-content > li > .ct-list-item-button:active,
html body #ct-app#ct-app#ct-app .ct-mappanel-controls-reset:active {
	transform: scale(0.97);
}

/* Satellite | Roadmap as one segmented pill; selected = gold */
html body #ct-app#ct-app#ct-app .ct-googlemappanel-maptypes {
	display: flex;
	padding: 3px;
	gap: 0;
	border-radius: 999px;
	background: var(--sau-blue);
	box-shadow: var(--sau-shadow);
}
html body #ct-app#ct-app#ct-app .ct-googlemappanel-maptypes-type {
	box-shadow: none;
	height: 38px;
	min-height: 38px;
	margin: 0;
	padding: 0 14px;
}
html body #ct-app#ct-app#ct-app .ct-googlemappanel-maptypes-type.selected {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
}

/* Open list tab (Locations / Layers) = gold */
html body #ct-app#ct-app#ct-app .ct-mappanel-lists-content > li.ct-active > .ct-list-item-button {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
}

/*
 * Bottom-left tab strip (Locations / Layers) lives in .ct-mappanel-lists: a fixed 60px box, which
 * clipped 44px tabs. Grow it to fit and keep its bottom-left anchor so the open list (positioned
 * 48px above the tabs by the app) still lines up. When a list is open the app makes the box
 * full-screen with a dim backdrop (.ct-active) — leave that state's size alone.
 */
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-mappanel-lists {
	/* The app also offsets this box 10px/15px; anchor it to the corner and space with padding so
	   the tabs line up with Directions (12px in) and the reset button (18px up). */
	left: 0;
	bottom: 0;
	padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px)) 12px;
}
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-mappanel-lists:not(.ct-active) {
	height: auto;
	width: auto;
}
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-mappanel-lists .ct-mappanel-lists-content {
	overflow: visible;
	height: auto;
	display: flex;
	gap: 8px;
}
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-mappanel-lists .ct-mappanel-lists-content > .ct-list-item > .ct-list-item-button {
	margin-right: 0;
}
/* Open list: anchored above the tabs, nearly full width on phones, scrolls */
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-mappanel-lists .ct-mappanel-lists-content > .ct-list-listItem > .ct-list-item-list {
	bottom: 56px;
	width: min(340px, calc(100vw - 24px));
	max-height: min(60vh, calc(100vh - 220px));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Reset-view button: its container stretched across the map as a grey slab — shrink to the button */
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-mappanel-controls {
	background: transparent;
	padding: 0;
	left: auto;
	right: 12px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-mappanel-controls .ct-mappanel-controls-reset {
	width: var(--sau-tap);
	height: var(--sau-tap);
	line-height: var(--sau-tap);
	margin: 0;
	padding: 0;
	border-radius: 999px;
}

/* Locations / Layers dropdown list */
html body #ct-app#ct-app#ct-app .ct-mappanel-lists .ct-list-item-list,
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-list-item-list {
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 31, 85, 0.28);
	background: var(--sau-surface);
}
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-list-item-list > .ct-list-item > .ct-list-item-button {
	min-height: var(--sau-tap);
	padding: 11px 16px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--sau-ink);
	background: var(--sau-surface);
	border-bottom: 1px solid var(--sau-line);
	display: flex;
	align-items: center;
}
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-list-item-list > .ct-list-item > .ct-list-item-button:hover,
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-list-item-list > .ct-list-item > .ct-list-item-button.ct-hover {
	background: #eef3fb;
	color: var(--sau-blue-ink);
}
html body #ct-app#ct-app#ct-app .ct-mappanel .ct-list-item-list > .ct-list-item.ct-active > .ct-list-item-button {
	background: #eef3fb;
	color: var(--sau-blue-ink);
	box-shadow: inset 4px 0 0 var(--sau-gold);
}

/* ---------- Building detail panel (findings 3, 8) ---------- */

html body #ct-app#ct-app#ct-app .ct-panel__header {
	align-items: center;
	padding: 10px 12px 6px 18px;
	gap: 8px;
}
html body #ct-app#ct-app#ct-app .ct-panel__title {
	font-family: var(--sau-head);
	font-weight: 800;
	font-size: 21px;
	line-height: 1.2;
	color: var(--sau-blue-ink);
}
html body #ct-app#ct-app#ct-app .ct-header-button {
	width: var(--sau-tap);
	height: var(--sau-tap);
	min-width: var(--sau-tap);
	border-radius: 999px;
	background: var(--sau-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
html body #ct-app#ct-app#ct-app .ct-header-button:hover {
	background: var(--sau-blue-dark);
}
html body #ct-app#ct-app#ct-app .ct-panel__sub-header {
	padding: 0 18px;
	gap: 10px;
	align-items: center;
}
html body #ct-app#ct-app#ct-app .ct-panel__address {
	font-family: var(--sau-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--sau-muted);
}
html body #ct-app#ct-app#ct-app .ct-panel__directions {
	width: var(--sau-tap);
	height: var(--sau-tap);
	min-width: var(--sau-tap);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
}
html body #ct-app#ct-app#ct-app .ct-panel__parking {
	padding: 4px 18px 10px;
}
html body #ct-app#ct-app#ct-app .ct-panel__parking-lot {
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	background: #eef3fb;
	color: var(--sau-blue-ink);
}
html body #ct-app#ct-app#ct-app .ct-panel__content {
	/* The app sizes this as content-box calc(100% - 20px) with 10px margins; take that over so
	   the extra side padding doesn't push the photo and text off the right edge. */
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
html body #ct-app#ct-app#ct-app .ct-content-building__description,
html body #ct-app#ct-app#ct-app .ct-content-building__description p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--sau-ink);
}
html body #ct-app#ct-app#ct-app .ct-component-media,
html body #ct-app#ct-app#ct-app .ct-component-media img {
	border-radius: var(--sau-radius);
}
html body #ct-app#ct-app#ct-app .ct-content-building__list h2,
html body #ct-app#ct-app#ct-app .ct-content-building__list h3,
html body #ct-app#ct-app#ct-app .ct-list--new h2,
html body #ct-app#ct-app#ct-app .ct-list--new h3 {
	font-family: var(--sau-head);
	font-weight: 700;
	font-size: 16px;
	color: var(--sau-blue-ink);
}
html body #ct-app#ct-app#ct-app .ct-list--new li {
	min-height: var(--sau-tap);
	font-size: 16px;
}

/* ---------- Attribution footer (finding 6) ---------- */

html body #ct-app#ct-app#ct-app #ct-app-poweredby {
	left: auto;
	right: 0;
	bottom: env(safe-area-inset-bottom, 0px);
	width: auto;
	padding: 0;
	pointer-events: none;
	text-align: right;
}
html body #ct-app#ct-app#ct-app #ct-app-poweredby-content,
html body #ct-app#ct-app#ct-app #ct-app-poweredby__shortcuts {
	pointer-events: auto;
	font-family: var(--sau-body);
	font-size: 11px;
	line-height: 1;
	color: var(--sau-muted);
	background: rgba(255, 255, 255, 0.82);
	padding: 4px 8px;
	border: 0;
	border-radius: 6px 0 0 0;
}
html body #ct-app#ct-app#ct-app #ct-app-poweredby-content a {
	color: var(--sau-muted);
}

/* ---------- Header (Oct 8 2026, Josh): #002D79 underline + nav items (hover gold), taller desktop bar,
   branded pill CTAs / search ---------- */

/* The app leaves a 6px padding-top gap under the header (which showed #ct-app's background, and in the map
   view got washed out to a pale blue). Removed. */
html body #ct-app#ct-app#ct-app {
	background: var(--sau-blue-dark);
}
html body #ct-app#ct-app#ct-app #ct-app-main {
	/* Oct 8 (Josh): no line under the bar; the 6px went to a taller header and bigger logo */
	padding-top: 0;
	border-top: 0;
}

/* Nav items: deep blue tabs that sit on the bottom edge; open item gold */
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button {
	background: var(--sau-blue-dark);
	border-bottom: 0;
}
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button:hover,
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button.ct-hover,
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button:focus {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
}
html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item.ct-active > .ct-list-item-button {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
}

@media (min-width: 1000px) {
	/* Option D, chosen Oct 8 2026 (mockups: campustours/mockups/), revised the same day: every top-bar button
	   matches the landing panel's buttons (44px pill, Montserrat 700 16px, 2px white ring or gold fill; hover =
	   white fill + slight grow). Order: Virtual Tour (gold) | Map | Request Info ... share, search,
	   Schedule a Tour, Apply (gold). No dark line under the bar; that height went to a bigger logo.
	   The app switches to this desktop header at 1000px (anyre.base.css); below that it is the phone layout.
	   CTAs, search and share are absolutely placed against #ct-nav-content, which is moved to top:29px, so
	   top:0 puts them on the same 44px line as the nav buttons. */
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header {
		height: 102px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-logo {
		height: 82px;
		width: auto;
		padding: 0;
		margin: 10px 0 10px 28px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav {
		margin-left: 40px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content {
		top: 29px;
		bottom: auto;
		height: 44px;
	}

	/* Nav: same buttons as the landing panel. Virtual Tour (2nd item in the app's markup) moves first. */
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item {
		margin: 0;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item:nth-child(2) {
		order: -1;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button {
		min-height: var(--sau-tap);
		height: var(--sau-tap);
		padding: 0 24px;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: #fff;
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
		font-family: var(--sau-head);
		font-weight: 700;
		font-size: 16px;
		line-height: 1;
		transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item:nth-child(2) > .ct-list-item-button,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction > .ct-list-item:last-child > .ct-list-item-button {
		background: var(--sau-gold);
		color: var(--sau-blue-ink);
		box-shadow: none;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button:hover,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button.ct-hover,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button:focus,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item.ct-active > .ct-list-item-button,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button:hover {
		background: #fff;
		color: var(--sau-blue-ink);
		box-shadow: none;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button:hover,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button.ct-hover,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button:hover {
		transform: scale(1.04);
		filter: none;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button a {
		color: inherit;
		text-decoration: none;
	}

	/* Right side, one line, right edge 28px in: [share] 12 [search 200] 28 [Schedule a Tour] 10 [Apply] (CTA group measures 289px) */
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction {
		display: flex;
		gap: 10px;
		top: -1px; /* the list sits 1px low relative to the search and share */
		right: 28px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction > .ct-list-item {
		margin: 0; /* a 3px list margin pushed Apply off the right edge */
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search {
		top: 0;
		right: 345px;
		width: 200px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box {
		width: 100%;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-input {
		/* vendor rule chains 4 IDs here */
		margin: 0;
		padding: 0 16px 0 42px;
		height: var(--sau-tap);
		border-radius: 999px;
		width: 100%;
		box-sizing: border-box;
		font-family: var(--sau-body);
		font-size: 16px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-icon {
		left: 15px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-nav-share {
		top: 0;
		right: 557px;
		width: var(--sau-tap);
		height: var(--sau-tap);
		min-height: var(--sau-tap);
		padding: 0;
		justify-content: center;
		border-radius: 999px;
		background: var(--sau-blue-dark);
	}
	/* Language switcher: on the right-hand line, 12px left of Share */
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container {
		position: absolute;
		top: 29px;
		right: 613px;
		z-index: 5;
	}
	/* Desktop: icon-only globe, the same 44px dark circle as Share (Josh, Oct 8: the "English" pill made the
	   right-hand row cluttered). Doubled #ct-header-nav: the shared switcher rules come later in the file. Weglot's aria-label ("Language Switcher: English") still names it. */
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown.open {
		width: var(--sau-tap) !important;
		min-width: 0 !important;
		padding: 0;
		justify-content: center;
		background: var(--sau-blue-dark);
		box-shadow: none;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent a {
		gap: 0;
		font-size: 0; /* hides "English"; the globe has its own size */
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent::after {
		display: none;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within {
		background: var(--sau-gold);
	}

	/* Weglot's open state widens the switcher to the list's width; the 44px rule above pins it. The list overhangs. */
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .language-list {
		position: absolute;
		top: 100%;
		right: 0;
		left: auto;
		width: max-content;
		min-width: 240px;
	}

}

/* Breathing room at both ends of the bar (Josh: "a bit tight"): logo 24px in, right-side controls 28px in */
/* Top-right calls to action: pills, off the top edge */
/* Search: pill field under the CTAs, share as a round button beside it */

/* ---------- Desktop right-hand section (Oct 8, Josh chose C wide -> D narrower; mockups/header_right_variants.py) ----------
 * Globe, Share and Search sit together in one dark capsule (drawn as #ct-nav-content::before; the pieces are
 * separately absolute-positioned by the app, so they can't share a real wrapper), then Schedule a Tour + Apply.
 *   >= 1360px  C: capsule holds a 200px search field.
 *   1000-1359  D: search collapses to an icon; focusing it widens the capsule, fades globe + share.
 * Offsets are right: values; the CTA group (Schedule a Tour + Apply) measures 289px at right 28px. */
@media (min-width: 1000px) {
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content::before {
		content: "";
		position: absolute;
		top: -4px;
		height: 52px;
		border-radius: 999px;
		background: rgba(0, 20, 60, 0.35);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
		transition: width 200ms ease;
		pointer-events: none;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-nav-share,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav .weglot-container {
		z-index: 2;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-nav-share {
		background: transparent !important;
		transition: background-color 150ms ease, opacity 150ms ease;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-nav-share:hover {
		background: rgba(255, 255, 255, 0.16) !important;
	}
}
@media (min-width: 1360px) {
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content::before {
		right: 341px;
		width: 312px; /* 4 + globe 44 + 8 + share 44 + 8 + search 200 + 4 */
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search {
		right: 345px;
		width: 200px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-nav-share {
		right: 553px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav .weglot-container {
		right: 605px;
	}
	/* Open: grow left across the whole capsule (the app's own focus width overran it onto share). */
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search:focus-within {
		width: 304px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav:has(.ct-search:focus-within) #ct-nav-share,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav:has(.ct-search:focus-within) .weglot-container {
		opacity: 0;
		pointer-events: none;
	}
}
@media (min-width: 1000px) and (max-width: 1359px) {
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content::before {
		right: 341px;
		width: 156px; /* 4 + three 44px icons + two 8px gaps + 4 */
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search {
		right: 345px;
		width: 44px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-nav-share {
		right: 397px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav .weglot-container {
		right: 449px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box {
		width: 100%;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-input {
		width: 100% !important;
		min-width: 0 !important;
		padding: 0 0 0 44px;
		background: transparent;
		color: #fff;
		cursor: pointer;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-input::placeholder {
		color: transparent;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-icon {
		left: 13px;
		color: #fff;
	}
	/* Open: the field grows left over the capsule, which widens with it; globe + share step aside. */
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search:focus-within {
		width: 240px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-input:focus {
		padding-right: 16px;
		background: #fff;
		color: var(--sau-ink);
		cursor: text;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-input:focus::placeholder {
		color: #555;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search:focus-within .ct-search-box .ct-search-box-icon {
		color: var(--sau-blue);
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content:has(.ct-search:focus-within)::before {
		width: 248px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav:has(.ct-search:focus-within) #ct-nav-share,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav:has(.ct-search:focus-within) .weglot-container {
		opacity: 0;
		pointer-events: none;
	}
}

/* Search, every desktop width: the app adds .ct-focused on focus, which drops the box 4px and shrinks it to
   40px, and puts a 5px navy shadow round the input; our gold :focus-visible outline sat 2px outside that.
   The open field read taller than the capsule. Hold it at 44px in place, gold ring drawn inside the field. */
@media (min-width: 1000px) {
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search.ct-focused {
		top: 0;
		height: 44px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box {
		height: 44px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-input:focus {
		outline: none;
		box-shadow: inset 0 0 0 2px var(--sau-gold);
	}
	/* Slide the field out leftwards and let the capsule follow, rather than a quick snap (Josh, Oct 8). */
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content::before {
		transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-nav-share,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav .weglot-container {
		transition: opacity 160ms ease;
	}
}
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content::before {
		transition: none;
	}
}

/* 1000-1159px: even D collides with the nav (overlap up to 128px at 1000). Compact the bar: smaller logo,
   tighter button padding / 15px type, 20px side insets. CTA group measures 243px here. */
@media (min-width: 1000px) and (max-width: 1159px) {
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-logo {
		height: 60px;
		margin: 21px 0 21px 20px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav {
		margin-left: 24px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar {
		gap: 8px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button,
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button {
		padding: 0 13px; /* Josh, Oct 8: still tight at this width */
		font-size: 14px;
	}
	/* the vendor sets 16px on the nav labels themselves, so the button size alone doesn't reach them */
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button .ct-list-item-label {
		font-size: 14px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-nav-callstoaction {
		right: 20px;
		gap: 8px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav #ct-nav-content::before {
		right: 261px; /* 20 + CTA 220 + 21 */
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header .ct-search {
		right: 265px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-nav-share {
		right: 317px;
	}
	html body #ct-app#ct-app#ct-app:not(.ct-show-mobile) #ct-app-header #ct-header-nav#ct-header-nav .weglot-container {
		right: 369px;
	}
}

/* ---------- Share + keyboard-shortcut dialogs (Oct 8): soft shadow, no black border, brand buttons ---------- */

html body #ct-app#ct-app#ct-app .ct-dialog,
html body .ct-dialog {
	border: 1px solid var(--sau-line);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 31, 85, 0.22);
	overflow: hidden;
	font-family: var(--sau-body);
	color: var(--sau-ink);
}
html body .ct-dialog .ct-dialog__header {
	background: var(--sau-blue);
	color: #fff;
	border-radius: 0;
	padding: 10px 10px 10px 18px;
	align-items: center;
}
html body .ct-dialog .ct-dialog__title {
	font-family: var(--sau-head);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
}
html body .ct-dialog .ct-dialog__button {
	background: var(--sau-blue);
	color: #fff;
	border-radius: 999px;
	font-family: var(--sau-head);
	font-weight: 700;
	transition: background-color 150ms ease;
}
html body .ct-dialog .ct-dialog__button:hover {
	background: var(--sau-blue-dark);
}
html body .ct-dialog .ct-dialog__button--close {
	width: 36px;
	height: 36px;
	min-width: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
html body .ct-dialog .ct-dialog__button--close:hover {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
	box-shadow: none;
}
html body .ct-dialog .ct-dialog__link {
	padding: 16px 18px 6px;
	font-size: 15px;
	word-break: break-all;
}
html body .ct-dialog .ct-dialog__button--copy-link {
	margin: 10px auto 18px;
	padding: 10px 22px;
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
}
html body .ct-dialog .ct-dialog__button--copy-link:hover {
	background: var(--sau-blue);
	color: #fff;
}

/* ---------- Landing screen panel (Oct 8, Josh: "buttons feel adrift") ----------
 * the page (build.py INTRO) adds <div class="sau-intro"> inside .ct-app-background and moves the app's
 * own two .ct-background-button elements into it (their click data travels with them). Panels the
 * app opens cover the background, so the intro hides itself whenever the map or tour is open.
 * Glass is SAU blue-dark, not translucent white: the video behind it varies from sky to turf, and
 * white text needs >= 4.5:1 against the worst frame.
 */
html body #ct-app#ct-app#ct-app .sau-intro {
	position: absolute;
	left: 48px;
	bottom: 56px;
	z-index: 5;
	width: min(460px, calc(100% - 96px));
	box-sizing: border-box;
	padding: 28px 30px 30px;
	border-radius: 18px;
	background: rgba(0, 45, 121, 0.74);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 18px 40px rgba(0, 15, 45, 0.35);
	color: #fff;
}
html body #ct-app#ct-app#ct-app .sau-intro__eyebrow {
	margin: 0 0 10px;
	font-family: var(--sau-head);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sau-gold);
}
html body #ct-app#ct-app#ct-app .sau-intro__title {
	margin: 0 0 10px;
	font-family: var(--sau-head);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.1;
	color: #fff;
}
html body #ct-app#ct-app#ct-app .sau-intro__text {
	margin: 0 0 22px;
	font-family: var(--sau-body);
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}
html body #ct-app#ct-app#ct-app .sau-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
/* The app's buttons, re-homed: static pills instead of absolutely placed yellow blobs */
html body #ct-app#ct-app#ct-app .sau-intro .ct-background-button {
	position: static !important; /* the app positions these inline */
	transform: none !important;
	inset: auto !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	min-height: var(--sau-tap);
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-family: var(--sau-head);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
html body #ct-app#ct-app#ct-app .sau-intro .ct-background-button:first-child {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
	box-shadow: none;
}
html body #ct-app#ct-app#ct-app .sau-intro .ct-background-button:hover {
	background: #fff;
	color: var(--sau-blue-ink);
	box-shadow: none;
	transform: scale(1.04) !important;
}
/* Video pause/play: bottom right, above the attribution, so it never sits under the panel */
html body #ct-app#ct-app#ct-app .ct-app-background__video-play-button {
	left: auto !important;
	right: 28px !important;
	bottom: 36px !important;
	top: auto !important;
}

/* ---------- Landing gap + map close + control row (Oct 8 review) ---------- */

/* The app parks the landing background 6px below the header (it matched the padding gap removed above),
   which left a dark sliver under the bar on the landing screen. */
html body #ct-app#ct-app#ct-app .ct-app-background {
	top: 0;
}

/* Map panel close (X): a 40px round button, top-right. Directions, the map-type switch and the X share
   one row 12px from the top on every screen size; the switch moves left to clear the X. */
html body #ct-app#ct-app#ct-app #ct-app-main .ct-mappanel .ct-panel-header .ct-panel-close {
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 999px;
	background: var(--sau-blue-dark);
	color: #fff;
	font-size: 20px;
	box-shadow: var(--sau-shadow);
	transition: background-color 150ms ease, color 150ms ease;
}
html body #ct-app#ct-app#ct-app #ct-app-main .ct-mappanel .ct-panel-header .ct-panel-close:hover {
	background: var(--sau-gold);
	color: var(--sau-blue-ink);
}
html body #ct-app#ct-app#ct-app .ct-googlemappanel .ct-googlemappanel-directionsbutton {
	top: 12px;
	left: 12px;
}
html body #ct-app#ct-app#ct-app .ct-googlemappanel .ct-googlemappanel-maptypes {
	top: 12px;
	right: 64px;
}

/* ---------- Language switcher (Weglot, Oct 8) ----------
 * CampusTours' hosted pages load Weglot (English + Español Latinoamericano); our self-hosted page now does too.
 * SAU's Weglot settings drop the switcher into #ct-header-nav. Styled as one of our pill buttons: globe
 * instead of the UK flag (a flag is a country, not a language), white ring, hover = white fill.
 * The language list's display is toggled inline by Weglot's JS, so only its look is set here. */
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--sau-tap);
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent {
	display: flex;
	align-items: center;
	width: auto;
	border: 0;
	background: transparent;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	color: #fff;
	font-family: var(--sau-head);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent .wg-flag {
	display: none;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent a::before {
	/* globe drawn with a CSS mask so it takes the text colour (no icon-font dependency) */
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent::after {
	/* Weglot's caret image pointed the wrong way once restyled; a plain CSS chevron in the text colour */
	content: "";
	position: static;
	display: block;
	width: 7px;
	height: 7px;
	margin: -4px 0 0 10px;
	background: none;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	filter: none;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover,
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within {
	background: #fff;
	box-shadow: none;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover .wgcurrent a,
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within .wgcurrent a {
	color: var(--sau-blue-ink);
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover .wgcurrent::after,
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within .wgcurrent::after {
	border-color: var(--sau-blue-ink);
}
/* Touch screens: a tap leaves :hover stuck, so keep the outline look there (the open list shows the state). */
@media (hover: none) {
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within {
		background: transparent;
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover .wgcurrent a,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within .wgcurrent a {
		color: #fff;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover .wgcurrent::after,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within .wgcurrent::after {
		border-color: #fff;
	}
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .language-list {
	min-width: 250px;
	margin-top: 8px;
	padding: 6px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 31, 85, 0.25);
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .language-list .language-option a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--sau-ink);
	font-family: var(--sau-body);
	font-size: 15px;
	text-decoration: none;
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .language-list .language-option a:hover {
	background: #eef3fb;
	color: var(--sau-blue-ink);
}
html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .language-list .wg-flag {
	width: 22px;
	height: auto;
	border-radius: 2px;
}

/* ---------- Phones + tablets (the app's < 1000px layout) ---------- */

@media (max-width: 999px) {
	/* Matches the app's own phone/tablet layout (< 1000px). */
	/* Keyboard shortcuts mean nothing without a keyboard */
	html body #ct-app#ct-app#ct-app #ct-app-poweredby__shortcuts {
		display: none;
	}

	/* Google's zoom / Street View / fullscreen controls: lift them clear of our bottom row */
	html body #ct-app#ct-app#ct-app .gmnoprint.gm-bundled-control,
	html body #ct-app#ct-app#ct-app .gm-fullscreen-control {
		margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Menu calls to action: side-by-side pills under the header */
	html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-callstoaction {
		display: flex;
		gap: 10px;
		padding: 12px 16px;
		background: var(--sau-blue-ink);
	}
	html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-callstoaction > .ct-list-item {
		flex: 1 1 0;
		border: 0;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-callstoaction > .ct-list-item > .ct-list-item-button {
		min-height: var(--sau-tap);
		padding: 0 12px;
		border-radius: 999px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		text-align: center;
	}

	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-logo {
		margin-left: 12px;
	}

	/* Landing panel: full width along the bottom, buttons share the row */
	html body #ct-app#ct-app#ct-app .sau-intro {
		left: 12px;
		right: 12px;
		bottom: calc(30px + env(safe-area-inset-bottom, 0px));
		width: auto;
		padding: 20px 18px 18px;
		border-radius: 16px;
	}
	html body #ct-app#ct-app#ct-app .sau-intro__eyebrow {
		font-size: 11px;
		letter-spacing: 0.06em; /* keeps the coordinates on one line at 375px */
	}
	html body #ct-app#ct-app#ct-app .sau-intro__title {
		font-size: 24px;
	}
	html body #ct-app#ct-app#ct-app .sau-intro__text {
		font-size: 15px;
		margin-bottom: 16px;
	}
	html body #ct-app#ct-app#ct-app .sau-intro .ct-background-button {
		flex: 1 1 0;
		padding: 0 12px;
		font-size: 15px;
	}
	html body #ct-app#ct-app#ct-app .ct-app-background__video-play-button {
		right: 12px !important;
		bottom: auto !important;
		top: 12px !important;
	}

	/* Menu button: centred in the 70px bar. It is positioned against #ct-header-nav, which now starts at 70px
	   (the app's -46px top was relative to 76px), so set top explicitly instead of nudging. */
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-menubutton {
		top: -57px;
		transform: translateX(-16px);
	}

	/* Directions + map-type switch + X share a 390px row: tighter buttons so they don't overlap */
	html body #ct-app#ct-app#ct-app .ct-googlemappanel .ct-googlemappanel-directionsbutton {
		padding: 0 14px;
		font-size: 14px;
	}
	html body #ct-app#ct-app#ct-app .ct-googlemappanel .ct-googlemappanel-maptypes-type {
		padding: 0 11px;
		font-size: 14px;
	}

	/* Open menu starts flush under the 70px bar (the app leaves the same 6px gap here, which showed the
	   video's sky as a white sliver) */
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav {
		top: 70px;
	}

	/* Menu rows: the app gives each row a 1px margin over a transparent container, so slivers of the dimmed
	   page showed between rows. Solid backing, no margins, one faint divider. */
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-content {
		background: var(--sau-blue-dark);
	}
	html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-share {
		margin: 0;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item > .ct-list-item-button,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-share {
		border: 0;
		box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.10);
	}

	/* Language switcher: last row of the open menu, a full-width pill; the list opens in place.
	   Weglot inserts it ahead of the menu content, so the menu column is reordered to put it last. */
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav {
		display: flex;
		flex-direction: column;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container {
		order: 99;
		display: block;
		position: static;
		box-sizing: border-box;
		width: 100%;
		padding: 0 16px 16px;
		background: var(--sau-blue-dark) !important; /* Weglot's stylesheet sets its own background */
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown {
		position: relative;
		width: 100%;
		justify-content: center;
	}
	/* Phones: the open menu is its own scroll box, so a list hanging below the switcher got clipped (Josh,
	   Oct 8). Put the pill look on the "English" row itself and keep the list in the flow under it; the menu
	   grows (and scrolls) to fit instead of clipping. */
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within {
		display: block;
		height: auto;
		padding: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent {
		height: var(--sau-tap);
		justify-content: center;
		border-radius: 999px;
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent a,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover .wgcurrent a,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within .wgcurrent a {
		color: #fff;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .wgcurrent::after,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:hover .wgcurrent::after,
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown:focus-within .wgcurrent::after {
		border-color: #fff;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .language-list {
		position: static;
		width: auto;
		min-width: 0;
		margin-top: 8px;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav .weglot-container .weglot_switcher.default_dropdown .language-list .language-option a {
		justify-content: center;
		padding: 14px 12px;
		font-size: 16px;
	}

	/* Phone menu: Virtual Tour first (as on desktop); Share matches the other rows; search in a dark band */
	html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar {
		display: flex;
		flex-direction: column;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header .ct-nav-menubar > .ct-list-item:nth-child(2) {
		order: -1;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-nav-share {
		background: var(--sau-blue-dark);
	}
	html body #ct-app#ct-app#ct-app #ct-app-header .ct-search {
		box-sizing: border-box;
		padding: 12px 16px 16px;
		background: var(--sau-blue-dark);
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-input {
		margin: 0;
		width: 100%;
		height: var(--sau-tap);
		box-sizing: border-box;
		padding: 0 16px 0 44px;
		border-radius: 999px;
	}
	html body #ct-app#ct-app#ct-app #ct-app-header #ct-header-nav #ct-nav-content .ct-search .ct-search-box .ct-search-box-icon {
		left: 16px;
	}
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html body #ct-app#ct-app#ct-app * {
		transition: none !important;
		animation: none !important;
	}
}