/* ==========================================================================
   scattermeter.com — base.css

   Replaces 10 stylesheets + 72 KB of inline WordPress CSS (Astra 4.14,
   Elementor 4.3.5, WP block library, Hostinger Reach) with only the rules
   the pages actually depend on. Every rule below was read out of the live
   site's own CSS, not guessed.

   WHY THE REST WAS DROPPED
   Each page is a complete, self-contained HTML document that Kent pasted
   into one Elementor HTML widget, carrying its own <style> block. Measured
   against the extracted markup, zero Astra/Elementor component classes
   (.e-con, .e-heading-base, .elementor-widget, .entry-title, .wp-block-*)
   and zero CSS variables (--ast-*, --e-global-*, --wp--*) are referenced
   anywhere in that content. What the content DOES inherit is the handful of
   element defaults and wrapper geometry reproduced here.

   WHY SPECIFICITY IS PRESERVED
   Astra ships `.entry-content p` and Elementor ships `.elementor img`.
   Those out-rank single-class rules inside the page content, so each page
   keeps its `.entry-content.clear` > `.elementor` wrappers and those rules
   are written at their original specificity. Flattening them would let page
   rules win that previously lost, and the layout would shift.

   Page-specific CSS stays inside each page's own <style> blocks — untouched.
   ========================================================================== */

