/*
Plugin CSS Version: 1.1
Last Updated: August 26, 2025 - Added styling for dynamic displayed tornado count line.
*/

/* Ensure consistent box-sizing across all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Base styling for the container and general text */
body {
    margin: 0;
    background-color: #f4f4f4; /* Light background for the page area */
    color: #333;
}

/* Overall container for the list (each item is full width) */
.tonys-tornadoes-container {
    display: block; /* Each item will stack vertically */
    padding: 20px; /* Padding around the entire collection */
    max-width: 100%; /* Ensures it takes full width of the parent */
    margin: 0 auto; /* Centers the container if a parent limits width */
}

/* Styles for each individual tornado item (now a full-width row) */
.tonys-tornado-item {
    background-color: #ffffff;
    border: 5px solid #720300; /* Dark red border as in the example image */
    border-radius: 4px; /* Subtle rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Slight shadow */
    box-sizing: border-box;
    width: 100%; /* Takes full width of its container */
    margin-bottom: 25px; /* Space between each full-width entry */
    overflow: hidden; /* Ensures content respects border-radius */

    /* Flexbox for image on left, text on right within this item */
    display: flex;
    flex-direction: row; /* Arranges image and text horizontally */
    align-items: stretch; /* Stretches children to fill the height of the tallest sibling */
    height: 208px; /* Fixed height for the entire item, matching image height */
}

/* Styling for the image container on the left */
.tornado-image {
    flex-shrink: 0; /* Prevents the image from shrinking */
    width: 369px; /* Fixed width as requested for the scaled image */
    height: 208px; /* Fixed height as requested for the scaled image */
    margin-right: 20px; /* Space between image and text */
    overflow: hidden; /* Ensures content respects border-radius */
    border-top-left-radius: 2px; /* Subtle rounding for image corners matching card */
    border-bottom-left-radius: 2px;
    display: flex; /* Use flex to center the image itself within this fixed area */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Placeholder background */
    line-height: 0; /* Removes potential extra space from line-height */
    font-size: 0;   /* Removes potential extra space from font-size */
}

/* Styling for the image itself */
.tornado-image img {
    width: 100%; /* Image fills the width of its container */
    height: 100%; /* Image fills the height of its container */
    object-fit: contain; /* Scales the entire image down to fit, without cropping */
    display: block;
    cursor: pointer; /* Indicate that the image is clickable for lightbox */
}

/* Styling for the image link (now the image itself is clickable) */
.tornado-image a {
    display: block; /* Ensure it's a block-level element for consistent sizing */
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-decoration: none; /* No underline on image link */
    line-height: 0; /* Removes potential extra space from line-height */
    font-size: 0;   /* Removes potential extra space from font-size */
    padding: 0; /* Remove any padding from the link */
    margin: 0; /* Remove any margin from the link */
    border: none; /* Ensure no border adding to size */
}
.tornado-image a:hover img {
    opacity: 0.8; /* Slight visual feedback on hover */
    transition: opacity 0.2s ease;
}


/* Styling for the text details container on the right */
.tornado-text-details {
    flex-grow: 1; /* Allows text details to take up all remaining space */
    padding: 15px 20px 15px 0; /* Internal padding */
    box-sizing: border-box;
    display: flex; /* Use flex for internal text arrangement */
    flex-direction: column; /* Stack text elements vertically */
    height: 100%; /* Ensures text container takes full height of parent item */
}

.top-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* Aligns title and tornado number text baselines */
    margin-bottom: 0; /* Ensures no bottom margin */
    padding-bottom: 0; /* Ensures no bottom padding */
    line-height: 1em; /* Reduce line height for tighter packing */
}

/* Styling for the main title (now a link) */
.chase-log-title {
    font-size: 1.6em; /* Larger, bolder title */
    font-weight: 700;
    color: #222;
    margin: 0; /* Explicitly remove default margins */
    line-height: 1em; /* Tighter line height */
}

/* Styling for the title link */
.chase-log-title a {
    color: inherit; /* Inherit color from parent, don't use default blue */
    text-decoration: none; /* No underline by default */
    transition: color 0.2s ease;
}

