/*
 * TrailTrack semantic type scale.
 * Mobile-first responsive values live here so every locale and page uses the
 * same computed font sizes without changing the root font size.
 */
:root {
    --tt-type-hero-size: 40px;
    --tt-type-hero-line: 46px;
    --tt-type-page-title-size: 32px;
    --tt-type-page-title-line: 40px;
    --tt-type-landing-section-size: 32px;
    --tt-type-landing-section-line: 40px;
    --tt-type-article-section-size: 24px;
    --tt-type-article-section-line: 32px;
    --tt-type-component-title-size: 24px;
    --tt-type-component-title-line: 31.2px;
    --tt-type-card-title-size: 20px;
    --tt-type-card-title-line: 26px;
    --tt-type-small-heading-size: 18px;
    --tt-type-small-heading-line: 24px;
    --tt-type-lead-size: 18px;
    --tt-type-lead-line: 24.3px;
    --tt-type-body-size: 16px;
    --tt-type-body-line: 24px;
    --tt-type-article-body-size: 18px;
    --tt-type-article-body-line: 28px;
    --tt-type-ui-size: 14px;
    --tt-type-ui-line: 18.9px;
    --tt-type-button-large-size: 16px;
    --tt-type-button-large-line: 22px;
    --tt-type-caption-size: 12px;
    --tt-type-caption-line: 16px;
    --tt-type-input-size: 16px;
    --tt-type-input-line: 22px;
    --tt-type-map-page-title-size: 24px;
    --tt-type-map-page-title-line: 32px;
    --tt-type-quote-size: 20px;
    --tt-type-quote-line: 30px;
    --tt-type-popup-body-size: 14px;
    --tt-type-popup-body-line: 20px;
    --tt-type-footer-link-size: 14px;
    --tt-type-footer-link-line: 20px;
}

@media (min-width: 768px) {
    :root {
        --tt-type-hero-size: 52px;
        --tt-type-hero-line: 60px;
        --tt-type-page-title-size: 40px;
        --tt-type-page-title-line: 48px;
        --tt-type-landing-section-size: 36px;
        --tt-type-landing-section-line: 44px;
        --tt-type-article-section-size: 28px;
        --tt-type-article-section-line: 36px;
        --tt-type-map-page-title-size: 28px;
        --tt-type-map-page-title-line: 36px;
    }
}

@media (min-width: 1200px) {
    :root {
        --tt-type-hero-size: 64px;
        --tt-type-hero-line: 72px;
        --tt-type-page-title-size: 48px;
        --tt-type-page-title-line: 56px;
        --tt-type-landing-section-size: 40px;
        --tt-type-landing-section-line: 48px;
        --tt-type-article-section-size: 32px;
        --tt-type-article-section-line: 40px;
        --tt-type-map-page-title-size: 32px;
        --tt-type-map-page-title-line: 40px;
    }
}

