/*
 * ProductionVibes — accessibility & contrast fixes
 *
 * Companion to pv-motion.css. Where that file only adds motion, this one
 * corrects measured WCAG failures. Every value here was chosen to be the
 * smallest change that clears AA, so the brand look survives.
 *
 * Measured before:  #0072B9 on #EEDFD4 = 3.93:1  (AA body needs 4.5:1)
 *                   nav rgba(255,255,255,.5) on #0072B9 = 2.41:1 (fails even large)
 *                   outline-style: none on every focusable element
 */

/* ─────────────────────────────────────────────────────────────
   1. BODY COPY CONTRAST
   #0072B9 -> #00639F on the beige field.
   Computed ratio 4.86:1 — clears AA with margin, and is a small enough
   hue shift that it reads as the same brand blue.
   Headings are left alone: at 24px+ they already pass large-text AA at
   3.93:1, and changing them would visibly alter the design.
   ───────────────────────────────────────────────────────────── */

.pv-fixes .pxl-text-editor,
.pv-fixes .pxl-text-editor p,
.pv-fixes .pxl-item--text,
.pv-fixes .pxl-sub-text,
.pv-fixes .elementor-widget-text-editor,
.pv-fixes .elementor-widget-text-editor p,
.pv-fixes .elementor-counter-title {
  color: #00639f;
}

/* The footer inverts the field: beige text on the #0072B9 blue, measured at
   3.93:1 — the same failure as the body copy, in the opposite direction.
   Lifting it to 0.94 white gives 4.77:1 while staying softer than the
   headings and links, so the footer keeps its hierarchy.
   This block must follow the rule above, since footer text nodes share the
   same classes as body text nodes. */
.pv-fixes footer .pxl-text-editor,
.pv-fixes footer .pxl-text-editor p,
.pv-fixes footer .pxl-item--text,
.pv-fixes footer .pxl-sub-text,
.pv-fixes footer .elementor-widget-text-editor,
.pv-fixes footer .elementor-widget-text-editor p,
.pv-fixes footer address,
.pv-fixes footer li {
  /* !important is load-bearing here. Elementor emits a per-element rule,
     `.elementor-11017 .elementor-element.elementor-element-e24384e
     .pxl-text-editor`, at specificity 0,4,0 — higher than anything a
     sane plugin selector can reach. Scoped deliberately narrow: only
     inside <footer>, only on text nodes, only where the blue field is
     the measured background. */
  color: rgba(255, 255, 255, 0.94) !important;
}

/* Inline links inside body copy need to stay distinguishable from the
   surrounding text now that both are blue — underline them. */
.pv-fixes .pxl-text-editor a:not(.btn),
.pv-fixes .elementor-widget-text-editor a:not(.btn) {
  color: #00537f;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* ─────────────────────────────────────────────────────────────
   2. NAVIGATION CONTRAST
   Inactive items were half-transparent white on blue = 2.41:1.
   0.92 alpha composites to ~4.63:1 while keeping the active item
   visibly brighter than its siblings.
   ───────────────────────────────────────────────────────────── */

.pv-fixes header nav a,
.pv-fixes .pxl-header a,
.pv-fixes header .menu-item > a {
  color: rgba(255, 255, 255, 0.92);
}

.pv-fixes header .menu-item.current-menu-item > a,
.pv-fixes header .menu-item.current_page_item > a {
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   3. FOCUS VISIBILITY
   The theme sets outline-style: none globally. Keyboard users currently
   have no idea where they are. Restore a ring that belongs to the palette
   rather than the browser default.
   ───────────────────────────────────────────────────────────── */

.pv-fixes a:focus-visible,
.pv-fixes button:focus-visible,
.pv-fixes [role="button"]:focus-visible,
.pv-fixes input:focus-visible,
.pv-fixes textarea:focus-visible,
.pv-fixes select:focus-visible,
.pv-fixes .btn:focus-visible,
.pv-fixes .pv-menu-btn:focus-visible {
  outline: 2px solid #004a7a !important;
  outline-offset: 3px;
  border-radius: 3px;
}

/* On the blue footer and header the navy ring disappears — flip it there. */
.pv-fixes header a:focus-visible,
.pv-fixes footer a:focus-visible,
.pv-fixes .pv-menu-btn:focus-visible {
  outline-color: #ffffff !important;
}

/* Skip link: visually hidden until focused, then pinned top-left. */
.pv-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #004a7a;
  color: #fff;
  font: 600 16px/1.2 system-ui, sans-serif;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}

.pv-skip-link:focus {
  left: 0;
}

/* ─────────────────────────────────────────────────────────────
   4. TAP TARGETS
   15 of 21 interactive elements measured under 44x44 at 390px.
   Padding rather than height, so nothing reflows on desktop.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .pv-fixes footer a,
  .pv-fixes footer .menu-item > a {
    display: inline-block;
    padding-block: 9px;
    min-height: 44px;
    line-height: 26px;
  }

  .pv-fixes .pxl-socials a,
  .pv-fixes footer .social a,
  .pv-fixes a[href^="tel:"],
  .pv-fixes a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────
   5. STICKY-HEADER OVERLAP
   Anchor arrivals and upward scroll put section headings under the
   130px opaque header.
   ───────────────────────────────────────────────────────────── */

.pv-fixes .pxl-item--title,
.pv-fixes h1, .pv-fixes h2, .pv-fixes h3 {
  scroll-margin-top: 145px;
}

/* ─────────────────────────────────────────────────────────────
   6. GLOBAL SMOOTH SCROLL GUARD
   The theme sets scroll-behavior:smooth on <html> with no reduced-motion
   escape, which animates every 6,900px jump.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html.pv-fixes {
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. CTA REPAIR
   The final CTA band contains no link or button. pv-fixes.js injects one;
   this styles it to match the existing .btn-style-1 pill.
   ───────────────────────────────────────────────────────────── */

.pv-cta-repair {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 18px 38px;
  border-radius: 999px;
  background: #0072b9;
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* These hover rules were dead: style-cta.php writes background and color as
   INLINE styles on the anchors (specificity 1,0,0,0), which beat any selector
   here, in every state including :hover. So the CTAs had no hover feedback at
   all. `!important` is the only way a stylesheet can reach past an inline
   style, and it is used deliberately for exactly that reason.
   Palette updated 2026-09-04: yellow is out of the brand, so these return to
   white-on-blue (5.18:1) and darken to #00639F on hover. NOTE the inline lime
   is being stripped from post 11017 in the same change — once it is gone the
   base rule at :191 stops being dead code. */
.pv-cta-repair:hover,
.pv-cta-repair:focus-visible {
  background: #00639F !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.pv-cta-repair + .pv-cta-repair {
  margin-left: 14px;
  background: transparent;
  color: #0a0e1a;
  box-shadow: inset 0 0 0 2px currentColor;
}

.pv-cta-repair + .pv-cta-repair:hover,
.pv-cta-repair + .pv-cta-repair:focus-visible {
  background: rgba(10, 14, 26, 0.07) !important;
  color: #0a0e1a !important;
}

@media (prefers-reduced-motion: reduce) {
  .pv-cta-repair { transition: background-color 160ms linear; }
  .pv-cta-repair:hover,
  .pv-cta-repair:focus-visible { transform: none; }
}