.chase-log-title a:hover {
    color: #720300; /* Dark red on hover for title link */
    text-decoration: underline; /* Add underline on hover */
}

/* Styling for the Tornado Number display */
.tornado-number-display {
    font-size: 0.9em; /* Smaller, subtle font */
    font-weight: 600;
    color: #777; /* Grey */
    margin: 0; /* Explicitly remove default margins */
    padding-left: 15px; /* Space from title */
    white-space: nowrap; /* Keep it on one line */
    line-height: 1em; /* Tighter line height */
}

/* Styling for the Rating and County line */
.tornado-rating-and-county {
    font-size: 1.1em; /* Larger font */
    color: #555;
    margin: -15px 0 10px 0; /* Negative top margin to pull it up */
    padding-top: 0; /* Ensures no top padding */
    padding-bottom: 0; /* No bottom padding here, next element will have margin */
    line-height: 1em; /* Tighter line height */
}

/* Styling for the main description/notes (post content) */
.tornado-notes {
    font-size: 1em; /* Standard body text size */
    color: #444;
    margin-top: 0; /* Ensures no top margin */
    margin-bottom: 0; /* Remove bottom margin, flex handles distribution */
    line-height: 1.6;
    flex-grow: 1; /* Allows notes to take up available vertical space */
    overflow-y: auto; /* Adds scrollbar if content overflows vertically */
    padding-right: 8px; /* Add padding for scrollbar visibility */
}

