/* ============================================
   HEADER — RJ Plumbing & Backflow Services

   Per-button color overrides for the action pair
   in the site header so they match the brand
   reference: solid navy "Call Now" + solid red
   "Free Estimate". The parent theme's
   `.site-header__call` / `.site-header__cta`
   rules (in `main.css`) supply layout, padding,
   typography, and radii — only colors are
   overridden here.

   The desktop nav is capped at depth 2 by
   `main-nav.php` (`'depth' => 2` on the
   `wp_nav_menu()` call), so level-3 submenus
   are never rendered in the DOM. There are no
   toggle buttons, no flyouts, and no extra JS
   to wire up — just the parent's hover-driven
   mega-menu at level 1 + level 2.
   ============================================ */

/* "Call Now" — solid navy with white text.
   The parent default styles this as an outlined
   primary-color pill; we want a filled pill that
   matches the screenshot. */
.site-header__call {
    background: var(--color-navy-700);
    color: var(--color-white) !important;
    border-color: var(--color-navy-700);
}

.site-header__call:hover,
.site-header__call:focus-visible {
    background: var(--color-navy-800);
    color: var(--color-white) !important;
    border-color: var(--color-navy-800);
}

/* "Free Estimate" — solid brand red with white
   text. The parent default maps this to
   `var(--color-secondary)` (dark gray); we
   override to the brand's `--color-red-600`. */
.site-header__cta {
    background: var(--color-red-600);
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
    background: var(--color-red-500);
}

/* The phone number appended inside the "Call Now"
   pill should read as secondary text (slightly
   lighter weight + thinner spacing) so the label
   remains the dominant element. */
.site-header__call-number {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
}