/* Mobile usability layer for the website. The map keeps its own layout. */
.mobile-site-menu-toggle,
.mobile-site-drawer { display: none; }

.search-discovery {
    padding: 26px;
    border: 1px solid #e1e7ec;
    border-radius: 24px;
    background: #fff;
}
.search-discovery h2 { color: #172d38; font-size: 22px; font-weight: 850; }
.search-discovery p { margin-top: 6px; color: #60707e; font-size: 15px; line-height: 1.5; }
.search-discovery__suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.search-discovery__suggestions a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid #efd1c1;
    border-radius: 999px;
    color: #9e481e;
    background: #fff8f3;
    font-size: 13px;
    font-weight: 700;
}
.search-discovery__destinations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.search-discovery__destinations a {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-radius: 14px;
    color: #20343f;
    background: #f4f7f8;
    font-weight: 750;
}
html[data-theme="dark"] .search-discovery { border-color: #30404b; background: #13232b; }
html[data-theme="dark"] .search-discovery h2,
html[data-theme="dark"] .search-discovery__destinations a { color: #edf3f7; }
html[data-theme="dark"] .search-discovery p { color: #bac8d1; }
html[data-theme="dark"] .search-discovery__destinations a { background: #1d303a; }
html[data-theme="dark"] .search-discovery__suggestions a { border-color: #6b483b; color: #ffbd99; background: #332820; }

@media (max-width: 767px) {
    html:has(body.page-site-redesign:not(.page-map):not(.page-messages)) {
        scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    body.page-site-redesign:not(.page-map):not(.page-messages) {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.page-site-redesign:not(.page-map):has(.mobile-create-menu-wrap):not(.page-route-detail):not(.page-post-detail) {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.mobile-site-drawer-open { overflow: hidden !important; }

    .mobile-site-menu-toggle {
        position: fixed;
        z-index: 390;
        top: calc(16px + env(safe-area-inset-top, 0px));
        left: calc(14px + env(safe-area-inset-left, 0px));
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid rgba(213, 221, 227, .85);
        border-radius: 15px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 6px 20px rgba(15, 23, 42, .13);
        color: #1b2833;
        backdrop-filter: blur(14px);
    }
    .mobile-site-menu-toggle svg { width: 22px; height: 22px; }
    .mobile-site-menu-toggle:focus-visible,
    .mobile-site-drawer :focus-visible { outline: 3px solid #ff8b5a; outline-offset: 2px; }

    .mobile-site-drawer {
        position: fixed;
        z-index: 800;
        inset: 0;
        display: block;
        visibility: hidden;
        pointer-events: none;
        transition: visibility .25s ease;
    }
    .mobile-site-drawer.is-open { visibility: visible; pointer-events: auto; }
    .mobile-site-drawer__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(9, 17, 26, .58);
        opacity: 0;
        transition: opacity .25s ease;
    }
    .mobile-site-drawer.is-open .mobile-site-drawer__backdrop { opacity: 1; }
    .mobile-site-drawer__panel {
        position: absolute;
        inset: 0 auto 0 0;
        display: flex;
        width: min(344px, calc(100vw - 40px));
        max-height: 100dvh;
        flex-direction: column;
        border-radius: 0 24px 24px 0;
        background: #fff;
        box-shadow: 18px 0 48px rgba(10, 23, 34, .2);
        transform: translateX(-105%);
        transition: transform .28s cubic-bezier(.22, .75, .25, 1);
    }
    .mobile-site-drawer.is-open .mobile-site-drawer__panel { transform: translateX(0); }
    .mobile-site-drawer__header {
        display: flex;
        min-height: calc(78px + env(safe-area-inset-top, 0px));
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 14px 22px;
        border-bottom: 1px solid #e8edf0;
    }
    .mobile-site-drawer__header img { display: block; width: 150px; max-height: 32px; object-fit: contain; object-position: left; }
    .mobile-site-drawer__header button {
        display: grid;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        place-items: center;
        border-radius: 13px;
        background: #f2f5f6;
        color: #263843;
    }
    .mobile-site-drawer__header button svg { width: 20px; height: 20px; }
    .mobile-site-drawer__scroll {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-site-drawer__label {
        margin: 22px 8px 8px;
        color: #a54c27;
        font-size: 10px;
        font-weight: 850;
        letter-spacing: .09em;
        text-transform: uppercase;
    }
    .mobile-site-drawer__scroll > a,
    .mobile-site-drawer__scroll > button {
        display: flex;
        width: 100%;
        min-height: 46px;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        border: 0;
        border-radius: 13px;
        background: transparent;
        color: #24333f;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
        text-decoration: none;
    }
    .mobile-site-drawer__scroll > a[aria-current="page"] { background: #fff1e9; color: #bd4f20; }
    .mobile-site-drawer__scroll > a:active,
    .mobile-site-drawer__scroll > button:active { background: #f2f5f6; }
    .mobile-site-drawer__scroll > .mobile-site-drawer__logout { color: #bb4949; }
    .mobile-site-drawer__language {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 14px;
        color: #24333f;
        font-size: 14px;
        font-weight: 700;
    }
    .mobile-site-drawer__language select {
        max-width: 130px;
        min-height: 38px;
        padding: 6px 9px;
        border: 1px solid #dce4e8;
        border-radius: 10px;
        background: #fff;
        color: inherit;
        font-size: 13px;
    }
    body.page-site-redesign #notifDropdown:not(.hidden) {
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        z-index: 900 !important;
    }
    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-topbar-left { margin-left: 48px !important; }
    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .mobile-notif-wrap {
        position: static !important;
        transform: none !important;
    }
    body.page-home-redesign .tt-home-nav__mobile-menu { display: none !important; }
    body.page-home-redesign .tt-home-nav__logo { margin-left: 58px; }
    body.page-home-redesign .tt-home-featured {
        display: flex !important;
        min-height: 330px;
        margin-top: 16px;
        padding: 62px 18px 18px;
        border-radius: 18px;
    }
    body.page-home-redesign .tt-home-featured__badge { top: 18px; left: 18px; }
    body.page-home-redesign .tt-home-featured__content > strong { font-size: 18px; }
    body.page-home-redesign .tt-home-featured__content > p { -webkit-line-clamp: 2; font-size: 12px; }
    body.page-home-redesign .tt-home-promos .tt-home-app-promo__callouts {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        display: grid;
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0 16px 16px;
    }
    body.page-home-redesign .tt-home-promos .tt-home-app-promo__callout {
        min-height: 98px;
        padding: 10px;
        border-width: 1px;
        border-radius: 15px;
        opacity: 1;
        transform: none;
        animation: none;
    }
    body.page-home-redesign .tt-home-promos .tt-home-app-promo { overflow: hidden; }
    body.page-home-redesign .tt-home-region-list .region-showcase-card__tag:nth-child(n + 5),
    body.page-regions-index .region-showcase-card__tag:nth-child(n + 4) { display: inline-flex; }
    body.page-regions-index .region-showcase-card { height: auto !important; min-height: 300px; }
    body.page-regions-index .region-showcase-card__tags { overflow: visible; }
    body.page-site-redesign .mobile-create-menu-wrap { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }

    body.page-site-redesign #mobile-bottom-nav > div {
        height: 64px !important;
        border-radius: 22px !important;
    }

    body.page-site-redesign #mobile-bottom-nav a {
        gap: 2px !important;
        min-height: 56px;
    }

    body.page-site-redesign #mobile-bottom-nav a span:last-child {
        font-size: 9.5px !important;
        line-height: 1.15 !important;
        text-transform: none !important;
    }
    html[data-theme="dark"] body.page-site-redesign #mobile-bottom-nav .nav-icon-bg img {
        filter: brightness(0) invert(1);
    }
    html[data-theme="dark"] body.page-site-redesign #mobile-bottom-nav .nav-item-active .nav-icon-bg img {
        filter: none;
    }

    body.page-site-redesign:has(.site-main-offset :is(input, textarea, select):focus) .mobile-create-menu-wrap:not(:has(.mobile-create-menu-panel.is-open)) {
        opacity: 0;
        pointer-events: none;
    }

    body.page-routes-index .mobile-create-menu-wrap:not(.mobile-create-menu-wrap--search-clear) {
        opacity: 0;
        pointer-events: none;
    }
    body.page-routes-index .mobile-create-menu-wrap {
        transition: opacity .2s ease, transform .2s ease;
    }

    /* Route actions are the relevant controls here; a second floating action obscures them. */
    body.page-route-detail .mobile-create-menu-wrap { display: none !important; }
    body.page-route-detail .route-mobile-action-bar {
        z-index: 105;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.page-route-detail .route-elevation-extremes {
        position: relative;
        inset: auto;
        display: flex;
        padding: 16px 18px 4px;
    }
    body.page-post-detail .mobile-route-story-bar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
    body.page-route-detail.mobile-ux-ready .route-mobile-action-bar:not(.mobile-ux-after-hero),
    body.page-post-detail.mobile-ux-ready .mobile-route-story-bar:not(.mobile-ux-after-hero) {
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px);
    }
    body.page-route-detail .route-mobile-action-bar,
    body.page-post-detail .mobile-route-story-bar {
        transition: opacity .2s ease, transform .2s ease;
    }
    body.page-route-detail .route-detail-anchor-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
    }
    body.page-route-detail .route-detail-anchor-nav a {
        display: flex;
        min-width: 0;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 6px 4px;
        text-align: center;
        white-space: normal;
    }

    /* A full-length article heading and summary must never escape a fixed-height cover. */
    body.page-post-detail .article-hero-card--cover {
        height: auto !important;
        min-height: 540px;
        overflow: hidden;
    }
    body.page-post-detail .article-hero-card--cover .article-hero-title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(27px, 7.7vw, 33px) !important;
        line-height: 1.12 !important;
        overflow-wrap: normal;
        hyphens: auto;
        text-wrap: pretty;
    }
    body.page-post-detail .article-hero-card--cover .article-hero-subtitle {
        width: 100%;
        max-width: 100%;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    body.page-post-detail .article-hero-card--cover .article-hero-author-row { margin-top: 18px; }
    body.page-post-detail .article-hero-card--cover .article-hero-footer { margin-top: 18px; }

    /* The AI-guide help control is placed in normal flow instead of on the title. */
    body.page-ai-guide .ai-guide:not(.is-result-view) .ai-guide__intro {
        display: flex;
        min-height: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 24px 20px 20px;
    }
    body.page-ai-guide .ai-guide:not(.is-result-view) .ai-guide__intro h1 {
        font-size: clamp(30px, 8vw, 36px);
        line-height: 1.08;
    }
    body.page-ai-guide .ai-guide:not(.is-result-view) .ai-guide__intro p {
        font-size: 14px;
        line-height: 1.5;
    }
    body.page-ai-guide .ai-guide:not(.is-result-view) .ai-guide__intro-mark,
    body.page-ai-guide .ai-guide:not(.is-result-view) .ai-guide__intro::after { display: none; }
    body.page-ai-guide .ai-guide:not(.is-result-view) .ai-guide__how-button {
        position: static;
        min-height: 44px;
        margin-top: 2px;
        align-self: flex-start;
        font-size: 12px;
    }

    /* One readable set of metrics, without a horizontal scrollbar or duplicate row. */
    body.page-profile .profile-hero-stats-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0;
        overflow: hidden !important;
    }
    body.page-profile .profile-hero-stat {
        width: 100%;
        min-width: 0;
        min-height: 66px;
        padding: 8px 10px;
        border-right: 0 !important;
    }
    body.page-profile .profile-hero-stat:nth-child(odd) { border-right: 1px solid #e5e7eb !important; }
    body.page-profile .profile-hero-stat:nth-child(-n + 2) { border-bottom: 1px solid #e5e7eb; }
    body.page-profile .profile-hero-stat span {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }
    body.page-profile .profile-mobile-stats { display: none; }
    body.page-profile .profile-mobile-rank__title { flex-wrap: wrap; gap: 4px 6px; }
    body.page-profile .profile-mobile-rank__title > span {
        flex: 0 0 auto !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
    }
    body.page-profile .profile-mobile-hub { display: none !important; }
    body.page-profile .profile-mobile-summary:not(:has(.profile-mobile-visitor-actions)) { display: none !important; }

    body.page-profile .profile-page .profile-content-layout > .profile-mobile-sidebar-toggle {
        display: flex !important;
        order: -2;
        width: 100%;
        min-height: 84px;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 15px 18px;
        border: 1px solid #e4e8ed;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 8px 28px rgba(22, 35, 49, .06);
        color: #1b2734;
        text-align: left;
    }
    body.page-profile .profile-mobile-sidebar-toggle__copy { display: grid; min-width: 0; gap: 3px; }
    body.page-profile .profile-mobile-sidebar-toggle__eyebrow {
        color: #ad633d;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    body.page-profile .profile-mobile-sidebar-toggle__copy strong { font-size: 16px; line-height: 1.25; }
    body.page-profile .profile-mobile-sidebar-toggle__copy small { color: #657383; font-size: 11px; line-height: 1.35; }
    body.page-profile .profile-mobile-sidebar-toggle__icon {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;
        border-radius: 12px;
        background: #fff3eb;
        color: #d46b36;
    }
    body.page-profile .profile-mobile-sidebar-toggle__icon svg { width: 20px; height: 20px; transition: transform .2s ease; }
    body.page-profile .profile-mobile-sidebar-toggle[aria-expanded="true"] .profile-mobile-sidebar-toggle__icon svg { transform: rotate(180deg); }
    body.page-profile .profile-page .profile-content-layout > aside.profile-sidebar {
        display: none !important;
        order: -1;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: auto !important;
        align-self: stretch !important;
    }
    body.page-profile .profile-page .profile-content-layout > aside.profile-sidebar.is-open { display: grid !important; }

    body.page-search .search-results-page { min-height: 0 !important; }
    .search-discovery {
        padding: 22px 20px;
    }
    .search-discovery h2 { font-size: 20px; }
    .search-discovery p { font-size: 14px; }
    .search-discovery__destinations { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    html[data-theme="dark"] .mobile-site-menu-toggle {
        border-color: #3b4b56;
        background: rgba(23, 39, 49, .95);
        color: #f0f4f6;
    }
    html[data-theme="dark"] .mobile-site-drawer__panel { background: #13232d; }
    html[data-theme="dark"] .mobile-site-drawer__header { border-color: #32434e; }
    html[data-theme="dark"] .mobile-site-drawer__header img { filter: brightness(0) invert(1); }
    html[data-theme="dark"] .mobile-site-drawer__header button { background: #253843; color: #f2f5f7; }
    html[data-theme="dark"] .mobile-site-drawer__scroll > a,
    html[data-theme="dark"] .mobile-site-drawer__scroll > button,
    html[data-theme="dark"] .mobile-site-drawer__language { color: #eef3f6; }
    html[data-theme="dark"] .mobile-site-drawer__scroll > a[aria-current="page"] { background: #47352d; color: #ffb58e; }
    html[data-theme="dark"] .mobile-site-drawer__language select {
        border-color: #3b4c57 !important;
        background: #20323c !important;
        color: #eef3f6 !important;
    }
    html[data-theme="dark"] .mobile-site-drawer__scroll > .mobile-site-drawer__logout { color: #ff9999; }
    html[data-theme="dark"] body.page-profile .profile-page .profile-content-layout > .profile-mobile-sidebar-toggle {
        border-color: #354450;
        background: #1a2933;
        color: #f2f5f7;
    }
    html[data-theme="dark"] body.page-profile .profile-header-name {
        color: #1b2833 !important;
        text-shadow: none !important;
    }
    html[data-theme="dark"] body.page-profile .profile-mobile-sidebar-toggle__copy small { color: #b9c5ce; }
    html[data-theme="dark"] body.page-profile .profile-mobile-sidebar-toggle__icon { background: #493226; color: #ffb182; }
}

@media (prefers-reduced-motion: reduce) {
    body.page-routes-index .mobile-create-menu-wrap,
    body.page-route-detail .route-mobile-action-bar,
    body.page-post-detail .mobile-route-story-bar { transition: none; }
}

@media (max-width: 359px) {
    body.page-home-redesign .tt-home-nav__logo { width: 116px !important; margin-left: 50px; }
    body.page-site-redesign #mobile-bottom-nav a span:last-child { font-size: 8.5px !important; }
    body.page-route-detail .route-detail-anchor-nav a { font-size: 11px; }
    body.page-route-detail .route-detail-hero-media { min-height: 520px !important; }
    body.page-post-detail .article-hero-card--cover .article-hero-author-row { flex-wrap: wrap; }
    body.page-post-detail .article-hero-card--cover .article-hero-follow { width: 100%; justify-content: center; }
    body.page-site-redesign .site-logo-link { width: 44px !important; flex-basis: 44px !important; justify-content: center; }
    body.page-site-redesign .site-logo-icon { width: 30px !important; height: 30px !important; }
    body.page-site-redesign .site-logo-mark { display: none !important; }
}