/* =============================================================
   GoHire Brand Theme — Pages & Posts
   v3 — uses site-default Lato font; fixes heading proportions
   Paste into: WP Admin > Appearance > Customize > Additional CSS
   ============================================================= */

/* ── 1. BRAND TOKENS ─────────────────────────────────────── */
/* No Google Fonts import needed — Lato is loaded by the theme */
:root {
  --gh-green:        #00C17C;
  --gh-green-dark:   #009960;
  --gh-green-light:  #E6FAF3;
  --gh-navy:         #0D1F3C;
  --gh-navy-mid:     #1B3560;
  --gh-slate:        #4A5568;
  --gh-muted:        #718096;
  --gh-rule:         #E2E8F0;
  --gh-bg-soft:      #F7FAFB;
  --gh-font-display: 'Lato', sans-serif;
  --gh-font-body:    'Lato', sans-serif;
}

/* ── 2. BODY & BASE TEXT ─────────────────────────────────── */
body,
body p,
body li,
body td,
.entry-content p,
.page-content p,
.wpb_wrapper p,
.wpb_text_column p,
.elementor-widget-text-editor p,
.elementor-text-editor p,
.elementor-widget-container p {
  font-family:  var(--gh-font-body) !important;
  color:        var(--gh-slate) !important;
  font-size:    17px !important;
  line-height:  1.75 !important;
}

/* ── 3. H1 ───────────────────────────────────────────────── */
/* Only target actual h1 tags and Elementor XL/XXL heading widgets */
h1,
body h1,
.entry-title,
.page-title,
.elementor-size-xl  > .elementor-heading-title,
.elementor-size-xxl > .elementor-heading-title,
.elementor-widget-heading h1,
.wpb_wrapper h1,
.vc_custom_heading h1 {
  font-family:    var(--gh-font-display) !important;
  font-weight:    900 !important;
  color:          var(--gh-navy) !important;
  letter-spacing: -0.02em !important;
  line-height:    1.15 !important;
  font-size:      clamp(2rem, 4vw, 3.25rem) !important;
}

/* ── 4. H2 ───────────────────────────────────────────────── */
/* Style: dark green, heavy weight (Option B) */
h2,
body h2,
.entry-content h2,
.page-content h2,
.elementor-size-large > .elementor-heading-title,
.elementor-widget-heading h2,
.wpb_wrapper h2,
.vc_custom_heading h2 {
  font-family:    var(--gh-font-display) !important;
  font-weight:    900 !important;
  color:          var(--gh-green-dark) !important;
  letter-spacing: -0.02em !important;
  line-height:    1.25 !important;
  font-size:      28px !important;
  display:        block !important;
  border-bottom:  none !important;
  margin-bottom:  1rem !important;
}

/* ── 5. H3 ───────────────────────────────────────────────── */
/* Style: navy-mid, green underline accent (Option E) */
h3,
body h3,
.entry-content h3,
.elementor-size-medium > .elementor-heading-title,
.elementor-widget-heading h3,
.wpb_wrapper h3,
.elementor-icon-box-title,
.elementor-icon-box-title a {
  font-family:               var(--gh-font-body) !important;
  font-weight:               700 !important;
  color:                     var(--gh-navy-mid) !important;
  line-height:               1.35 !important;
  font-size:                 23px !important;
  text-decoration:           underline !important;
  text-decoration-color:     var(--gh-green) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset:     4px !important;
  margin-bottom:             0.5rem !important;
}

/* ── 6. H4-H6 ────────────────────────────────────────────── */
h4, h5, h6,
body h4, body h5, body h6,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.elementor-size-small > .elementor-heading-title,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.wpb_wrapper h4 {
  font-family:  var(--gh-font-body) !important;
  font-weight:  700 !important;
  color:        var(--gh-navy-mid) !important;
  font-size:    1.2rem !important;
  line-height:  1.4 !important;
}

/* NOTE: No .elementor-heading-title catch-all —
   that would override ALL Elementor heading widgets regardless of size */

/* ── 7. LINKS ────────────────────────────────────────────── */
a,
body a,
.entry-content a,
.wpb_wrapper a,
.elementor-widget-container a {
  color:           var(--gh-green-dark) !important;
  text-decoration: none !important;
  transition:      color 0.2s !important;
}
a:hover,
body a:hover,
.entry-content a:hover {
  color:           var(--gh-green) !important;
  text-decoration: underline !important;
}

/* ── 8. BULLET LISTS ─────────────────────────────────────── */
.entry-content ul,
.page-content ul,
.wpb_text_column ul,
.elementor-text-editor ul {
  padding-left: 0 !important;
  list-style:   none !important;
}
.entry-content ul li,
.page-content ul li,
.wpb_text_column ul li,
.elementor-text-editor ul li {
  position:      relative !important;
  padding-left:  1.5em !important;
  margin-bottom: 0.6em !important;
  color:         var(--gh-slate) !important;
  font-family:   var(--gh-font-body) !important;
}
.entry-content ul li::before,
.page-content ul li::before,
.wpb_text_column ul li::before,
.elementor-text-editor ul li::before {
  content:       '' !important;
  position:      absolute !important;
  left:          0 !important;
  top:           0.55em !important;
  width:         8px !important;
  height:        8px !important;
  border-radius: 50% !important;
  background:    var(--gh-green) !important;
}

