/*
Theme Name: BacklinkB Child
Theme URI: https://backlinkb.com/
Description: Child theme for BacklinkB — custom CSS polish, CTA styling, and ad-tracking hooks. Built for the listicle link building landing page and the agency redesign.
Author: BacklinkB
Template: hello-elementor
Version: 1.0.0
*/

/*
  IMPORTANT: set "Template:" above to your ACTIVE parent theme's folder name.
  Most Elementor sites use "hello-elementor". If yours differs (e.g. "astra",
  "generatepress", "ocean"), change it — the child theme won't activate otherwise.
  Find it in wp-content/themes/  (the folder of your current theme).
*/

/* ============================================================
   Brand tokens (mirror your Elementor Global Colors)
   ============================================================ */
:root {
  --bb-navy:    #0E1A2B;
  --bb-emerald: #12B886;
  --bb-blue:    #2563EB;
  --bb-bg:      #F8FAFC;
  --bb-text:    #1E293B;
  --bb-muted:   #64748B;
}

/* ============================================================
   CTA / button polish (applies to Elementor buttons + forms)
   ============================================================ */
.elementor-button,
.elementor-field-type-submit button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  font-weight: 600;
  letter-spacing: .2px;
}
.elementor-button:hover,
.elementor-field-type-submit button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(18, 184, 134, .28);
}

/* Primary emerald CTA helper — add CSS class "bb-cta" to a button to force brand style */
.bb-cta .elementor-button,
.elementor-button.bb-cta {
  background-color: var(--bb-emerald);
  color: #fff;
  border-radius: 10px;
}

/* ============================================================
   Section rhythm / whitespace
   ============================================================ */
.bb-section { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 767px) {
  .bb-section { padding-top: 40px; padding-bottom: 40px; }
}

/* Card style for benefit / pricing boxes — add class "bb-card" */
.bb-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 26, 43, .04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15, 26, 43, .10);
}

/* Highlighted "most popular" pricing column — add class "bb-card-featured" */
.bb-card-featured {
  border: 2px solid var(--bb-emerald);
  box-shadow: 0 12px 34px rgba(18, 184, 134, .18);
}

/* ============================================================
   Mobile sticky CTA bar (landing page) — markup added via functions.php
   ============================================================ */
.bb-sticky-cta { display: none; }
@media (max-width: 767px) {
  body.bb-landing .bb-sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: var(--bb-navy);
    padding: 10px 14px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  }
  body.bb-landing .bb-sticky-cta a {
    display: block;
    text-align: center;
    background: var(--bb-emerald);
    color: #fff;
    font-weight: 700;
    padding: 14px;
    border-radius: 10px;
    text-decoration: none;
  }
  /* keep content clear of the bar */
  body.bb-landing { padding-bottom: 76px; }
}