/**
 * YDO predictive search dropdown.
 *
 * Brand tokens are declared as CSS variables so the final navy / light-blue
 * palette (see redesign brief) can be dropped in during the styling phase
 * without touching markup or JS.
 */
:root {
    --ydo-navy: #1b2a4a;          /* menu / page titles brand navy */
    --ps-chip-blue: #a1d3da;      /* chip/tag hover accent — local to predictive search */
    --ydo-blue-tint: #eef7f9;     /* hover background */
    --ydo-border: #e3e7ee;
    --ydo-muted: #8a93a6;
}

/* (Google Places is no longer bound to the search box, so there is no
   .pac-container to hide here; predictive search owns the input.) */

.ydo-suggest-menu {
    position: absolute;
    z-index: 100000;
    min-width: 240px;
    max-width: 520px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ydo-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(27, 42, 74, 0.16);
    padding: 6px 0;
    font-family: 'Open Sans', Roboto, Arial, sans-serif;
}

.ydo-suggest-group + .ydo-suggest-group {
    border-top: 1px solid var(--ydo-border);
}

.ydo-suggest-group-title {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ydo-muted);
}

.ydo-suggest-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 16px;
    color: var(--ydo-navy);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
}

.ydo-suggest-item:hover,
.ydo-suggest-item.active {
    background: var(--ydo-blue-tint);
    color: var(--ydo-navy);
    text-decoration: none;
}

.ydo-suggest-label {
    font-size: 14px;
    font-weight: 600;
    flex: 1 1 auto;
}

.ydo-suggest-sub {
    font-size: 12px;
    color: var(--ydo-muted);
    flex: 0 0 auto;
    white-space: nowrap;
}

.ydo-suggest-all {
    display: block;
    padding: 10px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ydo-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--ydo-navy);
    text-decoration: none;
    cursor: pointer;
}

.ydo-suggest-all:hover {
    background: var(--ydo-blue-tint);
    text-decoration: none;
}

/* ---- Search tags (chips below the hero / reused on /search) ---- */
.ydo-search-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px 0 4px;
    font-family: 'Open Sans', Roboto, Arial, sans-serif;
}

.ydo-search-tags-label {
    font-weight: 700;
    font-size: 13px;
    color: var(--ydo-navy);
    margin-right: 4px;
}

.ydo-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid var(--ydo-border);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ydo-tag--city {
    background: var(--ydo-navy);
    color: #fff;
    border-color: var(--ydo-navy);
}

.ydo-tag--city:hover {
    background: #13203a;
    color: #fff;
    text-decoration: none;
}

.ydo-tag--cat {
    background: #fff;
    color: var(--ydo-navy);
}

.ydo-tag--cat:hover {
    background: var(--ydo-blue-tint);
    border-color: var(--ps-chip-blue);
    color: var(--ydo-navy);
    text-decoration: none;
}

/* ---- /search filter accordions (Date / Ages / Facilities / Categories) ----
   The redesigned theme only reveals an open section via a `.is-open` class
   ("driven by inline JS" that was never added), but the markup uses Bootstrap's
   data-toggle="collapse" — and the PJAX re-expand code — which toggle `.in`.
   That mismatch left every "Show" toggle adding `.in` while the section stayed
   display:none, so sub-options and sub-categories could never be expanded
   (worst felt on mobile). Honour both class names so the toggles actually work. */
.advanced-filters-wrap .collapse.in,
.advanced-filters-wrap .collapse.is-open {
    display: block !important;
}
.advanced-filters-wrap .collapsing {
    display: block;
    height: auto;
}

/* The per-category expander is an empty <a data-toggle="collapse"> with no glyph,
   so the arrow to open sub-categories was invisible/untappable. Give it a clear,
   finger-sized affordance. */
.advanced-filters-wrap .checkbox > a[data-toggle="collapse"] {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: var(--ydo-navy);
}
.advanced-filters-wrap .checkbox > a[data-toggle="collapse"]::after {
    content: "\25BC"; /* ▼ */
    font-size: 10px;
}
.advanced-filters-wrap .checkbox > a[data-toggle="collapse"][aria-expanded="true"]::after {
    content: "\25B2"; /* ▲ */
}

