/* Custom styles for the Caravan Rental website - Optimized for Core Web Vitals */

/* Font optimization to prevent layout shifts */
@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* Show text while font is loading */
    src: local('Arial');
    size-adjust: 100%;
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: normal;
}

@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 700;
    font-display: swap; /* Show text while font is loading */
    src: local('Arial Bold'), local('Arial-Bold');
    size-adjust: 100%;
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: normal;
}

/* Base body styles */
body {
    font-family: 'Arial', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding-top: 70px; /* Only account for navbar height */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px;
    margin: 0;
    font-display: swap;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    content-visibility: auto;
    contain: layout style paint;
}

/* Section Styling */
section {
    padding: 60px 0;
    scroll-margin-top: 80px; /* Increased scroll margin to account for fixed navbar height */
}

/* Anchor link offset for smooth scrolling */
:target {
    scroll-margin-top: 80px; /* Ensures anchors are not hidden behind the navbar */
}

section h2 {
    font-size: 2.2rem; /* Consistent heading size */
    margin-bottom: 40px;
    font-weight: bold;
}

/* Card Styling */
.card {
    border: none; /* Remove default card border */
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    contain: layout style paint;
    content-visibility: auto;
    height: auto;
}

.card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Fix for value proposition cards to prevent layout shifts */
#value-proposition .card {
    min-height: 150px; /* Set a minimum height for all cards */
    display: flex;
    flex-direction: column;
}

#value-proposition .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Add shadow to cards to make them pop out */
.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

/* Technical Specs Section */
#specs {
    background-color: #343a40; /* Dark background */
    color: white; /* Default text color for the section */
}

#specs h2 {
    color: white; /* Ensure section title is white */
}

#specs .list-group-item {
    background-color: transparent; /* Make list group items transparent */
    color: white; /* Text color for list items */
    border-color: rgba(255, 255, 255, 0.125); /* Lighter border for contrast */
}

#specs .card {
    background-color: #495057; /* Slightly lighter dark shade for cards */
    color: white;
    border: 1px solid #6c757d; /* Border for cards */
}

#specs .card-title {
    color: white; /* Ensure card titles are white */
}

/* Call to Action Section */
#contact-cta {
    background-color: #343a40; /* Dark background for contrast with text-white */
    color: white;
}

#contact-cta h2 {
    color: white;
}

/* Gallery Styling */
.gallery-image {
    border: 3px solid #dee2e6; /* Original border style */
    transition: transform 0.3s ease;
    will-change: transform;
    /* Ensure img-fluid class is used on the <img> tag in HTML for responsiveness */
    aspect-ratio: 4/3; /* Maintain consistent aspect ratio */
    object-fit: cover; /* Ensure images cover their container */
    width: 100%; /* Full width of container */
    height: auto; /* Height will be determined by aspect ratio */
    contain: layout style paint;
    content-visibility: auto;
}

.gallery-item {
    contain: layout style;
    content-visibility: auto;
}

.gallery-image:hover {
    transform: scale(1.05); /* Zoom effect on image */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important; /* Enhanced shadow on image hover */
}

/* Hero Section Styling */
#hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    font-weight: bold;
}

#hero .lead {
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* Responsive adjustments */
@media (max-width: 992px) { /* Medium devices (tablets, less than 992px) */
    #hero h1 {
        font-size: 2.5rem;
    }
    #hero .lead {
        font-size: 1.3rem;
    }
    section h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) { /* Small devices (landscape phones, less than 768px) */
    #hero h1 {
        font-size: 2.2rem;
    }
    #hero .lead {
        font-size: 1.2rem;
    }
    section h2 {
        font-size: 1.8rem;
    }
    
    /* Enhanced touch targets for mobile */
    .navbar-toggler {
        min-width: 48px;
        min-height: 48px;
        padding: 12px;
        margin-right: 8px;
    }
    
    .nav-link {
        padding: 12px 16px;
        margin: 4px 0;
    }
    
    .navbar-nav .nav-item {
        margin-bottom: 8px;
    }
    
    /* Ensure language links have adequate touch targets */
    .lang-link {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 576px) { /* Extra small devices (portrait phones, less than 576px) */
    #hero h1 {
        font-size: 1.8rem;
    }
    #hero .lead {
        font-size: 1.1rem;
    }
    section h2 {
        font-size: 1.6rem;
    }
    
    /* Further enhanced touch targets for smallest screens */
    .navbar-toggler {
        min-width: 52px;
        min-height: 52px;
    }
    
    .nav-link {
        padding: 16px;
    }
    
    /* Increase spacing between mobile menu items */
    .navbar-nav .nav-item {
        margin-bottom: 12px;
    }
    
    /* Ensure buttons have adequate touch targets */
    .btn {
        min-height: 48px;
        padding: 12px 24px;
    }
}

/* Touch target optimization for all interactive elements */
button,
.btn,
a.nav-link,
.navbar-toggler,
input[type="button"],
input[type="submit"] {
    touch-action: manipulation; /* Optimize for touch */
}

/* Custom navbar styles */
.custom-navbar {
    background-color: #f8f9fa;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050; /* Increased z-index to ensure it stays on top */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 70px; /* Fixed height for navbar */
    padding: 0.5rem 1rem;
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.navbar-links {
    display: flex;
    align-items: center;
}

.navbar-links .nav-link {
    padding: 0.5rem 1rem;
    color: rgba(0,0,0,.55);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

/* Breadcrumb styling */
nav[aria-label="breadcrumb"] {
    position: fixed;
    top: 70px; /* Position right below the navbar */
    left: 0;
    width: 100%;
    z-index: 1040;
    padding: 0.5rem 0;
    background-color: #f8f9fa;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Adjust main content to account for fixed breadcrumb */
main {
    margin-top: 40px; /* Add margin to account for fixed breadcrumb */
}

.navbar-links .nav-link:hover {
    color: rgba(0,0,0,.7);
}

/* Fix for collapsed navbar to prevent layout shifts */
.navbar-collapse {
    position: absolute;
    top: 70px; /* Match navbar height */
    left: 0;
    right: 0;
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1040;
}

/* Ensure navbar toggle button is visible */
.navbar-toggler {
    z-index: 1060;
    position: relative;
}

/* Modal styling has been replaced with lightbox.css */