/* --- Global Styles & Variables --- */
:root {
    --primary-color: #000000c2; /* Keeping blue for now, adjust if needed */
    --secondary-color: #f8f9fa; /* Very light gray for backgrounds */
    --text-color: #344;
    --heading-color: #1a1a1a; /* Darker color for headings */
    --light-gray: #e0e0e0;
    --medium-gray: #dcdcdc; /* For image placeholder pattern */
    --dark-gray: #555;
    --button-bg-color: #344; /* Dark button background */
    --button-text-color: #fff; /* White button text */
    --border-radius-lg: 12px; /* Slightly adjusted radius */
    --border-radius-md: 6px;
    --border-radius-sm: 4px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7; /* Slightly increased line height */
    color: var(--text-color);
    background-color: #ffffff; /* Fallback color */
    font-weight: 300; /* Lighter default font weight */
    margin: 0; /* Remove default body margin */

    /* Background Image with White Overlay */
    /* !! REPLACE with the correct path to your image !! */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), /* Adjusted opacity slightly */
        url('images/marianas_map.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: Fixed background */

    min-height: 100vh; /* Ensure body takes full viewport height */
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    margin-bottom: 1rem;
    color: var(--heading-color); /* Darker heading color */
    font-weight: 600; /* Bolder headings */
}
h2 {
    font-size: 1.8rem; /* Adjust heading size */
    margin-bottom: 0.8rem;
}

p {
    margin-bottom: 1.2rem; /* Increased paragraph spacing */
    color: var(--dark-gray); /* Slightly lighter text for paragraphs */
    font-weight: 400; /* Normal weight for paragraphs */
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}
a:hover {
    color: #005fa3;
}

/* --- Header & Navigation (Keep existing styles) --- */
header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Softer shadow */
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .logo {
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--primary-color);
}
header nav ul { list-style: none; display: flex; }
header nav ul li { margin-left: 1.5rem; }
header nav ul li a {
    color: var(--dark-gray);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-md);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 400;
}
header nav ul li a:hover,
header nav ul li a.active {
    background-color: var(--primary-color);
    color: #fff;
}

/* --- Main Content Area --- */
/* Remove padding from main directly, apply to sections inside */
main.container {
    padding-top: 3rem; /* Add space below header */
    padding-bottom: 3rem; /* Add space above FAQ/footer */
 /* Background is now on the body */
}


/* Optional: Ensure text within main has good contrast */
main.container p, /* Target paragraphs */
main.container h2 /* Target headings, etc. */
 {
    /* You might need to explicitly set text color if it's not inheriting properly */
    /* color: #333; */ /* Example: Ensure text is dark */

     /* Add a subtle text shadow for extra legibility if needed */
    /* text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5); */
}

/* --- Two-Column Layout --- */
.two-col-intro {
    display: block; /* Ensure it's not treated as a flex container */
    text-align: center; /* Center inline content and text */
    margin-bottom: 4rem; /* Space below this intro section */
    /* Optional: Add background/padding if desired for this block */
    /* background-color: rgba(255, 255, 255, 0.7); */
    /* padding: 2rem; */
    /* border-radius: var(--border-radius-lg); */
}

/* Reset column behavior specifically within the intro section */
.two-col-intro .col-image,
.two-col-intro .col-text {
    flex: none; /* Remove flex sizing */
    min-width: auto; /* Reset min-width */
    width: auto; /* Allow natural width or set specific width */
    margin-bottom: 1.5rem; /* Space between image and text vertically */
    display: block; /* Ensure block display for stacking */
}

/* Center the text block and remove its bottom margin */
.two-col-intro .col-text {
     margin-bottom: 0;
     max-width: 600px; /* Optional: constrain text width */
     margin-left: auto;
     margin-right: auto;
}

/* Style the image within the intro section's image container */
.two-col-intro .col-image img {
    display: block; /* Needed for margin: auto centering */
    margin-left: auto; /* Center the image horizontally */
    margin-right: auto; /* Center the image horizontally */
    max-width: 100%; /* Prevent image from overflowing its container */
    height: auto; /* Maintain aspect ratio */
    /* Override general image styles if needed */
    object-fit: contain; /* Ensure whole image is visible */
    border-radius: var(--border-radius-md); /* Example: Apply medium radius */
    box-shadow: none; /* Example: Remove shadow if applied generally */
    max-height: 150px; /* Example: constrain image height */
}