.tt-type-hero { font-size: var(--tt-type-hero-size); line-height: var(--tt-type-hero-line); }
.tt-type-page-title { font-size: var(--tt-type-page-title-size); line-height: var(--tt-type-page-title-line); }
.tt-type-landing-section { font-size: var(--tt-type-landing-section-size); line-height: var(--tt-type-landing-section-line); }
.tt-type-article-section { font-size: var(--tt-type-article-section-size); line-height: var(--tt-type-article-section-line); }
.tt-type-component-title { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.tt-type-card-title { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.tt-type-small-heading { font-size: var(--tt-type-small-heading-size); line-height: var(--tt-type-small-heading-line); }
.tt-type-lead { font-size: var(--tt-type-lead-size); line-height: var(--tt-type-lead-line); }
.tt-type-body { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.tt-type-article-body { font-size: var(--tt-type-article-body-size); line-height: var(--tt-type-article-body-line); }
.tt-type-ui { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.tt-type-button-large { font-size: var(--tt-type-button-large-size); line-height: var(--tt-type-button-large-line); }
.tt-type-caption { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.tt-type-input { font-size: var(--tt-type-input-size); line-height: var(--tt-type-input-line); }

/* Shared site chrome. !important replaces legacy mobile/header declarations. */
.site-primary-tabs a,
.site-topbar-actions :is(a, button),
.site-create-menu-item,
.language-switcher__label {
    font-size: var(--tt-type-ui-size) !important;
    line-height: var(--tt-type-ui-line) !important;
}

#mobile-bottom-nav a span:last-child {
    font-size: var(--tt-type-caption-size) !important;
    line-height: var(--tt-type-caption-line) !important;
}

.site-footer__brand h2 {
    font-size: var(--tt-type-article-section-size);
    line-height: var(--tt-type-article-section-line);
}

.site-footer__brand > p { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.site-footer__nav h3 { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.site-footer__nav a { font-size: var(--tt-type-footer-link-size); line-height: var(--tt-type-footer-link-line); }
.site-footer__bottom { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }

/* Home */
.page-home-redesign .tt-home-hero__copy h1 {
    font-size: var(--tt-type-hero-size);
    line-height: var(--tt-type-hero-line);
}

.page-home-redesign .tt-home-hero__copy > p,
.page-home-redesign .tt-home-section__head p,
.page-home-redesign .tt-home-map__copy > p,
.page-home-redesign .tt-home-newsletter p {
    font-size: var(--tt-type-lead-size);
    line-height: var(--tt-type-lead-line);
}

.page-home-redesign .tt-home-button { font-size: var(--tt-type-button-large-size); line-height: var(--tt-type-button-large-line); }
.page-home-redesign .tt-home-nav :is(a, button, select),
.page-home-redesign .tt-home-section__head > a { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }

.page-home-redesign :is(.tt-home-section__head, .tt-home-map__copy, .tt-home-newsletter) h2,
.page-home-redesign .tt-route-finder > h2 {
    font-size: var(--tt-type-landing-section-size);
    line-height: var(--tt-type-landing-section-line);
}

.page-home-redesign .tt-home-route-card h3,
.page-home-redesign .tt-home-content-card h3 {
    font-size: var(--tt-type-card-title-size);
    line-height: var(--tt-type-card-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-home-redesign .tt-home-collection-card__copy h3,
.page-home-redesign .tt-home-image-cta h2 {
    font-size: var(--tt-type-component-title-size);
    line-height: var(--tt-type-component-title-line);
}

.page-home-redesign :is(.tt-home-route-card__metrics, .tt-home-route-card__tags, .tt-home-route-card__rating),
.page-home-redesign .tt-home-content-card__description { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-home-redesign :is(.tt-home-route-card__kind, .tt-home-content-card__meta, .tt-home-content-card__stats) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.page-home-redesign .tt-home-footer h3,
.page-home-redesign .tt-home-footer a { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-home-redesign .tt-home-footer__brand > p { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.page-home-redesign .tt-home-footer__bottom { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }

/* Route catalog, collections, regions and other catalog landing pages */
:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) .catalog-light-hero__eyebrow {
    font-size: var(--tt-type-ui-size);
    line-height: var(--tt-type-ui-line);
}

:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) .catalog-light-hero__title {
    font-size: var(--tt-type-page-title-size);
    line-height: var(--tt-type-page-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) .catalog-light-hero__description {
    font-size: var(--tt-type-lead-size);
    line-height: var(--tt-type-lead-line);
}

.catalog-light-hero__button,
.catalog-light-hero__chip,
.route-catalog-filter,
.route-collections-button { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.catalog-light-hero__stat strong { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.catalog-light-hero__stat span { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.route-catalog-results-summary { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) main h2 {
    font-size: var(--tt-type-component-title-size);
    line-height: var(--tt-type-component-title-line);
}
:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) main h3 {
    font-size: var(--tt-type-card-title-size);
    line-height: var(--tt-type-card-title-line);
}

.route-showcase-card__title,
.official-route-card__title {
    font-size: var(--tt-type-card-title-size);
    line-height: var(--tt-type-card-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

.route-showcase-card__text,
.official-route-card__description { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
:is(.route-showcase-card__metrics, .route-showcase-card__region, .route-showcase-card__tags, .route-showcase-card__more) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.route-showcase-card__activity,
.route-showcase-card__provenance { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }

/* Route detail */
body.page-route-detail :is(.route-detail-hero-title, .route-mobile-title) {
    font-size: var(--tt-type-page-title-size);
    line-height: var(--tt-type-page-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-route-detail .route-detail-hero-description { font-size: var(--tt-type-lead-size); line-height: var(--tt-type-lead-line); }
.page-route-detail :is(.route-detail-hero-chip, .route-detail-hero-action) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-route-detail .route-detail-hero-stat dt { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.page-route-detail .route-detail-hero-stat dd { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }

.page-route-detail :is(
    .route-detail-copy-block__title,
    .route-guide-card__title,
    .route-mobile-section__title,
    .route-side-card__title,
    .route-actuality__header h2,
    .route-condition-modal__head h2
) { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }

.page-route-detail :is(.route-detail-copy-block__text, .route-guide-card__body, .route-actuality__item > p) { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.page-route-detail :is(.route-actuality__meta, .route-mobile-section__meta, .route-condition-modal label) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-route-detail :is(.route-actuality__eyebrow, .route-actuality__label) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.page-route-detail .route-condition-modal :is(input, textarea, select) { font-size: var(--tt-type-input-size); line-height: var(--tt-type-input-line); }

/* Journal */
.page-journal-index .journal-hero h1 { font-size: var(--tt-type-page-title-size); line-height: var(--tt-type-page-title-line); }
.page-journal-index .journal-hero__copy > p { font-size: var(--tt-type-lead-size); line-height: var(--tt-type-lead-line); }
.page-journal-index :is(.journal-button, .journal-filter, .journal-sort select) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-journal-index .journal-card__title { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.page-journal-index .journal-card:first-child .journal-card__title { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.page-journal-index .journal-card__description { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.page-journal-index :is(.journal-card__name, .journal-card__author time) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-journal-index :is(.journal-card__badge, .journal-card__meta, .journal-card__metric, .journal-card__location) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }

/* Remaining user-facing archives, communities, albums, search and SEO pages */
:is(
    .page-search .search-results-title,
    .page-articles-index .articles-archive-page h1,
    .community-page .community-intro h1,
    .community-detail-page .community-hero-copy h1,
    .all-albums-page h1,
    .album-detail-page h1,
    .seo-landing-page h1,
    .legal-document-page h1
) {
    font-size: var(--tt-type-page-title-size);
    line-height: var(--tt-type-page-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(
    .page-articles-index .articles-archive-page > section:first-child > p:not(:first-child),
    .community-page .community-intro h1 + p,
    .community-detail-page .community-hero-copy p,
    .seo-landing-page header > p
) { font-size: var(--tt-type-lead-size); line-height: var(--tt-type-lead-line); }

:is(.community-page, .community-detail-page, .all-albums-page, .album-detail-page, .seo-landing-page) h2 {
    font-size: var(--tt-type-component-title-size);
    line-height: var(--tt-type-component-title-line);
}

:is(.community-page, .community-detail-page, .all-albums-page, .album-detail-page, .page-search) h3,
.community-card__title {
    font-size: var(--tt-type-card-title-size);
    line-height: var(--tt-type-card-title-line);
}

.community-card__description { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.page-search .search-results-form input { font-size: var(--tt-type-input-size); line-height: var(--tt-type-input-line); }
.page-search :is(.search-tab-btn, .search-results-form button) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }

/* Long-form articles. Heading !important rules replace legacy mobile prose rules. */
.page-post-detail .article-hero-title {
    font-size: var(--tt-type-page-title-size);
    line-height: var(--tt-type-page-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-post-detail .article-hero-subtitle,
.page-post-detail .post-content,
.page-post-detail .post-content :is(p, li) { font-size: var(--tt-type-article-body-size); line-height: var(--tt-type-article-body-line); }
.page-post-detail .post-content h2 { font-size: var(--tt-type-article-section-size) !important; line-height: var(--tt-type-article-section-line) !important; }
.page-post-detail .post-content h3 { font-size: var(--tt-type-component-title-size) !important; line-height: var(--tt-type-component-title-line) !important; }
.page-post-detail .post-content h4 { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.page-post-detail .post-content blockquote { font-size: var(--tt-type-quote-size); line-height: var(--tt-type-quote-line); }
.page-post-detail :is(.article-hero-chip, .article-hero-author-copy, .article-hero-action) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-post-detail :is(.article-hero-stat, figcaption) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.page-post-detail .post-related-section h2 { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.page-post-detail .post-related-section h3 { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }

/* Forms and dialogs */
:is(.auth-modal, .route-condition-modal, [role="dialog"]) :is(input, textarea, select),
.auth-page :is(input, textarea, select) { font-size: var(--tt-type-input-size); line-height: var(--tt-type-input-line); }
:is(.auth-modal, .route-condition-modal, [role="dialog"]) label,
.auth-page label { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
:is(.auth-modal, .route-condition-modal, [role="dialog"]) :is(.field-help, .field-error, .helptext, .errorlist) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.auth-page h1 { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.auth-page main p { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.auth-page main :is(a, button) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }

/*
 * Compatibility overrides: Tailwind utilities and the map's legacy styles use
 * !important. These selectors are deliberately isolated to text-bearing UI;
 * icon dimensions and third-party MapLibre controls are not touched.
 */
.page-map .map-seo-intro h1 {
    font-size: var(--tt-type-map-page-title-size) !important;
    line-height: var(--tt-type-map-page-title-line) !important;
}

.page-map :is(
    #route-title,
    .map-route-title,
    .map-popup-title,
    .workspace-panel__title,
    .collection-header-title,
    #planner-modal h2
) { font-size: var(--tt-type-card-title-size) !important; line-height: var(--tt-type-card-title-line) !important; }

body.page-map #route-info-card #route-title,
body.page-map #planner-sidebar #planner-modal h2,
body.page-map #left-collection-menu .collection-header-title {
    font-size: var(--tt-type-card-title-size) !important;
    line-height: var(--tt-type-card-title-line) !important;
}

.page-map :is(.route-section-title, .planner-section-title, .collection-section h3) {
    font-size: var(--tt-type-small-heading-size) !important;
    line-height: var(--tt-type-small-heading-line) !important;
}

.page-map :is(
    .map-workspace-tab,
    .map-mode-tab,
    .map-filter-button,
    .map-panel-button,
    .route-card-action,
    .planner-action,
    .collection-action,
    #route-info-card button,
    #planner-sidebar button,
    #left-collection-menu button
) { font-size: var(--tt-type-ui-size) !important; line-height: var(--tt-type-ui-line) !important; }

.page-map :is(
    #route-info-card input,
    #planner-sidebar input,
    #planner-sidebar textarea,
    #planner-sidebar select,
    #left-collection-menu input
) { font-size: var(--tt-type-input-size) !important; line-height: var(--tt-type-input-line) !important; }

body.page-map #route-info-card :is(input, textarea, select),
body.page-map #planner-sidebar :is(input, textarea, select),
body.page-map #left-collection-menu input {
    font-size: var(--tt-type-input-size) !important;
    line-height: var(--tt-type-input-line) !important;
}

.page-map :is(
    .map-popup-description,
    #route-description-container p,
    .route-card-description
) { font-size: var(--tt-type-popup-body-size) !important; line-height: var(--tt-type-popup-body-line) !important; }

.page-map :is(
    .map-hint,
    .map-counter,
    .route-card-meta,
    .planner-hint,
    .collection-header-meta,
    .collection-route-status
) { font-size: var(--tt-type-caption-size) !important; line-height: var(--tt-type-caption-line) !important; }

/* Existing Tailwind utilities in these page templates predate semantic roles. */
.page-route-detail :is(.text-2xl, .md\:text-2xl),
.page-post-detail :is(.text-xl, .md\:text-2xl) {
    font-size: var(--tt-type-component-title-size) !important;
    line-height: var(--tt-type-component-title-line) !important;
}

@media (max-width: 767px) {
    .page-home-redesign .tt-home-section__head,
    .page-route-detail .route-mobile-section__head,
    .page-journal-index .journal-hero__copy {
        min-height: 0;
    }
}