/* Florida Beach Stays Layout Styles */

/* Import Playfair Display font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
}

/* Remove max-width constraint to allow full width */
.fbs-page-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/* Center align the header content */
.fbs-header {
    position: relative;
    display: flex;
    flex-direction: column; /* Stack logo and nav vertically */
    align-items: center;
    padding: 20px 0 0px;
    width: 100%;
    background-color: #fff;
}

/* Full width banner with relative positioning */
.fbs-banner {
    width: 100%;
    margin: 0;
    line-height: 0;
    position: relative; /* Add this for absolute positioning context */
}

.fbs-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Position logo on top of banner */
.fbs-logo {
    position: absolute;
    top: 45%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Perfect centering */
    z-index: 2; /* Ensure logo appears above banner */
    padding: 20px; /* Optional: space around logo */
    border-radius: 4px; /* Optional: rounded corners */
}

.fbs-logo img {
    max-height: 225px; /* Adjust based on your logo size */
    width: auto;
    display: block;
    border-radius:50%;
}

.fbs-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.fbs-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Even spacing between items */
}

.fbs-nav li {
    margin: 0; /* Remove left margin, using gap instead */
    padding: 0px 5px;
}

.fbs-nav a {
    text-decoration: none;
    color: #000;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    padding: 15px 0px 0px;
}

.fbs-nav a:hover {
    color: #555;
}

/* Full width content area */
.fbs-content-area {
    width: 100%;
    min-height: 400px;
    padding: 40px 20px;
    box-sizing: border-box;
}

/* Center the actual content within the blue area */
.fbs-content-area > * {
    max-width: 1200px; /* or whatever max-width you want for content */
    margin-left: auto;
    margin-right: auto;
}

/* Full width footer */
.fbs-footer {
    width: 100%;
    padding: 20px;
    background-color: #4f99a9;
    text-align: center;
    color: #555;
    font-size: 14px;
    box-sizing: border-box;
    border-top: 1px solid #eee;
}

/* Login Buttons */
.fbs-login-container {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

.fbs-login-btn {
    text-decoration: none;
    color: #fff;
    background-color: #4f99a9;
    padding: 8px 15px;
    border-radius: 4px;
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.fbs-login-btn:hover {
    background-color: #3a7a88;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fbs-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .fbs-logo img {
        max-height: 70px;
    }

    .fbs-login-container {
        position: static;
        margin-bottom: 15px;
    }
}