/* ==========================================================================
   WOW! Responsive Fixes
   Loaded by inc/wow-responsive.php. Selectors key off structure (:has) rather
   than Divi's numbered classes where possible, so re-saving the header or
   footer in Theme Builder doesn't break them.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Custom cursor dot: off on touch screens
   There is no mouse, so the dot parks wherever the last tap landed and sits
   on top of the page.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
	#cursor-dot { display: none !important; }
	* { cursor: auto; }
}


/* --------------------------------------------------------------------------
   2. Header, tablet and phone
   Logo left, social icons + hamburger stacked on the right, in one ~115px
   bar instead of a 320px stack.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.et-l--header .et_pb_row:has(.et_pb_menu) {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 14px 0 !important;
		position: relative; /* anchors the mobile dropdown to the full row */
	}
	/* Divi's clearfix pseudo-elements become flex items and skew spacing */
	.et-l--header .et_pb_row:has(.et_pb_menu)::before,
	.et-l--header .et_pb_row:has(.et_pb_menu)::after {
		display: none !important;
	}
	.et-l--header .et_pb_row:has(.et_pb_menu) > .et_pb_column {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.et-l--header .et_pb_row:has(.et_pb_menu) > .et_pb_column:has(.et_pb_image) {
		flex: 0 1 190px;
	}
	.et-l--header .et_pb_row:has(.et_pb_menu) > .et_pb_column:has(.et_pb_menu) {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;
		margin-left: auto !important;
		position: static;
	}
	/* Builder transforms nudge these for desktop; they misplace them here */
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_pb_module {
		transform: none !important;
	}
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_pb_image,
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_pb_social_media_follow,
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_pb_menu {
		margin: 0 !important;
	}
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_pb_social_media_follow {
		justify-content: flex-end;
		width: auto;
	}
	/* Let the dropdown size to the row, not to the 44px hamburger */
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_pb_menu,
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_pb_menu_inner_container,
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_pb_menu__wrap,
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_mobile_nav_menu,
	.et-l--header .et_pb_row:has(.et_pb_menu) .mobile_nav {
		position: static !important;
	}
	.et-l--header .et_pb_row:has(.et_pb_menu) .et_mobile_nav_menu {
		margin-right: 0 !important;
	}
}


/* --------------------------------------------------------------------------
   3. Sideways scroll
   The sponsor carousel in the footer has a fixed 1060px width, so on a phone
   it pushes the page out to ~717px. Pin it to its column, and clip footer
   sections as a backstop.
   -------------------------------------------------------------------------- */
.et-l--footer .et_pb_group_carousel {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}
.et-l--footer .et_pb_section {
	overflow-x: clip;
}


/* --------------------------------------------------------------------------
   4. Line above the wave under Our Mission
   curve-2.png has ~72px of transparent space at the top. At most widths the
   -60px offset leaves a sliver of it, and the white section background shows
   through. A strip of the mission blue covers it at every width.
   -------------------------------------------------------------------------- */
#bottom-wave::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10px;
	background: #0167b2;
	pointer-events: none;
}


/* --------------------------------------------------------------------------
   5. Footer menus: show the links instead of five hamburgers
   Three columns on tablet, two on phone.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.et-l--footer .et_pb_menu .et_mobile_nav_menu { display: none !important; }
	.et-l--footer .et_pb_menu .et_pb_menu__menu  { display: flex !important; }

	.et-l--footer .et_pb_row:has(> .et_pb_column > .et_pb_menu) {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 24px;
	}
	.et-l--footer .et_pb_row:has(> .et_pb_column > .et_pb_menu) > .et_pb_column {
		width: auto !important;
		margin: 0 !important;
	}
	.et-l--footer .et_pb_menu,
	.et-l--footer .et_pb_menu .et-menu {
		text-align: left;
		align-items: flex-start;
	}
}
@media (max-width: 600px) {
	.et-l--footer .et_pb_row:has(> .et_pb_column > .et_pb_menu) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* --------------------------------------------------------------------------
   6. Exhibits list: one column on phones
   Rows alternate image/text and text/image, so re-order the 4-column rows to
   keep every image directly above its own description.
   Add the class "wow-stack-mobile" to any other row to get the same result.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.page-id-242 .et_pb_row.et_grid_row,
	.et_pb_row.wow-stack-mobile {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 16px;
	}
	.page-id-242 .et_pb_row.et_grid_row > .et_pb_column,
	.et_pb_row.wow-stack-mobile > .et_pb_column {
		grid-column: auto !important;
		width: 100% !important;
	}
	.page-id-242 .et_pb_row.et_grid_row > .et_pb_column:nth-child(1),
	.et_pb_row.wow-stack-mobile > .et_pb_column:nth-child(1) { order: 1; }
	.page-id-242 .et_pb_row.et_grid_row > .et_pb_column:nth-child(2),
	.et_pb_row.wow-stack-mobile > .et_pb_column:nth-child(2) { order: 2; }
	.page-id-242 .et_pb_row.et_grid_row > .et_pb_column:nth-child(3),
	.et_pb_row.wow-stack-mobile > .et_pb_column:nth-child(3) { order: 4; }
	.page-id-242 .et_pb_row.et_grid_row > .et_pb_column:nth-child(4),
	.et_pb_row.wow-stack-mobile > .et_pb_column:nth-child(4) { order: 3; }
}


/* --------------------------------------------------------------------------
   7. Tables carried over from the old site (class "table--responsive")
   Play For All Field Trips' pricing table runs 60px past the screen on a
   phone. Fix the table to its column and let long words wrap.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.table--responsive {
		width: 100% !important;
		table-layout: fixed;
	}
	.table--responsive th,
	.table--responsive td {
		overflow-wrap: anywhere;
	}
}