/* Seven Hills Trekking brand overrides */
:root {
	--primary-color: #006064 !important;
	--primary-hover: #004d4d !important;
	--secondary-color: #009497 !important;
	--secondary-hover: #007a7c !important;
}

/* Header & links */
.header-top-bar,
.desktop-menu-list a:hover,
.mobile-menu-list a i,
.mobile-menu-list a:hover,
.logo-main,
.blog-card-title,
.toc-title i,
.post-tags a:hover,
.nav-next a:hover,
.nav-next i,
.hero-search-result-price {
	color: var(--primary-color) !important;
}

.plan-trip-btn,
.mobile-plan-trip-btn,
.btn-primary,
.featured-treks-section .btn-primary,
.blog-pagination .page-numbers.current,
.single-blog-comments .submit {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

.plan-trip-btn:hover,
.mobile-plan-trip-btn:hover,
.btn-primary:hover,
.featured-treks-section .btn-primary:hover {
	background-color: var(--primary-hover) !important;
}

/* Borders and accents */
.categories-list a:hover,
.read-more-btn,
.single-blog-content blockquote,
.blog-post-title a:hover,
.blog-post-meta a:hover,
.toc-link.active,
.table th,
.table td:first-child {
	color: var(--primary-color) !important;
}

.blog-post-title::after,
.categories-list li.active a,
.table thead tr,
.toc-link.active,
.hero-loader {
	border-color: var(--primary-color) !important;
}

/* Footer bars (if using brand) */
.upper-footer,
.bottom-footer,
.footer-b,
.footer-t,
.footer-m,
.footer-b .container {
	background-color: var(--primary-color) !important;
	background: var(--primary-color) !important;
}

/* Force full footer background across theme structures */
.site-footer,
.site-footer .footer-t,
.site-footer .footer-m,
.site-footer .footer-b,
.site-footer .footer-b .container,
.custom-footer,
.custom-footer .footer-content {
	background-color: var(--primary-color) !important;
	background: var(--primary-color) !important;
}

/* Kill gradients/pseudo backgrounds that might override the color */
.site-footer:before,
.site-footer:after,
.footer-b:before,
.footer-b:after,
.footer-t:before,
.footer-t:after,
.footer-m:before,
.footer-m:after {
	background: none !important;
	content: none !important;
}

/* Footer text and links on dark background */
.site-footer,
.site-footer p,
.site-footer span,
.site-footer a,
.footer-b,
.footer-b a,
.footer-b .footer_menu a,
.footer-b .site-info,
.footer-b .footer-cop {
	color: #ffffff !important;
}

.footer-b a:hover,
.footer-b .footer_menu a:hover {
	color: rgba(255,255,255,0.85) !important;
}

/* Remove any top borders set by parent theme colors */
.footer-b,
.site-footer {
	border-top: 0 !important;
}

/* Notification bar */
.notification-bar {
	--tmp-bg-color: var(--primary-color) !important;
}

/* Global heading scaling using clamp for all pages - REDUCED SIZES */
h1, .h1 { font-size: clamp(20px, 3vw, 28px) !important; line-height: 1.2 !important; }
h2, .h2 { font-size: clamp(18px, 2.5vw, 24px) !important; line-height: 1.25 !important; }
h3, .h3 { font-size: clamp(16px, 2.2vw, 20px) !important; line-height: 1.3 !important; }
h4, .h4 { font-size: clamp(14px, 1.8vw, 18px) !important; line-height: 1.35 !important; }
h5, .h5 { font-size: clamp(13px, 1.6vw, 16px) !important; line-height: 1.4 !important; }
h6, .h6 { font-size: clamp(12px, 1.4vw, 14px) !important; line-height: 1.45 !important; }

/* Specific section and card title overrides */
.section-title,
.featured-treks-section .section-title,
.activities-section .section-title,
.upcoming-treks-section .section-title,
.customer-reviews-section .section-title,
.home-blog-section .section-title,
.associates-section .section-title {
	font-size: clamp(16px, 2.2vw, 22px) !important;
	font-weight: 600 !important;
}

/* Card titles and trek names */
.trek-card-title,
.trek-name,
.blog-card-title,
.review-card-title,
.activity-title {
	font-size: clamp(14px, 1.8vw, 18px) !important;
	font-weight: 600 !important;
}

/* Hero title */
.hero-title {
	font-size: clamp(32px, 5vw, 48px) !important;
	font-weight: 700 !important;
	color: white !important;
}

/* Hero layout - center everything */
.hero-layout {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
}

.hero-center {
	max-width: 800px;
	width: 100%;
}

/* Hero content positioning */
.hero-content {
	position: relative;
	z-index: 10;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.hero-content-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Hero badge - white text */
.hero-badge span {
	color: white !important;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Hero Video Background */
.hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 1;
	/* Performance optimizations */
	will-change: transform;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.hero-fallback-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
	z-index: 1;
}

/* Remove overlay and use background image */
.hero-overlay {
	display: none;
}

/* Hero background image */
.hero-background {
	background-image: url('../../images/herobg-img.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Background image display */
.hero-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	display: block !important;
}

/* Hero section dimensions for proper video display */
.custom-hero-section {
	min-height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Clean Search Bar Design - Matching Original */
.hero-search-input-group {
	display: flex;
	background: white;
	border-radius: 8px;
	box-shadow: 0 6px 8.73px .27px rgba(39, 105, 157, .1);
	overflow: hidden;
	position: relative;
	align-items: center;
	padding: 4px;
}

.search-icon {
	padding: 0 20px;
	color: var(--primary-color);
	font-size: 18px;
	display: flex;
	align-items: center;
}

.hero-search-input {
	flex: 1;
	border: none !important;
	padding: 18px 0;
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	outline: none;
	background: transparent;
	color: #333;
}

.hero-search-input::placeholder {
	color: #999;
	font-weight: 400;
	font-size: 16px;
}

.hero-search-button {
	background: var(--primary-color);
	border: none;
	padding: 18px 24px;
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 120px;
	justify-content: center;
	font-size: 16px;
	font-weight: 600;
	transition: background 0.3s ease;
	margin-left: 8px;
}

.hero-search-button:hover {
	background: var(--primary-hover);
}

.search-text {
	font-weight: 600;
}

.hero-search-button i {
	font-size: 14px;
}

/* Ensure SVG logo scales nicely */
.logo-img,
.mobile-logo-img {
	max-height: 70px;
	width: auto;
	object-fit: contain;
}

/* Ensure WP custom logo is visible and not hidden by parent theme */
.custom-logo,
.custom-logo-link img {
    max-height: 70px !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
	.logo-img,
	.mobile-logo-img { max-height: 50px !important; }
	
	/* Mobile Hero Video Optimization */
	.hero-video {
		display: none !important; /* Hide video on mobile for performance */
		visibility: hidden !important;
		opacity: 0 !important;
	}
	
	/* Mobile uses background image directly */
	.hero-background {
		background-image: url('../../images/herobg-img.png') !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
	
	/* Mobile Search Bar */
	.hero-search-input-group {
		border-radius: 8px;
		box-shadow: 0 4px 20px rgba(0, 96, 100, 0.1);
	}
	
	.search-icon {
		padding: 0 15px;
		font-size: 16px;
	}
	
	.hero-search-input {
		padding: 16px 0;
		font-size: 15px;
	}
	
	.hero-search-button {
		padding: 16px 20px;
		min-width: 100px;
		font-size: 14px;
		margin-left: 4px;
	}
	
	.search-text {
		display: none; /* Hide text on mobile, show only icon */
	}
	
	.hero-search-button i {
		font-size: 16px;
	}
	
	/* Mobile hero layout */
	.hero-layout {
		text-align: center;
		padding: 0 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.hero-center {
		max-width: 100%;
		text-align: center;
		width: 100%;
	}
	
	/* Mobile text centering */
	.hero-badge {
		text-align: center;
		margin-bottom: 20px;
	}
	
	.hero-badge span {
		text-align: center;
		display: block;
	}
	
	.hero-title {
		text-align: center;
		margin: 0 auto 30px auto;
	}
	
	.hero-search-container {
		text-align: center;
		display: flex;
		justify-content: center;
	}
	
	.hero-search-wrapper {
		text-align: center;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	/* Extra small mobile optimization */
	.hero-search-input-group {
		border-radius: 6px;
	}
	
	.search-icon {
		padding: 0 12px;
		font-size: 14px;
	}
	
	.hero-search-input {
		padding: 14px 0;
		font-size: 14px;
	}
	
	.hero-search-input::placeholder {
		font-size: 14px;
	}
	
	.hero-search-button {
		padding: 14px 16px;
		min-width: 80px;
		margin-left: 2px;
	}
	
	/* Extra small mobile text centering */
	.hero-layout {
		text-align: center;
		padding: 0 15px;
	}
	
	.hero-center {
		text-align: center;
		width: 100%;
	}
	
	.hero-badge {
		text-align: center;
		margin-bottom: 15px;
	}
	
	.hero-title {
		text-align: center;
		margin: 0 auto 20px auto;
	}
	
	.hero-search-container {
		text-align: center;
		display: flex;
		justify-content: center;
	}
}

/* Mobile video loading prevention */
@media (max-width: 768px) {
	.hero-video {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
	
	.hero-video source {
		display: none !important;
	}
}

/* AJAX Search Results - Left Align Text */
.hero-search-result-content {
	flex: 1;
	min-width: 0;
	text-align: left;
}

.hero-search-result-title {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin: 0 0 5px 0;
	line-height: 1.3;
	text-align: left;
}

.hero-search-result-meta {
	display: flex;
	gap: 15px;
	font-size: 14px;
	color: #666;
	text-align: left;
}