/**
 * Mobile header + dropdown menu (<= 1024px, where the desktop mega panel is off).
 *
 * Selectors stay generic (widget classes inside #masthead) so rebuilding the
 * Elementor header — which changes every .elementor-element-xxxxx id — does not
 * break this.
 */

@media (max-width: 1024px) {

	/* ---- utility bar ------------------------------------------------- */

	/* Two 12px headings on a 44px bar. Tightened to 32px so the bar reads as
	   a strip, not a second header row. */
	.ehf-header #masthead .e-con.e-parent:first-child {
		min-height: 34px;
		--padding-left: 16px;
		--padding-right: 16px;
	}

	/* The group inside the bar carries 10px of its own vertical padding, which
	   is what stretched the strip to 52px. */
	.ehf-header #masthead .e-con.e-parent:first-child > .e-con {
		--padding-top: 0px;
		--padding-bottom: 0px;
	}

	.ehf-header #masthead .e-con.e-parent:first-child .elementor-heading-title {
		font-size: 11px;
		letter-spacing: 0.02em;
		line-height: 34px;
	}

	/* Elementor stacks container children at its mobile breakpoint, which broke
	   the bar onto two lines on a 320px screen. */
	.ehf-header #masthead .e-con.e-parent:first-child .e-con:last-child {
		flex-wrap: nowrap;
		gap: 14px;
	}

	.ehf-header #masthead .e-con.e-parent:first-child .elementor-widget-heading {
		width: auto;
		white-space: nowrap;
	}

	/* Student Login is the only actionable thing up here — give it weight and
	   a hairline divider so it does not read as more fine print. */
	.ehf-header #masthead .e-con.e-parent:first-child .elementor-widget-heading:last-child .elementor-heading-title {
		padding-left: 14px;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
		font-weight: 600;
	}

	/* ---- main row: logo | apply | burger, one line ------------------- */

	.ehf-header #masthead .e-con.e-parent:last-child {
		--padding-left: 16px;
		--padding-right: 16px;
	}

	/* The logo column is width:auto for the desktop fix, so at 375px it claimed
	   260px, the nav column needed 184px and the row wrapped — a 184px tall
	   header. nowrap + a shrinkable logo keeps everything on one line. */
	.ehf-header #masthead .e-con:has(> .e-con > .elementor-widget-image) {
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 10px;
	}

	.ehf-header #masthead .e-con:has(> .elementor-widget-image) {
		flex: 0 1 auto;
		min-width: 0;
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 0px;
		--padding-right: 0px;
	}

	.ehf-header #masthead .elementor-widget-image img {
		max-height: 40px;
		max-width: min(190px, 48vw);
		object-fit: contain;
	}

	/* stretch, not centre: the dropdown is positioned at this column's bottom
	   edge (top:100%), so the column has to be exactly as tall as the row or
	   the panel floats away from the header. */
	.ehf-header #masthead .e-con:has(> .elementor-widget-navigation-menu) {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		align-self: stretch;
		margin-left: auto;
		gap: 10px;
		/* Elementor hands this column width:100% at tablet width, which pushed
		   the CTA away from the burger to opposite ends of the row. Right
		   alignment fixes that without sizing the column to its content — the
		   collapsed menu <ul> is still ~519px wide inside it. */
		justify-content: flex-end;
		--justify-content: flex-end;
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 0px;
		--padding-right: 0px;
	}

	.ehf-header #masthead .e-con:has(> .e-con > .elementor-widget-image) > .e-con {
		min-height: 60px;
	}

	/* The dropdown is absolutely positioned at top:100% of the menu widget, so
	   the widget has to fill the row height — otherwise the panel opens level
	   with the bottom of the 42px burger and tucks 9px under the header. */
	.ehf-header #masthead .elementor-widget-navigation-menu,
	.ehf-header #masthead .elementor-widget-navigation-menu > .elementor-widget-container,
	.ehf-header #masthead .elementor-widget-navigation-menu .hfe-nav-menu {
		align-self: stretch;
		height: 100%;
		justify-content: center;
	}

	/* Elementor widgets are width:100% at tablet, so the menu widget ate the
	   whole row and stranded the CTA on the far left. Sizing both to their
	   content keeps the pair together, and fixing the order keeps the burger
	   last (thumb side) at every mobile width — Elementor's own breakpoints
	   flip the pair around otherwise. */
	.ehf-header #masthead .e-con:has(> .elementor-widget-navigation-menu) > .elementor-widget {
		flex: 0 0 auto;
		/* Elementor's per-device width control emits !important, so matching it
		   is the only way to stop the widgets filling the row. */
		width: auto !important;
	}

	.ehf-header #masthead .e-con:has(> .elementor-widget-navigation-menu) > .elementor-widget-button {
		order: 1;
	}

	.ehf-header #masthead .e-con:has(> .elementor-widget-navigation-menu) > .elementor-widget-navigation-menu {
		order: 2;
	}

	.ehf-header #masthead .elementor-widget-button .elementor-button {
		padding: 9px 16px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	/* ---- hamburger --------------------------------------------------- */

	.ehf-header #masthead .hfe-nav-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 1px solid #d8e4e6;
		border-radius: 12px;
		background: #fff;
		transition: background 0.2s ease, border-color 0.2s ease;
	}

	.ehf-header #masthead .hfe-nav-menu__toggle.hfe-active-menu {
		border-color: #077e86;
		background: #eef7f7;
	}

	/* The icon font/SVG is replaced by three CSS bars so the burger can morph
	   into a close X without any extra markup: ::before and ::after are the
	   outer bars, the background gradient is the middle one. */
	.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon {
		position: relative;
		width: 20px;
		height: 14px;
		padding: 0;
		background-image: linear-gradient(#0b3a3f, #0b3a3f);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 2px;
		transition: background-size 0.2s ease;
	}

	.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon svg,
	.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon i {
		display: none;
	}

	.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon::before,
	.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon::after {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: #0b3a3f;
		content: "";
		transition: transform 0.25s ease;
	}

	.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon::before {
		top: 0;
	}

	.ehf-header #masthead .hfe-nav-menu__toggle .hfe-nav-menu-icon::after {
		bottom: 0;
	}

	.ehf-header #masthead .hfe-active-menu .hfe-nav-menu-icon {
		background-size: 0 2px;
	}

	.ehf-header #masthead .hfe-active-menu .hfe-nav-menu-icon::before {
		transform: translateY(6px) rotate(45deg);
	}

	.ehf-header #masthead .hfe-active-menu .hfe-nav-menu-icon::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* ---- dropdown panel ---------------------------------------------- */

	/* Between the header builder's own breakpoint and 1024px the closed panel is
	   still a static block, so it sat in the row at ~700px wide and shoved the
	   CTA off screen. Taking it out of flow at every burger width fixes that
	   and anchors it to the bottom of the header row. */
	.ehf-header #masthead nav.hfe-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		/* 94px is the mobile header: the 34px utility strip + the 60px row. dvh
		   so the panel is not cut off by the browser's own chrome; the vh line
		   above it is the fallback for iOS below 15.4, where a dvh calc() is
		   dropped as invalid and the panel would grow past the screen. */
		max-height: calc(100vh - 94px);
		max-height: calc(100dvh - 94px);
		padding: 6px 0 10px;
		/* Closed, HFE leaves the menu <ul> at its 519px desktop width inside this
		   panel. Clipping it HERE - rather than on #masthead, which WebKit treats
		   as clip-on-both-axes and which therefore hid the open panel entirely on
		   iPhone - keeps the page free of horizontal scroll on every phone. */
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 1px solid #e6eef0;
		border-radius: 0 0 18px 18px;
		background: #fff;
		box-shadow: 0 24px 48px -12px rgba(8, 45, 52, 0.28);
	}

	.ehf-header #masthead nav.hfe-dropdown.menu-is-active {
		animation: fc-menu-in 0.22s ease both;
	}

	@keyframes fc-menu-in {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}
	}

	.ehf-header #masthead nav.hfe-dropdown ul.hfe-nav-menu > li {
		border-bottom: 1px solid #eef3f4;
	}

	.ehf-header #masthead nav.hfe-dropdown ul.hfe-nav-menu > li:last-child {
		border-bottom: 0;
	}

	.ehf-header #masthead nav.hfe-dropdown a.hfe-menu-item {
		align-items: center;
		padding: 14px 18px !important;
		color: #0b3a3f;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0.01em;
		line-height: 1.3;
		transition: color 0.2s ease, background 0.2s ease;
	}

	.ehf-header #masthead nav.hfe-dropdown a.hfe-menu-item:hover,
	.ehf-header #masthead nav.hfe-dropdown .current-menu-item > a.hfe-menu-item,
	.ehf-header #masthead nav.hfe-dropdown .current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item {
		background: #f3fafa;
		color: #077e86;
	}

	/* ---- parent rows + chevron --------------------------------------- */

	.ehf-header #masthead nav.hfe-dropdown .hfe-has-submenu-container {
		display: flex;
		align-items: center;
	}

	.ehf-header #masthead nav.hfe-dropdown .hfe-has-submenu-container > a.hfe-menu-item {
		flex: 1;
	}

	.ehf-header #masthead nav.hfe-dropdown .hfe-menu-toggle {
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: 8px;
		border-radius: 10px;
		background: #f1f6f7;
		transition: transform 0.25s ease, background 0.2s ease;
	}

	/* The theme's arrow icon font is swapped for a drawn chevron so the open
	   state can rotate a single, predictable shape. */
	.ehf-header #masthead nav.hfe-dropdown .hfe-menu-toggle i,
	.ehf-header #masthead nav.hfe-dropdown .hfe-menu-toggle svg {
		display: none;
	}

	.ehf-header #masthead nav.hfe-dropdown .hfe-menu-toggle::after {
		width: 8px;
		height: 8px;
		margin-top: -3px;
		border-right: 2px solid #0b3a3f;
		border-bottom: 2px solid #0b3a3f;
		border-radius: 1px;
		transform: rotate(45deg);
		content: "";
	}

	.ehf-header #masthead nav.hfe-dropdown li:has(> .sub-menu-open) > .hfe-has-submenu-container .hfe-menu-toggle {
		background: #077e86;
		transform: rotate(180deg);
	}

	.ehf-header #masthead nav.hfe-dropdown li:has(> .sub-menu-open) > .hfe-has-submenu-container .hfe-menu-toggle::after {
		border-color: #fff;
	}

	.ehf-header #masthead nav.hfe-dropdown li:has(> .sub-menu-open) > .hfe-has-submenu-container > a.hfe-menu-item {
		color: #077e86;
	}

	/* ---- sub menus ---------------------------------------------------- */

	/* HFE's JS writes visibility/opacity/height inline when a branch opens, so
	   this only styles the look — never the open/closed state. */
	.ehf-header #masthead nav.hfe-dropdown ul.sub-menu {
		margin: 0 12px 12px;
		overflow: hidden;
		border-radius: 12px;
		background: #f7fbfb;
	}

	.ehf-header #masthead nav.hfe-dropdown ul.sub-menu:not(.sub-menu-open) {
		margin-bottom: 0;
	}

	.ehf-header #masthead nav.hfe-dropdown ul.sub-menu a {
		padding: 12px 16px 12px 20px !important;
		border-left: 2px solid transparent;
		color: #45646c;
		font-size: 14px;
		font-weight: 500;
		background: transparent;
		transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	}

	.ehf-header #masthead nav.hfe-dropdown ul.sub-menu li + li a {
		box-shadow: inset 0 1px 0 #e6f0f1;
	}

	.ehf-header #masthead nav.hfe-dropdown ul.sub-menu a:hover,
	.ehf-header #masthead nav.hfe-dropdown ul.sub-menu .current-menu-item > a {
		border-left-color: #077e86;
		background: #edf6f6;
		color: #077e86;
	}

	/* Third level, if a branch ever gets one. */
	.ehf-header #masthead nav.hfe-dropdown ul.sub-menu ul.sub-menu {
		margin: 0 0 0 16px;
		background: transparent;
	}

	.ehf-header #masthead nav.hfe-dropdown ul.sub-menu ul.sub-menu a {
		font-size: 13px;
		font-weight: 400;
	}
}

/* Small phones: logo + CTA + burger together need ~316px on a 288px row, so
   everything steps down one notch rather than colliding. */
@media (max-width: 400px) {

	.ehf-header #masthead .e-con.e-parent:first-child .elementor-heading-title {
		font-size: 10px;
	}

	.ehf-header #masthead .e-con.e-parent:first-child .e-con:last-child {
		gap: 10px;
	}

	.ehf-header #masthead .e-con.e-parent:first-child .elementor-widget-heading:last-child .elementor-heading-title {
		padding-left: 10px;
	}

	.ehf-header #masthead .elementor-widget-image img {
		max-width: 40vw;
	}

	.ehf-header #masthead .elementor-widget-button .elementor-button {
		padding: 8px 12px;
		font-size: 11px;
	}

	.ehf-header #masthead .hfe-nav-menu__toggle {
		width: 40px;
		height: 40px;
	}

	.ehf-header #masthead nav.hfe-dropdown a.hfe-menu-item {
		padding: 13px 16px !important;
		font-size: 14px;
	}
}