/**
 * Responsive Fixes & Browser Compatibility
 * Additional styles for mobile, tablet, and cross-browser support
 */

/* ============================================
   Header Overlap Fix - CRITICAL
   ============================================ */

/* Default header styles */
#header-container {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Header background for inner pages (not homepage) */
/* The background image creates the dark blue area above the yellow banner */
/* min-height creates sufficient height for the header background like header.hdr1 */
.page-header#header-container1 {
	background: url(../img/head01.jpg) no-repeat center top;
	background-size: cover;
	min-height: 160px;
}

/* Homepage: no header background (slider provides the background) */
/* This is handled by the swiper-slider having its own background */

/* Fix for header overlapping content */
/* The .page-header is position:absolute, so first section needs padding-top */
main > section:first-child {
	padding-top: 180px !important;
}

/* Homepage slider - no extra padding needed */
main > section.swiper-slider:first-child,
main > section.swiper-container:first-child {
	padding-top: 0 !important;
}

/* Specific fix for bg-primary sections (yellow banner) */
main > section.bg-primary:first-child {
	padding-top: 180px !important;
	padding-bottom: 30px !important;
}

/* Fix for 404 page and other section-md pages */
main > section.section-md:first-child {
	padding-top: 180px !important;
}

/* Fix for content sections without bg-primary */
main > section.content:first-child {
	padding-top: 180px !important;
}

/* Adjust for different screen sizes */
@media (min-width: 768px) {
	main > section:first-child {
		padding-top: 190px !important;
	}
	main > section.bg-primary:first-child {
		padding-top: 190px !important;
		padding-bottom: 52px !important;
	}
	main > section.section-md:first-child,
	main > section.content:first-child {
		padding-top: 190px !important;
	}
}

@media (min-width: 992px) {
	main > section:first-child {
		padding-top: 200px !important;
	}
	main > section.bg-primary:first-child {
		padding-top: 200px !important;
		padding-bottom: 62px !important;
	}
	main > section.section-md:first-child,
	main > section.content:first-child {
		padding-top: 200px !important;
	}
}

@media (min-width: 1200px) {
	main > section:first-child {
		padding-top: 210px !important;
	}
	main > section.bg-primary:first-child {
		padding-top: 210px !important;
		padding-bottom: 77px !important;
	}
	main > section.section-md:first-child,
	main > section.content:first-child {
		padding-top: 210px !important;
	}
}

/* Fix for parallax sections as first child */
main > .parallax-container:first-child {
	padding-top: 0 !important;
}

main > .parallax-container:first-child .parallax-content {
	padding-top: 180px !important;
}

main > section.parallax-container:first-child .parallax-content {
	padding-top: 180px !important;
}

@media (min-width: 768px) {
	main > .parallax-container:first-child .parallax-content,
	main > section.parallax-container:first-child .parallax-content {
		padding-top: 190px !important;
	}
}

@media (min-width: 992px) {
	main > .parallax-container:first-child .parallax-content,
	main > section.parallax-container:first-child .parallax-content {
		padding-top: 200px !important;
	}
}

@media (min-width: 1200px) {
	main > .parallax-container:first-child .parallax-content,
	main > section.parallax-container:first-child .parallax-content {
		padding-top: 210px !important;
	}
}

/* ============================================
   Base Responsive Fixes
   ============================================ */

/* Ensure images are responsive */
img {
	max-width: 100%;
	height: auto;
}

/* Fix for iOS touch scrolling */
.page {
	-webkit-overflow-scrolling: touch;
}

/* ============================================
   Mobile Navigation Fixes (< 992px)
   ============================================ */
