/*
 * One type system for the whole public site. Loaded after style.css; every selector starts with `body` so it also wins over the
 * <style> blocks inside the city / blog views. Change a size here and it changes everywhere.
 *
 *   h1  page / hero title      h2  section title        h3  feature title / sub-section
 *   h4  widget + article sub   h5  card title, footer   lead  intro under a hero
 *   body 16px everywhere       small 14px for meta, labels, buttons, "read more"
 */
:root {
    --font: "DM Sans", sans-serif;

    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-h5: 18px;
    --fs-lead: 20px;
    --fs-body: 16px;
    --fs-small: 14px;

    --fw-heading: 700;
    --fw-strong: 600;
    --lh-heading: 1.2;
    --lh-card: 1.35;
    --lh-body: 1.7;
}
@media (max-width: 991px) {
    :root { --fs-h1: 30px; --fs-h2: 24px; --fs-h3: 20px; --fs-lead: 18px; }
}
@media (max-width: 575px) {
    :root { --fs-h1: 26px; --fs-h2: 22px; --fs-h3: 19px; --fs-h4: 17px; --fs-h5: 16px; --fs-lead: 16px; }
}

/* ---------- one font family ---------- */
body,
:root body h1, :root body h2, :root body h3, :root body h4, :root body h5, :root body h6,
:root body p, :root body li, :root body td, :root body th, :root body label, :root body a, :root body span, :root body strong, :root body small,
:root body button, :root body input, :root body select, :root body textarea,
:root body .home_hero_content h1, :root body .home_hero_content h1 span {
    font-family: var(--font);
}

/* ---------- base ---------- */
:root body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
:root body p, :root body li, :root body td, :root body th, :root body label, :root body dd, :root body dt { font-size: var(--fs-body); line-height: var(--lh-body); }
:root body strong, :root body b { font-weight: var(--fw-strong); }
:root body input, :root body select, :root body textarea, :root body .form-control, :root body .form-select { font-size: var(--fs-body); }

/* ---------- headings, same level = same size ---------- */
:root body h1, :root body h2, :root body h3, :root body h4, :root body h5, :root body h6 { font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: 0; }
:root body h1 { font-size: var(--fs-h1); }
:root body h2 { font-size: var(--fs-h2); }
:root body h3 { font-size: var(--fs-h3); }
:root body h4 { font-size: var(--fs-h4); }
:root body h5 { font-size: var(--fs-h5); }
:root body h6 { font-size: var(--fs-body); }

/* page / hero titles (h1) */
:root body .home_hero_content h1,
:root body .city-hero h1,
:root body .magazine-blog-details .hero-content h1,
:root body .cms-page .text-box h1,
:root body .home-section .text-box h1 { font-size: var(--fs-h1); font-weight: var(--fw-heading); line-height: 1.1; }

/* section titles (h2) */
:root body .home_trendingsection .home_trending_top h2,
:root body .home_travelsection .home_travelsection_title h2,
:root body .home_nightlifesection .home_nightlifesection_title h2,
:root body .home_editorsection .home_editorsection_top h2,
:root body .home_citysection .home_citysection_top h2,
:root body .home_latestsection .home_latestsection_top h2,
:root body .home_popularblogsection .home_popularblogsection_title h2,
:root body .featured-cities .section-header h2,
:root body .category-header h2,
:root body .category-title,
:root body .cms-page .text-box h2,
:root body .magazine-blog-details .article-body h2 { font-size: var(--fs-h2); font-weight: var(--fw-heading); line-height: var(--lh-heading); }

/* feature titles (h3) */
:root body .home_hero_content h3,
:root body .home_hero_card_content h4,
:root body .home_citysection .home_citysection_content h3,
:root body .home_editorsection .home_editorsection_bigcontent h3,
:root body .contact-section .header-text h3,
:root body .contact-section .text-box h3,
:root body .cms-page .text-box h3,
:root body .magazine-blog-details .article-body h3 { font-size: var(--fs-h3); font-weight: var(--fw-heading); line-height: 1.25; }

/* widget + article sub-headings (h4) */
:root body .side-box h4,
:root body .share-box h4,
:root body .magazine-blog-details .article-body h4,
:root body .cms-page .text-box h4 { font-size: var(--fs-h4); font-weight: var(--fw-heading); line-height: 1.25; }

