/*
Theme Name: PPCBud
Theme URI: https://ppcbud.com
Author: PPCBud Agency
Author URI: https://ppcbud.com
Description: Multi-country PPC agency theme. Light navy-and-green brand system with cascade-layered CSS, six service pages, sticky WhatsApp and mobile app bar, and a custom-table location engine for Google Ads and Meta Ads across USA, UK, Canada, Australia and Germany.
Version: 5.5.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Update URI: https://ppcbud.com
Text Domain: ppcbud
Tags: elementor, agency, ppc, marketing, multi-country, light
*/

/* ============================================================
   PPCBud Theme — Core Variables & Base Styles
   These complement Elementor's own styling system.
   Import via Elementor > Custom CSS or Site Settings.
   ============================================================ */

/* ============================================================
   CASCADE LAYERS — declared once, here, before anything else.

   Order is fixed by this line, not by enqueue order. A rule in
   `page` always beats one in `components` even if the file loads
   first, and nothing needs !important to win.
   ============================================================ */
@layer tokens, base, components, sections, page, utility;

@layer tokens {
:root {
  /* ============================================================
     PPCBud design tokens — v4.0
     Light-first, built from the brand kit.

     The kit is a light system: navy ink on white and mist, with green
     as the single accent. The site now matches it rather than carrying
     a dark theme wearing brand colours.

     Green is an ACCENT, never body text: #12C97E on white is 2.17:1.
     It is used for fills, rules, the logo mark and indicators — and
     always with dark ink on top of it.
     ============================================================ */

  /* --- brand ------------------------------------------------- */
  --pb-navy:        #0B2A5B;
  --pb-navy-deep:   #071C3E;
  --pb-navy-soft:   #1B4A8F;
  --pb-navy-wash:   #EAF0F9;

  --pb-brand:       #12C97E;
  --pb-brand-dim:   #0FA866;
  --pb-brand-soft:  #3FDD9A;
  --pb-brand-deep:  #0B7A4B;   /* small green text — #12C97E is 2.2:1 on white */
  --pb-brand-wash:  #E7F9F1;
  --pb-brand-ink:   #04140D;   /* text ON green — dark, never white */

  /* --- light surfaces (default) ------------------------------- */
  --pb-paper:       #FFFFFF;
  --pb-mist:        #F6F8FC;
  --pb-line:        #E3E7EE;
  --pb-line-soft:   #EEF2F8;

  /* --- ink --------------------------------------------------- */
  --pb-ink:         #0E1420;
  --pb-body:        #3B4658;
  --pb-slate:       #5B6B85;
  --pb-faint:       #8792A6;

  /* --- dark bands (used for contrast sections and the footer) -- */
  --pb-dark:        #071022;
  --pb-dark-2:      #0B1A33;
  --pb-dark-line:   #1B2B45;
  --pb-dark-text:   #D7E3F5;
  --pb-dark-muted:  #7C8BA5;

  /* --- status ------------------------------------------------ */
  --pb-red:         #C8283C;
  --pb-amber:       #B0761A;

  /* --- shape ------------------------------------------------- */
  --pb-r-sm:        8px;
  --pb-r:           14px;
  --pb-r-lg:        20px;
  --pb-shadow:      0 1px 2px rgba(11,42,91,.05), 0 8px 24px rgba(11,42,91,.06);
  --pb-shadow-lg:   0 2px 4px rgba(11,42,91,.06), 0 18px 48px rgba(11,42,91,.10);

  /* --- type -------------------------------------------------- */
  /* --- type roles -------------------------------------------
     Display: Archivo. A wide grotesque whose horizontal emphasis
       echoes the three bars in the mark. Used only for headlines.
     Body: Inter. Same family as the wordmark, so the logo and the
       page read as one system.
     Data: IBM Plex Mono. Every number, metric, eyebrow and table
       label. Mono is the vernacular of the ad platforms your
       clients already stare at all day.
     -------------------------------------------------------- */
  --pb-font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --pb-font-head:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --pb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --pb-font-data:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pb-font-mono:    var(--pb-font-data);
  --pb-font-serif:   'Instrument Serif', Georgia, serif;

  /* --- back-compat: old names still resolve ------------------ */
  --pb-black:   var(--pb-dark);
  --pb-card:    var(--pb-paper);
  --pb-card2:   var(--pb-mist);
  --pb-border:  var(--pb-line);
  --pb-text:    var(--pb-body);
  --pb-muted:   var(--pb-slate);
  --pb-white:   var(--pb-paper);
  --pb-lime:    var(--pb-brand);
  --pb-lime-dim: var(--pb-brand-dim);
}

}
/* ^ closes @layer tokens */


/* ============================================================
   LEGACY RULES, NOW LAYERED

   These were unlayered, and unlayered CSS beats every layered
   rule regardless of specificity or order. That single fact is
   why the whole site rendered dark: body.ppcbud-page set a dark
   background from --pb-black, and nothing in brand.css could
   reach it. Values are corrected for the light system too.
   ============================================================ */

@layer base {

  .ppcbud-page *,
  .ppcbud-page *::before,
  .ppcbud-page *::after { box-sizing: border-box; }

  body.ppcbud-page {
    background-color: var(--pb-paper);
    color: var(--pb-body);
    font-family: var(--pb-font-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
  }

  .elementor-page body,
  .elementor-page .site-content { margin: 0; padding: 0; }
}

@layer components {

  /* Elementor widgets, matched to the design system.
     No !important: the layer already guarantees these win over
     Elementor's own defaults without an arms race. */

  .elementor-widget-heading .elementor-heading-title {
    font-family: var(--pb-font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--pb-ink);
  }

  .elementor-widget-text-editor { color: var(--pb-body); }

  .elementor-button {
    font-family: var(--pb-font-display);
    font-weight: 700;
    letter-spacing: 0;
    border-radius: var(--pb-r-sm);
  }

  .elementor-button.pb-btn-primary {
    background-color: var(--pb-navy);
    color: #fff;
    border: none;
    transition: background .15s ease, transform .15s ease;
  }
  .elementor-button.pb-btn-primary:hover {
    background-color: var(--pb-navy-deep);
    transform: translateY(-1px);
  }

  .elementor-button.pb-btn-accent {
    background-color: var(--pb-brand);
    color: var(--pb-brand-ink);
    border: none;
  }
  .elementor-button.pb-btn-accent:hover { background-color: var(--pb-brand-dim); }

  .elementor-button.pb-btn-ghost {
    background-color: transparent;
    color: var(--pb-ink);
    border: 1px solid var(--pb-line);
    transition: border-color .15s ease, color .15s ease;
  }
  .elementor-button.pb-btn-ghost:hover {
    border-color: var(--pb-navy);
    color: var(--pb-navy);
  }

  .elementor-divider-separator { border-color: var(--pb-line); }
}