/*
Theme Name: Fewer Child
Description: Child theme for Fewer
Template: fewer
Version: 1.0.0
Author: Valentina Greselin
*/

.vg-hero-slider { margin-top: 0 !important; margin-block-start: 0 !important; }

/* ===========================================
   Mobile responsive (max-width: 599px)
   =========================================== */
@media (max-width: 599px) {

    /* --- Header ---
       Title column grows to fill available space.
       Nav column fixed at 44px (just the hamburger button).
       Empty spacer column hidden.
    */
    .vg-site-header .is-not-stacked-on-mobile {
        flex-wrap: nowrap !important;
    }
    .vg-site-header .is-not-stacked-on-mobile > .wp-block-column:first-child {
        flex: 1 1 0px !important;
        min-width: 0 !important;
    }
    .vg-site-header .is-not-stacked-on-mobile > .wp-block-column:nth-child(2) {
        flex: 0 0 44px !important;
        overflow: visible !important;
    }
    .vg-site-header .is-not-stacked-on-mobile > .wp-block-column:last-child {
        display: none !important;
    }

    /* Site title: smaller font so it fits on 1-2 lines */
    .vg-site-header .wp-block-site-title,
    .vg-site-header .wp-block-site-title a {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
    }

    /* --- Hamburger overlay menu: center links --- */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        align-items: center;
        text-align: center;
    }

    /* --- Slider ---
       Slightly shorter on small screens, hide arrows.
    */
    .vg-hero-slider {
        height: 50vh !important;
    }
    .vg-prev,
    .vg-next {
        display: none !important;
    }

    /* --- Archive: query loop grid ---
       Default 2-col flex -> switch to 1 col on mobile.
    */
    .wp-block-query .wp-block-post-template.is-flex-container {
        flex-direction: column !important;
    }
    .wp-block-query .wp-block-post-template.is-flex-container > li {
        width: 100% !important;
        max-width: 100% !important;
    }
}