/**
 * HMT Navigation - header behaviour styles.
 *
 * Everything here is scoped to the menu's collapse width. That breakpoint is
 * set on the Avada menu element (Menu element > Main Menu Breakpoint) and is
 * currently 1024px (the nav carries data-breakpoint="1024"). If that setting
 * changes, update the two media queries below to match. The button-relocation
 * script does not depend on this number - it follows Avada's collapse-enabled
 * flag - so only the layout/first-paint styling here needs to stay in sync.
 * Above the breakpoint the header is untouched and the desktop button stays put.
 *
 * The marker classes (hmt-header-row / hmt-logo-col / hmt-menu-col) are stamped
 * by header-nav.js. !important is used deliberately: Avada emits per-breakpoint
 * column rules (often !important) that force stacked full-width columns on
 * mobile, and these need to win over them.
 */

/* Before the script moves it, hide the raw button on mobile so it does not
   flash beside the hamburger. Once inside the panel wrapper it shows again. */
@media (max-width: 1024px) {
	.hmt-cta-button {
		display: none !important;
	}

	.hmt-cta-li .hmt-cta-button {
		display: inline-block !important;
	}
}

@media (max-width: 1024px) {

	/* --- Req 2: hamburger inline with the logo --------------------------- */

	/* Keep the logo and menu columns on one row instead of stacking. */
	.hmt-header-row {
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	.hmt-logo-col {
		flex: 0 1 auto !important;
		width: auto !important;
		max-width: 68% !important;
		margin: 0 !important;
	}

	.hmt-menu-col {
		flex: 1 1 auto !important;
		width: auto !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	/* The now-empty wrapper the button left behind must not add width. */
	.hmt-menu-col .fusion-button-wrapper:empty {
		display: none !important;
	}

	/* Push the hamburger toggle to the right edge, centred on the logo. */
	.hmt-menu-col nav.awb-menu {
		margin: 0 !important;
	}

	/* --- Req 1: the CTA inside the mobile panel ------------------------- */

	/* The list row just centres the button and gives it breathing room; the
	   button keeps its own size rather than stretching across the row. */
	.hmt-cta-li {
		display: block;
		list-style: none;
		margin: 0;
		padding: 16px 24px;
		text-align: center;
	}

	/*
	 * Inside the collapsed menu Avada's ".awb-menu.collapse-enabled a" rule
	 * (specificity 0,2,1, all !important) forces width:100%, swaps the font,
	 * resets the weight, strips the background and recolours the text - which
	 * turns the button into a full-width band. The selector below is 0,4,1 (it also carries .collapse-enabled) so
	 * it beats Avada's own 0,3,1 !important menu-link rule, and it reasserts the button's normal appearance.
	 *
	 * Colours reuse Avada's button variables so they stay on-palette. The
	 * metrics (padding / size / radius) mirror the desktop .fusion-button and
	 * are literal because Avada renders them from classes, not variables - if
	 * the global button style changes, update these to match.
	 */
	.awb-menu.collapse-enabled .hmt-cta-li a.hmt-cta-button {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 13px 29px !important;
		box-sizing: border-box !important;
		text-align: center !important;
		font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		letter-spacing: 0.225px !important;
		text-transform: uppercase !important;
		border: 0 !important;
		border-radius: 4px !important;
		box-shadow: none !important;
		background-color: var(--button_gradient_top_color, var(--awb-color6, #f1877f)) !important;
		background-image: none !important;
		color: var(--button_accent_color, var(--awb-color1, #ffffff)) !important;
	}

	.awb-menu.collapse-enabled .hmt-cta-li a.hmt-cta-button:hover,
	.awb-menu.collapse-enabled .hmt-cta-li a.hmt-cta-button:focus {
		background-color: var(--button_gradient_top_color_hover, var(--awb-color6, #f1877f)) !important;
		color: var(--button_accent_color_hover, var(--button_accent_color, #ffffff)) !important;
	}
}