/* Smooth gradient background that blends with the header and extends white further down */
body {
    background: linear-gradient(to bottom, #f8f8f8, #FFFFFF 375px, #87CEEB 90%) !important; /* Light gray to white to sky blue gradient */
    background-attachment: fixed !important; /* Ensures the background stays fixed when scrolling */
    background-size: cover !important; /* Ensures the gradient covers the entire viewport */
    margin: 0; /* Removes any default margin */
    padding: 0; /* Removes any default padding */
    font-family: Arial, sans-serif; /* Specify your preferred font here */
}

/* Add a high specificity selector to ensure it overrides Elementor's background settings */
html body.elementor-page {
    background: linear-gradient(to bottom, #f8f8f8, #FFFFFF 375px, #87CEEB 90%) !important; /* Ensures this background applies even if Elementor sets one */
}

/* Boxed layout for the weather content */
.weather-container {
    max-width: 1100px; /* Increased maximum width for better fit */
    margin: 0 auto; /* Center the content */
}

/* Ensure the weather widgets fit within the container */
.weather-widget, .forecast-narrative-container, .intraday-forecast-widget, .ten-day-forecast-widget {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    position: relative; /* Ensure proper stacking context */
    z-index: 1; /* Ensure these elements appear above others */
}

#autocomplete-suggestions {
    display: none; /* Hidden by default */
    position: absolute; /* Position it below the input field */
    max-height: 200px; /* Limit its size */
    overflow-y: auto; /* Add scroll for overflow */
    border: 1px solid #ddd; /* Light gray border */
    background-color: white;
    width: calc(100% - 2px); /* Match input field width */
    box-sizing: border-box;
    z-index: 1005; /* Increased z-index to ensure it's above other elements */
}

#autocomplete-suggestions li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none; /* Remove bullet points */
}

#autocomplete-suggestions li:not(:last-child) {
    border-bottom: 1px solid #eee; /* Light separator for items */
}

#autocomplete-suggestions li:hover {
    background-color: #f8f8f8; /* Light grey background on hover */
}

.left-aligned-text {
    text-align: left;
}

.forecast-tab {
    display: block;
    width: 30%; /* Adjust width for better fit */
    background-color: #007bff; /* Primary blue */
    color: white;
    text-align: center;
    padding: 10px 10px; /* Standard padding */
    border-radius: 10px 10px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    margin: 0px 0px; /* Standard padding */
    z-index: 1000;
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .forecast-tab {
        width: 45%; /* Adjust width to avoid feeling too large */
        padding: 8px 8px; /* Slightly reduce padding for better fit */
        font-size: 14px; /* Smaller font size for better fit */
    }
}

/* Media query for screens smaller than 480px */
@media (max-width: 480px) {
    .forecast-tab {
        width: 50%; /* Adjust width for very small screens */
        padding: 6px 6px; /* Further reduce padding */
        font-size: 12px; /* Smaller font size for very small screens */
    }
}

/* Narrative Container Adjustments */
.forecast-narrative-container {
    position: relative; /* Ensures the forecast tab aligns correctly */
    padding: 20px; /* Added padding inside the container */
    background-color: #ffffff; /* Light background color */
    border-radius: 0 0 10px 10px; /* Rounded corners on the bottom */
    margin-top: 20px; /* Space above the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for depth */
}

.forecast-narrative-container .forecast-detail {
    border-bottom: 1px solid #eee;
    margin: 25px; /* Adjusted margin for alignment */
}

.forecast-narrative-container .forecast-detail:last-child {
    border-bottom: none; /* Removes border from the last element */
}

.forecast-narrative-container .forecast-detail strong {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

/* Adjustments for Smaller Screens */
@media (max-width: 768px) {
    .forecast-narrative-container {
        padding: 0;
    }
}

@media (max-width: 480px) {
    .forecast-narrative-container {
        margin-top: 15px;
    }
}

/* Location Search Form Styles */
#location-search-form-container {
    text-align: center;
    margin-bottom: 20px;
}

#location-search-form input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
}

#location-search-form button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#location-search-form button:hover {
    background-color: #0056b3;
}

.weather-main {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
}

.weather-main .icon-and-phrase {
    display: flex;
    align-items: center;
    padding-right: 0px; /* Padding to the right of the icon and wxPhrase group */
}

