/* =====================================================================================================================
   Sewa Rent typography (v2, 2026-10-07). Research, measurements and screenshots: docs/research/typography.md
   ---------------------------------------------------------------------------------------------------------------------
   Family: Inter (variable, 400-700), the closest free match to Apple's SF Pro. Full Latin + Latin-ext (Indonesian,
   German) and Cyrillic incl. Ukrainian (ЄІЇҐ). Tabular figures (tnum) for prices.

   Loading (functions.php, owned by the integrator; nothing to change for this file to work):
     today:  wp_enqueue_style( 'sewa-font-inter', 'https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap' )
             ("wght@400;500;600;700" serves the very same variable file; "400..700" is just shorter.)
     later, recommended (no Google request, GDPR-clean, one fewer origin): self-host the WOFF2 subsets in
             listeo-child/fonts/inter/ (files are NOT in git; see the doc, section 7), delete the Google enqueue,
             uncomment the @font-face block below and add to wp_head, priority 1:
             <link rel="preload" href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter/inter-latin-wght.woff2" as="font" type="font/woff2" crossorigin>

   Safety: every family list ends in the platform UI font and `sans-serif`, so nothing can fall back to serif
   (the original bug: Listeo's body font option pointed to Raleway, which the theme never loaded).

   Specificity: this sheet loads last (functions.php priority 40), so equal specificity wins. Listeo/Kirki rules
   that are stronger are matched by selector, never with !important (there is none in this file); each one is
   commented with the rule it beats.
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------------------------
   0. Self-hosted Inter (enable after copying the files; keep in sync with the Google subsets' unicode ranges)
   ---------------------------------------------------------------------------------------------------------------------
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("fonts/inter/inter-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("fonts/inter/inter-latin-ext-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("fonts/inter/inter-cyrillic-wght.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("fonts/inter/inter-cyrillic-ext-wght.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
--------------------------------------------------------------------------------------------------------------------- */

/* 1. Size-matched local fallback. While Inter downloads (font-display: swap) text is drawn in Arial/Roboto scaled to
      Inter's width and vertical metrics, so lines do not re-wrap or jump when Inter arrives (limits CLS).
      Values computed from Inter 4 vs Arial (Roboto differs by < 0.2 %): letter-frequency-weighted advance widths + hhea. */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica Neue");
	size-adjust: 107%;
	ascent-override: 90.5%;
	descent-override: 22.5%;
	line-gap-override: 0%;
}

/* 2. Tokens. Mobile first (375-430 px phones); tablet/desktop values below. */
:root {
	--sewa-font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--sewa-font-heading: var(--sewa-font-sans); /* one family; headings differ by weight, size and tracking only */

	/* text colours: Listeo's body grey #707070 is 4.9:1 on white, the main reason paragraphs looked faint */
	--sewa-text-color: #3f4450;   /* body copy, 9.8:1 */
	--sewa-text-muted: #6b7079;   /* secondary text, 5.0:1 (AA); headings keep Listeo's #222 */

	/* size scale (px; 16 px Inter ~ 17 pt SF Pro, the iOS body size, by x-height) */
	--sewa-text-xs: 12px;      /* micro labels */
	--sewa-text-sm: 13px;      /* captions, "from" / "/ day", badges */
	--sewa-text-md: 14px;      /* chips, meta, footer links, card facts */
	--sewa-text-ui: 16px;      /* inherited UI text on phones (desktop: 15 px, Listeo's default) */
	--sewa-text-base: 16px;    /* paragraphs, inputs (16 px stops iOS zooming on focus) */
	--sewa-text-lg: 18px;      /* prices in the CTA bar, lead text */
	--sewa-text-h4: 17px;      /* footer / widget titles */
	--sewa-text-card: 18px;    /* listing card titles */
	--sewa-text-h3: 18px;
	--sewa-text-h2: 22px;      /* section headings ("Features", "Specs") */
	--sewa-text-h1: 26px;      /* listing / page title; also home section titles */

	/* line heights (unitless) */
	--sewa-leading-body: 1.55;   /* paragraphs */
	--sewa-leading-ui: 1.55;     /* inherited UI text; desktop keeps Listeo's 27px (1.8 at 15px) so components do not move */
	--sewa-leading-h1: 1.2;
	--sewa-leading-h2: 1.25;
	--sewa-leading-h3: 1.3;

	/* tracking: Inter is set for text at 0; large sizes need tightening (like SF Pro Display) */
	--sewa-tracking-h1: -0.02em;
	--sewa-tracking-h2: -0.015em;
	--sewa-tracking-h3: -0.01em;
	--sewa-tracking-caps: 0.04em;
}
@media (min-width: 768px) {
	:root {
		--sewa-text-ui: 15px;
		--sewa-text-card: 19px;
		--sewa-text-h3: 20px;
		--sewa-text-h2: 24px;
		--sewa-text-h1: 28px;
		--sewa-leading-body: 1.65;
		--sewa-leading-ui: 1.8;
	}
}
@media (min-width: 1200px) {
	:root {
		--sewa-text-h1: 32px;
	}
}

