/**
 * White House notification opt-in prompt.
 *
 * A first-party soft prompt that mirrors the OneSignal slidedown (icon · text ·
 * actions). It loads no OneSignal code until the visitor clicks Subscribe.
 * Fonts (Instrument Sans) and color tokens come from the theme, so nothing is
 * re-declared here.
 */

.wh-osp{
  position:fixed;bottom:20px;right:20px;top:auto;left:auto;
  width:min(500px, calc(100vw - 40px));
  display:flex;align-items:center;gap:16px;
  background:var(--wp--preset--color--white, #fff);
  color:var(--wp--preset--color--charcoal, #293340);
  border:1px solid rgba(41,51,64,.08);
  box-shadow:0 24px 60px -18px rgba(7,11,22,.55), 0 4px 10px rgba(7,11,22,.16);
  padding:20px 22px;
  font-family:"Instrument Sans", sans-serif;
  z-index:2147483647;
}
.wh-osp::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--wp--preset--color--navy-accent, #141F4D);
  transform:scaleX(0);transform-origin:left center;
}

.wh-osp__media{flex:0 0 auto;width:80px;display:flex;align-items:center;justify-content:center}
.wh-osp__media img{width:100%;height:auto;display:block;transform-origin:50% 16%}

.wh-osp__content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:14px}
.wh-osp__body{margin:0;padding-right:22px;font-size:.95rem;line-height:1.55;letter-spacing:.2px;color:#3c4656}

.wh-osp__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.wh-osp__btn{
  font-family:"Instrument Sans", sans-serif;font-weight:600;font-size:.78rem;line-height:1;
  letter-spacing:.84px;text-transform:uppercase;
  padding:12px 18px;border:2px solid var(--wp--preset--color--pale-gray, #D9DEE8);
  border-radius:0;cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.wh-osp__btn:focus-visible{outline:2px solid var(--wp--preset--color--vivid-cyan, #0DCBFF);outline-offset:2px}
.wh-osp__btn--ghost{background:transparent;color:var(--wp--preset--color--charcoal, #293340);border-color:transparent}
.wh-osp__btn--ghost:hover{background:var(--wp--preset--color--light-gray, #F3F3F3)}
.wh-osp__btn--primary{
  background:var(--wp--preset--color--navy-accent, #141F4D);
  border-color:var(--wp--preset--color--navy-accent, #141F4D);color:#fff;
}
.wh-osp__btn--primary:hover{
  background:var(--wp--preset--color--deep-navy-blue, #0D132D);
  border-color:var(--wp--preset--color--deep-navy-blue, #0D132D);
}
.wh-osp__btn:active{transform:translateY(1px)}

.wh-osp__close{
  position:absolute;top:6px;right:6px;width:26px;height:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:none;border:0;cursor:pointer;color:var(--wp--preset--color--gray, #8A8A8A);
  transition:color .15s ease;
}
.wh-osp__close:hover{color:var(--wp--preset--color--charcoal, #293340)}
.wh-osp__close:focus-visible{outline:2px solid var(--wp--preset--color--vivid-cyan, #0DCBFF);outline-offset:2px}

/* ---- mobile: full-width bottom sheet ---- */
@media (max-width:480px){
  .wh-osp{
    top:auto;bottom:0;left:0;right:0;width:100%;transform:none;gap:14px;
    padding:18px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .wh-osp__media{width:62px}
  .wh-osp__body{font-size:.9rem}
  .wh-osp__actions{justify-content:stretch}
  .wh-osp__btn{flex:1 1 0;padding:12px 10px}
}
@media (max-width:340px){
  .wh-osp{gap:12px}
  .wh-osp__media{width:52px}
}

/* ---- motion ---- */
.wh-osp.is-in{animation:wh-osp-card .5s cubic-bezier(.16,1,.3,1) both}
.wh-osp.is-in::before{animation:wh-osp-rule .55s cubic-bezier(.16,1,.3,1) .10s both}
.wh-osp.is-in .wh-osp__media{animation:wh-osp-pop .55s cubic-bezier(.16,1,.3,1) .12s both}
.wh-osp.is-in .wh-osp__media img{animation:wh-osp-ring 1.15s ease .5s 1}
.wh-osp.is-in .wh-osp__body{animation:wh-osp-rise .5s cubic-bezier(.16,1,.3,1) .20s both}
.wh-osp.is-in .wh-osp__actions{animation:wh-osp-rise .5s cubic-bezier(.16,1,.3,1) .28s both}

@keyframes wh-osp-card{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes wh-osp-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes wh-osp-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes wh-osp-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wh-osp-ring{
  0%{transform:rotate(0)}
  11%{transform:rotate(6.5deg)}
  25%{transform:rotate(-5.5deg)}
  39%{transform:rotate(3.8deg)}
  53%{transform:rotate(-2.4deg)}
  67%{transform:rotate(1.4deg)}
  81%{transform:rotate(-.6deg)}
  100%{transform:rotate(0)}
}
@media (max-width:480px){
  .wh-osp.is-in{animation:wh-osp-sheet .45s cubic-bezier(.16,1,.3,1) both}
}
@keyframes wh-osp-sheet{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .wh-osp.is-in,.wh-osp.is-in *{animation:none!important}
}