/* Praise Picker — site header.
   Self-contained and namespaced under .ppnav so it can be dropped onto any page
   (including index.html) without colliding with that page's own styles.
   Tokens fall back to literals if the host page hasn't defined them. */

.ppnav{
  position:sticky;
  top:0;
  z-index:120;
  background:color-mix(in srgb, var(--paper,#F3F0F7) 92%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule,#D4CADF);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .ppnav{background:var(--paper,#F3F0F7)}
}

.ppnav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1080px;
  margin:0 auto;
  padding:14px 20px;
}

/* ---- wordmark ---- */
.ppnav-brand{
  font-family:"Roboto Mono", ui-monospace, SFMono-Regular, monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink,#231634);
  text-decoration:none;
  white-space:nowrap;
  padding:8px 0;
  transition:color .16s ease;
}
.ppnav-brand:hover{color:var(--purple,#6B34B0)}

/* ---- links ---- */
.ppnav-links{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.ppnav-links a{
  font-family:"Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  font-weight:400;
  letter-spacing:-.32px;
  line-height:1;
  color:var(--ink-2,#4E4262);
  text-decoration:none;
  padding:9px 13px;
  border-radius:8px;
  position:relative;
  transition:background-color .16s ease, color .16s ease;
}
.ppnav-links a:hover,
.ppnav-links a:focus-visible{
  background:var(--purple-soft,#EADDF8);
  color:var(--purple,#6B34B0);
}
.ppnav-links a::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:3px;
  height:1.5px;
  border-radius:2px;
  background:var(--purple,#6B34B0);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.ppnav-links a:hover::after{transform:scaleX(1)}
.ppnav-links a[aria-current="page"]{
  color:var(--purple,#6B34B0);
  font-weight:600;
}
.ppnav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* ---- right side ---- */
.ppnav-end{
  display:flex;
  align-items:center;
  gap:6px;
}
.ppnav-tel{
  font-family:"Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  letter-spacing:-.32px;
  color:var(--ink-2,#4E4262);
  text-decoration:none;
  padding:9px 13px;
  border-radius:8px;
  white-space:nowrap;
  transition:background-color .16s ease, color .16s ease;
}
.ppnav-tel:hover,
.ppnav-tel:focus-visible{
  background:var(--purple-soft,#EADDF8);
  color:var(--purple,#6B34B0);
}
.ppnav-btn{
  font-family:"Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.32px;
  line-height:1;
  color:var(--accent-fg,#FFFFFF);
  background:var(--purple,#6B34B0);
  text-decoration:none;
  padding:11px 16px;
  border-radius:10px;
  white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.ppnav-btn:hover,
.ppnav-btn:focus-visible{
  filter:brightness(1.12);
  transform:translateY(-1px);
  box-shadow:0 6px 18px -8px var(--purple,#6B34B0);
}
.ppnav-btn:active{transform:translateY(0)}

.ppnav a:focus-visible{outline:2px solid var(--purple,#6B34B0);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .ppnav a,.ppnav-links a::after{transition:none}
  .ppnav-btn:hover{transform:none}
}

/* ---- responsive ---- */
@media (max-width:960px){
  .ppnav-tel{display:none}
  .ppnav-links a{padding:9px 10px;font-size:15.5px}
  .ppnav-links a::after{left:10px;right:10px}
}
@media (max-width:720px){
  .ppnav-in{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px 12px;
    padding:12px 20px;
  }
  .ppnav-brand{flex:1 1 auto}
  .ppnav-end{order:2}
  .ppnav-links{
    order:3;
    width:100%;
    gap:2px;
    margin-left:-10px;
  }
  .ppnav-links a{font-size:15px;padding:7px 10px}
  .ppnav-btn{padding:9px 14px;font-size:15px}
}


/* ---- logo image (added 2026-09-29) ---- */
.ppnav-brand:has(.ppnav-logo){padding:0;display:inline-flex;align-items:center;line-height:0}
.ppnav-logo{display:block;height:50px;width:auto}
.ppnav-logo--dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ppnav-logo--light{display:none}
  :root:not([data-theme="light"]) .ppnav-logo--dark{display:block}
}
:root[data-theme="dark"] .ppnav-logo--light{display:none}
:root[data-theme="dark"] .ppnav-logo--dark{display:block}
@media (max-width:640px){.ppnav-logo{height:40px}}


/* ---- Services dropdown (added 2026-09-30) ---- */
.ppnav-dd{position:relative;display:flex;align-items:center}
.ppnav-dd > a{padding-right:6px !important}
.ppnav-dd-btn{display:inline-grid;place-items:center;width:26px;height:30px;margin-left:-2px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink-2,#4E4262);cursor:pointer}
.ppnav-dd-btn svg{width:12px;height:12px;transition:transform .18s ease}
.ppnav-dd-btn:hover,.ppnav-dd-btn:focus-visible{background:var(--purple-soft,#EADDF8);color:var(--purple,#6B34B0)}
.ppnav-dd-btn:focus-visible{outline:2px solid var(--purple,#6B34B0);outline-offset:2px}
.ppnav-dd-menu{position:absolute;top:100%;left:0;min-width:290px;padding:8px;margin-top:6px;background:var(--card,#FBFAFD);border:1px solid var(--rule,#D4CADF);border-radius:12px;box-shadow:0 18px 40px -18px rgba(35,22,52,.45);display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;z-index:130}
.ppnav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ppnav-dd:hover .ppnav-dd-menu,.ppnav-dd:focus-within .ppnav-dd-menu,.ppnav-dd.open .ppnav-dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease}
.ppnav-dd:hover .ppnav-dd-btn svg,.ppnav-dd.open .ppnav-dd-btn svg{transform:rotate(180deg)}
.ppnav-links .ppnav-dd-menu a{display:block;padding:10px 12px;border-radius:8px;line-height:1.25;font-size:15.5px;font-weight:600;color:var(--ink,#231634)}
.ppnav-links .ppnav-dd-menu a::after{display:none}
.ppnav-links .ppnav-dd-menu a small{display:block;margin-top:3px;font-size:13.5px;font-weight:400;letter-spacing:0;color:var(--ink-3,#7C7389)}
.ppnav-links .ppnav-dd-menu a:hover,.ppnav-links .ppnav-dd-menu a:focus-visible,.ppnav-links .ppnav-dd-menu a[aria-current="page"]{background:var(--purple-soft,#EADDF8);color:var(--purple,#6B34B0)}
.ppnav-links .ppnav-dd-menu a.ppnav-dd-all{border-top:1px solid var(--rule-soft,#E7E1EE);border-radius:0 0 8px 8px;margin-top:4px;padding-top:12px;font-weight:400;color:var(--purple,#6B34B0)}
#reputation-engine,#ai-chat-bot,#ai-receptionist{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){.ppnav-dd-menu,.ppnav-dd-btn svg{transition:none}}
@media (hover:none){.ppnav-dd:hover .ppnav-dd-menu{opacity:0;visibility:hidden}.ppnav-dd.open .ppnav-dd-menu,.ppnav-dd:focus-within .ppnav-dd-menu{opacity:1;visibility:visible}}
@media (max-width:720px){.ppnav-dd-menu{min-width:260px;left:-4px}}