/* ---- Mobile main menu ----
   Theme bug: inside the mobile media query the menu was shown by
   `.navbar-collapse:not(.collapsed)`, but `.collapsed` lives on the toggle
   *button*, never on `.navbar-collapse` — so that selector is always true and
   the menu was permanently open (couldn't be closed). Drive visibility off
   Bootstrap's `.in` (toggled by the hamburger) instead, so it opens AND closes. */
@media (max-width: 991.98px) {
    .navbar-collapse:not(.in):not(.collapsing) {
        display: none !important;
    }
    .navbar-collapse.in {
        display: block !important;
    }
}

/* Tablet only (768–991.98px): the filter panel stacks above the results here
   and there's no FAB/bottom-sheet drawer at this width, so it must NOT stay
   position:sticky — otherwise it pins to the top and the result cards scroll
   underneath it (content overlaps the filters), and the tall panel can't be
   scrolled through cleanly. Make it a normal in-flow block instead.
   NOTE: this must NOT reach down to phone widths (<768px) — below 767px
   style.css turns `.advanced-filters-wrap` into the fixed FAB/bottom-sheet
   drawer, and this rule (loaded after style.css) would silently override
   that back to `position: static`, leaving the closed-but-`visibility:hidden`
   drawer sitting in normal flow and reserving its own full height as a big
   blank gap above the results. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .advanced-filters-wrap {
        position: static !important;
        top: auto !important;
    }
}

/* Roomier filter sidebar on desktop when shown (both /search and the
   "Things to do in …" landing results). Collapsed state stays narrow. */
@media (min-width: 992px) {
    .advanced-search > .advanced-filters-wrap:not(.hide-filters),
    #search-block-grid > .advanced-filters-wrap:not(.hide-filters) {
        flex: 0 0 320px !important;
        width: 320px !important;
        max-width: 320px;
    }
    #search-block-grid > .filters-content {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ---- Home widget: top 3-column row (2 cards + 1 ad unit, each 300×250) ---- */
.ydo-top-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.ydo-top-card {
    display: flex;
    flex-direction: column;
}
.ydo-top-card > .tile-item {
    flex: 1 1 auto;
}
/* The image area inside top cards is fixed at 250px to match 300×250 ad unit
   (scoped to the linked photo so the .ydo-img-logo badge keeps its own size) */
.ydo-top-card .tile-header a img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    display: block;
}
/* Ad slot: same height as a content card image */
.ydo-top-card--ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    background: var(--ydo-bg, #f7f8fa);
    border-radius: 12px;
    overflow: hidden;
}
/* Mobile: stack the 3 top cards vertically */
@media (max-width: 991px) {
    .ydo-top-row {
        grid-template-columns: 1fr;
    }
    .ydo-top-card .tile-header a img {
        height: 200px;
    }
    .ydo-top-card--ad {
        min-height: 250px;
    }
}

/* ---- Home widget smaller sliding carousel (below top row) ---- */
.ydo-widget-rail-wrap { position: relative; margin-top: 8px; }
.ydo-widget-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 4px 2px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ydo-widget-rail::-webkit-scrollbar { display: none; }
.ydo-widget-slide {
    flex: 0 0 220px;
    scroll-snap-align: start;
    display: flex;
}
.ydo-widget-slide > .tile-item { width: 100%; }
/* Carousel card images are smaller than top-row
   (scoped to the linked photo so the .ydo-img-logo badge keeps its own size) */
.ydo-widget-slide .tile-header a img {
    height: 150px;
    width: 100%;
    object-fit: cover;
    display: block;
}
.ydo-widget-nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1px solid var(--ydo-border, #e3e7ee);
    border-radius: 50%;
    background: #fff;
    color: var(--ydo-navy, #1b2a4a);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(13, 17, 23, .12);
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
}
.ydo-widget-nav:hover { background: var(--ydo-navy, #1b2a4a); color: #fff; }
.ydo-widget-nav--prev { left: -10px; }
.ydo-widget-nav--next { right: -10px; }
@media (min-width: 992px) {
    .ydo-widget-slide { flex: 0 0 220px; }
    .ydo-widget-nav { display: flex; }
}