.elementor-kit-3923{--e-global-color-primary:#0B1F33;--e-global-color-secondary:#14304D;--e-global-color-text:#3D5468;--e-global-color-accent:#17835F;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1100px;}.e-con{--container-max-width:1100px;}.elementor-widget:not(:last-child){--kit-widget-spacing:14px;}.elementor-element{--widgets-spacing:14px 14px;--widgets-spacing-row:14px;--widgets-spacing-column:14px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-3923 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   PayrollDirectory.com — "Ledger" Design System v1.0
   Paste into Elementor: Site Settings → Custom CSS (Pro)
   or into your child theme's style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS variables — single source of truth)
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --ledger-navy-900:  #0B1F33; /* headlines, footer bg, primary text on light */
  --ledger-navy-700:  #14304D; /* subheadings, secondary outlines, nav links, Verified badge */
  --ledger-slate-600: #3D5468; /* body text & metadata on white/Cloud — never headings */
  --ledger-green-700: #17835F; /* button fills & text links — WCAG AA with white text */
  --ledger-green-600: #1D9E75; /* borders, badge outlines, icons, large numerals only */
  --ledger-gold-500:  #E8B54D; /* featured badges, star ratings — pairs with Navy 900 text only */
  --ledger-mist-300:  #C8D3DD; /* card borders, dividers, input outlines, disabled */
  --ledger-cloud-100: #F5F7FA; /* section backgrounds, filter sidebar, alt rows */
  --ledger-white:     #FFFFFF; /* card surface */

  /* Semantic colors */
  --ledger-success: var(--ledger-green-700);
  --ledger-warning: #B7791F;
  --ledger-error:   #C0392B;
  --ledger-info:    var(--ledger-navy-700);

  /* Typography */
  --ledger-font-heading: 'IBM Plex Sans', sans-serif;
  --ledger-font-body:    'Inter', sans-serif;

  --ledger-h1-size: 40px; --ledger-h1-line: 48px;
  --ledger-h2-size: 30px; --ledger-h2-line: 38px;
  --ledger-h3-size: 22px; --ledger-h3-line: 30px;
  --ledger-overline-size: 12px; --ledger-overline-line: 16px;
  --ledger-body-size: 16px; --ledger-body-line: 26px;
  --ledger-small-size: 14px; --ledger-small-line: 22px;
  --ledger-caption-size: 12px; --ledger-caption-line: 16px;

  /* Spacing — 8px grid */
  --ledger-space-1: 8px;
  --ledger-space-2: 16px;
  --ledger-space-3: 24px;
  --ledger-space-4: 32px;
  --ledger-space-6: 48px;
  --ledger-space-8: 64px;

  /* Layout */
  --ledger-content-max: 1200px;
  --ledger-content-gutter: 24px;
  --ledger-longform-max: 760px;
  --ledger-sidebar-width: 280px;

  /* Radius */
  --ledger-radius-btn: 8px;
  --ledger-radius-card: 8px;
  --ledger-radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   2. FONT IMPORT (only load what the guide specifies — 4 files total)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=Inter:wght@400;600&display=swap');

/* --------------------------------------------------------------------------
   3. GLOBAL TYPOGRAPHY
   -------------------------------------------------------------------------- */
body,
.elementor-widget-text-editor,
input, textarea, select, button {
  font-family: var(--ledger-font-body);
  font-weight: 400;
  color: var(--ledger-slate-600);
  font-size: var(--ledger-body-size);
  line-height: var(--ledger-body-line);
}

h1, h2, h3,
.elementor-heading-title {
  font-family: var(--ledger-font-heading);
  font-weight: 600;
  color: var(--ledger-navy-900);
  letter-spacing: normal;
}

h1, .ledger-h1 { font-size: var(--ledger-h1-size); line-height: var(--ledger-h1-line); }
h2, .ledger-h2 { font-size: var(--ledger-h2-size); line-height: var(--ledger-h2-line); }
h3, .ledger-h3 { font-size: var(--ledger-h3-size); line-height: var(--ledger-h3-line); }

.ledger-overline {
  font-family: var(--ledger-font-body);
  font-weight: 600;
  font-size: var(--ledger-overline-size);
  line-height: var(--ledger-overline-line);
  text-transform: uppercase;
  letter-spacing: 0.08em; /* +8% tracking */
  color: var(--ledger-slate-600);
}

.ledger-small { font-size: var(--ledger-small-size); line-height: var(--ledger-small-line); }
.ledger-caption { font-size: var(--ledger-caption-size); line-height: var(--ledger-caption-line); color: var(--ledger-slate-600); }

/* Body copy measure */
p, .ledger-body-copy {
  max-width: 75ch; /* keeps 55–75 char line length; tighten per-container as needed */
}

/* Long-form guide pages */
.ledger-longform,
.single-guide .elementor-widget-container {
  max-width: var(--ledger-longform-max);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. PAGE STRUCTURE / SECTIONS
   -------------------------------------------------------------------------- */
.elementor-section.ledger-section-cloud,
.ledger-bg-cloud {
  background-color: var(--ledger-cloud-100);
}

.elementor-section.ledger-section-white,
.ledger-bg-white {
  background-color: var(--ledger-white);
}

.ledger-container,
.elementor-container {
  max-width: var(--ledger-content-max);
  padding-left: var(--ledger-content-gutter);
  padding-right: var(--ledger-content-gutter);
}

/* Section rhythm: 64px OR a Cloud band — never stack both */
.ledger-section-spacing {
  padding-top: var(--ledger-space-8);
  padding-bottom: var(--ledger-space-8);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

/* Primary — Green 700 fill, white text. One per screen. */
.elementor-button.ledger-btn-primary,
.ledger-btn-primary,
.geodir-btn.ledger-btn-primary {
  background-color: var(--ledger-green-700);
  color: var(--ledger-white);
  font-family: var(--ledger-font-body);
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: var(--ledger-radius-btn);
  padding: 12px 24px;
  transition: background-color 0.15s ease;
}
.elementor-button.ledger-btn-primary:hover,
.ledger-btn-primary:hover,
.geodir-btn.ledger-btn-primary:hover {
  background-color: #146f4f; /* Green 700 darkened ~8% */
  color: var(--ledger-white);
}

/* Secondary — white fill, Navy 700 outline + text */
.elementor-button.ledger-btn-secondary,
.ledger-btn-secondary {
  background-color: var(--ledger-white);
  color: var(--ledger-navy-700);
  font-family: var(--ledger-font-body);
  font-weight: 600;
  font-size: 16px;
  border: 1px solid var(--ledger-navy-700);
  border-radius: var(--ledger-radius-btn);
  padding: 12px 24px;
}
.elementor-button.ledger-btn-secondary:hover,
.ledger-btn-secondary:hover {
  background-color: var(--ledger-cloud-100);
}

/* Text link — Green 700, arrow, underline on hover only */
.ledger-btn-text {
  color: var(--ledger-green-700);
  font-family: var(--ledger-font-body);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ledger-btn-text:hover { text-decoration: underline; }

/* Disabled state */
.elementor-button.ledger-btn-primary:disabled,
.elementor-button.ledger-btn-secondary:disabled,
.ledger-btn-primary[disabled],
.ledger-btn-secondary[disabled] {
  background-color: var(--ledger-mist-300);
  color: rgba(61, 84, 104, 0.6); /* Slate at 60% */
  border-color: var(--ledger-mist-300);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   6. BADGES
   -------------------------------------------------------------------------- */
.ledger-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ledger-font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: var(--ledger-radius-pill);
  line-height: 1;
}

.ledger-badge-verified {
  background-color: var(--ledger-navy-700);
  color: var(--ledger-white);
}

.ledger-badge-promoted {
  background-color: var(--ledger-white);
  color: var(--ledger-navy-900);
  border: 1.5px solid var(--ledger-green-600);
}

.ledger-badge-featured {
  background-color: var(--ledger-gold-500);
  color: var(--ledger-navy-900);
}

.ledger-badge-new,
.ledger-badge-since {
  background-color: var(--ledger-cloud-100);
  color: var(--ledger-slate-600);
  border: 1px solid var(--ledger-mist-300);
}

/* Never stack more than 3 badges per card */
.ledger-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ledger-badge-row > .ledger-badge:nth-child(n+4) { display: none; }

/* --------------------------------------------------------------------------
   7. LISTING CARDS
   -------------------------------------------------------------------------- */
.ledger-card,
.geodir-listing-card {
  background-color: var(--ledger-white);
  border: 0.5px solid var(--ledger-mist-300);
  border-radius: var(--ledger-radius-card);
  padding: var(--ledger-space-2) var(--ledger-space-3); /* 16–20px internal padding */
  margin-bottom: var(--ledger-space-3); /* 24px between cards */
}

.ledger-card.ledger-card-promoted,
.geodir-listing-card.gd-is-promoted {
  border: 1.5px solid var(--ledger-green-600);
  order: -1; /* Promoted sorts first */
}

.ledger-card h3,
.ledger-card .ledger-card-title {
  font-family: var(--ledger-font-heading);
  font-weight: 600;
  font-size: var(--ledger-h3-size);
  line-height: var(--ledger-h3-line);
  color: var(--ledger-navy-900);
  margin: 0 0 4px;
}

.ledger-card .ledger-card-meta {
  font-family: var(--ledger-font-body);
  font-size: var(--ledger-small-size);
  line-height: var(--ledger-small-line);
  color: var(--ledger-slate-600);
}

.ledger-card .ledger-card-rating {
  color: var(--ledger-gold-500);
}

/* Only the quote/CTA button on a card may use green */
.ledger-card .ledger-btn-primary {
  margin-top: var(--ledger-space-2);
}

/* Provider logo tile */
.ledger-card-logo {
  width: 56px;
  height: 56px;
  border: 0.5px solid var(--ledger-mist-300);
  background-color: var(--ledger-white);
  object-fit: contain;
  padding: 6px;
}

/* --------------------------------------------------------------------------
   8. ARCHIVE / DIRECTORY LAYOUT (city & state pages)
   -------------------------------------------------------------------------- */
.ledger-archive-layout {
  display: flex;
  gap: var(--ledger-space-3);
  align-items: flex-start;
}

.ledger-archive-sidebar,
.geodir-sidebar {
  flex: 0 0 var(--ledger-sidebar-width);
  background-color: var(--ledger-cloud-100);
  padding: var(--ledger-space-3);
  border-radius: var(--ledger-radius-card);
}

.ledger-archive-results {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two cards per row, desktop */
  gap: var(--ledger-space-3);
}

/* Mobile: filters collapse, single column */
@media (max-width: 767px) {
  .ledger-archive-layout { flex-direction: column; }
  .ledger-archive-sidebar {
    display: none; /* replaced by the pinned "Filter" button below */
  }
  .ledger-archive-results {
    grid-template-columns: 1fr;
  }
  .ledger-filter-button-mobile {
    display: block;
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    background-color: var(--ledger-navy-900);
    color: var(--ledger-white);
    text-align: center;
    padding: 12px;
    font-family: var(--ledger-font-body);
    font-weight: 600;
  }
}
@media (min-width: 768px) {
  .ledger-filter-button-mobile { display: none; }
}

/* Recommendation module (2 Promoted + AccuPay national) above organic results */
.ledger-recommendation-module {
  background-color: var(--ledger-cloud-100);
  border-radius: var(--ledger-radius-card);
  padding: var(--ledger-space-3);
  margin-bottom: var(--ledger-space-4);
}
.ledger-recommendation-module .ledger-disclosure {
  font-size: var(--ledger-caption-size);
  line-height: var(--ledger-caption-line);
  color: var(--ledger-slate-600);
  margin-top: var(--ledger-space-1);
}

/* --------------------------------------------------------------------------
   9. MAP STYLING (container only — actual map skin is set via
      Custom Map Styles add-on / Snazzy Maps JSON, not CSS)
   -------------------------------------------------------------------------- */
.ledger-map-container {
  border-radius: var(--ledger-radius-card);
  overflow: hidden;
  border: 0.5px solid var(--ledger-mist-300);
}
/* Pin colors are set in the map style config:
   Standard = Navy 700 (#14304D)
   Promoted = Gold 500 (#E8B54D) with Navy dot
   Selected = Green 600 (#1D9E75) */

/* --------------------------------------------------------------------------
   10. ICONS
   -------------------------------------------------------------------------- */
.ledger-icon,
.elementor-icon svg {
  stroke: var(--ledger-slate-600);
  stroke-width: 1.5px;
  fill: none;
  width: 20px;
  height: 20px;
}
.ledger-icon-lg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   11. SEMANTIC / FORM STATES
   -------------------------------------------------------------------------- */
.ledger-alert-success { color: var(--ledger-success); }
.ledger-alert-warning { color: var(--ledger-warning); }
.ledger-alert-error   { color: var(--ledger-error); }
.ledger-alert-info    { color: var(--ledger-info); }

input, textarea, select {
  border: 1px solid var(--ledger-mist-300);
  border-radius: var(--ledger-radius-btn);
  background-color: var(--ledger-white);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ledger-navy-700);
}
input.ledger-input-error, textarea.ledger-input-error {
  border-color: var(--ledger-error);
}

/* --------------------------------------------------------------------------
   12. CLEANUP — remove theme/Elementor defaults the guide says to drop
   -------------------------------------------------------------------------- */
body, h1, h2, h3, h4, h5, h6, p, button, input, textarea, select {
  font-family: var(--ledger-font-body); /* Roboto override baseline; headings re-set above */
}/* End custom CSS */