/*
 * Editorial typography (2026-10-19): Playfair Display for headings and names,
 * Jost for everything else, small tracked caps for buttons, tabs and labels.
 *
 * Loaded last in <head> by bsapp_typography_css(), and only when
 * BSAPP_TYPOGRAPHY in app/lib/helpers/helpers.php is 'editorial'. Setting it
 * to 'classic' drops this file and brings back Plus Jakarta Sans; nothing
 * else changes. Add ?type=classic to any URL to compare.
 *
 * The page stylesheets set heavy weights (700-800) with specific selectors
 * and sometimes !important, so the overrides here use !important too.
 * Playfair Display replaced Bodoni Moda the same day: Bodoni's hairlines
 * were hard to read. Small names and labels still stay in Jost.
 */
:root {
   --bs-font: 'Jost', 'Futura', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
   --bs-font-display: 'Playfair Display', 'Didot', 'Bodoni 72', Georgia, serif;
}

body {
   font-family: var(--bs-font);
   font-weight: 400;
}

/* Headings and names: the serif, at a book weight, slightly tightened. */
h1, h2, h3, h4,
.home-hero h1, .home-section h2,
.cat-head h1, .cat-section h2, .cat-letter-group h3,
.fb-hero h1, .fb-h2, .fb-steps h3, .fb-cta h2,
.legal-head h1, .legal h2,
.auth-title, .compose-title, .subpage-hero-text h1,
.search-empty h2, .manage-card h2, .bottom-full h4,
.bottom-left h5,
.signup-copy h1, .fp-search h1,
.location-name, .provider-name, .result-name,
.location-detail-top-mobile-container .name,
.provider-detail-top-mobile-container .name,
.provider-detail-top-desktop .provider-name,
.post-poster-name, .cat-top-name, .fav-pro-name,
.manage-list-name, .ad-name, .ad-group-title,
.home-place-name, .reviews-average, .fb-price strong {
   font-family: var(--bs-font-display) !important;
   font-weight: 600 !important;
   letter-spacing: 0;
}

/* The serif's thin strokes get fainter as the type gets smaller, so names
   and section headings use 600; only the big page titles drop to 500, where
   the strokes are wide enough to read. */
h1, .home-hero h1, .cat-head h1, .fb-hero h1, .legal-head h1,
.subpage-hero-text h1, .signup-copy h1, .fp-search h1 {
   font-weight: 500 !important;
   letter-spacing: -0.005em;
}

/* One italic phrase per headline, as in a magazine cover line. */
em.accent {
   font-style: italic;
   font-weight: inherit;
}

/* The serif reads smaller than the sans at the same size; lift the small ones. */
.result-name, .cat-top-name, .fav-pro-name, .manage-list-name, .ad-name,
.home-place-name, .post-poster-name {
   font-size: 18px;
}

/* Small headings that act as labels stay in the sans, as tracked caps. */
.legal-toc h2, #location h5, .cat-faq-item h3, .claim-review-h2 {
   font-family: var(--bs-font) !important;
}

.legal-toc h2, #location h5,
.fb-eyebrow, .claim-step, .hours-head, .review-mine-label,
.fb-promote-tag, .ad-stats dt, .sponsored-badge, th {
   font-family: var(--bs-font) !important;
   font-weight: 500 !important;
   text-transform: uppercase;
   letter-spacing: .16em;
}

/* Buttons: small caps-style labels, as in print. Plain <button>s used as
   icons or inline links keep their own look. */
.button, input[type='button'], input[type='reset'], input[type='submit'],
button[type='submit'], .pink-pill-button, .pink-circle-button,
.pill-btn, .circle-btn, .home-owner-button, .fb-start .button, .fb-cta .button {
   font-family: var(--bs-font) !important;
   font-weight: 500 !important;
   text-transform: uppercase !important;
   letter-spacing: .12em !important;
}

/* Tabs and nav: tracked caps. The phone tab bar (.tab-item) is too
   narrow for caps and keeps mixed case. */
.location-nav a, .provider-nav a, .subpage-nav a, .view-switch a, .nav-link {
   font-family: var(--bs-font);
   font-weight: 500 !important;
   text-transform: uppercase;
   letter-spacing: .1em;
}

/* Jost runs light next to Plus Jakarta's heavier weights; keep emphasis at
   600 rather than 700-800 so it stays crisp. */
b, strong, .search-count, .home-category, .account-initial {
   font-weight: 600;
}

/*
 * Glamour pass (2026-10-19). Fashion magazines get their look from scale
 * and contrast: very large, light, tightly set headlines over small, widely
 * tracked caps. So page titles go up a size and down to the regular weight
 * (Playfair's strokes are sturdy enough for that at these sizes), and
 * labels, buttons and nav get smaller and more spaced out.
 */

/* Page titles: large, regular weight, tight leading and tracking. */
h1, .home-hero h1, .cat-head h1, .fb-hero h1, .legal-head h1,
.subpage-hero-text h1, .signup-copy h1, .fp-search h1,
.auth-title, .compose-title, .fb-h2, .fb-cta h2, .home-section h2 {
   font-weight: 400 !important;
   letter-spacing: -0.02em !important;
   line-height: 1.06 !important;
   text-wrap: balance;
}

.home-hero h1 { font-size: clamp(40px, 8vw, 76px); }
.fb-hero h1 { font-size: clamp(36px, 7vw, 64px); }
.cat-head h1, .legal-head h1 { font-size: clamp(34px, 5.5vw, 50px); }
.fb-h2 { font-size: clamp(30px, 4.6vw, 42px); }
.fb-cta h2 { font-size: clamp(32px, 5vw, 46px); }
.auth-title { font-size: 34px; }
.compose-title, .subpage-hero-text h1 { font-size: 36px; }
.home-section h2 { font-size: 30px; }

/* The italic phrase sits a touch lighter than the roman around it. */
h1 em.accent, h2 em.accent {
   font-weight: 400;
}

/* Section headings and names: medium weight, no tightening. */
h2, h3, h4, .legal h2, .cat-section h2, .manage-card h2, .search-empty h2,
.bottom-full h4, .bottom-left h5 {
   letter-spacing: 0;
   line-height: 1.2;
}

/* Small caps-style labels: smaller, wider. */
.legal-toc h2, #location h5,
.fb-eyebrow, .claim-step, .hours-head, .review-mine-label,
.fb-promote-tag, .ad-stats dt, .sponsored-badge, th {
   font-size: 11px !important;
   letter-spacing: .24em;
}

/* Text buttons: fine, widely spaced caps. Circle and plain submit buttons
   are often icon-only (send, search, favorite) and keep their size. */
.button, input[type='button'], input[type='reset'], input[type='submit'],
.pink-pill-button, .pill-btn, .home-owner-button, .fb-start .button, .fb-cta .button {
   font-size: 12px !important;
   letter-spacing: .18em !important;
}

/* Main nav and section tabs: small tracked caps. */
.nav-link, .subpage-nav a, .view-switch a {
   font-size: 12.5px;
   letter-spacing: .16em;
}

/* Body copy: a little more air. */
body {
   line-height: 1.65;
   letter-spacing: .005em;
}