.weather-main .weather-icon {
    height: auto;
    padding: 10px; /* Ensure there's padding if the text wraps */
    width: 80px;
}

.weather-main .wx-phrase {
    font-size: 18px;
    color: #333;
    font-style: italic;
    padding: 0 20px; /* Ensure there's padding if the text wraps */
}

.temperature-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.weather-main .temperature-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.temperature {
    font-size: 48px;
    font-weight: bold;
    margin: 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding: 0 110px; /* Ensure there's padding if the text wraps */
}

.feels-like {
    font-size: 18px;
    margin: 5px 0;
}

.additional-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.additional-details > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .weather-main {
        grid-template-columns: 1fr; /* Stack items vertically on smaller screens */
        justify-items: center; /* Center-align the items */
        width: 100%;
    }

    .weather-main .wx-phrase, .weather-main .temperature-main {
        padding: 0; /* Add some padding above and below when stacked */
        width: 100%;
    }
}

.weather-icon-and-temp {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.weather-widget {
    font-size: 14px;
    width: 100%;
}

/* 10-day Forecast Widget Styles */
.ten-day-forecast-widget {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* Force 5 columns for the 10-day forecast */
    gap: 20px !important;
    width: 100% !important;
    position: relative; /* Ensure proper stacking context */
    z-index: 1; /* Ensure this element appears above others */
}

.daily-forecast {
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.daily-forecast h2 {
    font-size: 16px;
    margin: 0 0 10px;
    font-weight: bold;
}

.daily-forecast .weather-icon {
    width: 60px;
    height: auto;
    margin-bottom: 10px;
}

.daily-forecast p {
    margin: 10px 0;
    font-size: 14px;
    color: #666;
}

/* Additional responsive adjustments */
@media (max-width: 1024px) {
    .ten-day-forecast-widget {
        grid-template-columns: repeat(4, 1fr) !important; /* 4 columns for medium screens */
    }
}

@media (max-width: 768px) {
    .ten-day-forecast-widget {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns for small screens */
        gap: 10px !important;
    }

    .daily-forecast {
        min-width: 0% !important; /* Override the min-width for mobile screens */
    }

    .weather-icon-and-temp, .temperature {
        flex-direction: column;
        align-items: center;
    }

    .temperature {
        margin: 10px 0; /* Adjusted margin for mobile layout */
    }

    .precipitation-details {
        font-size: 10pt;
    }
}

@media (max-width: 480px) {
    .ten-day-forecast-widget {
        grid-template-columns: repeat(1, 1fr) !important; /* 1 column for very small screens */
    }

    .intraday-period {
        width: calc(100% - 15px) !important;
    }
}

/* Enhanced Styles for 10-day Forecast Widget */
.daily-forecast h4, .nightly-forecast h4 {
    margin-bottom: 8px;
    color: #333;
    font-size: 22px;
}

.weather-icon {
    width: 60px;
    height: auto;
    margin-bottom: 5px;
}

.daily-forecast p, .nightly-forecast p {
    margin: 4px 0;
    font-size: 14px;
    color: #666;
}

.daily-forecast strong, .nightly-forecast strong {
    font-weight: 600;
    color: #333;
}

.large-temperature {
    font-size: 24px !important; /* This sets the font size to 36 pixels and overrides other styles */
}

.wx-phrase-large {
    font-size: 18px !important; /* Adjust the size as needed */
    padding-bottom: 10px; /* Add bottom padding */
    padding-top: 10px; /* Add bottom padding */
}

/* Specific Styles for Nighttime Forecasts */
.nightly-forecast {
    background-color: #e8e8e8; /* Slightly different background for night */
    flex: 1;
}

/* Additional responsive adjustments */
@media (max-width: 768px) {
    .ten-day-forecast-widget {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; /* Responsive grid for tablets */
    }

    .daily-forecast {
        flex-direction: column; /* Stack items on smaller screens */
        align-items: center;
        justify-content: center;
    }

    .weather-icon-and-temp {
        flex-direction: column;
    }

    .temperature {
        margin-left: 0;
        margin-top: 10px; /* Add space between the icon and temperature on smaller screens */
    }
}

.weather-warning-header {
    cursor: pointer;
    /* Other styling as needed */
}

/* Container styling to align the toggle to the right side of the forecast box */
.forecast-toggle-container {
    display: flex;
    justify-content: flex-end; /* Aligns the toggle to the right side */
    align-items: center; /* Centers the toggle vertically within the container */
    position: absolute; /* Positioning relative to the parent container */
    right: 50px; /* Right alignment with space from the edge */
    top: 10px; /* Position from the top */
    z-index: 2; /* Ensures it's above other content */
}

/* Styling for the switch, acting as the base for the toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hides the default HTML checkbox input */
.switch input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/* Styling for the slider that visually represents the toggle mechanism */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #007bff; /* Initial color for nighttime */
    transition: background-color .4s, transform .4s; /* Smooth transition for color and position */
    border-radius: 34px;
}

/* The sliding element inside the slider */
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%; /* Makes it circular */
}

