/**
 * Destinations hierarchy project - 2026-09-07.
 * Scoped entirely to #section-destinations-directory (the destinations
 * CPT archive only) - purely additive, does not touch any shared
 * sitewide selector. Reuses the sitewide brand navy (#031A36) already
 * used by .section.three-columns h2.primary elsewhere, and the existing
 * .section.three-columns .column responsive grid (100%/50%/33.3%).
 */

/* .visually-hidden is NOT a sitewide utility class - confirmed via the
   compiled CSS that it only exists scoped to .section.package-at-a-glance
   (an earlier, unrelated project). Defining the same standard pattern
   here, scoped to this section, rather than relying on a class that
   would otherwise render as plain visible text. */
#section-destinations-directory .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* article.card's shared, sitewide CSS collapses .media .content (the
   description text) to max-height:0, revealing it only on
   article.card:hover (see style.css ~line 1667/1684) - a hover-reveal
   pattern used everywhere this card component appears. The destinations
   brief explicitly requires descriptors to be visible without hover
   ("Do not rely on hover behaviour", Section 7) and touch devices have
   no hover state at all, so this section overrides it locally with
   equal-or-higher specificity - the shared component and every other
   page using article.card elsewhere is untouched. */
#section-destinations-directory article.card .media .content {
    max-height: 300px;
}

#section-destinations-directory .destinations-discovery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 24px 0 32px;
}

#section-destinations-directory .destinations-search {
    flex: 1 1 260px;
    min-width: 220px;
}

#section-destinations-directory .destinations-search input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid #C7CBD1;
    border-radius: 6px;
    font-size: 15px;
    color: #031A36;
    background: #ffffff;
}

#section-destinations-directory .destinations-search input[type="search"]:focus-visible {
    outline: 2px solid #031A36;
    outline-offset: 1px;
}

#section-destinations-directory .destinations-region-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#section-destinations-directory .destinations-region-nav-list a {
    color: #031A36;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

#section-destinations-directory .destinations-region-nav-list a:hover,
#section-destinations-directory .destinations-region-nav-list a:focus-visible {
    border-bottom-color: #031A36;
}

#section-destinations-directory .destinations-region-select {
    display: none;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid #C7CBD1;
    border-radius: 6px;
    font-size: 15px;
    color: #031A36;
    background: #ffffff;
}

#section-destinations-directory .destinations-view-toggle {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

#section-destinations-directory .view-toggle-btn {
    border: 1px solid #031A36;
    background: #ffffff;
    color: #031A36;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

#section-destinations-directory .view-toggle-btn.active {
    background: #031A36;
    color: #ffffff;
}

#section-destinations-directory .view-toggle-btn:focus-visible {
    outline: 2px solid #031A36;
    outline-offset: 2px;
}

#section-destinations-directory .destinations-search-empty {
    color: #031A36;
    font-weight: 600;
    padding: 24px 0;
}

#section-destinations-directory .destinations-region {
    margin-bottom: 56px;
    scroll-margin-top: 120px;
}

#section-destinations-directory .destinations-region h2 {
    color: #031A36;
    margin-bottom: 8px;
}

#section-destinations-directory .destinations-region-intro {
    color: #4A5568;
    max-width: 60ch;
    margin: 0 0 24px;
}

#section-destinations-directory .destinations-group-heading {
    color: #031A36;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 24px 0 12px;
}

#section-destinations-directory .destinations-columns .column[hidden] {
    display: none;
}

/* Mobile: one card per row (per brief Section 7), region select instead
   of desktop nav links, search + toggle stack cleanly. */
@media (max-width: 640px) {
    #section-destinations-directory .destinations-region-nav-list {
        display: none;
    }

    #section-destinations-directory .destinations-region-select {
        display: block;
    }

    #section-destinations-directory .destinations-discovery {
        flex-direction: column;
        align-items: stretch;
    }

    #section-destinations-directory .destinations-view-toggle {
        margin-left: 0;
    }

    #section-destinations-directory .view-toggle-btn {
        flex: 1 1 0;
    }

    #section-destinations-directory .destinations-columns .column {
        width: 100% !important;
    }
}

/* noscript fallback: JS-driven select/toggle degrade to a visible list of
   links and both views showing - never hidden without JS present. */
#section-destinations-directory noscript .destinations-region-select,
#section-destinations-directory noscript .destinations-view-toggle {
    display: none;
}