/* ---------- root / box model (Astra) ---------- */
html {
  font-size: 100%;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*,
:after,
:before {
  box-sizing: inherit;
}

/* ---------- body (Astra) ----------
   The 3 pages that scope all their CSS to a root id (#en-root, #ug-root,
   #lcm3-root) inherit their background and font from here, so these values
   are load-bearing, not cosmetic. */
body {
  margin: 0;
  color: #808285;
  background: #fff;
  font-style: normal;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
  line-height: var(--ast-body-line-height, 1.65);
}

/* ---------- Astra palette ----------
   Only the values the rules below actually consume, resolved from Astra's
   customizer output so this file has no dangling var() references. */
:root {
  --ast-global-color-0: #046bd2;
  --ast-global-color-4: #ffffff;
  --ast-global-color-7: #d1d5db;
  --ast-border-color: var(--ast-global-color-7);
  --ast-body-line-height: 1.65;
}

/* ---------- form elements (Astra) ----------
   `button,input{line-height:normal}` runs AFTER the body typography rule
   below and undoes the inherited 1.65 line-height for form controls.
   Without it every button grows by ~8px and anything containing one
   (the cookie banner, for instance) grows with it. */
button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button, input {
  line-height: normal;
}

input, select {
  line-height: 1;
}

textarea {
  overflow: auto;
  width: 100%;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

/* Astra's customizer field styling. Attribute selectors (0,1,1) out-rank
   the `*{padding:0}` reset several pages open with, so these values are
   what the live site actually renders: the search box on the meter pages
   is 40px tall because of this, not 16px. */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="reset"],
input[type="tel"],
input[type="date"],
select,
textarea {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: var(--ast-form-input-text, #475569);
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="reset"],
input[type="tel"],
input[type="date"],
select {
  height: 40px;
}

/* Astra's customizer button styling — the last rule to touch buttons, so
   it is the one that actually wins on the live site. It supplies the
   font-weight (500), line-height (1em) and padding that pages inherit
   without styling buttons themselves; the cookie-banner buttons on
   several pages are sized entirely by this. */
.menu-toggle,
button,
.ast-button,
.ast-custom-button,
.button,
input#submit,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-style: solid;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
  color: #fff;
  border-color: var(--ast-global-color-0);
  background-color: var(--ast-global-color-0);
  padding-top: 15px;
  padding-right: 30px;
  padding-bottom: 15px;
  padding-left: 30px;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1em;
}

/* ---------- element reset (Astra) ----------
   Astra's exact selector list, verbatim. It zeroes margins/padding and
   normalises font inheritance for block elements; page CSS restores
   whatever it needs on top. Trimming this list is not safe — `figure`,
   `dl/dd/dt` and `blockquote` all carry large UA default margins that
   reappear the moment they drop out. */
address, blockquote, body, dd, dl, dt, fieldset, figure,
h1, h2, h3, h4, h5, h6,
hr, html, iframe, legend, li, ol, p, pre, textarea, ul {
  border: 0;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

figure {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  clear: both;
}

/* ---------- heading scale (Astra) ----------
   `:where()` contributes zero specificity, exactly as Astra ships it, so
   page rules continue to override these as they did on WordPress.

   The `.entry-content :where(...)` forms are NOT equivalent to the bare
   element selectors: `.entry-content` contributes a class, so they score
   0,1,0 and beat the `*{margin:0}` reset that nearly every page opens
   with. That is how headings keep their 20px bottom margin on the live
   site — the bare `h2{...}` rule alone loses to `*`. */
.entry-content :where(h1), h1 { color: #808285; font-size: 2em; line-height: 1.2; }
.entry-content :where(h2), h2 { color: #808285; font-size: 1.7em; line-height: 1.3; }
.entry-content :where(h3), h3 { color: #808285; font-size: 1.5em; line-height: 1.4; }
.entry-content :where(h4), h4 { color: #808285; line-height: 1.5; font-size: 1.3em; }
.entry-content :where(h5), h5 { color: #808285; line-height: 1.6; font-size: 1.2em; }
.entry-content :where(h6), h6 { color: #808285; line-height: 1.7; font-size: 1.1em; }

.entry-content :where(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 20px;
}

.entry-content > :last-child,
.entry-summary > :last-child,
.page-content > :last-child {
  margin-bottom: 0;
}

.entry-content {
  word-wrap: break-word;
}

.entry-content .wp-embedded-audio,
.entry-content .wp-embedded-video {
  display: inline-block;
}
h1, .entry-content :where(h1) {
  font-size: 36px;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.4em;
}

h2, .entry-content :where(h2) {
  font-size: 30px;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3em;
}

h3, .entry-content :where(h3) {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3em;
}

h4, .entry-content :where(h4) {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.2em;
  font-weight: 600;
}

h5, .entry-content :where(h5) {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.2em;
  font-weight: 600;
}

h6, .entry-content :where(h6) {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.25em;
  font-weight: 600;
}

/* THE SINGLE MOST IMPORTANT MOBILE RULE.
   Astra shrinks the root font to 91.2% below 922px, so every rem-based
   size on every page scales down with it (body text becomes 14.592px, not
   16px). Omitting this one line reflowed all 24 pages on mobile. */
@media (max-width: 921px) {
  html { font-size: 91.2%; }

  /* Astra swaps which (empty) header wrapper is in flow. */
  #ast-desktop-header { display: none; }

  h1, .entry-content :where(h1) { font-size: 30px; font-size: 1.875rem; }
  h2, .entry-content :where(h2) { font-size: 25px; font-size: 1.5625rem; }
  h3, .entry-content :where(h3) { font-size: 20px; font-size: 1.25rem; }
}

@media (max-width: 544px) {
  html { font-size: 91.2%; }

  h1, .entry-content :where(h1) { font-size: 30px; font-size: 1.875rem; }
  h2, .entry-content :where(h2) { font-size: 25px; font-size: 1.5625rem; }
  h3, .entry-content :where(h3) { font-size: 20px; font-size: 1.25rem; }
}

@media (min-width: 922px) {
  .ast-container { max-width: 1240px; }
}

/* ---------- text defaults (Astra) ---------- */
p {
  margin-bottom: 1.75em;
}

a {
  background-color: transparent;
  color: #4169e1;
  transition: all 0.2s linear;
}

img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* ---------- tables (Astra) ----------
   Reproduced in Astra's own source order, because the cascade here is
   self-cancelling and a partial copy is worse than none:
   `table,td,th{border:1px solid}` arms every edge, then
   `td,th{border-width:0 1px 1px 0}` disarms top and left again. Copying
   only the first rule paints a full grid of #d1d5db lines on tables the
   pages style themselves.
   `th{font-weight:600}` is load-bearing too: without it headers fall back
   to the browser's 700, which measures wider and rewraps header text,
   changing every column width and row height. */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

table, td, th {
  border: 1px solid var(--ast-border-color);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin: 0 0 1.5em;
  width: 100%;
}

th {
  font-weight: 600;
}

td, th {
  padding: 0.7em 1em;
  border-width: 0 1px 1px 0;
}

blockquote, q {
  quotes: "" "";
}

blockquote {
  border-left: 5px solid var(--ast-border-color);
  padding: 20px;
  font-size: 1.2em;
  font-style: italic;
  margin: 0 0 1.5em;
  position: relative;
}

blockquote {
  margin: 1.5em 1em 1.5em 3em;
  font-size: 1.1em;
  line-height: inherit;
  position: relative;
}

/* ---------- WordPress content wrapper ----------
   Higher specificity than a page's own `p` rule — must be kept as-is. */
.entry-content .wp-audio-shortcode,
.entry-content .wp-embedded-audio,
.entry-content .wp-embedded-video,
.entry-content .wp-video,
.entry-content p {
  margin-bottom: 1.6em;
}

/* ALSO LOAD-BEARING. Astra's element reset above zeroes ul/ol margin and
   padding, then this rule (0,1,1) puts them back to the browser default
   and sets a 20px indent. Every list on the site is laid out by it: drop
   it and list items grow 20px wider and lose 16px of vertical margin,
   which shortens pages and reflows everything below them. */
.entry-content ul,
.entry-content ol {
  padding: revert;
  margin: revert;
  padding-left: 20px;
}

.entry-content ul.wc-block-product-template {
  padding: 0;
}

li > ol,
li > ul {
  margin-bottom: 0;
  margin-left: 1.5em;
}

/* ---------- Astra page-builder template ----------
   The live body carries `ast-page-builder-template`, which zeroes every
   container padding and margin. That is why the content sits edge-to-edge;
   without these rules it would gain 20px side padding and 4em of top
   margin. */
.ast-container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.site,
.site-content {
  width: 100%;
}

#primary {
  width: 100%;
}

/* The page shell is a full-height flex column, and the content region is
   the growing item. Without these the content region collapses to 0px
   high and everything below it reflows. */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

#page .site-content {
  flex-grow: 1;
}

.site-header {
  z-index: 99;
  position: relative;
}

/* Astra switches the content container to flex above its 922px breakpoint,
   and hides the (empty) mobile header there. */
@media (min-width: 922px) {
  .site-content .ast-container {
    display: flex;
  }

  #ast-mobile-header {
    display: none;
  }
}

/* THIS RULE IS LOAD-BEARING — do not "simplify" it to `body`.
   Astra paints the page background through a CLASS on <body>
   (.ast-page-builder-template), specificity 0,1,0. Several pages set
   `html,body{background:#0c111c}` in their own CSS at specificity 0,0,1,
   so this class rule is what keeps <body> white, exactly as it is on
   WordPress, regardless of source order. Written as `background-color`
   (not the `background` shorthand) to match Astra. #fff is Astra's
   --ast-global-color-4, resolved. */
.ast-plain-container,
.ast-page-builder-template {
  background-color: #fff;
}

.ast-page-builder-template .hentry {
  margin: 0;
}

.ast-page-builder-template .site-content > .ast-container {
  max-width: 100%;
  padding: 0;
}

.ast-page-builder-template .site .site-content #primary {
  padding: 0;
  margin: 0;
}

.entry-content.clear {
  margin: 0;
  padding: 0;
}

.entry-content.clear:after,
.entry-content.clear:before {
  content: "";
  display: table;
}

.entry-content.clear:after {
  clear: both;
}

/* ---------- Elementor frontend base ---------- */
.elementor *,
.elementor :after,
.elementor :before {
  box-sizing: border-box;
}

.elementor img {
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: auto;
  max-width: 100%;
}

/* ---------- Elementor container geometry ----------
   The pasted document sits inside a flex container with 10px of padding.
   Dropping this padding would shift every page by 10px on all four sides.
   `position:relative` matters beyond geometry: page content positions
   children absolutely against these wrappers, so a static wrapper would
   send them to the viewport instead. */
.elementor-widget {
  position: relative;
}

.e-con {
  --container-max-width: 1140px;
  --content-width: min(100%, var(--container-max-width, 1140px));
  --width: 100%;
  --min-height: initial;
  --height: auto;
  --overflow: visible;
  --position: relative;
  --border-radius: 0;
  position: var(--position);
  width: var(--width);
  height: var(--height);
  min-height: var(--min-height);
  min-width: 0;
  overflow: var(--overflow);
  border-radius: var(--border-radius);
}

.elementor .e-flexbox-base {
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.elementor .e-atomic-element {
  min-width: 0;
}

/* ---------- accessibility (Astra skip link) ----------
   Astra parks its skip link off-canvas via `.site .skip-link` (0,2,0),
   which out-ranks .screen-reader-text below; reproduced so the link
   occupies the same space it does today. */
.site .skip-link {
  background-color: #f1f1f1;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #21759b;
  display: block;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 700;
  left: -9999em;
  outline: 0;
  padding: 15px 23px 14px;
  text-decoration: none;
  text-transform: none;
  top: -9999em;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ---------- scroll-to-top button (Astra) ----------
   A real feature of the live site: hidden until the page is scrolled past
   300px, then revealed by Astra's JS. Reproduced here with the original
   values (--ast-global-color-0 resolved to its computed #046bd2) and a
   ~10-line native handler in site.js, instead of loading jQuery plus
   Astra's 27 KB frontend bundle to drive one button. */
#ast-scroll-top {
  display: none;
  position: fixed;
  text-align: center;
  cursor: pointer;
  z-index: 99;
  width: 2.1em;
  height: 2.1em;
  line-height: 2.1;
  color: #fff;
  border-radius: 2px;
  outline: inherit;
  background-color: #046bd2;
  font-size: 15px;
  border: 0;
  padding: 0;
}

#ast-scroll-top:focus {
  border-style: dotted;
  border-color: inherit;
  border-width: thin;
}

.ast-scroll-to-top-right {
  right: 30px;
  bottom: 30px;
}

/* Astra's generic arrow-icon rule supplies the height and position; the
   #ast-scroll-top rule below only overrides width and margin, so both are
   needed to size the arrow as it is today. */
.ast-icon.icon-arrow svg {
  height: 0.6em;
  width: 0.6em;
  position: relative;
  margin-left: 10px;
}

.ast-icon svg:not([fill]) {
  fill: currentColor;
}

#ast-scroll-top .ast-icon.icon-arrow svg {
  margin-left: 0;
  vertical-align: middle;
  transform: translate(0, -20%) rotate(180deg);
  width: 1.6em;
}

@media (max-width: 921px) {
  .ast-header-break-point .ast-icon.icon-arrow svg {
    height: 0.85em;
    width: 0.95em;
    position: relative;
    margin-left: 10px;
  }

  #ast-scroll-top .ast-icon.icon-arrow svg {
    width: 1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}