/* PAK Filters — mobile header
   The theme stacks the logo, then a tall "Call Us / address" block, then a
   full-width menu bar, which pushes the page content well below the fold.

   This rebuilds it as one row — logo left, menu button right — with the
   button turning into a cross while the menu is open, and the menu itself
   dropping below as a solid panel.

   The button lives in a different parent from the logo (the logo is in
   .headerMiddleSec, the button in nav.navbar2-wrap), so it is lifted out of
   the flow and parked against the header instead of being re-parented. */

@media (max-width: 991px) {

	/* ---- row 1: logo left, button right ---- */

	/* The contact details belong in the footer on a phone, not above the fold. */
	.header6 .headerMiddleSec .addressSec,
	.header6 .headerMiddleSec ul.header-info {
		display: none !important;
	}

	/* Positioning context for the button. */
	header.header6 {
		position: relative;
	}

	.header6 .headerMiddleSec .logoSec {
		float: none !important;
		width: 100%;
		height: 84px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		/* keep the logo clear of the button */
		padding-right: 76px;
	}

	.header6 .headerMiddleSec .logoSec a.logo {
		display: inline-flex;
		align-items: center;
		float: none !important;
		margin: 0;
	}

	/* Cap against the viewport as well as in pixels, so the logo cannot
	   overflow on a narrow phone or a split-screen window. */
	.header6 .headerMiddleSec .logoSec a.logo img {
		max-width: min(190px, 52vw);
		max-height: 56px;
		width: auto;
		height: auto;
	}

	/* Lift the button out of the menu row and sit it beside the logo. */
	.header6 .navbar-header {
		position: absolute !important;
		top: 0;
		right: 15px;
		height: 84px;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		z-index: 20;
	}

	/* ---- the bar itself ---- */

	/* The theme options paint the nav via an ID selector
	   (#main-navigation-wrapper), so name it explicitly or it stays dark. */
	.header6 .navbar2-wrap,
	.header6 .var2-nav,
	.header6 nav.navbar.navbar-default,
	.header6 #main-navigation-wrapper,
	.header6 #main-navigation-wrapper.navbar-default,
	header.header6 .headerMiddleSec {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	/* With the button lifted out, the empty menu row must not leave a gap.
	   position:static matters — Bootstrap makes .navbar position:relative,
	   which would capture the absolutely positioned button and leave it
	   stranded below the logo instead of beside it. */
	.header6 .navbar2-wrap,
	.header6 #main-navigation-wrapper {
		position: static !important;
		min-height: 0 !important;
		margin-bottom: 0 !important;
	}

	.header6 .navbar2-wrap > .container {
		min-height: 0 !important;
		padding-left: 0;
		padding-right: 0;
	}

	/* ---- the button ---- */

	.header6 .navbar-toggle,
	.header6 .navbar-default .navbar-toggle {
		--pakf-bar: var(--pak-accent, #B7B747);
		float: none !important;
		margin: 0 !important;
		padding: 10px;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		/* comfortable tap target even though the icon is small */
		min-width: 46px;
		min-height: 46px;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}

	/* Use the accent, not the dark colour: the button can end up over the
	   slider, over a dark band or over white, and the accent stays legible
	   against all three. Dark bars over a dark slider is how this went
	   invisible before. */
	.header6 .navbar-toggle .icon-bar,
	.header6 .navbar-default .navbar-toggle .icon-bar {
		background-color: var(--pakf-bar, #B7B747) !important;
		display: block;
		width: 26px;
		height: 4px;
		border-radius: 2px;
		transition: background-color .2s ease;
	}

	.header6 .navbar-toggle .icon-bar + .icon-bar {
		margin-top: 4px;
	}

	/* ---- open state: the three bars become a cross ----
	   Bootstrap carries .collapsed while the menu is shut and drops it while
	   it is open.

	   The cross is drawn on the button's own pseudo-elements rather than by
	   rotating the bars: something in this theme's stack pins .icon-bar so
	   that transform and opacity on it are ignored outright (an inline
	   transform !important on one measures as an identity matrix), while the
	   button itself transforms normally. Background colour on the bars does
	   apply, so they are faded out that way. */
	/* Something in this theme's stack pins .icon-bar so hard that a more
	   specific, later, !important rule on it still loses — transform and
	   opacity set inline with !important measure as no-ops too. So the bars
	   are never re-targeted: they read an inherited custom property, and only
	   the button's value of it changes between states. */
	.header6 .navbar-toggle:not(.collapsed) {
		--pakf-bar: transparent;
	}

	.header6 .navbar-toggle:not(.collapsed)::before,
	.header6 .navbar-toggle:not(.collapsed)::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 26px;
		height: 4px;
		margin: -2px 0 0 -13px;
		background: var(--pak-accent, #B7B747);
		border-radius: 2px;
	}

	.header6 .navbar-toggle:not(.collapsed)::before {
		transform: rotate(45deg);
	}

	.header6 .navbar-toggle:not(.collapsed)::after {
		transform: rotate(-45deg);
	}

	/* ---- the open menu panel ---- */

	/* Shut: nothing to see. Open: a solid panel, or the links sit on top of
	   the slider and cannot be read. */
	.header6 #main-navigation.in,
	.header6 #main-navigation.collapsing {
		background: var(--pak-dark, #082545) !important;
		padding: 4px 0 10px;
		border: 0;
	}

	.header6 #main-navigation.in .nav > li > a,
	.header6 #main-navigation.collapsing .nav > li > a {
		color: #fff !important;
		padding: 13px 20px;
	}

	.header6 #main-navigation.in .nav > li > a:hover,
	.header6 #main-navigation.in .nav > li > a:focus,
	.header6 #main-navigation.in .nav > li.current-menu-item > a {
		color: var(--pak-accent, #B7B747) !important;
		background: transparent !important;
	}

	/* ---- row 2: the dark strip under the logo ----
	   .headerTopSec already holds a left column and a social column, but the
	   theme hides it below 992px, it sits FIRST in the DOM, and it draws an
	   angled accent wedge with ::before. Ordering the header as a flex column
	   moves it under the logo row; the wedge has to go or it lands behind the
	   logo. */

	header.header6 {
		display: flex;
		flex-direction: column;
	}

	.header6 .headerMiddleSec { order: 1; }
	.header6 .headerTopSec    { order: 2; }
	.header6 .navbar2-wrap,
	.header6 #main-navigation-wrapper { order: 3; }

	.header6 .headerTopSec {
		display: block !important;
		position: relative;
		background: var(--pak-dark, #082545) !important;
		min-height: 0;
		height: auto;
		padding: 8px 0;
		border: 0 !important;
	}

	/* Row 1 carries no colour of its own, and none of the theme's decorative
	   wedges may bleed into it. */
	header.header6,
	.header6 .headerMiddleSec,
	.header6 .headerMiddleSec .container,
	.header6 .headerMiddleSec .row,
	.header6 .headerMiddleSec .logoSec,
	.header6 .navbar-header,
	.header6 .navbar2-wrap > .container {
		background: transparent !important;
		background-image: none !important;
	}

	/* The menu panel draws a decorative black wedge with
	   #main-navigation::before — a 68px border-top triangle positioned
	   absolute at top:0. It normally anchors to the nav, but making the nav
	   position:static (so the button could anchor to the header instead)
	   sends it to the header's top-left, straight over the logo whenever the
	   menu is open. It is desktop decoration; a two-row phone header has no
	   use for it. */
	.header6 #main-navigation::before,
	.header6 #main-navigation::after,
	.header6 .navbar-collapse::before,
	.header6 .navbar-collapse::after {
		display: none !important;
		content: none !important;
		border: 0 !important;
	}

	header.header6::before,
	header.header6::after,
	.header6 .headerMiddleSec::before,
	.header6 .headerMiddleSec::after,
	.header6 .headerTopSec::before,
	.header6 .headerTopSec::after,
	.header6 .logoSec::before,
	.header6 .logoSec::after,
	.header6 .var2-nav::before,
	.header6 .var2-nav::after {
		display: none !important;
		content: none !important;
	}

	.header6 .headerTopSec .container {
		background: transparent !important;
	}

	.header6 .headerTopSec .row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 0;
		margin-right: 0;
	}

	.header6 .headerTopSec .topSecLeft,
	.header6 .headerTopSec .topSecRight {
		float: none !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		line-height: 1 !important;
		padding: 0 15px;
	}

	.header6 .headerTopSec .row {
		min-height: 0 !important;
	}

	/* The welcome line is desktop-only — on a phone it eats the strip and
	   leaves no room for anything else. */
	.header6 .headerTopSec .topSecLeft {
		display: none !important;
	}

	/* That leaves one column holding both the language switch and the
	   socials. Stretched across the full width with space-between, the two
	   groups sit against opposite edges on a single row instead of stacking.
	   direction:ltr makes those edges physical, so Arabic gets the same bar
	   as English rather than a mirrored one, and the explicit order keeps the
	   languages on the left whichever way the document runs. */
	.header6 .headerTopSec .topSecRight {
		display: flex !important;
		direction: ltr;
		width: 100% !important;
		margin: 0 !important;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.header6 .headerTopSec .topSecRight .pakf-langbar {
		order: 0;
		margin: 0 !important;
		flex: 0 0 auto;
	}

	.header6 .headerTopSec .topSecRight .header6Social {
		order: 1;
		margin: 0 !important;
		flex: 0 0 auto;
	}

	.header6 .headerTopSec .header6Social {
		display: flex;
		align-items: center;
		gap: 18px;
	}

	/* Plain white glyphs — no outline box, no plate. The theme rings each
	   icon with a bordered square, which reads as an empty box on a dark
	   strip at phone size. */
	.header6 .headerTopSec .header6Social a,
	.header6 .headerTopSec .header6Social a i,
	.header6 .headerTopSec .header6Social i {
		color: #fff !important;
		font-size: 16px;
		line-height: 1 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}

	.header6 .headerTopSec .header6Social a:hover,
	.header6 .headerTopSec .header6Social a:focus,
	.header6 .headerTopSec .header6Social a:hover i,
	.header6 .headerTopSec .header6Social a:focus i {
		color: var(--pak-accent, #B7B747) !important;
	}
}

/* Landscape tablets sit above the mobile header breakpoint but are still
   not a laptop, so the welcome line stays hidden there too — and with it
   gone the strip gets the same two-ended row as the phone. */
@media (min-width: 992px) and (max-width: 1024px) {

	.header6 .headerTopSec .topSecLeft {
		display: none !important;
	}

	.header6 .headerTopSec .topSecRight {
		display: flex !important;
		direction: ltr;
		width: 100% !important;
		margin: 0 !important;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.header6 .headerTopSec .topSecRight .pakf-langbar {
		order: 0;
		margin: 0 !important;
	}

	.header6 .headerTopSec .topSecRight .header6Social {
		order: 1;
		margin: 0 !important;
	}
}

/* Font Awesome 4 icons, wherever they appear.
   The theme's markup uses v4 class names (fa fa-facebook). Loading Font
   Awesome 5 for the sidebar's fas/far icons redefines .fa to the v5 family,
   where those brand glyphs do not exist — so the icons silently render as
   nothing (in the off-canvas sidebar they show as bare black circles).

   Matching .fa but excluding every v5 style class catches v4 markup wherever
   it appears — header strip, footer, sidebar — without touching the v5 icons
   that need the new family. */
.fa:not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
	font-family: "FontAwesome" !important;
}

/* Desktop: the "Request A Quote" button was being clipped.
   The nav bar's black wedge (#main-navigation::before) is sized
   proportionally to the container, while the button next to it has a fixed
   intrinsic width from its padding and text. At wide viewports the wedge
   outgrows the space left for the button and covers its first few letters —
   "Request A Quote" reads as "est A Quote".

   Anchoring the wedge to .var2-nav and sizing it as the container minus the
   button (190px) plus the wedge's own 29px diagonal makes its trailing edge
   land exactly on the button's left edge at any width. */
@media (min-width: 992px) {

	.header6 .var2-nav {
		position: relative;
	}

	.header6 #main-navigation::before {
		left: 0 !important;
		right: auto !important;
		width: calc(100% - 219px) !important;
	}
}

/* "Request A Quote" hover.
   The theme ships a.header-requestbtn:hover with background AND color both
   set to #082545 — the label is the same colour as the plate it sits on, so
   it disappears on hover. That was already true with the theme's navy; with
   a black brand colour it also merges into the nav bar, leaving just the
   diagonal showing.

   Keep the button's shape and a legible label, and use a slight darkening
   for the hover feedback so it works with whatever accent is set. */
.header6 a.header-requestbtn:hover,
.header6 a.header-requestbtn:focus,
.header6 a.header-requestbtn.header2-requestbtn:hover,
.header6 a.header-requestbtn.header2-requestbtn:focus {
	background: var(--pak-accent, #B7B747) !important;
	color: #fff !important;
	filter: brightness(0.9);
}