/* --- General Body and Typography --- */
body {
    font-family: 'Roboto', sans-serif; /* You might need to link Google Fonts for Roboto in header.php */
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa; /* Light background for general pages */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif; /* Another Google Font suggestion */
    font-weight: 700;
    color: #0d6efd; /* Bootstrap primary color for headings */
}

/* Custom color palette (optional - use Bootstrap's if you prefer) */
:root {
    --bs-primary: #0d6efd; /* Blue */
    --bs-secondary: #6c757d; /* Grey */
    --bs-success: #198754; /* Green */
    --bs-info: #0dcaf0; /* Cyan */
    --bs-warning: #ffc107; /* Yellow */
    --bs-danger: #dc3545; /* Red */
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

/* --- Navigation Bar (Minimal custom styles, Bootstrap handles most) --- */
.navbar-brand img {
    margin-right: 8px; /* Space between logo and text */
}

.navbar-nav .nav-link.active {
    font-weight: bold;
    color: var(--bs-primary) !important; /* Highlight active link with primary color */
}
.navbar-nav .nav-link {
    transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
    color: var(--bs-primary) !important;
}


/* --- Hero Section (from index.php) --- */
.hero-section {
    position: relative;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    background-attachment: fixed; /* Parallax effect */
    min-height: 80vh; /* Ensure it takes up significant screen height */
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay */
    z-index: 1;
}
.hero-section > .container {
    position: relative;
    z-index: 2;
}

/* Simple animations for hero text (from index.php) */
.animate__animated {
    animation-duration: 1s;
}
.animate__fadeInDown {
    animation-name: fadeInDown;
}
.animate__fadeInUp {
    animation-name: fadeInUp;
}
.animate__delay-1s {
    animation-delay: 1s;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}


/* --- Card Styling (common for destinations, offers, about) --- */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: none; /* Remove default Bootstrap card border */
    border-radius: 0.5rem; /* Slightly rounded corners */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1) !important; /* More pronounced shadow on hover */
}
.card-img-top {
    height: 220px; /* Consistent height for images in card grids */
    object-fit: cover; /* Ensures images cover the area without distortion */
    border-top-left-radius: 0.5rem; /* Match card border-radius */
    border-top-right-radius: 0.5rem;
}

/* Specific image height for destination_detail page */
.large-destination-image {
    max-height: 500px; /* Adjust as needed for hero image on detail page */
    width: 100%;
    object-fit: cover;
}

/* --- About Us Section Specifics --- */
.card.border-start { /* For "Why Choose CostaFly" cards */
    border-left-width: 0.25rem !important; /* Ensure border width is applied */
}


/* --- Contact Page Specifics (Google Map) --- */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    height: 0;
    border-radius: 0.5rem; /* Match card styling */
}
.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: 0;
}

/* --- Utility Classes / Overrides --- */
.text-primary {
    color: var(--bs-primary) !important;
}
.text-secondary {
    color: var(--bs-secondary) !important;
}
.text-success {
    color: var(--bs-success) !important;
}
.text-info {
    color: var(--bs-info) !important;
}
.text-warning {
    color: var(--bs-warning) !important;
}
.text-danger {
    color: var(--bs-danger) !important;
}

/* Ensure stretched-link works correctly with card hover */
.stretched-link {
    position: relative;
    z-index: 1;
}
.card-body .stretched-link { /* To ensure the whole card is clickable for buttons inside */
    z-index: 2; /* Give the actual button a higher z-index if it has specific actions */
}

/* Remove text decoration from footer links */
footer a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s ease;
}
footer a:hover {
    color: var(--bs-primary) !important;
}
footer .list-inline-item a {
    color: #fff;
    font-size: 1.5rem; /* Larger social media icons */
}
footer .list-inline-item a:hover {
    color: var(--bs-primary) !important;
}

/* Buttons with icons */
.btn i.me-2 {
    margin-right: .5rem;
}