/**
 * Urban Barber College – header: tablet hamburger range.
 *
 * Hello Elementor's "Menu dropdown: Tablet" setting switches to the
 * hamburger only below 992px. This extends the SAME existing hamburger /
 * dropdown menu (no new menu) to 992px–1199px, so:
 *   1200px and up  → desktop navigation (unchanged)
 *   1199px – 768px → hamburger + existing dropdown menu
 *   767px and down → unchanged mobile behaviour
 * Selectors are one step more specific than the parent theme's rules.
 */
@media (min-width: 992px) and (max-width: 1199px) {
	body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation {
		display: none !important;
	}

	body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder {
		display: flex !important;
	}
}

/*
 * Hamburger button background: white instead of the Elementor kit's
 * global Accent colour (post-6.css: .site-header .site-navigation-toggle).
 * One step more specific so it wins regardless of stylesheet order.
 */
body .site-header .site-navigation-toggle {
	background-color: #ffffff;
}

/*
 * Hamburger icon width: 1.5rem instead of the parent theme's 1.25rem
 * (hello-elementor/assets/css/header-footer.css).
 */
body .site-navigation-toggle-holder .site-navigation-toggle-icon {
	display: block;
	width: 1.50rem;
}

/*
 * Hamburger layout (1199px and below): logo + tagline on the left,
 * hamburger on the right, on one row. The parent theme lets the header row
 * wrap, which pushed the hamburger below the logo on narrow screens.
 * Only position/alignment changes; the tagline wraps instead.
 */
@media (max-width: 1199px) {
	body .site-header.menu-dropdown-tablet .header-inner {
		flex-wrap: nowrap;
	}

	body .site-header.menu-dropdown-tablet .header-inner .site-branding {
		flex: 0 1 auto;
		min-width: 0;
	}

	body .site-header.menu-dropdown-tablet .header-inner .site-navigation-toggle-holder {
		flex-shrink: 0;
		margin-inline-start: auto;
		padding-inline-end: 0;
	}
}