/* 3. Base. Family is inherited from body; only elements that Listeo/Kirki/plugins give their own family are listed in 4. */
body {
	font-family: var(--sewa-font-sans);
	font-size: var(--sewa-text-ui);
	line-height: var(--sewa-leading-ui);
	font-weight: 400;
	color: var(--sewa-text-color);
	font-kerning: normal;
	font-optical-sizing: auto; /* no-op with the wght-only file; uses Inter's opsz axis if the opsz build is ever loaded */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
/* Listeo: `body p { 16px / 29px }` (0,0,2), equal specificity, we load later. Its inline CSS makes p 300 for Outfit. */
body p {
	font-size: var(--sewa-text-base);
	line-height: var(--sewa-leading-body);
	font-weight: 400;
}
/* Listeo: `.headline span { font-weight: 300 }`; hairline weights are hard to read on phones. */
body .headline span { font-weight: 400; }

/* 4. Family overrides for elements that do not inherit it. */
/* Kirki inline: `h1,h2,h3,h4,h5,h6,.sign-in-dialog-title { font-family: Outfit; font-weight: 400 }` (0,0,1)/(0,1,0). */
body h1, body h2, body h3, body h4, body h5, body h6, body .sign-in-dialog-title {
	font-family: var(--sewa-font-heading);
	font-weight: 600;
}
/* Form controls do not inherit fonts. Listeo inline CSS sets the option font on `input[type="text"]` etc. (0,1,1);
   `body input[type]` is (0,1,2). `body .button` ties `a.button`/`button.button` (0,1,1) and wins by order. */
body input[type], body textarea, body select, body button, body .button, body #tiptip_content {
	font-family: var(--sewa-font-sans);
}
/* Kirki inline: `#navigation ul > li > a { font-family: Outfit; font-weight: 400 }` (1,0,3) -> we need (1,0,4).
   This is why the desktop menu still rendered in Outfit after the hotfix. */
body #navigation ul > li > a {
	font-family: var(--sewa-font-sans);
	font-weight: 500;
}
/* Listeo style.css hard-codes "Open Sans" here (booking quantity, rating badges, coupon). Overriding them also stops
   the 43 KB Open Sans download on listing pages. Leaflet/daterangepicker/chosen ship their own Helvetica/Arial. */
body .qtyTotal, body .qtyButtons input, body .numerical-rating, body .infoBox .numerical-rating, body .coupon-code,
body .rating-bars-item strong, body .services-counter, body .user-menu .nav-tag, body .dashboard-nav ul li span.nav-tag,
body .leaflet-container, body .daterangepicker, body .chosen-container, body .map-box p, body .map-box div {
	font-family: var(--sewa-font-sans);
}

/* 5. Headings (generic: content pages such as /how-it-works/, /contact/). */
body h1 { font-size: var(--sewa-text-h1); line-height: var(--sewa-leading-h1); letter-spacing: var(--sewa-tracking-h1); }
body h2 { font-size: var(--sewa-text-h2); line-height: var(--sewa-leading-h2); letter-spacing: var(--sewa-tracking-h2); }
body h3 { font-size: var(--sewa-text-h3); line-height: var(--sewa-leading-h3); letter-spacing: var(--sewa-tracking-h3); }
body h4 { font-size: var(--sewa-text-h4); line-height: var(--sewa-leading-h3); letter-spacing: var(--sewa-tracking-h3); }

/* Page / listing title. Listeo: `#titlebar h1` (1,0,1) 32px/40px and `#titlebar.listing-titlebar h1` (1,1,1)
   28px/36px with mobile media queries (22-26px); 36px line-height on a 24px title is too loose. */
body #titlebar h1, body #titlebar.listing-titlebar h1 {
	font-size: var(--sewa-text-h1);
	line-height: var(--sewa-leading-h1);
	letter-spacing: var(--sewa-tracking-h1);
	font-weight: 600;
}
/* Listing section headings. Listeo: `#listing-overview h2.listing-desc-headline` (1,1,1) 24px and
   `#listing-overview h2` (1,0,1) weight 500 -> same (1,1,1) selector, later wins. */