/* card titles: same size whatever the tag */
:root body .home_trendingsection .home_trending_bottom h3,
:root body .home_travelsection .home_travelsection_content h3,
:root body .home_nightlifesection .home_nightlifesection_content h3,
:root body .home_editorsection .home_editorsection_smallcontent h4,
:root body .home_latestsection .home_latestsection_content h3,
:root body .home_popularblogsection .home_popularblogsection_content h3,
:root body .city-blog-card h3,
:root body .cityx-featured h2,
:root body .city-overlay h4,
:root body .post-overlay h4,
:root body .blog-card h2,
:root body .blog-title,
:root body .blog-title a,
:root body .blog-box .title,
:root body .related-title,
:root body .contact-section .info-box h5,
:root body .footer-box h5,
:root body .header-text h5 { font-size: var(--fs-h5); font-weight: var(--fw-heading); line-height: var(--lh-card); }

/* intro paragraphs under a hero */
:root body .home_hero_content p,
:root body .city-intro,
:root body .home_hero_card_content p.lead { font-size: var(--fs-lead); line-height: 1.6; }

/* ---------- body text ---------- */
:root body .excerpt,
:root body .city-blog-card p,
:root body .card-body p,
:root body .home_hero_card_content p,
:root body .home_trendingsection p,
:root body .home_travelsection p,
:root body .home_nightlifesection p,
:root body .home_editorsection p,
:root body .home_latestsection p,
:root body .home_citysection p,
:root body .footer-about,
:root body .magazine-blog-details .article-body p,
:root body .magazine-blog-details .article-body li,
:root body .magazine-blog-details .article-body td,
:root body .magazine-blog-details .article-body th,
:root body .cms-page .text-box p,
:root body .cms-page .text-box li,
:root body .cms-page .text-box a,
:root body .cms-page .text-box strong { font-size: var(--fs-body); line-height: var(--lh-body); }
:root body .magazine-blog-details .article-body th { font-weight: var(--fw-heading); }
:root body .magazine-blog-details .article-body h1,
:root body .magazine-blog-details .article-body h5,
:root body .magazine-blog-details .article-body h6 { font-size: var(--fs-h5); font-weight: var(--fw-heading); }

/* text links in lists and sidebars */
:root body .footer-box ul li a,
:root body .side-box .links li a,
:root body .recent-blog a,
:root body .home_citysection_content span,
:root body .contact-section .info-box p,
:root body .contact-section .info-box a { font-size: var(--fs-body); line-height: var(--lh-card); }
:root body .side-box .links li a,
:root body .recent-blog a { font-weight: var(--fw-strong); }

/* ---------- small text: meta, labels, buttons ---------- */
:root body .badge-category,
:root body .city-eyebrow,
:root body .hero-category,
:root body .hero-meta span,
:root body .home_travelsection_meta,
:root body .home_nightlifesection_meta,
:root body .home_editorsection_meta,
:root body .home_latestsection_meta,
:root body .home_trending_bottom span,
:root body .home_travelsection_content span,
:root body .home_nightlifesection_content span,
:root body .home_latestsection_content span,
:root body .copyright,
:root body .read-more,
:root body .home_trending_viewmore,
:root body .home_travel_viewmore,
:root body .home_nightlife_viewmore,
:root body .home_editor_viewmore,
:root body .home_city_viewmore,
:root body .home_latest_viewmore,
:root body .btn-custom,
:root body .home_hero_btn,
:root body .home_latestsection_tabs button,
:root body .page-link,
:root body .navbar .nav-item .nav-link { font-size: var(--fs-small); }
:root body .read-more,
:root body [class*="_viewmore"] { font-weight: var(--fw-heading); }
:root body .btn-custom, :root body .home_hero_btn, :root body .home_latestsection_tabs button { font-weight: var(--fw-strong); }
:root body .navbar .nav-item .nav-link { font-weight: 500; }
:root body .city-eyebrow { font-weight: var(--fw-strong); letter-spacing: .08em; text-transform: uppercase; }

/* the small "About Us" eyebrow line above the title of a CMS page */

/* ---------- stragglers ---------- */
/* "View more" links of every home section, section meta lines, small card labels */
:root body [class*="_viewmore"],
:root body .home_hero_tag,
:root body .home_editorsection_smallcontent span,
:root body .home_trending_meta,
:root body [class*="section_meta"] { font-size: var(--fs-small); }
:root body [class*="_viewmore"] span, :root body [class*="_viewmore"] i { font-size: inherit; }

/* pagination */
:root body .page-link, :root body .page-link span { font-size: var(--fs-small); }

/* Home hero: only the main title is larger than the normal page scale. */
:root body .home_hero_content h1 { font-size: clamp(36px, 5vw, 68px); line-height: 1.08; }
:root body .home_hero_content h1 span { font-size: inherit; }