/*
 * Mobile/tablet overflow fixes (added during the Next.js migration, not part of the original CSS).
 * Loaded after the original stylesheets. Every rule is inside a max-width media query,
 * so desktop (960px and wider) is unchanged.
 */

@media only screen and (max-width: 959px) {
	/* Content images: shrink to fit the column, keeping proportions. Images that already fit are
	   unchanged (their width/height attributes still decide the size). The 14px is the 7px white frame. */
	.left-content img {
		max-width: 100%;
		height: auto;
	}
	.left-content img.right-align-image {
		max-width: calc(100% - 14px);
	}
	/* Left-aligned images also keep a 25px right margin on phones. */
	.left-content img.left-align-image {
		max-width: calc(100% - 39px);
	}

	/* YouTube videos (420x345): fit the column, keep the shape. */
	.left-content iframe[src*="youtube.com/embed"] {
		max-width: 100%;
		height: auto;
		aspect-ratio: 420 / 345;
	}

	/* Map page: the 920px map follows the site's container widths. */
	#map-wrap {
		width: 768px !important;
	}
	#map-wrap > .columns {
		width: auto;
		float: none;
		display: block;
	}
	#resize iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 920 / 600;
	}
}

@media only screen and (max-width: 767px) {
	#map-wrap {
		width: 420px !important;
	}
	#map-wrap > .columns {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 480px) {
	#map-wrap {
		width: 94% !important;
	}
}

/*
 * Mobile menu dropdown (the <select> shown below 768px).
 * The open list is ~300px wide but the menu box is 200px, so the browser's built-in list stuck out
 * past the edge of the screen. Browsers that support styleable selects (Chrome, Edge, Android Chrome)
 * get a list drawn by the page instead: kept inside the screen, at least as wide as the box, in the
 * site's colors. Other browsers (e.g. Safari on iPhone) keep their native picker, which doesn't overflow.
 * The closed menu box looks the same as before.
 */
@supports (appearance: base-select) {
	@media only screen and (max-width: 767px) {
		#header-mobile-menu,
		#header-mobile-menu::picker(select) {
			appearance: base-select;
		}

		/* Closed box: same look as the original (border, padding, font and arrow image come from style.css). */
		#header-mobile-menu {
			background-color: #fff;
			border-radius: 0;
			line-height: 23px; /* same height as the native box (35px) */
			min-block-size: 0;
			cursor: pointer;
			/* one line, cut off at the box edge, like the native box */
			white-space: nowrap;
			overflow: hidden;
		}
		#header-mobile-menu::picker-icon {
			display: none; /* the site draws its own arrow (images/select_arrow.webp) */
		}

		/* Open list */
		#header-mobile-menu::picker(select) {
			border: 1px solid #d5d5d5;
			border-radius: 0;
			background: #fff;
			padding: 0;
			margin: 2px 0;
			/* centered under the menu box, as wide as the longest item, never wider than the screen */
			position-area: block-end span-all;
			justify-self: anchor-center;
			width: max-content;
			min-width: anchor-size(width);
			max-width: calc(100vw - 8px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			position-try-fallbacks: flip-block;
		}
		#header-mobile-menu option {
			padding: 6px 10px;
			color: #777;
			white-space: normal;
			min-block-size: 0;
		}
		#header-mobile-menu option::checkmark {
			display: none;
		}
		#header-mobile-menu option:hover,
		#header-mobile-menu option:focus-visible {
			background: #f2f2f2;
			outline: none;
		}
		#header-mobile-menu option:checked {
			background: #3675c1;
			color: #fff;
		}
	}
}