body .listing-desc-headline, #listing-overview h2.listing-desc-headline {
	font-size: var(--sewa-text-h2);
	line-height: var(--sewa-leading-h2);
	letter-spacing: var(--sewa-tracking-h2);
	font-weight: 600;
}
/* Home section titles. style-home.css: `.sewa-section-head h2 { 32px }` (0,1,1) on every viewport; on a phone that
   is bigger than the listing title. Uses the h1 step: 26px phone, 30-32px desktop. Hero stays as style-home sets it. */
body .sewa-section-head h2 {
	font-size: var(--sewa-text-h1);
	line-height: var(--sewa-leading-h1);
	letter-spacing: var(--sewa-tracking-h1);
}
body .sewa-hero-title { letter-spacing: -0.025em; }

/* Listing card title. Listeo: `.listing-title-nl { 20px/27px 600 }` (0,1,0). */
body .listing-title-nl {
	font-size: var(--sewa-text-card);
	line-height: var(--sewa-leading-h3);
	letter-spacing: var(--sewa-tracking-h3);
	font-weight: 600;
}
/* Footer widget titles. Listeo: `#footer h4 { 21px; 500 }` (1,0,1), line-height 1.1 from bootstrap-grid. */
body #footer h4, body #footer .widget-title {
	font-size: var(--sewa-text-h4);
	line-height: var(--sewa-leading-h3);
	font-weight: 600;
	letter-spacing: 0;
}

/* 6. Prices and numbers: tabular figures so amounts line up and do not shift when they change.
      font-variant-numeric (not font-feature-settings) so it does not reset other OpenType features.
      Not on the titlebar `.listing-pricing-tag`: a single value, and the wider tabular digits made that pill wrap. */
body .sewa-srch-price-amount, body .sewa-lp-cta-price strong, body .listing-nav-booking-price,
body .booking-estimated-cost, body .sewa-spec-value, body .qtyTotal, body .daterangepicker td, body .rating-counter {
	font-variant-numeric: tabular-nums;
}
body .sewa-srch-price-amount, body .sewa-lp-cta-price strong {
	font-weight: 700;
	letter-spacing: -0.01em;
}
body .sewa-lp-cta-price strong { font-size: var(--sewa-text-lg); }
/* "from" / "/ day" / "From": plugin uses 12-13px; keep them small but not tiny, and quieter than the amount. */
body .sewa-srch-price-from, body .sewa-srch-price-unit, body .sewa-lp-cta-price span {
	font-size: var(--sewa-text-sm);
	color: var(--sewa-text-muted);
}

/* 7. Chips, badges, facts. */
body .sewa-lp-chip { font-weight: 500; letter-spacing: 0; }            /* listing.css: 14px 600 */
body .sewa-srch-fact { font-size: var(--sewa-text-md); line-height: 1.4; } /* hotfix had inflated it to 16px via `body li` */
body .listing-category-tag-nl, body .badge-nl { letter-spacing: 0.005em; }

/* 8. Buttons: semibold, no tracking. Sizes and line-heights stay with Listeo (it centres text with line-height). */
body .button, body button.button, body input[type="submit"], body input[type="button"] {
	font-weight: 600;
	letter-spacing: 0;
}

/* 9. Mobile only (phones 375-430 px). */
@media (max-width: 767px) {
	/* iOS Safari zooms the page when a focused field is < 16px; Listeo sets 15px on `input[type="text"]` etc. (0,1,1). */
	body input[type="text"], body input[type="email"], body input[type="tel"], body input[type="number"],
	body input[type="password"], body input[type="search"], body input[type="url"], body textarea, body select {
		font-size: var(--sewa-text-base);
	}
	body .qtyButtons input[type] { font-size: 20px; } /* keep Listeo's large guest counter (the rule above would shrink it) */
	/* Mobile drawer menu: list-style rows like iOS settings. Listeo: `#mobile-nav li a { 15px 600 }` (1,0,2) beats its own
	   `.mobile-navigation-list li a { 16px 500 }`; we need (1,0,3). */
	body #mobile-nav li a {
		font-size: 17px;
		font-weight: 500;
		letter-spacing: -0.01em;
	}
	/* Primary CTA in the sticky bar. */
	body .sewa-lp-cta .sewa-lp-cta-btn.button { font-size: var(--sewa-text-base); }
	/* Footer text a notch smaller than body copy. */
	body #footer p, body #footer li, body .copyrights { font-size: 15px; }
}