/* Custom styles for Kipling Car and Truck 2026 */

:root {
	--kcat-blue: #003d7a;
	--kcat-blue-dark: #002b5e;
	--kcat-yellow: #ffc107;
	--kcat-yellow-hover: #ffb300;
}

/* Smooth scroll and overflow protection */
html,
body {
	overflow-x: hidden;
	width: 100%;
}

html {
	scroll-behavior: smooth;
}

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

/* Hero background overlay */
.hero-overlay {
	background: linear-gradient(135deg, rgba(0, 61, 122, 0.65), rgba(0, 43, 94, 0.60));
}

/* Service card hover effect */
.service-card {
	transition: all 0.3s ease;
}

.service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Review card styling */
.review-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

/* Button hover effects */
.btn-primary {
	background-color: var(--kcat-yellow);
	color: #1a1a1a;
	transition: all 0.3s ease;
}

.btn-primary:hover {
	background-color: var(--kcat-yellow-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
}

.btn-secondary {
	border: 2px solid white;
	color: white;
	transition: all 0.3s ease;
}

.btn-secondary:hover {
	background-color: white;
	color: var(--kcat-blue);
}

/* Mobile menu animation */
.mobile-menu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.mobile-menu.active {
	max-height: 500px;
}

/* Star rating */
.stars {
	color: var(--kcat-yellow);
}

/* Feature icon animation */
.feature-icon {
	transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
	transform: scale(1.1);
}

/* Sticky header shadow */
.header-scrolled {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: var(--kcat-blue);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--kcat-blue-dark);
}

/* Announcement Banner */
.announcement-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	transition: transform 0.3s ease;
}

.announcement-banner.hidden {
	display: none;
}

.banner-message {
	font-weight: 500;
	font-size: 0.95rem;
}

.banner-close {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.banner-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Adjust header and spacer when banner is present - dynamic via JS */
body.banner-active #site-header {
	top: var(--banner-height, 52px);
}

body.banner-active #header-spacer {
	height: calc(var(--banner-height, 52px) + 80px);
}

@media (max-width: 768px) {
	body.banner-active #site-header {
		top: var(--banner-height, 60px);
	}

	body.banner-active #header-spacer {
		height: calc(var(--banner-height, 60px) + 80px);
	}

	.banner-message {
		font-size: 0.875rem;
	}
}

/* Pagination styling */
.page-numbers {
	list-style: none;
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.page-numbers li {
	display: inline-block;
}

.page-numbers a,
.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
}

.page-numbers a {
	background-color: white;
	color: var(--kcat-blue);
	border: 2px solid #e5e7eb;
}

.page-numbers a:hover {
	background-color: var(--kcat-blue);
	color: white;
	border-color: var(--kcat-blue);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 61, 122, 0.2);
}

.page-numbers .current {
	background-color: var(--kcat-blue);
	color: white;
	border: 2px solid var(--kcat-blue);
}

.page-numbers .prev,
.page-numbers .next {
	font-size: 0.875rem;
}