/*
 * Sheetal Metals - custom design layer
 * Loaded last (see vendor/motov4-class.php) so it overrides motov4-style.css / responsive.css.
 *
 * Contents:
 *   1. Tokens
 *   2. Top bar
 *   3. Main header - nav, quote button, ISO badge box
 *   4. Footer
 *   5. Page container width
 *   6. X (formerly Twitter) icon
 *   7. Responsive
 *
 * The banner lives in sheetal-hero.css (markup: inc/sheetal-hero.php).
 */

/* ============================================================ 1. Tokens */
:root {
	--sm-orange: #f97307;
	--sm-orange-2: #f7a307;
	--sm-ink: #0a0c10;
	--sm-ink-soft: #141821;
	--sm-line: rgba(255, 255, 255, 0.14);
	--sm-muted: rgba(255, 255, 255, 0.72);
	--sm-muted-2: rgba(255, 255, 255, 0.55);

	/*
	 * One shape for every call-to-action on the site.
	 *
	 * The buttons had drifted into three radii and five paddings - the banner
	 * and header were 4px, the newer sections were pills - so they are all read
	 * from here now. Change a value once and every button follows: the hero,
	 * the header quote, About, Company Profile, Vision, Mission and the motov4
	 * Buttons shortcode.
	 *
	 * For square-cornered buttons instead, set --sm-btn-radius to 4px.
	 *
	 * These live on :root rather than in a shared class because the section
	 * stylesheets load AFTER this file (they depend on it), so a class here
	 * could not win the cascade against their own rules - but a custom property
	 * they each read works regardless of order.
	 */
	--sm-btn-radius: 999px;
	--sm-btn-pad-y: 15px;
	--sm-btn-pad-x: 32px;
	--sm-btn-size: 15px;
	--sm-btn-weight: 700;
	--sm-btn-gap: 12px;
	--sm-btn-tracking: 0.3px;
	--sm-btn-shadow-hover: 0 12px 26px rgba(249, 115, 7, 0.28);
}

/* ============================================================= 2. Top bar */
.motov4_header_top {
	background: var(--sm-ink) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.motov4_header_top .motov4_header_top_inner {
	padding: 0 46px;
}

.motov4_header_top .row {
	align-items: center;
	min-height: 52px;
}

/* social icons, left */
.motov4_header_top .motov4_header_social ul {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.motov4_header_top .motov4_header_social li {
	margin: 0;
	padding: 0;
}

.motov4_header_top .motov4_header_social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent !important;
	border: 0 !important;
	border-radius: 3px;
	box-shadow: none !important;
	color: rgba(255, 255, 255, 0.8) !important;
	font-size: 17px;
	line-height: 1 !important;
	transition: color 0.25s ease, background-color 0.25s ease;
}

.motov4_header_top .motov4_header_social a:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--sm-orange) !important;
}

/* phone + email, right */
.motov4_header_top .motov4_tp_head {
	display: inline-block;
	margin-left: 34px;
	vertical-align: middle;
}

.motov4_header_top .motov4_tp_head p {
	margin: 0;
	font-size: 16px;
	line-height: 52px;
	color: #fff;
}

.motov4_header_top .motov4_tp_head p i {
	margin-right: 10px;
	color: var(--sm-orange);
	font-size: 16px;
}

/* ======================================================= 3. Main header */
.motov4_transparent_header .motov4_header_main {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.motov4_transparent_header .motov4_header_main_inner {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 86px;
	padding: 0 46px;
	max-width: none;
	width: 100%;
}

.motov4_transparent_header .motov4_logo {
	flex: 0 0 auto;
	margin: 0;
}

.motov4_transparent_header .motov4_logo img {
	max-height: 58px;
	width: auto;
}

.motov4_transparent_header .motov4_nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	float: none;
}

.motov4_transparent_header .motov4_nav .motov4-menu > li > a,
.motov4_transparent_header .motov4_nav .motov4-mega-menu > li > a {
	position: relative;
	padding: 12px 17px;
	font-size: 15.5px;
	font-weight: 500;
	color: #fff;
	transition: color 0.25s ease;
}

.motov4_transparent_header .motov4_nav .motov4-menu > li > a:hover,
.motov4_transparent_header .motov4_nav .motov4-menu > li.current-menu-item > a,
.motov4_transparent_header .motov4_nav .motov4-menu > li.current_page_item > a {
	color: var(--sm-orange);
}