/* Styling for the career count display below the main title */
.tonys-career-count-display {
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    color: #720300; /* Matching your theme color */
    margin: 10px auto 10px auto; /* Adjusted: Reduced bottom margin */
    max-width: 1000px; /* Align with form/button width */
    padding: 5px 10px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* NEW: Style for the displayed tornado count line */
.tonys-displayed-count-line {
    text-align: center;
    font-size: 1.1em; /* Slightly smaller than career count */
    font-weight: 500;
    color: #555; /* A bit lighter color */
    margin: -10px auto 15px auto; /* Adjusted: Pulls it closer to career count, adds space above buttons */
    max-width: 1000px;
    padding: 5px 10px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Lighter shadow */
}


/* Wrapper for only the filter and stats toggle buttons */
.tonys-filter-and-stats-button-wrapper {
    display: flex;
    flex-direction: row; /* Buttons side-by-side */
    justify-content: center; /* Center buttons horizontally */
    align-items: center; /* Vertically align buttons */
    gap: 20px; /* Space between buttons */
    margin: 20px auto 10px auto; /* Overall spacing for the wrapper */
    max-width: 1000px; /* Matches form width */
}

/* Styling for the Filter/Stats Toggle Buttons (and now TWISTEX button) */
.tonys-filter-toggle-button {
    background-color: #720300; /* Matching your border color */
    color: #fff;
    border: 1px solid #720300; /* Border matches background */
    padding: 12px 35px; /* Adjusted padding: 25px initial + 10px on each side = 35px total horizontal padding */
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    white-space: nowrap; /* Prevents text from wrapping inside the button */
    min-width: 220px; /* Increased min-width to accommodate 'TWISTEX TORNADOES' text */
    text-align: center; /* Center the text horizontally within the button */
    margin: 0; /* Remove individual button margins, handled by parent gap */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tonys-filter-toggle-button:hover {
    background-color: #5a0200; /* Darker red on hover */
    border-color: #5a0200;
    transform: translateY(-2px); /* Slight lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Specific styling for the TWISTEX button */
.tonys-twistex-button-color {
    background-color: #ff8c00; /* Orange color */
    border-color: #ff8c00;
}

.tonys-twistex-button-color:hover {
    background-color: #cc7000; /* Darker orange on hover */
    border-color: #cc7000;
}


/* Container that holds the filter/stats forms, initially hidden */
/* These will now appear one below the other after the buttons */
.tonys-filter-container {
    overflow: hidden;
    max-height: 0; /* This hides it initially and allows transition */
    transition: max-height 0.3s ease-out; /* Smooth slide effect */
    will-change: max-height; /* Performance hint */
    width: 100%; /* Ensures it takes full width of its parent */
    margin: 15px auto 0 auto; /* Margin to separate from buttons, and centered */
    max-width: 1000px; /* Limit max width to match the form/buttons alignment */
}
/* This class will be added by JS when visible */
.tonys-filter-container.is-visible {
    max-height: 1500px; /* Increased height to accommodate content */
}

/* Adjust the main filter form margin to fit within the new container */
.tonys-tornadoes-filter-form {
    margin-top: 0; /* Remove top margin, now inside tonys-filter-container */
    margin-bottom: 20px; /* Keep bottom margin to separate from tornado items */
    width: 100%; /* Ensure it uses 100% width of the visible container */
    box-sizing: border-box; /* Crucial for padding/border not to exceed width */
    padding: 20px; /* Keep consistent padding for the form container */
    background-color: #ffffff; /* Add background to form/stats areas */
    border: 1px solid #ddd; /* Subtle border for these sections */
    border-radius: 4px; /* Match button/item rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Light shadow */
    display: block; /* Ensure it stacks sections vertically by default */
}
/* Ensure form elements themselves don't break block layout */
.tonys-tornadoes-filter-form form {
    display: block; /* Changed from flex column to block to simplify */
    width: 100%; /* Take full width of parent */
}

/* General styling for filter sections (e.g., State, Year, Month, Rating) */
.tonys-tornadoes-filter-form .filter-section {
    width: 100%; /* Takes full width of parent */
    margin-bottom: 15px; /* Slightly reduced space between filter sections when stacked */
    padding-bottom: 10px; /* Slightly reduced padding */
    border-bottom: 1px solid #eee; /* Separator between filter sections */
    box-sizing: border-box; /* Include padding/border in width calculation */
}
/* This is the key change: Remove the bottom border from the LAST filter section */
.tonys-tornadoes-filter-form .filter-section:last-of-type {
    border-bottom: none; /* Removed border for the actual last filter section */
    margin-bottom: 15px; /* Keep consistent margin for last filter section */
    padding-bottom: 10px; /* Keep consistent padding */
}

.tonys-tornadoes-filter-form h3,
.tonys-tornadoes-filter-form .filter-section h4 {
    margin-top: 0;
    margin-bottom: 0.5em; /* Adjusted: Smaller gap below section titles */
    font-size: 1.2em;
    color: #444;
    font-weight: 600;
    text-align: left; /* Left justify section titles */
}

/* Further compress checkbox groups */
.tonys-tornadoes-filter-form .state-checkboxes,
.tonys-tornadoes-filter-form .year-checkboxes,
.tonys-tornadoes-filter-form .month-checkboxes,
.tonys-tornadoes-filter-form .rating-checkboxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Left justify checkboxes within their section */
    gap: 0.5em 30px; /* Reduced vertical gap between checkbox rows */
    margin-bottom: 0.5em; /* Reduced space below the entire group of checkboxes */
}

/* Keep label and input styling consistent for all checkboxes */
.tonys-tornadoes-filter-form label {
    display: block; /* Ensure each label is on its own line for proper vertical spacing control */
    align-items: center;
    font-size: 1em;
    color: #555;
    cursor: pointer;
    margin-bottom: 0.25em; /* Reduced spacing below each label */
    line-height: 1.2; /* Tighten line height for text within labels */
}

.tonys-tornadoes-filter-form input[type="checkbox"] {
    margin-right: 4px; /* Space between checkbox and text */
    cursor: pointer;
    transform: scale(1.1);
}

/* Styling for the common filter buttons within the form */
.tonys-tornadoes-filter-form .filter-buttons {
    display: flex;
    gap: 10px;
    justify-content: center; /* Center buttons within the filter form */
    border-top: 1px solid #eee; /* Separator line above buttons */
    padding-top: 15px;
    width: 100%; /* Take full width of the form for buttons */
    margin-top: 1em; /* Adjusted: Smaller top margin for buttons */
}


/* Styling for the Stats Content (re-uses tonys-tornadoes-filter-form for outer box) */
.tonys-tornadoes-stats-content {
    margin-top: 0; /* Inherits from filter-form, but ensure no extra top margin */
    margin-bottom: 0 !important; /* Force remove bottom margin for stats content to avoid double margin from .tonys-filter-form */
    padding: 20px; /* Keep consistent padding for the stats container */
    box-sizing: border-box;
    width: 100%;
    display: block; /* Ensure it stacks sections vertically by default */
}

.tonys-tornadoes-stats-content .stats-section {
    width: 100%;
    margin-bottom: 15px; /* Slightly reduced space between stats sections when stacked */
    padding-bottom: 10px; /* Slightly reduced padding */
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
}
.tonys-tornadoes-stats-content .stats-section:last-of-type {
    border-bottom: none; /* Removed border for the actual last stats section */
    padding-bottom: 0; /* Removed padding for the actual last stats section */
    margin-bottom: 0;
}
.tonys-tornadoes-stats-content .stats-section h4 {
    margin-top: 0;
    margin-bottom: 0.5em; /* Adjusted: Smaller gap below section titles */
    font-size: 1.2em;
    color: #444;
    font-weight: 600;
    text-align: left; /* Left justify section titles */
}

.tonys-tornadoes-stats-content .stats-list {
    list-style: none; /* Remove default bullet points */
    margin: 0;
    padding: 0;
    display: grid; /* Use grid for a multi-column layout for stats items */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjusted min-width for individual list items */
    gap: 0.5em 15px; /* Adjusted: Reduced vertical gap between list items */
    text-align: left; /* Align list items left within their grid cell */
}

.tonys-tornadoes-stats-content .stats-list li {
    font-size: 1em;
    color: #555;
    padding: 2px 0;
    margin-bottom: 0.25em; /* Reduced spacing below each list item */
    line-height: 1.2; /* Tighten line height for text within list items */
}
.tonys-tornadoes-stats-content .stats-list li strong {
    color: #222; /* Make the count stand out */
    font-weight: 700;
}

/* Specific styling for the month stats list to arrange it nicely */
.tonys-tornadoes-stats-content .stats-list.month-stats-list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Adjusted for more columns for months */
    gap: 0.5em 10px; /* Adjusted: Tighter spacing for month list */
}

/* Styles for the new "Latest Tornado" shortcode wrapper */
.tonys-latest-tornado-wrapper {
    margin: 20px auto; /* Centered with vertical spacing */
    max-width: 1000px; /* Consistent max width */
    padding: 20px;
    background-color: #ffffff;
    border: 5px solid #720300;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tonys-latest-tornado-wrapper h2 {
    text-align: center;
    color: #720300;
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
}

.tonys-latest-tornado-wrapper .single-latest-item {
    /* Override width for single item if needed, but flex should handle it */
    width: 100%;
    margin-bottom: 20px; /* Space between the item and the button below */
    border: none; /* Remove item-level border if wrapper has one */
    box-shadow: none; /* Remove item-level shadow */
    padding: 0; /* Remove padding if wrapper handles it */
}

.tonys-latest-tornado-wrapper .tornado-image {
    /* Maintain specific image sizing */
    border-radius: 4px; /* Maintain individual image border-radius */
}

.tonys-latest-tornado-wrapper .tornado-text-details {
    /* Adjust text details padding if necessary */
    padding-left: 0; /* Remove extra left padding, as image is now side-by-side or stacked */
    padding-right: 0; /* Remove extra right padding */
}

.tonys-all-tornadoes-button-wrapper {
    text-align: center;
    margin-top: 20px;
}

.tonys-see-all-button {
    min-width: unset; /* Allow button to size based on content */
    padding: 12px 30px; /* Adjust padding for a slightly larger button if desired */
}


/* Adjust existing tonys-tornadoes-container padding to prevent overlap with filter form */
.tonys-tornadoes-container {
    padding-top: 0; /* Remove top padding if you want filter form directly above it without large gap */
}

/* Optional: Add some top margin to the first tornado item if you removed container padding-top */
.tonys-tornadoes-container .tonys-tornado-item:first-child {
    margin-top: 0;
}

/* Image Lightbox Styling */
.image-lightbox {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack image and caption */
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* Ensure image fits within bounds */
    border-radius: 5px; /* Subtle rounded corners */
}

.lightbox-caption {
    margin-top: 15px;
    color: #f1f1f1;
    font-size: 1.1em;
    text-align: center;
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 5px;
    max-width: 80%;
    word-wrap: break-word; /* Ensure long captions wrap */
}

/* Close button for lightbox */
.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/*
==========================================================
MEDIA QUERIES FOR MOBILE RESPONSIVENESS
==========================================================
*/

@media (max-width: 900px) {
    /* Adjust overall page padding */
    .tonys-tornadoes-container {
        padding: 10px;
    }

    /* Tornado Item: Stack image and text vertically */
    .tonys-tornado-item {
        flex-direction: column; /* Stack vertically */
        height: auto; /* Allow height to adjust based on content */
        margin-bottom: 20px; /* Slightly less space between items */
    }

    /* Tornado Image: Make it full width and auto height */
    .tornado-image {
        width: 100%; /* Take full width */
        height: auto; /* Height adjusts proportionally */
        max-height: 250px; /* Cap image height on very large mobile screens */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 15px; /* Add space below the image */
        border-radius: 4px 4px 0 0; /* Adjust border-radius for top corners */
    }
    .tornado-image img {
        height: auto; /* Ensure image scales proportionally */
    }
    .tornado-image a {
        max-height: 250px; /* Constrain link height too */
    }


    /* Tornado Text Details: Take full width, adjust padding */
    .tornado-text-details {
        width: 100%; /* Take full width */
        padding: 15px; /* Equal padding on all sides */
        padding-top: 0; /* Remove top padding as image is above */
        height: auto; /* Allow height to adjust */
    }

    /* Top Row (Title and Tornado Number): Keep side-by-side but allow wrapping */
    .top-row {
        flex-wrap: wrap; /* Allow title and number to wrap if necessary */
        align-items: flex-start; /* Align items to the start for wrapping */
        margin-bottom: 5px;
    }
    .chase-log-title {
        font-size: 1.4em; /* Slightly smaller title on mobile */
        width: 100%; /* Allow title to take full width if it wraps */
        margin-bottom: 5px; /* Space below title if number wraps */
    }
    .tornado-number-display {
        font-size: 0.85em; /* Smaller tornado number */
        padding-left: 0; /* Remove left padding */
        width: 100%; /* Take full width if on new line */
        text-align: left; /* Align to left on new line */
    }

    .tornado-rating-and-county {
        font-size: 1em; /* Adjust rating font size */
        margin-top: 0; /* Reset previous negative margin */
        margin-bottom: 10px;
    }
    .tornado-notes {
        font-size: 0.95em; /* Slightly smaller body text */
        padding-right: 0; /* Remove scrollbar padding if not needed as much */
    }

    /* Career Count Display */
    .tonys-career-count-display {
        font-size: 1.1em; /* Smaller on mobile */
        margin: 10px 10px 10px 10px; /* Adjusted margins */
        max-width: unset; /* Allow full width */
    }

    /* Displayed Count Line */
    .tonys-displayed-count-line {
        font-size: 0.95em;
        margin: -5px auto 15px auto; /* Adjust to pull closer to career count */
        max-width: unset;
    }

    /* Filter and Stats Toggle Buttons: Stack vertically */
    .tonys-filter-and-stats-button-wrapper {
        flex-direction: column; /* Stack buttons */
        gap: 10px; /* Space between stacked buttons */
        margin: 15px auto 10px auto; /* Adjust overall wrapper margin */
        max-width: unset; /* Allow full width */
    }
    .tonys-filter-toggle-button {
        width: 90%; /* Buttons take most of the width */
        min-width: unset; /* Remove fixed min-width */
        padding: 10px 20px; /* Smaller padding */
        font-size: 1em; /* Smaller font */
    }

    /* Filter and Stats Containers: Full width, adjusted margins/padding */
    .tonys-filter-container {
        margin: 10px auto 0 auto; /* Adjust top margin */
        max-width: unset; /* Allow full width */
        padding: 0 10px; /* Horizontal padding for the container */
    }

    .tonys-tornadoes-filter-form {
        padding: 15px; /* Smaller padding for the form itself */
        margin-bottom: 15px; /* Adjust bottom margin */
    }

    .tonys-tornadoes-filter-form .filter-section {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    .tonys-tornadoes-filter-form .filter-section:last-of-type {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .tonys-tornadoes-filter-form h3,
    .tonys-tornadoes-filter-form .filter-section h4 {
        font-size: 1.1em; /* Smaller heading fonts */
        margin-bottom: 8px;
    }

    /* Checkbox layouts: Stack vertically for readability */
    .tonys-tornadoes-filter-form .state-checkboxes,
    .tonys-tornadoes-filter-form .year-checkboxes,
    .tonys-tornadoes-filter-form .rating-checkboxes,
    .tonys-tornadoes-filter-form .month-checkboxes { /* Month checkboxes */
        flex-direction: column; /* Stack checkboxes */
        gap: 8px; /* Space between stacked checkboxes */
        margin-bottom: 10px;
    }
    .tonys-tornadoes-filter-form label {
        font-size: 0.95em;
    }

    /* Filter buttons within the form */
    .tonys-tornadoes-filter-form .filter-buttons {
        flex-direction: column; /* Stack apply/clear buttons */
        gap: 8px;
        padding-top: 10px;
        margin-top: 15px;
    }
    .tonys-tornadoes-filter-form button,
    .tonys-tornadoes-filter-form .clear-filter-button {
        width: 100%; /* Full width for these buttons */
        padding: 10px 15px;
        font-size: 1em;
    }

    /* Stats Content */
    .tonys-tornadoes-stats-content {
        padding: 15px; /* Smaller padding */
    }
    .tonys-tornadoes-stats-content .stats-section {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    .tonys-tornadoes-stats-content .stats-section:last-of-type {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .tonys-tornadoes-stats-content .stats-list {
        grid-template-columns: 1fr; /* Single column for stats items */
        gap: 6px;
        font-size: 0.95em;
    }
    /* Month stats list on mobile */
    .tonys-tornadoes-stats-content .stats-list.month-stats-list {
        grid-template-columns: 1fr; /* Stack month stats vertically on mobile */
        gap: 6px;
    }

    /* Lightbox adjustments for mobile */
    .lightbox-content {
        max-width: 95%; /* Take more screen space */
        max-height: 80vh; /* Adjust max height for portrait mode */
    }
    .lightbox-caption {
        font-size: 1em;
        margin-top: 10px;
        padding: 8px 15px;
        max-width: 90%;
    }
    .close-lightbox {
        top: 10px;
        right: 15px;
        font-size: 30px;
    }

    /* Latest Tornado Section adjustments */
    .tonys-latest-tornado-wrapper {
        padding: 15px;
        margin: 15px auto;
    }
    .tonys-latest-tornado-wrapper h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }
    .tonys-latest-tornado-wrapper .single-latest-item {
        margin-bottom: 15px;
    }
    .tonys-all-tornadoes-button-wrapper .tonys-see-all-button {
        padding: 10px 20px;
        font-size: 1em;
    }
}

/* For very small screens (e.g., iPhone 5/SE size) */
@media (max-width: 480px) {
    .tonys-tornado-item {
        margin-bottom: 15px;
    }
    .tornado-image {
        max-height: 200px;
    }
    .chase-log-title {
        font-size: 1.2em;
    }
    .tornado-number-display, .tornado-rating-and-county, .tornado-notes {
        font-size: 0.8em;
    }
    .tonys-career-count-display {
        font-size: 1em;
        padding: 3px 8px;
    }
    .tonys-displayed-count-line {
        font-size: 0.85em;
        margin: -5px auto 10px auto;
    }
    .tonys-filter-toggle-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    .tonys-tornadoes-filter-form h3,
    .tonys-tornadoes-filter-form .filter-section h4 {
        font-size: 1em;
    }
    .tonys-tornadoes-stats-content h3,
    .tonys-tornadoes-stats-content .stats-section h4 {
        font-size: 1em;
    }
    .lightbox-content {
        max-height: 70vh;
    }
    .tonys-latest-tornado-wrapper h2 {
        font-size: 1.3em;
    }
    .tonys-all-tornadoes-button-wrapper .tonys-see-all-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}