/* Changes the background color of the slider when the toggle is checked (active) */
input:checked + .slider {
    background-color: #007bff; /* Color for daytime */
}

/* Moves the inner circle to the right when toggled */
input:checked + .slider:before {
    transform: translateX(26px);
}

@media (max-width: 480px) {
    .switch {
        width: 36px; /* 60px * 0.6 = 36px */
        height: 20.4px; /* 34px * 0.6 = 20.4px */
    }

    .slider {
        border-radius: 20.4px; /* Adjust border-radius proportionally */
    }

    .slider:before {
        height: 15.6px; /* 26px * 0.6 = 15.6px */
        width: 15.6px; /* 26px * 0.6 = 15.6px */
        left: 2.4px; /* 4px * 0.6 = 2.4px */
        bottom: 2.4px; /* 4px * 0.6 = 2.4px */
    }
}

/* General styling for icons to ensure size and alignment */
.icon {
    width: 30px;
    height: 30px;
    vertical-align: middle; /* Aligns icons with the middle of the toggle */
}

/* Positioning the daytime icon to the left of the switch */
.daytime-icon {
    position: absolute;
    left: -35px; /* Slightly more space to avoid touching the switch */
}

/* Positioning the nighttime icon to the right of the switch */
.night-icon {
    position: absolute;
    right: -35px; /* Slightly more space to avoid touching the switch */
}

.weather-warnings-widget {
    /* Styles for the widget container */
}

.weather-warning {
    border: 2px solid red; /* Red border */
    margin-bottom: 10px; /* Spacing between warnings */
}

.weather-warning-header {
    background-color: #ffdddd; /* Light red background for the header */
    cursor: pointer;
    padding: 5px;
}

.weather-warning-detail {
    display: none; /* Initially hidden */
    padding: 5px;
    background-color: #fff5f5;
}

.intraday-forecast-widget {
    align-items: flex-start; /* Align items to the top */
    justify-content: space-between; /* Space between forecasts and narratives */
    padding: 20px; /* Padding around the widget */
    background-color: #f1f1f1; /* Light background color for the widget */
    width: 100%; /* Set the width to 100% of its container */
}

@media (max-width: 480px) {
    .intraday-forecast-widget {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Adjust grid layout for very small screens */
        gap: 20px; /* Adjust spacing as needed */
    }
}

.intraday-period .weather-icon {
    width: 60px; /* Set width to 60 pixels */
    object-fit: cover; /* This ensures the image covers the full area without distortion */
}

.intraday-period h3 {
    font-size: 18px; /* Ensure period name is larger than the time */
    margin-bottom: 0; /* Reduce default margin */
}

.current-conditions-box {
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
    margin: 0px; /* Space above and below the box */
    padding: 0px; /* Padding inside the box */
    position: relative; /* Needed for absolute positioning of children */
    background: #ffffff; /* Assuming a white background, adjust as necessary */
    width: 100%; /* Set the width to 100% of its container */
}

