/*
 * Custom CSS for Plane & Simple Trips
 * Centers the site logo and tagline and right-aligns the main menu.
 */

.logo {
  text-align: center;
}

/* Override theme's styles to shift the entire navigation bar to the right */
.main-navigation {
  float: right;
  text-align: center;
}

/* Make the menu font bold */
.main-navigation a {
  font-weight: bold;
  font-size: 16px;
}

/* Add an em dash separator between each link */
.main-navigation ul.list_nav > li:not(:last-child)::after {
  content: "";
  margin-left: 0;
  color: #fff;
}

/* Ensure bulleted list text is black */
ul li {
  color: #000000;
}

/*
 * Custom CSS for the floating Call-to-Action (CTA) button.
 * This style targets an element with the ID 'custom-floating-cta'
 * to place a 'Plan Now' button fixed in the bottom right corner.
 */

/* 1. Hide the old Jetpack Floating Button (if it was toggled off, this ensures it's fully gone) */
.jetpack-subscribe-floating-button {
    display: none !important;
}

/* 2. Style the new Custom Floating CTA Button */
#custom-floating-cta {
    /* Positioning */
    position: fixed;
    bottom: 20px; /* Distance from bottom */
    right: 20px; /* Distance from right */
    z-index: 9999; /* Ensure it stays above all content */
    
    /* Styling */
    background-color: #cf2e2e; /* Vivid Red Background */
    color: #ffffff; /* White Text Color */
    padding: 15px 30px;
    border-radius: 50px; /* Creates a pill shape to match 'radius 50' */
    text-decoration: none; 
    font-size: 18px;
    font-weight: 700; /* Bold text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for floating effect */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#custom-floating-cta:hover {
    background-color: #fcb323; /* Hover state retains secondary theme color for feedback */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); 
    color: #000000; /* Text black on yellow/orange hover */
}

/* Responsive adjustment for mobile screens */
@media (max-width: 640px) {
    #custom-floating-cta {
        bottom: 15px;
        right: 15px;
        font-size: 16px;
        padding: 12px 25px;
    }
}