@media (max-width: 991.98px) {
	/* Ensure mobile menu is properly positioned */
	.rd-navbar-fixed .rd-navbar-nav-wrap {
		width: 270px;
		left: 0;
		top: 56px;
		bottom: 0;
		z-index: 1000;
		transform: translateX(-110%);
	}
	
	.rd-navbar-fixed .rd-navbar-nav-wrap.active {
		transform: translateX(0);
	}
	
	/* Mobile menu toggle button */
	.rd-navbar-fixed .rd-navbar-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	
	/* Mobile dropdown menus */
	.rd-navbar-fixed .rd-menu {
		display: none;
	}
	
	.rd-navbar-fixed .rd-nav-item.opened > .rd-menu {
		display: block;
	}
}


/* ============================================
   Product Detail Page Responsive
   ============================================ */
@media (max-width: 767.98px) {
	/* Product thumbnails on mobile */
	.product-thumbnails .thumb-container {
		gap: 8px !important;
		flex-wrap: wrap;
	}
	
	.product-thumbnails .thumb-item {
		width: 50px !important;
		height: 50px !important;
	}
	
	/* Feature items on mobile */
	.feature-item {
		margin-bottom: 10px !important;
	}
	
	/* Request quote button */
	.col-lg-6 > div[style*="display: flex"][style*="justify-content: space-between"] {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 15px;
	}
}

/* ============================================
   News Detail Page Responsive
   ============================================ */
@media (max-width: 767.98px) {
	/* News navigation on mobile */
	.news-navigation {
		flex-direction: column !important;
		gap: 20px;
	}
	
	.news-navigation .next-post {
		text-align: left !important;
	}
	
	/* Blockquote on mobile */
	blockquote {
		padding-left: 15px !important;
		margin: 15px 0 !important;
	}
}

/* ============================================
   404 Page Responsive
   ============================================ */
@media (max-width: 575.98px) {
	.sect-404 em {
		font-size: 80px !important;
	}
	
	.sect-404 .col-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ============================================
   Footer Responsive
   ============================================ */
@media (max-width: 575.98px) {
	footer .bottom .row {
		text-align: center;
	}
	
	footer .bottom .text-md-right {
		text-align: center !important;
		margin-top: 15px;
	}
	
	footer .list-inline {
		justify-content: center;
	}
}

/* ============================================
   Gallery Page Responsive
   ============================================ */
@media (max-width: 575.98px) {
	.project-item .project-caption {
		padding: 10px;
	}
	
	.project-title {
		font-size: 14px;
	}
}

/* ============================================
   Team Page Responsive
   ============================================ */
@media (max-width: 767.98px) {
	.thumbnail .caption {
		padding: 15px;
	}
}

/* ============================================
   Cross-Browser Compatibility
   ============================================ */

/* Flexbox fixes for older browsers */
.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* Safari flexbox gap fallback */
@supports not (gap: 15px) {
	.product-thumbnails .thumb-container > * {
		margin-right: 15px;
	}
	.product-thumbnails .thumb-container > *:last-child {
		margin-right: 0;
	}
}

/* IE11 Flexbox fixes */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.row {
		display: -ms-flexbox;
		display: flex;
	}
	
	.col-lg-6, .col-md-6, .col-sm-6 {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}
}

/* Object-fit fallback for older browsers */
@supports not (object-fit: cover) {
	.product-main-image img,
	.thumb-item img {
		position: relative;
	}
}

/* ============================================
   Touch Device Improvements
   ============================================ */