/* Specific styles for heading/paragraph in the intro */
.two-col-intro h2 {
    font-size: 2.2rem; /* Example: Larger heading */
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.two-col-intro p {
    font-size: 1.1rem;
    color: var(--text-color); /* Use standard text color */
    margin-bottom: 0; /* Remove bottom margin */
}


/* --- Two-Column Layout --- */
.two-col-section {
    display: flex;
    align-items: center; /* Vertically center content */
    gap: 3rem; /* Increase space between columns */
    margin-bottom: 4rem; /* Increase space between sections */
    justify-content: flex-end;  /* Align the image to the RIGHT edge */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.col-text, .col-image {
    flex: 1; /* Each column tries to take equal space */
    min-width: 280px; /* Minimum width before wrapping */
    justify-content: flex-end;  /* Align the image to the RIGHT edge */
}

/* Reverse order for alternating layout */
.two-col-section.reverse {
    flex-direction: row-reverse;
}

/* Image Placeholder Styling */
.image-placeholder {
    background-color: #e9e9e9; /* Base color */
    /* Diagonal lines pattern */
    background-image: repeating-linear-gradient(
        45deg,
        var(--medium-gray),
        var(--medium-gray) 4px, /* Thinner lines */
        #e9e9e9 4px,
        #e9e9e9 8px /* Adjust spacing */
    );
    height: 280px; /* Adjust height as needed */
    border-radius: var(--border-radius-lg); /* Rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb; /* Placeholder text color */
    font-size: 1rem;
}

/* --- Button Styling (Updated) --- */
.btn {
    display: inline-block;
    background-color: var(--button-bg-color); /* Dark background */
    color: var(--button-text-color); /* White text */
    padding: 0.7rem 1.5rem; /* Adjusted padding */
    border: none;
    border-radius: var(--border-radius-md); /* Rounded corners */
    cursor: pointer;
    font-size: 0.95rem; /* Slightly smaller font */
    font-weight: 400; /* Normal weight */
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform */
    text-align: center;
    text-transform: none; /* Ensure normal casing */
    margin-top: 0.5rem; /* Add some space above button */
}

.btn:hover {
    background-color: #555; /* Lighter dark on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

/* --- FAQ Section Styling (Updated) --- */
/* Wrapper for full-width background */
.faq-section-wrapper {
    background-color: var(--secondary-color); /* Light gray background */
    padding: 3rem 0; /* Vertical padding */
    margin-top: 2rem; /* Space above FAQ section */
}

/* Keep FAQ heading centered within its container */
.faq-section-wrapper h2 {
    text-align: center;
    margin-bottom: 2rem; /* Space below heading */
}

/* FAQ Container - White box with shadow */
.faq-container {
    max-width: 760px; /* Limit width of FAQ box */
    margin: 0 auto; /* Center the box */
    border: none; /* Remove previous border */
    border-radius: var(--border-radius-lg); /* Rounded corners */
    background-color: #fff; /* White background */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Soft shadow */
    overflow: hidden; /* Clip content */
}

.faq-item {
    border-bottom: 1px solid var(--light-gray); /* Separator line */
}
.faq-item:last-child {
    border-bottom: none; /* No border on last item */
}

/* FAQ Question Button */
.faq-question {
    background-color: transparent; /* Transparent background */
    border: none;
    width: 100%;
    text-align: left;
    padding: 1.2rem 1.5rem; /* Increased padding */
    font-size: 1rem; /* Adjusted font size */
    font-weight: 400; /* Normal weight */
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
    transition: background-color 0.2s ease;
}
.faq-question:hover {
    background-color: #f8f8f8; /* Very subtle hover */
}

/* Icon Styling */
.faq-question .icon {
     font-size: 1.3rem; /* Icon size */
     font-weight: 600; /* Bolder icon */
     transition: transform 0.3s ease;
     color: var(--dark-gray);
     line-height: 1; /* Prevent extra space */
}

/* FAQ Answer Styling */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    background-color: transparent; /* Match question background */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
    padding: 0 1.5rem 1.5rem 1.5rem; /* Padding only when open */
    margin-bottom: 0;
    color: var(--dark-gray);
    font-size: 0.95rem; /* Slightly smaller answer text */
    line-height: 1.6;
}

/* Active state for FAQ item */
.faq-item.active .faq-question {
    /* Optional: Add subtle style change to active question */
    /* background-color: #f9f9f9; */
}

.faq-item.active .faq-question .icon {
     transform: rotate(45deg); /* Rotate '+' to 'x' */
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Adjust if answers are very long */
    padding-top: 0.5rem; /* Add small top padding when open */
}


/* --- Contact Form Styling (Keep existing from previous version) --- */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--dark-gray); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%; padding: 0.8rem; border: 1px solid var(--light-gray);
    border-radius: var(--border-radius-md); font-size: 1rem; font-family: 'Poppins', sans-serif;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.2);
}
.form-group textarea { resize: vertical; min-height: 100px; }
#form-status { margin-top: 1rem; font-weight: 600; min-height: 1.2em; }
/* Ensure contact page button also uses new style */
#contact-form .btn { /* Specificity for contact form button if needed */
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
}
#contact-form .btn:hover {
     background-color: #555;
}


