/**
 * Front-end polish layer (grownlocal-site). Small presentational fixes applied during the theme
 * rebuild, kept here so they can be iterated quickly without recompiling the theme. Fold into the
 * theme's SCSS once the design is settled.
 */

/* Blog & growing-guide listing cards (core Latest Posts block): give every featured image the same
   shape so the grid lines up, instead of each keeping its native portrait/square/panoramic ratio.
   The theme already does this for product grids (gl-frames-*); this brings the post cards in line. */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image {
	width: 100%;
	margin: 0 0 12px;
}

.wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image a,
.wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
}

.wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image img {
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
}

/* Menus: one look for every dropdown. The mega panels (Vegetable and Flower seeds) are a light
   tint of the brand green with green links; the plain dropdowns (Seed potatoes, Planters &
   propagation) were dark with white text. The theme colours plain dropdowns from these two
   variables, so setting them gives every dropdown the mega panels' colours, on phones too. */
.primary-menu {
	--go-submenu--color--background: #f0f4f3;
	--go-submenu--color--text: var(--go--color--primary, #165144);
}

@supports (background: color-mix(in srgb, red, blue)) {

	.primary-menu {
		--go-submenu--color--background: color-mix(in srgb, var(--go--color--primary, #165144) 6%, var(--go--color--background, #fff));
	}
}

@media only screen and (min-width: 960px) {

	/* The same edge, shadow and corners as the mega panels, and links nearer their size. */
	.primary-menu > li:not(.menu-item-has-mega) > .sub-menu {
		width: 220px;
		border: 1px solid hsla(0, 0%, 0%, 0.08);
		border-bottom: 3px solid var(--go--color--primary, #165144);
		border-radius: 0 0 var(--go-button--border-radius, 3px) var(--go-button--border-radius, 3px);
		box-shadow: 0 1rem 2.5rem hsla(0, 0%, 0%, 0.14);
	}

	.primary-menu > li:not(.menu-item-has-mega) > .sub-menu a {
		font-size: 1.05rem;
	}
}