/* =========================================================================
 * NextGen Flooring — global header fixes (responsive)
 * Targets the parent theme's "corporate" header markup. Makes the header
 * clean and consistent on desktop, tablet, and phone without relying on the
 * theme's Foundation JS (a small companion script handles the toggle).
 * ====================================================================== */

:root {
	--ngs-blue: #1f6fe0;
	--ngs-ink: #15263f;
	--ngs-line: #e9edf2;
}

/* Stop horizontal overflow that leaves a strip on the right and makes the
 * header look like it doesn't reach the screen edge. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* The logo must never balloon, anywhere. */
.website-logo {
	max-height: 62px;
	width: auto !important;
	height: auto !important;
}

/* Remove italics across the whole site (headings, titles, hero, products). */
h1, h2, h3, h4, h5, h6,
.title, #page-title,
.wd-title-bar h2,
.product_title,
.woocommerce-loop-product__title,
.entry-title,
.widget-title,
.woocommerce-products-header__title,
.page-title {
	font-style: normal !important;
}

/* Slim the hero / title bar site-wide (single products, shop, categories).
 * Kept to a thin band so the background photo is minimal. */
.wd-title-bar,
.wd-title-bar.corporate,
.wd-title-bar.creative {
	min-height: 0 !important;
	padding-top: 22px !important;
	padding-bottom: 18px !important;
	margin-bottom: 0 !important;
	background-size: cover !important;
	background-position: center !important;
}

.wd-title-bar #page-title,
.wd-title-bar .title,
.wd-title-bar h2,
.wd-title-bar .wd-title-section_l h2 {
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}

.wd-title-bar h5 {
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	margin-top: 5px !important;
}

@media (max-width: 575px) {
	.wd-title-bar,
	.wd-title-bar.corporate,
	.wd-title-bar.creative {
		padding-top: 14px !important;
		padding-bottom: 12px !important;
	}
	.wd-title-bar #page-title,
	.wd-title-bar .title,
	.wd-title-bar h2 {
		font-size: 1.25rem !important;
	}
}

/* ------------------------------------------------------------------------
 * Desktop ( >= 1025px )
 * --------------------------------------------------------------------- */
@media (min-width: 1025px) {
	/* Hide the small-screen hamburger bar. */
	.corporate-layout.title-bar {
		display: none !important;
	}
	/* Keep the full desktop header visible. */
	header.l-header .top-bar#responsive-menu {
		display: block !important;
	}
	/* Hide the standalone mobile nav. */
	header.l-header nav.mobile-menu.vertical.menu {
		display: none !important;
	}
}

/* ------------------------------------------------------------------------
 * Tablet + Phone ( <= 1024px )
 * --------------------------------------------------------------------- */
@media (max-width: 1024px) {

	/* Clean top bar: hamburger on the left, logo next to it. */
	.corporate-layout.title-bar {
		display: flex !important;
		align-items: center;
		gap: 14px;
		padding: 10px 16px;
		min-height: 0;
		background: #fff;
		border-bottom: 1px solid var(--ngs-line);
		box-shadow: 0 2px 10px rgba(13, 36, 64, 0.05);
	}

	/* Visible dark hamburger (the theme's default is white on white). */
	.corporate-layout.title-bar .menu-icon {
		order: -1;          /* hamburger first */
		flex: 0 0 auto;
		margin: 0;
		position: static;
		-webkit-appearance: none;
		appearance: none;
		border: none;
		outline: none;
		width: 30px;
		height: 26px;
		padding: 0;
		background-color: transparent !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2315263f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 26px 26px !important;
		cursor: pointer;
	}

	.corporate-layout.title-bar .menu-icon::before,
	.corporate-layout.title-bar .menu-icon::after {
		display: none !important;
		content: none !important;
	}

	/* Rotate to an X-ish state when open (subtle affordance). */
	body.fc-nav-open .corporate-layout.title-bar .menu-icon {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%231f6fe0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
	}

	.corporate-layout.title-bar .title-bar-title {
		margin: 0;
		flex: 1 1 auto;
		display: flex;
		align-items: center;
	}

	.corporate-layout.title-bar .title-bar-title h1 {
		margin: 0;
		line-height: 1;
	}

	.corporate-layout.title-bar .website-logo {
		max-height: 44px;
	}

	/* Hide the desktop bar (duplicate logo + address + horizontal menu). */
	header.l-header .top-bar#responsive-menu {
		display: none !important;
	}

	/* Tidy the header shell so it adds no stray height/background. */
	header.l-header,
	header.l-header .contain-to-grid {
		background: transparent !important;
		min-height: 0 !important;
	}

	/* The standalone mobile nav: hidden until the hamburger is tapped. */
	header.l-header nav.mobile-menu.vertical.menu {
		display: none !important;
		margin: 0;
		padding: 6px 0;
		background: #fff;
		border-bottom: 1px solid var(--ngs-line);
		box-shadow: 0 12px 24px rgba(13, 36, 64, 0.10);
	}

	body.fc-nav-open header.l-header nav.mobile-menu.vertical.menu {
		display: block !important;
	}

	/* Reset Foundation list styling inside the mobile nav. */
	header.l-header nav.mobile-menu .title-bar,
	header.l-header nav.mobile-menu ul {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
		background: transparent;
		width: 100%;
		height: auto;
	}

	header.l-header nav.mobile-menu li {
		list-style: none;
		margin: 0;
		float: none;
		width: 100%;
		border-top: 1px solid #f0f2f6;
	}

	header.l-header nav.mobile-menu > .title-bar > li:first-child {
		border-top: none;
	}

	header.l-header nav.mobile-menu a {
		display: block;
		padding: 13px 22px;
		color: var(--ngs-ink);
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		line-height: 1.3;
	}

	header.l-header nav.mobile-menu a:hover {
		background: #f3f7fd;
		color: var(--ngs-blue);
	}

	/* Sub-menu items indented and lighter. */
	header.l-header nav.mobile-menu ul ul a {
		padding-left: 40px;
		font-size: 14px;
		font-weight: 500;
		color: #647389;
	}

	/* Hide the standalone request-quote button that the theme leaves around. */
	header.l-header .request-quote.right {
		display: none !important;
	}
}

/* Phone fine-tuning. */
@media (max-width: 575px) {
	.corporate-layout.title-bar .website-logo {
		max-height: 40px;
	}
}