@media (hover: none) and (pointer: coarse) {
	/* Larger touch targets */
	.rd-nav-link,
	.rd-dropdown-link {
		padding: 12px 15px;
	}
	
	/* Remove hover effects on touch devices */
	.button:hover,
	.rd-nav-link:hover {
		opacity: 1;
	}
	
	/* Improve tap targets */
	.thumb-item {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
	.rd-navbar-wrap,
	.preloader,
	footer .bottom,
	.parallax-container {
		display: none !important;
	}
	
	.page {
		opacity: 1 !important;
	}
	
	a[href]:after {
		content: " (" attr(href) ")";
	}
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* Screen reader only class */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus visible styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid #f6c452;
	outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #f6c452;
	color: #000;
	padding: 8px 16px;
	z-index: 10000;
	transition: top 0.3s;
}

.skip-link:focus {
	top: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	
	.wow {
		animation: none !important;
		visibility: visible !important;
	}
}


/* ============================================
   H Tag Font Size Reset for SEO
   Preserve original design font sizes while using semantic H tags
   ============================================ */

/* Sidebar widget titles - should be smaller */
.sidebar-widget h3.text-decorate {
	font-size: 18px;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Project caption titles - should match original link style */
.project-caption h3,
.project-caption-text h3 {
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
}

.project-caption h3 a,
.project-caption-text h3 a {
	font-size: 17px;
}

/* Thumbnail caption titles */
.thumbnail .caption h3 {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
}

.thumbnail .caption h3 a {
	font-size: 18px;
}

/* News article content h2 - should be section title size */
.news-content h2 {
	font-size: 21px;
	line-height: 1.4;
	margin-top: 25px;
	margin-bottom: 15px;
}

/* News share section title */
.news-share h3 {
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 15px;
}

/* Product detail page titles */
.product-gallery + div h2.text-decorate,
.col-lg-6 h2.text-decorate {
	font-size: 21px;
}

.col-lg-6 h3:not(.text-decorate) {
	font-size: 18px;
	line-height: 1.4;
}

/* Product description section titles */
.bg-gray-100 h3,
section[style*="background-color: #f5f5f5"] h3 {
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 15px;
}

/* Related products thumbnail titles */
.thumbnail.thumbnail4 .caption h3 {
	font-size: 18px;
	line-height: 1.4;
}

.thumbnail.thumbnail4 .caption h3 a {
	font-size: 18px;
}

/* Parallax section titles - keep larger for visual hierarchy */
.parallax-content h3.lh2 {
	font-size: 18px;
	line-height: 22px;
}

/* Team page thumbnail titles */
.thumbnail .caption h2.white,
.thumbnail .caption h2 {
	font-size: 21px;
	line-height: 1.4;
}

.thumbnail .caption h2 a {
	font-size: 21px;
}

/* Footer titles */
footer h3.text-decorate {
	font-size: 18px;
}

/* Index list custom titles */
.index-list-custom h3 {
	font-size: 18px;
	line-height: 1.4;
}

.index-list-custom h3 a {
	font-size: 18px;
}

/* Box minimal titles */
.box-minimal h4 {
	font-size: 18px;
}

/* Contact info titles */
.addr1 h4 {
	font-size: 18px;
}

/* General content area smaller headings */
.text-block h3 {
	font-size: 18px;
	line-height: 1.4;
}

/* Responsive adjustments */
@media (min-width: 1200px) {
	.sidebar-widget h3.text-decorate {
		font-size: 20px;
	}
	
	.news-content h2 {
		font-size: 24px;
	}
	
	.thumbnail .caption h2.white,
	.thumbnail .caption h2 {
		font-size: 24px;
	}
}

/* ============================================
   Additional H Tag Font Size Fixes
   Fix overlapping text and font size issues
   ============================================ */

/* Services page - thumbnail-icon h3 titles */
.thumbnail-icon .thumb-header h3,
.thumbnail-icon .thumb-header h3.lh2 {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	text-transform: none;
	margin-top: 0;
}

/* About page - h2.lh2 subtitle (should be smaller than section title) */
h2.lh2,
.bg-primary h2.lh2,
.context-dark h2.lh2 {
	font-size: 18px;
	line-height: 22px;
	font-weight: 700;
	text-transform: none;
}

/* About page - content section h3 links */
.content h3,
.content h3 a,
section.content h3,
section.content h3 a {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	text-transform: none;
}

/* Parallax content h3 titles */
.parallax-content h3,
.parallax-content h3.lh2,
.parallax-content h3.white,
.parallax-content h3.white.lh2 {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	text-transform: none;
}

.parallax-content h3 a {
	font-size: 16px;
}

/* Privacy policy page - terms list h2 */
.terms-list dt h2,
.terms-list h2 {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	text-transform: none;
	margin-bottom: 10px;
}

/* News page - article h2 titles */
article h2,
article h2 a,
.col-md-7 h2,
.col-md-7 h2 a {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	text-transform: none;
}

/* Contacts page - address h2 class */
address.h2,
address.h2.lh2,
.bg-primary address.h2 {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	text-transform: none;
	font-style: normal;
}

/* Team page - thumbnail h2 titles */
.thumbnail .caption h2,
.thumbnail .caption h2.white,
.thumbnail .caption h2 a {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	text-transform: none;
}

/* Index list custom - h3 in ordered list */
.index-list-custom li h3,
.index-list-custom li h3 a {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	text-transform: none;
}

/* Services page - text-decorate h2 in bg-primary (Surface Mining, etc.) */
.bg-primary h2.text-decorate {
	font-size: 28px;
	line-height: 1.2;
}

/* Keep main page titles (h1.text-decorate) at proper size */
h1.text-decorate {
	font-size: 28px;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Section titles h2.text-decorate - keep larger */
section h2.text-decorate:not(.lh2) {
	font-size: 28px;
	line-height: 1.2;
}

@media (min-width: 768px) {
	h1.text-decorate {
		font-size: 32px;
	}
	
	section h2.text-decorate:not(.lh2),
	.bg-primary h2.text-decorate {
		font-size: 32px;
	}
	
	article h2,
	article h2 a,
	.col-md-7 h2,
	.col-md-7 h2 a {
		font-size: 21px;
	}
}

@media (min-width: 1200px) {
	h1.text-decorate {
		font-size: 40px;
	}
	
	section h2.text-decorate:not(.lh2),
	.bg-primary h2.text-decorate {
		font-size: 40px;
	}
	
	h2.lh2,
	.bg-primary h2.lh2,
	.context-dark h2.lh2 {
		font-size: 21px;
		line-height: 22px;
	}
	
	article h2,
	article h2 a,
	.col-md-7 h2,
	.col-md-7 h2 a {
		font-size: 24px;
	}
}


/* ============================================
   Homepage Banner/Slider Title Fix
   Make h1 and h2 titles same size in jumbotron
   ============================================ */

/* Jumbotron h1 and h2 should have same large size */
.jumbotron h1,
.jumbotron h2 {
	font-size: 36px;
	line-height: 1.2;
	color: #ffffff;
	letter-spacing: -2.5px;
	text-transform: uppercase;
	font-weight: 700;
}

@media (min-width: 768px) {
	.jumbotron h1,
	.jumbotron h2 {
		font-size: 36px;
	}
}

@media (min-width: 1200px) {
	.jumbotron h1,
	.jumbotron h2 {
		font-size: 36px;
		line-height: 1.2;
	}
}

@media (min-width: 1600px) {
	.jumbotron h1,
	.jumbotron h2 {
		font-size: 36px;
	}
}


/* ============================================
   Fix link hover color on yellow background
   ============================================ */

/* On bg-primary (yellow background), link hover should be visible */
.bg-primary a:hover,
.bg-primary h2 a:hover,
.bg-primary h3 a:hover,
.bg-primary h4 a:hover,
.bg-primary .thumbnail .caption h2 a:hover,
.bg-primary .thumbnail .caption h3 a:hover {
	color: #262523 !important;
}

/* Context dark on bg-primary - white text should stay visible on hover */
.bg-primary.context-dark a:hover,
.bg-primary.context-dark h2 a:hover,
.bg-primary.context-dark h3 a:hover,
.bg-primary .context-dark a:hover {
	color: #262523 !important;
}


/* Fix button hover on yellow background */
.bg-primary .button-white:hover,
.bg-primary .button.button-white:hover {
	color: #ffffff !important;
	background-color: #262523 !important;
}

.bg-primary .button:hover {
	color: #ffffff !important;
}


/* Homepage About Us section - 60+ Years title */
h2.jumbo-h2,
.jumbo-h2 {
	font-size: 45px !important;
	line-height: 1.1;
}