/* ===================================================
 * Products Mega Menu
 * A 3-panel mega menu attached to a main-nav item.
 * Desktop only (>= 961px); hidden on tablet/phone,
 * where the mobile navigation is used instead.
 * =================================================== */

:root {
	/* Distance from the top of the viewport to the panel.
	   Updated at runtime by products-mega-menu.js. */
	--coro-pmm-top: 150px;
	--coro-pmm-max-height: 940px;
	--coro-pmm-accent: #578fc4;
	--coro-pmm-light-grey-0: #BDBCCC;
	--coro-pmm-navy: #231f55;
	--coro-pmm-ink: #212529;
}

/* Hidden entirely below the desktop breakpoint. */
.coro-pmm,
.coro-pmm-backdrop {
	display: none;
}

@media (min-width: 961px) {

	/* ---- Dimmed backdrop behind the panel ---- */
	.coro-pmm-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99990;
		background: transparent;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.22s ease, visibility 0s linear 0.22s;
	}

	.coro-pmm-backdrop.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.22s ease;
	}

	/* Keep the site header above the backdrop and panel while open.
	   #upper-nav is capped at 1200px wide with `max-width`, so on wider
	   viewports the gutters either side of it would otherwise show the
	   dimmed backdrop through the transparent masthead. Give the masthead
	   a white fill so the whole header band stays clean. */
	body.coro-pmm-open #masthead {
		position: relative;
		z-index: 100001;
		background: #ffffff;
	}

	/* ---- The panel ---- */
	.coro-pmm {
		display: block;
		position: fixed;
		top: var(--coro-pmm-top);
		left: 0;
		right: 0;
		/*height: min(calc(100vh - var(--coro-pmm-top)), var(--coro-pmm-max-height));*/
		height: 600px;
		z-index: 100000;
		background: #ffffff;
		border-top: 2px solid var(--coro-pmm-light-grey-0);
		box-shadow: 0 24px 40px rgba(0, 0, 0, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
		overflow: hidden;
	}

	.coro-pmm.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	/* ---- 3-column layout ---- */
	.coro-pmm__inner {
		display: grid;
		grid-template-columns: 2fr 3fr 6fr;
		height: 100%;
		max-width: 1920px;
		margin: 0 auto;
	}

	.coro-pmm__panel {
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	/* ---- Wide image layout override ----
	   When the active category uses the wide masonry layout, the links
	   and images panels collapse and a single wide panel takes their
	   place (grid tracks 2 + 3). The wide panel is hidden otherwise. */
	.coro-pmm__col-wide {
		display: none;
		grid-column: 2 / 4;
		grid-row: 1;
	}

	.coro-pmm__inner.is-wide .coro-pmm__col-links,
	.coro-pmm__inner.is-wide .coro-pmm__col-images {
		display: none;
	}

	.coro-pmm__inner.is-wide .coro-pmm__col-wide {
		display: block;
	}

	/* Thin scrollbars inside the panels. */
	.coro-pmm__panel::-webkit-scrollbar {
		width: 8px;
	}
	.coro-pmm__panel::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.18);
		border-radius: 8px;
	}

	/* ===================================================
	 * Left panel — categories
	 * =================================================== */
	.coro-pmm__col-cats {
		background: #f3f3f4;
		border-right: 1px solid #e3e3e5;
		padding: 0px 0 28px 0;
	}

	.coro-pmm-cats {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.coro-pmm-cats__item {
		height: 80px;
	}

	body #coro-pmm .coro-pmm-cat {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0;
		padding: 20px 30px;
		border: 0;
		background: transparent;
		cursor: pointer;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: none;
		color: var(--coro-pmm-ink);
		text-align: left;
		transition: background 0.15s ease, color 0.15s ease;
		height: 100%;
	}

	body #coro-pmm .coro-pmm-cat::after {
		content: "\203A"; /* › */
		font-size: 20px;
		line-height: 1;
		opacity: 0.35;
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	body #coro-pmm .coro-pmm-cat:hover {
		background: #e7e7e9;
	}

	body #coro-pmm .coro-pmm-cat.is-active {
		background: #578FC4;
		color: #ffffff;
	}

	body #coro-pmm .coro-pmm-cat.is-active::after {
		opacity: 1;
		transform: translateX(3px);
	}

	/* ===================================================
	 * Middle panel — links for the active category
	 * =================================================== */
	.coro-pmm__col-links {
		padding: 34px 40px;
	}

	.coro-pmm-links {
		display: none;
	}

	.coro-pmm-links.is-active {
		display: block;
	}

	/* Two-column link layout. Each column carries its own heading + list.
	   The extra class outranks the plain `.is-active` block rule above. */
	.coro-pmm-links.coro-pmm-links--two-col.is-active {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.coro-pmm-links__col {
		min-width: 0;
	}

	.coro-pmm-links__heading {
		display: inline-block;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: 700 !important;
		color: var(--coro-pmm-navy);
		transition: color 0.12s ease, padding-left 0.12s ease;
	}
	p.coro-pmm-links__heading {
		margin-bottom: 0px;
	}

	a.coro-pmm-links__heading:hover {
		color: var(--coro-pmm-accent);
		padding-left: 6px;
	}

	.coro-pmm-links__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.coro-pmm-links__item {
		margin: 0;
		padding: 0;
	}

	.coro-pmm-link {
		display: block;
		padding: 5px 0;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 1.35;
		color: #3f3f42;
		transition: color 0.12s ease, padding-left 0.12s ease;
	}

	.coro-pmm-link:hover,
	.coro-pmm-link:focus,
	.coro-pmm-link.is-active {
		color: var(--coro-pmm-accent);
		padding-left: 6px;
	}
	.coro-pmm-link:hover,
	a.coro-pmm-links__heading:hover {
		text-decoration: none;
	}

	/* ===================================================
	 * Right panel — images for the hovered link
	 * =================================================== */
	.coro-pmm__col-images {
		padding: 34px 40px;
		background: #ffffff;
		display: flex;
		justify-content: center;
        align-items: center;
	}

	.coro-pmm-images {
		display: none;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(170px, 1fr);
		gap: 16px;
		height: 80%;
		width: 80%;
	}

	.coro-pmm-images.is-active {
		display: grid;
	}

	.coro-pmm-images.coro-pmm-images--single {
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(0, 1fr);
	}

	.coro-pmm-images__cell {
		position: relative;
		margin: 0;
		overflow: hidden;
	}

	.coro-pmm-images__link {
		display: block;
		width: 100%;
		height: 100%;
	}

	.coro-pmm-images__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease;
	}

	.coro-pmm-images__cell:hover .coro-pmm-images__img {
		transform: scale(1.04);
	}

	.coro-pmm-images__caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 34px 22px 16px;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
		color: #ffffff;
		font-family: 'AbitareSans-200', Helvetica, Arial, sans-serif;
		font-size: 22px;
		font-weight: 300;
		line-height: 1.2;
	}

	/* Larger caption when a single image fills the panel. */
	.coro-pmm-images--single .coro-pmm-images__caption {
		font-size: 30px;
		padding: 56px 30px 26px;
	}

	/* ---- Masonry variant of the right-panel images ----
	   A single link can render its images as a masonry grid that fits the
	   panel height (data-fit-height) instead of the fixed cover-cell grid.
	   The cells themselves reuse the wide-panel masonry styling below. */
	.coro-pmm-images.coro-pmm-images--masonry {
		width: 80%;
		height: 80%;
	}

	.coro-pmm-images.coro-pmm-images--masonry.is-active {
		display: block;
	}

	.coro-pmm-images-masonry__grid {
		--coro-masonry-gap: 16px;
		height: 100%;
	}

	/* ---- Alternating portrait/landscape variant ----
	   Rows of two cells whose column widths swap on every other row, so the
	   narrow (portrait) cell zig-zags from one side to the other. Each row
	   takes an equal share of the panel height; cells reuse the grid cell
	   styling above, so images crop to cover (object-fit). */
	.coro-pmm-images.coro-pmm-images--alt {
		flex-direction: column;
		gap: 16px;
		width: 80%;
		height: 80%;
	}

	.coro-pmm-images.coro-pmm-images--alt.is-active {
		display: flex;
	}

	/* Each row's narrow/wide (2fr/3fr) column template is emitted inline by
	   PHP — it depends on the images-per-row count and the row's position in
	   the zig-zag (and the Reverse option), so it can't be a static rule. The
	   fallback below only applies if that inline style is ever missing. */
	.coro-pmm-alt__row {
		display: grid;
		grid-template-columns: 2fr 3fr; /* narrow | wide (fallback) */
		gap: 16px;
		flex: 1 1 0;
		min-height: 0;
	}

	/* ===================================================
	 * Wide panel — masonry images for a wide category
	 * =================================================== */
	.coro-pmm__col-wide {
		padding: 34px 40px;
		background: #ffffff;
		/* The masonry fits itself to this height (see data-fit-height),
		   so the panel never needs to scroll. */
		overflow: hidden;
	}

	.coro-pmm-wide {
		display: none;
	}

	.coro-pmm-wide.is-active {
		display: block;
		height: 100%;
	}

	/* Tune the reusable masonry for this context. A definite height gives
	   coro-masonry.js a target to fit the thumbnails within. */
	.coro-pmm-wide__masonry {
		--coro-masonry-gap: 16px;
		height: 100%;
	}

	.coro-pmm-wide__cell,
	.coro-pmm-images-masonry__cell {
		position: relative;
		margin: 0;
		overflow: hidden;
	}

	.coro-pmm-wide__link,
	.coro-pmm-images-masonry__link {
		display: block;
	}

	.coro-pmm-wide__img,
	.coro-pmm-images-masonry__img {
		transition: transform 0.4s ease;
	}

	.coro-pmm-wide__cell:hover .coro-pmm-wide__img,
	.coro-pmm-images-masonry__cell:hover .coro-pmm-images-masonry__img {
		transform: scale(1.04);
	}

	.coro-pmm-wide__caption,
	.coro-pmm-images-masonry__caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 34px 22px 16px;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
		color: #ffffff;
		font-family: 'AbitareSans-200', Helvetica, Arial, sans-serif;
		font-size: 22px;
		font-weight: 300;
		line-height: 1.2;
	}

	/* ---- Trigger nav item while the menu is open ---- */
	#site-navigation li.coro-mega-menu.is-open > a {
		color: var(--coro-pmm-accent) !important;
	}
}

/* Hide the 2019 navbar mega menu container at and below the breakpoint,
   where the mobile navigation takes over instead. */
@media (max-width: 960px) {
	.menu-navbar-2019-mega-menu-container {
		display: none !important;
	}
}

/* Narrower desktops: shrink the fixed side columns a little. */
@media (min-width: 961px) and (max-width: 1360px) {
	.coro-pmm__inner {
		grid-template-columns: 250px 290px 1fr;
	}
	.coro-pmm__col-links,
	.coro-pmm__col-images {
		padding-left: 26px;
		padding-right: 26px;
	}
}