/* ==========================================================================
   BestAtServices — Global UI/UX Refinement Layer
   --------------------------------------------------------------------------
   Purpose: cross-platform typography polish. The widget library's type was
   visually tuned on macOS (grayscale anti-aliasing = lighter/thinner). On
   Windows (ClearType = heavier) plus the 125% OS scaling most Windows laptops
   ship with, the same heavy 800/900 weights and rem sizes read oversized and
   "chunky". This layer refines the whole site from one place.

   Loaded LAST (see plugin.php) so it wins the cascade. Weight rules use
   !important on purpose: each widget prints its CSS as an inline <style> in
   the <body>, which comes after our <head> stylesheet, so equal-specificity
   rules would otherwise lose. This is the one legitimate case for it.

   FULLY REVERSIBLE: delete this file (or dequeue 'bestatservices-refinements-css').
   MASTER DIALS: the two variables below. Nudge --bas-type-scale up/down after
   viewing on a real Windows machine.
   ========================================================================== */

:root {
  /* Global type + space scale, expressed as % of the BROWSER's true default
     (16px) — not relative to any other rule. 100% = a clean, standard 16px
     root. Lower = smaller everywhere.
     2026-07-05 DISCOVERY: WordPress's own "Additional CSS" panel (Appearance
     > Customize > Additional CSS, stored as a `custom_css` post — completely
     separate from any theme/plugin file) has for a long time force-set
     `html{font-size:18px!important}` plus flat `h1{font-size:3rem!important}`
     / h2/h3/h4/h5/h6 rules and a `div/span/p/...{font-size:1rem!important}`
     catch-all. Because it's !important and (for the root) equal specificity
     loaded late, it silently overrode this dial's every prior value (95%,
     92%, 89%...) for years — nothing this file ever set actually reached the
     page. Root cause found via a computed-style probe (getComputedStyle),
     since none of that is visible by reading source order alone.
     100% now means "the correct 16px", i.e. an ~11% reduction from the
     erroneous 18px baseline every visitor has actually been seeing — that
     alone is the real fix behind "fonts feel slightly too big". Nudge below
     100% only for a further deliberate global trim; safe range 90–100%.
     NOTE: many section/heading titles use px-based clamp() (not rem), so they
     do NOT respond to this dial's rem math — those are trimmed directly in
     their own CSS (bestatservices-hero.css, -features.css, -dining.css,
     -marketing.css, -restaurant.css, -cases.css, -testimonials.css,
     -case-archive/-single.css) — see !important note below for why THOSE
     needed a separate fix too. */
  --bas-type-scale: 100%;

  /* Metric-matched fallback stack. When Manrope is still loading (display=swap
     shows a fallback) or is blocked, these keep text from ballooning into wide
     Arial on Windows. system-ui / Segoe UI sit closest to Manrope's metrics. */
  --bas-font-stack: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Gentle global downscale
   All widget type/spacing is rem-based, so trimming the root font-size pulls
   the whole design back toward its intended (Mac-tuned) proportions. This is
   the primary fix for "everything looks big" on Windows.
   -------------------------------------------------------------------------- */
/* :root (not just `html`) is required: WordPress Additional CSS's override
   targets the plain `html` selector. `:root` is a pseudo-class, so it carries
   higher specificity (0,1,0) than a bare type selector (0,0,1) — that wins
   regardless of which block prints later in the DOM, without depending on
   fragile source-order assumptions. !important is required because Additional
   CSS's rule is ALSO !important (see discovery note above). */
html, :root {
  font-size: var(--bas-type-scale) !important;
}

/* --------------------------------------------------------------------------
   2. Cross-platform rendering normalization
   Keeps text crisp and brings Mac/Windows rendering closer together.
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-family: var(--bas-font-stack);
}

/* --------------------------------------------------------------------------
   3. Display-weight refinement + fallback injection
   The site leans on font-weight:800 (23×) and 900 across section titles and
   stat numbers. Under ClearType those render blobby. Bring display headings to
   a crisp, professional 700 and inject the metric-matched fallback stack.
   !important is required to beat the widgets' inline <body> <style> blocks.
   Body copy, labels and eyebrows (500/600) are intentionally left untouched,
   so the hierarchy (700 heading vs 600 sub) is preserved.

   RELATED FIX (in each widget's own CSS file, not here): every heading/stat
   clamp() font-size rule (.bs-hero-h1, .csa-title, .csa-h2, .cases/.testimonials
   h2.section-title, .csd-hero-text h1, .csd-h2, .feat-title, .mkt-title,
   .bsd-title/.bsd-hero h1/.bsd-trust-num, .bsr-title/.bsr-hero h1/.bsr-trust-num)
   also needed !important added directly at the source, for the same reason as
   the root-scale fix above: Additional CSS's flat `h1{font-size:3rem!important}`
   (and h2-h6, and a `div/span/p/...{font-size:1rem!important}` catch-all) was
   silently winning over these non-!important class rules despite their higher
   selector specificity — importance is checked before specificity in the CSS
   cascade. Values were intentionally left at their ORIGINAL numbers (not
   trimmed further) because the real, comprehensive size reduction now comes
   from the corrected 100% root above; stacking a second trim on top of that
   would overshoot "slightly smaller" into a much larger cut than intended.
   -------------------------------------------------------------------------- */
h1, h2, h3,
[class*="-title"],
[class*="-heading"],
[class*="-num"],
.bs-hero-h1,
.section-title,
.bsd-title,
.bsr-title,
.mkt-title,
.blog-heading {
  font-weight: 700 !important;
  font-family: var(--bas-font-stack) !important;
}

/* Very large hero/display type benefits from a hair of negative tracking and
   tighter leading — reduces the "looming" feel on Windows without affecting
   smaller headings. */
.bs-hero-h1,
.bs-video-band-title,
[class*="-title"] {
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   4. Respect reduced-transparency / accessibility preferences already handled
   per-widget; nothing to add here. Keep this layer purely typographic.
   -------------------------------------------------------------------------- */

/* Responsive fix 2026-07-24: the type dial applied one size at every viewport,
   overriding Astra's built-in phone downscale (91.2% ≤544px) because the
   html/:root font-size rule above is !important. Re-introduce the downscale
   through the dial itself so phones aren't ~10% oversized. */
@media (max-width: 767px) {
  :root { --bas-type-scale: 95%; }
}
@media (max-width: 544px) {
  :root { --bas-type-scale: 91.2%; }
}