/* --- Footer (Keep existing styles) --- */
footer {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 3rem; /* Ensure space above footer */
}
footer p { margin-bottom: 0; font-size: 0.9rem; }

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    /* Stack columns in two-column sections */
    .two-col-section,
    .two-col-section.reverse {
        flex-direction: column;
        gap: 1.5rem; /* Reduce gap when stacked */
        margin-bottom: 3rem; /* Adjust bottom margin */
        /* justify-content: flex-end;  /* Align the image to the RIGHT edge */
    }
    /* Ensure text column comes first when stacked in reversed sections */
     .two-col-section.reverse .col-text {
        order: 1; /* Text first */
    }
     .two-col-section.reverse .col-image {
        order: 2; /* Image second */
    }
     .image-placeholder {
        height: 200px; /* Adjust image height */
    }
    h2 { font-size: 1.6rem; }

    /* Adjust header stacking (same as before) */
     header nav { flex-direction: column; align-items: center; }
     header .logo { margin-bottom: 0.5rem; }
     header nav ul { margin-top: 0.5rem; padding-left: 0; }
     header nav ul li { margin-left: 0.5rem; margin-right: 0.5rem; }

     .faq-section-wrapper { padding: 2rem 0; }
     .faq-container { max-width: 90%; } /* Allow FAQ to take more width */
     .faq-question { padding: 1rem 1.2rem; }
     .faq-answer p { padding: 0 1.2rem 1.2rem 1.2rem; }
}

@media (max-width: 480px) {
    body { line-height: 1.6; }
    h2 { font-size: 1.4rem; }
    .container { padding: 0 15px; }
    main.container { padding-top: 2rem; padding-bottom: 2rem; }
    .two-col-section { gap: 1rem; margin-bottom: 2rem; }
    .image-placeholder { height: 180px; }

    .btn { width: 100%; /* Make buttons full-width */ }
    #contact-form .btn { width: 100%; } /* Ensure contact button is full-width */

    .faq-section-wrapper { padding: 1.5rem 0; }
    .faq-question { font-size: 0.95rem; padding: 0.8rem 1rem; }
    .faq-answer p { font-size: 0.9rem; padding: 0 1rem 1rem 1rem; }
    .faq-question .icon { font-size: 1.1rem; }

    header nav ul li a { padding: 0.4rem 0.6rem; } /* Smaller nav links */
    footer { padding: 1rem 0; }
    footer p { font-size: 0.85rem; }
}

/* --- Styling for actual images replacing placeholders --- */
/* Image Tag */
.col-image img {
    display: block; /* Ensures the image behaves like a block element */
    width: auto;   /* Makes the image fill the width of its container */
    height: auto ;  /* Sets a fixed height like the placeholder */
    max-width: 100%; /* IMPORTANT: Prevents overflow if container shrinks */
    max-height: 280px; /* Optional: Limit height if needed, like original */
    object-fit: cover ; /* Scales the image to cover the area, cropping if necessary, without distortion */

    border-radius: var(--border-radius-lg); /* Applies the same large rounded corners */
}