/*
 * Mobile and touch fixes layered over the Breakdance selectors (2026-10-03).
 * Kept in the plugin rather than the stored selectors so they ship with the code (deploy/push-code.sh);
 * staging owns the Breakdance design data. Each rule carries one extra class or element over the
 * selector it overrides, so it wins whatever order the stylesheets load in.
 */

/* ---- Header menu (Breakdance collapses it to the toggle at 1119px) ---- */
@media (max-width: 1119px) {
	/* Lucide "menu" / "x" in place of Breakdance's CSS-line toggle. */
	.ox-nav .breakdance-menu .breakdance-menu-toggle {
		justify-content: center;
		align-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		-webkit-tap-highlight-color: transparent;
	}
	.ox-nav .breakdance-menu .breakdance-menu-toggle-icon {
		display: block;
		width: 28px;
		height: 28px;
		background-color: var(--ox-navy);
		-webkit-mask: url(../img/icons/menu.svg) center / contain no-repeat;
		mask: url(../img/icons/menu.svg) center / contain no-repeat;
	}
	.ox-nav .breakdance-menu.breakdance-responsive-menu--open .breakdance-menu-toggle-icon {
		-webkit-mask-image: url(../img/icons/x.svg);
		mask-image: url(../img/icons/x.svg);
	}
	.ox-nav .breakdance-menu .breakdance-menu-toggle-lines {
		display: none;
	}

	/* The open panel runs to the bottom of the visible screen (dvh excludes the browser bars, which
	   100vh doesn't) and keeps its scrolling to itself; menu-mobile.js sets --ox-menu-top. */
	.ox-nav .breakdance-menu .breakdance-menu-list {
		max-height: calc(100vh - var(--ox-menu-top, 80px));
		max-height: calc(100dvh - var(--ox-menu-top, 80px));
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.ox-nav .breakdance-menu.breakdance-responsive-menu--open .breakdance-menu-list.is-visible {
		min-height: calc(100vh - var(--ox-menu-top, 80px));
		min-height: calc(100dvh - var(--ox-menu-top, 80px));
	}

	/* Submenu chevron as a visible icon button, so it reads as the thing to tap. */
	.ox-nav .breakdance-dropdown-toggle .breakdance-menu-link-arrow {
		flex-shrink: 0;
		align-self: center;
		width: 44px;
		height: 44px;
		margin-right: var(--ox-space-3);
		background-color: var(--ox-neutral-100);
		background-size: 20px 20px;
		border-radius: var(--ox-radius-pill);
		-webkit-tap-highlight-color: transparent;
		transition: rotate var(--ox-dur-hover) var(--ox-ease-out), background-color var(--ox-dur-hover) var(--ox-ease-out);
	}
	.ox-nav .breakdance-dropdown--open > .breakdance-dropdown-toggle .breakdance-menu-link-arrow {
		background-color: var(--ox-teal-50);
	}
	.ox-nav .breakdance-dropdown-toggle .breakdance-menu-link-arrow:active {
		background-color: var(--ox-sage-50);
	}
}

/* Page behind the open menu stays put (class set by menu-mobile.js). */
html.ox-menu-open,
html.ox-menu-open body {
	overflow: hidden;
}

/* ---- Alerts popup: the panel is centred and the close button sits inside it ---- */
.bde-popup.ox-alert-popup-el .breakdance-popup {
	width: min(1228px, calc(100vw - 32px));
}
.bde-popup.ox-alert-popup-el .breakdance-popup-content {
	width: 100%;
}
@media (max-width: 767px) {
	.bde-popup.ox-alert-popup-el .breakdance-popup-close-button {
		top: 12px;
		right: 12px;
	}
}

/* ---- Community gallery: tiles fit the shorter mobile rows instead of overlapping ---- */
@media (max-width: 767px) {
	.ox-gallery__track .ox-gallery-tile {
		min-height: 0;
	}
}

/* Swipe/trackpad-scrollable marquee; gallery-marquee.js drives scrollLeft instead of the CSS animation. */
.ox-gallery .ox-gallery__track.is-scrollable {
	width: auto;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	animation: none;
}
.ox-gallery .ox-gallery__track.is-scrollable::-webkit-scrollbar {
	display: none;
}

/* ---- Footer CTA: one bird mid-sky and one fish bottom right on phones ---- */
@media (max-width: 767px) {
	.ox-cta .ox-cta__bird-1 {
		display: block;
		bottom: 30px;
		left: 50%;
		width: 61px;
		height: 18px;
		margin-left: -30px;
	}
	.ox-cta .ox-cta__fish {
		display: flex;
		justify-content: flex-end;
		margin-top: 0;
		margin-bottom: 30px;
	}
	.ox-cta .ox-cta__fish-img {
		width: 172px;
		height: 40px;
	}
	.ox-cta .ox-cta__fish-img:not(:last-child) {
		display: none;
	}
}

/* ---- Filter chips: touch keeps :hover after a tap, which painted over the selected fill ---- */
@media (hover: none) {
	:is(.ox-news-list, .ox-photos, .ox-directory, .ox-events-list) .bde-tabs .bde-tabs__tabslist .bde-tabs__tab:hover {
		border-color: var(--ox-border-subtle);
		background-color: var(--ox-surface-card);
	}
}
:is(.ox-news-list, .ox-photos, .ox-directory, .ox-events-list) .bde-tabs .bde-tabs__tabslist .bde-tabs__tab:is([aria-selected="true"], .is-active) {
	background-color: var(--ox-spring);
	border-color: var(--ox-sage-300);
}