/* Shared Styles for Day and Night Forecasts */
.daily-forecast, .nightly-forecast {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.weather-widget {
    position: relative;
    padding-top: 50px; /* Adjusted to accommodate the tab's absolute positioning */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 0px px rgba(0, 0, 0, 0.0); /* Shadow effect */
    margin: 0px 0px 10px 0px; /* Space above and below the box */
    background: #ffffff; /* Assuming a white background, adjust as necessary */
    width: 100%;
}

.intraday-forecast-widget, .ten-day-forecast-widget, .forecast-narrative-container {
    position: relative;
    padding-top: 60px; /* Adjusted to accommodate the tab's absolute positioning */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 0px px rgba(0, 0, 0, 0.0); /* Shadow effect */
    margin: 20px 0px 0px 0px; /* Space above and below the box */
    background: #ffffff; /* Assuming a white background, adjust as necessary */
    box-shadow: -1px 10px 10px -1px rgba(0, 0, 0, 0.1); /* Shadow on the right */
    width: 100%;
}

.daily-forecasts {
    margin-top: 0px; /* Adds space above the narratives section */
    padding: 20px; /* Padding around the narrative texts */
}

/* Narrative Container Adjustments */
.forecast-narrative-container {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow wrapping to multiple lines */
    position: relative; /* Ensures the forecast tab aligns correctly */
    padding: 20px 20px 20px; /* Padding around the container */
    background-color: #ffffff; /* Light background color */
    border-radius: 10px 10px 10px 10px; /* Rounded corners on the bottom */
    margin-top: 20px; /* Space above the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for depth */
}

.forecast-narrative-container .forecast-detail {
    flex: 1 1 45%; /* Flex-grow: 1, Flex-shrink: 1, Flex-basis: 45% */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
    padding-top: 40px;
    margin: 20px; /* Margin around each narrative detail */
    border: 0px solid #eee; /* Border for each narrative detail */
    background-color: #fff; /* Background color for each narrative detail */
    border-radius: 5px; /* Rounded corners for each narrative detail */
    display: flex; /* Use flexbox for inner content alignment */
    align-items: center; /* Center align items vertically */
    justify-content: flex-start; /* Align items to the start horizontally */
}

.forecast-narrative-container .forecast-detail img {
    margin-right: 10px; /* Margin to the right of the icon */
    width: 40px; /* Set a fixed width for the icon */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Vertically align icon with text */
}

.forecast-narrative-container .forecast-detail strong {
    font-weight: bold; /* Bold text for labels */
    color: #333; /* Dark text color for labels */
    margin-right: 10px; /* Margin to the right of the labels */
    vertical-align: middle; /* Vertically align text with icon */
}

.forecast-narrative-container .forecast-detail span {
    display: inline-block;
    vertical-align: middle; /* Vertically align text with icon */
    flex-grow: 1; /* Allow span to take up the remaining space */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .forecast-narrative-container {
        padding: 15px; /* Reduced padding on smaller screens */
    }

    .forecast-narrative-container .forecast-detail {
        flex: 1 1 100%; /* Stack items vertically on smaller screens */
        margin: 10px 0; /* Margin around each narrative detail */
    }
}

/* Further adjustments for very small screens */
@media (max-width: 480px) {
    .forecast-narrative-container {
        padding: 10px; /* Minimal padding on very small devices */
        margin-top: 15px; /* Reduced top margin */
    }
}

/* Intraday Forecast Widget Styles */
.intraday-forecast-widget {
    display: flex; /* Use flexbox to layout children in a row */
    flex-wrap: wrap; /* Allow wrapping as needed */
    align-items: stretch; /* Stretch items to fill the container vertically */
    justify-content: space-between; /* Distribute space between items evenly */
    padding: 20px;
    background-color: #fff;
    width: 100%;
    padding-top: 50px;
}

.intraday-period {
    flex: 1; /* Allow each forecast to grow and take equal space */
    padding: 10px;
    margin: 5px; /* Slight margin for spacing */
    box-sizing: border-box; /* Include padding and border in width calculation */
    display: flex;
    flex-direction: column; /* Stack elements vertically inside each forecast */
    align-items: center; /* Center align items horizontally */
    justify-content: space-around; /* Distribute space inside the forecast box */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .intraday-period {
        /* Slightly reduce size to better fit on smaller screens */
        padding: 8px;
    }
}

/* Responsive adjustments for 2x2 grid on mobile */
@media (max-width: 480px) {
    .intraday-forecast-widget {
        flex-direction: row; /* Keep items in a row to facilitate a grid layout */
        flex-wrap: wrap; /* Wrap items to the next line after filling the row */
    }
    .intraday-period {
        flex: 0 0 48%; /* Set each box to take nearly half of the container's width, minus margin */
        margin: 1%; /* Provide a small margin to prevent touching */
    }
}