/**
 * Show the menu burger on ALL resolutions.
 *
 * This header has no inline desktop navigation menu - navigation lives
 * exclusively in the off-canvas panel (#nav-panel / #side-nav-panel),
 * opened by the burger. Porto natively shows the burger only at
 * max-width:991px, so above 991px the desktop had no way to reach the
 * menu. We force the burger visible above 991px too (min-width:992px,
 * no upper bound) so it is available at any width. Below 992px Porto's
 * native rule applies.
 *
 * The slide panel is toggled by JS and works at any width, so no extra
 * rules are needed.
 *
 * No change to the Porto theme (read-only). Override from the plugin.
 */
@media (min-width: 992px) {
    #header .mobile-toggle {
        display: inline-block !important;
    }

    #header .main-menu,
    #header.sticky-header .main-menu-wrap,
    #header .main-menu-wrap {
        display: none !important;
    }

    /* popup-menu variant: keep the opened menu visible */
    #header .porto-popup-menu.opened .main-menu {
        display: block !important;
    }
}

/**
 * Fix logo/burger alignment on the "md" tier (768-991px).
 *
 * Porto's Bootstrap container is 720px at 768-991px. .header-left can't
 * fit the burger (~54px) + logo (500px) = 554px on a single row, so the
 * logo wraps to a second line (centered, misaligned with the burger).
 * We widen the container to 780px so they stay on one row.
 * Scoped to 768-991px: only there is Porto's container (720px) too
 * narrow; at >=992px the container (>=960px) already has room, no wrap.
 */
@media (min-width: 768px) and (max-width: 991px) {
    #header .header-row.container {
        max-width: 780px;
    }
}

/**
 * Product-grid card image height cap.
 *
 * On the paginated Shows/Attractions grid (porto_products), an oversized
 * or missing/broken image stretches the card and breaks the row layout.
 * Cap the thumbnail at 288px and crop-to-fill so every card image keeps a
 * uniform height. Scoped to the grid (ul.products) so single-product page
 * images are unaffected. No change to the Porto theme (read-only).
 */
ul.products .product-image img {
    max-height: 288px;
    object-fit: cover;
}

/**
 * Equal card heights on the product grid.
 *
 * The grid row (ul.products) is flexbox, so the cards (li.product) already
 * stretch to the tallest in their row. But Porto's .product-inner /
 * .product-content are plain blocks, so the "BOOK NOW" button (.add-links-wrap)
 * sits at the natural end of the variable-height content (title can be 1-2
 * lines; the venue/days/time line 1-4 lines). With uneven content the buttons
 * don't bottom-align and the cards look ragged — most visible on the Select
 * Entertainment grid, which mixes shows + attractions.
 *
 * Make the inner a flex column and push the button block to the bottom so
 * every BOOK NOW aligns regardless of content length.
 *
 * Scoped to `.porto-products ul.products.grid` (the [porto_products] shortcode
 * grid view) so it can't leak to single-product related/cross-sell grids
 * (which render bare `ul.products` without `.porto-products`) nor to the Porto
 * list view / carousels (no `.grid`). No Porto edit.
 */
.porto-products ul.products.grid li.product .product-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.porto-products ul.products.grid li.product .product-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.porto-products ul.products.grid li.product .product-content .add-links-wrap {
    margin-top: auto;
}