/* active underline, like the reference */
.motov4_transparent_header .motov4_nav .motov4-menu > li > a:after {
	content: "";
	position: absolute;
	left: 17px;
	right: 17px;
	bottom: 4px;
	height: 2px;
	background: var(--sm-orange);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.motov4_transparent_header .motov4_nav .motov4-menu > li > a:hover:after,
.motov4_transparent_header .motov4_nav .motov4-menu > li.current-menu-item > a:after,
.motov4_transparent_header .motov4_nav .motov4-menu > li.current_page_item > a:after {
	transform: scaleX(1);
}

/* "Get a Quote" button */
.sm-header-quote {
	flex: 0 0 auto;
}

.sm-header-quote a {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-btn-gap);
	padding: var(--sm-btn-pad-y) var(--sm-btn-pad-x);
	border-radius: var(--sm-btn-radius);
	background: var(--sm-orange);
	color: #fff !important;
	font-size: var(--sm-btn-size);
	font-weight: var(--sm-btn-weight);
	line-height: 1.2;
	letter-spacing: var(--sm-btn-tracking);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.sm-header-quote a:hover {
	background: var(--sm-orange-2);
	color: #fff !important;
}

.sm-header-quote a i {
	transition: transform 0.25s ease;
}

.sm-header-quote a:hover i {
	transform: translateX(4px);
}

/* ISO / IATF badge box */
.sm-header-certs {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.sm-header-certs img {
	display: block;
	width: auto;
	max-width: none;
}

.sm-header-certs .sm-cert-strip {
	height: 42px;
}

.sm-header-certs .sm-cert-iatf {
	height: 42px;
}

/* Keep the burger out of the way on desktop; the theme shows it on mobile. */
.motov4_transparent_header .motov4_header_icon {
	flex: 0 0 auto;
}

/* ============================================================= 4. Footer */
/* Widen the footer + copyright bars (markup: vendor/footer/footer.php). */
.motov4_footer > .container,
.motov4_copyright > .container {
	max-width: 1600px;
	width: 100%;
}

/* ============================================== 5. Page container width */
/*
 * Every ordinary section - WPBakery rows, the motov4 elements, blog and shop
 * archives, single posts - sits inside Bootstrap's .container, which
 * motov4-style.css pins to 1200px. Widening it here is what widens the whole
 * site at once; the Sheetal elements already cap themselves at 1600px through
 * their own "Container width" option, so the two now line up.
 *
 * width is set alongside max-width because motov4-style.css sets both, and a
 * lone max-width would lose to its `width: 1200px`.
 *
 * The gutter keeps the content off the screen edge between 1600px and the
 * point the container stops growing.
 */
@media (min-width: 1200px) {
	.container {
		width: 100%;
		max-width: 1600px;
		padding-right: 30px;
		padding-left: 30px;
	}
}

/* WPBakery stretches a "full width" row itself but leaves the row's content in
   a fixed-width box, so that box needs the same figure. */
.vc_row[data-vc-full-width] > .vc_column_container,
.vc_section[data-vc-full-width] > .vc_row {
	max-width: 1600px;
	margin-inline: auto;
}

/* ============================================ 6. X (formerly Twitter) icon */
/*
 * The bird is retired everywhere on the site.
 *
 * Swapped in CSS rather than by editing markup because the icon is printed
 * from a dozen places - the theme's header and footer socials, the post share
 * row, the motov4-core widgets and shortcodes, and anything an editor picks in
 * an iconpicker. Several of those live in the plugin, where an edit would be
 * lost on the next update; one rule here catches the lot.
 *
 * Font Awesome 4 has no X glyph, so the font character is dropped and the
 * brand mark is painted as a mask instead. Masking rather than a background
 * image keeps `currentColor`, so every existing colour and hover rule on the
 * social links carries on working untouched.
 *
 * The -square variant is only ever offered in Redux's icon picker and is not
 * rendered anywhere on the site, so it gets the same plain mark rather than a
 * tile drawn around it.
 */
.fa-twitter::before,
.fa-twitter-square::before {
	content: "";
}

.fa-twitter,
.fa-twitter-square {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ========================================================= 7. Responsive */
/* Banner breakpoints live in sheetal-hero.css. */
@media (max-width: 1600px) {
	.motov4_transparent_header .motov4_header_main_inner { padding: 0 28px; }
	.motov4_header_top .motov4_header_top_inner { padding: 0 28px; }
}

@media (max-width: 1400px) {
	.motov4_transparent_header .motov4_nav .motov4-menu > li > a { padding: 12px 12px; font-size: 15px; }
	.sm-header-certs .sm-cert-strip,
	.sm-header-certs .sm-cert-iatf { height: 36px; }
}

@media (max-width: 1199px) {
	.sm-header-certs { display: none; }
}

@media (max-width: 991px) {
	.motov4_transparent_header .motov4_header_main_inner { min-height: 76px; gap: 14px; }
	.motov4_transparent_header .motov4_nav { flex: 0 0 auto; display: block; }

	/* Logo takes the spare width so the burger sits at the right edge. */
	.motov4_transparent_header .motov4_logo { flex: 1 1 auto; }

	/*
	 * The mobile menu is a position:fixed drawer inside .motov4_header_main.
	 * Once the header turns sticky, style.css blurs that bar with
	 * backdrop-filter, and a filtered element traps fixed children inside its
	 * own box - the drawer shrank to the header's height, showing only "Home".
	 * The blur moves to a layer behind the bar so the drawer spans the screen.
	 */
	.sticky_header_class .motov4_header_main {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.sticky_header_class .motov4_header_main::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		pointer-events: none;
	}

	/* Buttons step down together: each one reads these, so none of them needs
	   a breakpoint rule of its own any more. */
	:root {
		--sm-btn-pad-y: 14px;
		--sm-btn-pad-x: 26px;
		--sm-btn-size: 14px;
	}
}

@media (max-width: 767px) {
	.motov4_header_top .row { min-height: auto; }
	.motov4_header_top .motov4_tp_head { display: block; margin-left: 0; }
	.motov4_header_top .motov4_tp_head p { line-height: 30px; font-size: 13.5px; }
	.motov4_header_top .motov4_header_social ul { justify-content: center; }

	:root {
		--sm-btn-pad-y: 13px;
		--sm-btn-pad-x: 22px;
		--sm-btn-size: 13.5px;
		--sm-btn-gap: 10px;
	}

	.sm-header-quote { display: none; }
}