/* ==========================================================================
   Generations Canada — Landing Page Styles
   Only includes styles that can't be expressed as Tailwind utility classes.
   ========================================================================== */

/* ==========================================================================
   GLOBAL — Prevent images from stretching inside flex containers
   (WordPress block-editor adds flex classes to figures)
   ========================================================================== */

.wp-block-image {
	height: auto !important;
	flex-grow: 0 !important;
}

.wp-block-image img {
	height: auto !important;
	align-self: center;
}

/* ==========================================================================
   HEADER — Toronto subsite mobile hamburger menu toggle
   (Pseudo-elements can't be done with Tailwind alone)
   ========================================================================== */

.gc-header__menu-toggle--toronto {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}

.gc-header__menu-icon,
.gc-header__menu-icon::before,
.gc-header__menu-icon::after {
	display: block;
	width: 24px;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	position: relative;
	transition: transform 0.3s;
}

.gc-header__menu-icon::before,
.gc-header__menu-icon::after {
	content: '';
	position: absolute;
	left: 0;
}

.gc-header__menu-icon::before { top: -7px; }
.gc-header__menu-icon::after  { top:  7px; }

@media (max-width: 768px) {
	.gc-header__menu-toggle--toronto {
		display: block;
	}

	#toronto-nav-menu {
		display: none !important;
		flex-direction: column;
		gap: 0.5rem !important;
		padding: 1rem 0;
	}

	#toronto-nav-menu.is-open {
		display: flex !important;
	}
}