/* ── 9. BLOCKQUOTE / CALLOUT ────────────────────────────── */
blockquote,
.entry-content blockquote,
.wp-block-quote {
  background:    var(--gh-green-light) !important;
  border-left:   4px solid var(--gh-green) !important;
  border-radius: 0 12px 12px 0 !important;
  padding:       1.25rem 1.5rem !important;
  margin:        2rem 0 !important;
  color:         var(--gh-navy) !important;
  font-size:     1rem !important;
  font-weight:   500 !important;
  font-style:    normal !important;
}
blockquote p,
.entry-content blockquote p {
  color:     var(--gh-navy) !important;
  font-size: 1rem !important;
  margin:    0 !important;
}

/* ── 10. TABLES ──────────────────────────────────────────── */
.entry-content table,
.page-content table,
.wpb_text_column table {
  width:           100% !important;
  border-collapse: collapse !important;
  margin:          2rem 0 !important;
  font-size:       0.95rem !important;
}
.entry-content table thead th,
.page-content table thead th {
  background:  var(--gh-navy) !important;
  color:       #ffffff !important;
  font-family: var(--gh-font-display) !important;
  font-weight: 700 !important;
  padding:     0.75em 1em !important;
  text-align:  left !important;
}
.entry-content table tbody tr:nth-child(odd) {
  background: var(--gh-bg-soft) !important;
}
.entry-content table tbody td {
  padding:       0.65em 1em !important;
  border-bottom: 1px solid var(--gh-rule) !important;
  color:         var(--gh-slate) !important;
}

/* ── 11. BUTTONS ─────────────────────────────────────────── */
.elementor-button,
.elementor-button-wrapper a,
a.elementor-button,
.wpb_btn,
.vc_btn3,
input[type="submit"],
button[type="submit"],
.wp-block-button__link {
  background:      var(--gh-green) !important;
  color:           #ffffff !important;
  font-family:     var(--gh-font-body) !important;
  font-weight:     600 !important;
  font-size:       1rem !important;
  border-radius:   8px !important;
  border:          none !important;
  padding:         0.75em 1.75em !important;
  letter-spacing:  0.02em !important;
  text-decoration: none !important;
  box-shadow:      0 2px 12px rgba(0,193,124,0.30) !important;
  transition:      background 0.2s, transform 0.15s !important;
}
.elementor-button:hover,
a.elementor-button:hover,
.wp-block-button__link:hover {
  background:  var(--gh-green-dark) !important;
  color:       #ffffff !important;
  transform:   translateY(-1px) !important;
}

/* ── 12. SECTION BACKGROUNDS (alternating) ───────────────── */
.elementor-section:nth-child(even),
.e-con:nth-child(even),
.vc_row:nth-child(even) {
  background-color: var(--gh-bg-soft) !important;
}

/* ── 13. IMAGES ──────────────────────────────────────────── */
.post-thumbnail img,
.wp-post-image,
.entry-content img {
  border-radius: 16px !important;
  box-shadow:    0 2px 20px rgba(0,0,0,0.08) !important;
}

/* ── 14. POST META ───────────────────────────────────────── */
.entry-meta,
.post-meta,
.byline,
.posted-on {
  font-size:  0.85rem !important;
  color:      var(--gh-muted) !important;
  font-style: italic !important;
}

/* ── 15. WIDGET TITLES ───────────────────────────────────── */
.widget-title,
.widgettitle {
  font-family:    var(--gh-font-display) !important;
  font-size:      0.9rem !important;
  font-weight:    800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color:          var(--gh-navy) !important;
  padding-bottom: 0.4em !important;
  border-bottom:  2px solid var(--gh-green) !important;
  margin-bottom:  1em !important;
}

/* ── 16. UTILITY CLASSES ─────────────────────────────────── */
.gh-callout {
  background:    var(--gh-green-light) !important;
  border-left:   4px solid var(--gh-green) !important;
  border-radius: 0 12px 12px 0 !important;
  padding:       1.25rem 1.5rem !important;
  margin:        1.5rem 0 !important;
  color:         var(--gh-navy) !important;
  font-weight:   500 !important;
}

.gh-stat {
  display:        inline-block !important;
  background:     var(--gh-navy) !important;
  color:          var(--gh-green) !important;
  font-family:    var(--gh-font-display) !important;
  font-size:      0.85rem !important;
  font-weight:    700 !important;
  padding:        0.25em 0.8em !important;
  border-radius:  6px !important;
  margin:         0 4px 4px 0 !important;
}

.gh-hi {
  background:    var(--gh-green-light) !important;
  color:         var(--gh-navy) !important;
  border-radius: 3px !important;
  padding:       0.1em 0.3em !important;
  font-weight:   600 !important;
}

/* ── 17. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
  body p,
  .entry-content p {
    font-size: 16px !important;
  }
  h1, body h1 { font-size: 2rem !important; }
  h2, body h2 { font-size: 24px !important; }
  h3, body h3 { font-size: 20px !important; }
}