/* ==========================================================================
   jpc-refresh.css — Jessica Pickles Coaching · refresh & fixes (Oct 2026)
   Single override layer, loaded after all Nuxt CSS in every page.
   Covers: tighter spacing · premium polish · all motion removed (hover kept)
   ghost-text removal · orbit rings removed · mobile hardening · nav cleanup
   ========================================================================== */

/* ---------- 1. Tighter vertical rhythm ---------- */
:root{
  --section-y: clamp(2.75rem, 5vw, 4.75rem);
}
.hero{
  padding-block: clamp(2rem, 4vw, 3.25rem) var(--section-y);
}
/* Collapse the named airy gaps */
.exits{ padding-top: 0; }

/* ---------- 2. Global accent for key phrases in headings ---------- */
.accent{
  color: var(--raspberry);
  font-style: italic;
  font-weight: 400;
}

/* ---------- 3. Remove ghost / shadow text layers ---------- */
.ghost-type::before,
.shed3d::before{
  content: none !important;
  display: none !important;
}

/* ---------- 4. Remove orbit rings bisecting the photo ---------- */
.orbit::before,
.orbit::after{
  display: none !important;
}

/* ---------- 5. Freeze ambient auto-motion (static decor) ---------- */
.orb{ animation: none !important; }

/* ---------- 6. Kill auto image motion · keep smooth hover movement ---------- */
.parallax{ transform: none !important; }
.tilt{
  transform: none !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
}
.tilt:hover{
  transform: translateY(-6px) !important;
}
a.tilt:hover, .card.tilt:hover{
  box-shadow: 0 24px 48px -28px #1d2b4f6b, 0 4px 12px -6px #1d2b4f2e;
}

/* ---------- 7. Remove all text / scroll animations ---------- */
.stagger-word,
.rise3d, .rise3d-l, .rise3d-r{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.cascade > *,
.wipe{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.drawer.open a{ animation: none !important; }
.magnet{ transform: none !important; }
.glow-scene::before{ display: none !important; }
.head-progress{ display: none; } /* scroll progress bar: motion decor */

/* ---------- 8. Nav — calm, static active state ---------- */
.nav-label, .nav-label::after{ transition: none !important; }
.nav a.router-link-active .nav-label,
.nav a.router-link-active .nav-label::after{ transform: none !important; }
.nav a.router-link-active{ color: var(--raspberry); }
.nav a.router-link-active::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- 9. Shifts — readable left column ---------- */
.shift-from{
  opacity: 1 !important;
  color: #454556;
  font-weight: 500;
}

/* ---------- 10. Mobile hardening ---------- */
html, body{ overflow-x: clip; }
img, picture, video{ max-width: 100%; height: auto; }
/* Drawer sits above page content but below the sticky header controls */
.drawer{ z-index: 120; }
.site-head{ z-index: 130; }
@media (max-width: 940px){
  .hero-grid{ gap: 2rem; }
  .btn-row{ display: flex; flex-wrap: wrap; gap: .8rem; }
  .btn-row .btn{ flex: 1 1 auto; text-align: center; }
  /* FIX: .site-head's backdrop-filter makes it a containing block for fixed
     descendants, trapping the drawer inside the header box (drawer collapsed
     to header height so links were invisible, and it buried the burger so the
     menu couldn't be closed). Drop the filter on mobile so the drawer covers
     the viewport again. */
  .site-head{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff8f2 !important;
  }
  /* Keep the burger (now an X) tappable above the open drawer */
  .burger{ position: relative; z-index: 130; }
}

/* ---------- 11. Premium polish ---------- */
/* Buttons: one calm system */
.btn{
  border-radius: 999px;
  letter-spacing: .01em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  box-shadow: 0 14px 30px -18px #b8327299;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -18px #b83272aa;
}
.btn-ghost:hover{
  transform: translateY(-2px);
}
/* Cards: softer, quieter */
.card, .mcard{
  border-radius: 20px;
}
/* Eyebrow labels: a touch more refined */
.eyebrow{
  letter-spacing: .22em;
}
/* Footer breathing room */
.site-foot{ padding-bottom: 2.5rem; }
/* Social row (added to Motivated By Pickles + Contact) */
.social-row{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.social-row a,
.social-row .social-item{
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--navy);
  display: inline-flex;
  gap: .55rem;
  font-size: .92rem;
  font-weight: 600;
  padding: .6rem .95rem;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.social-row .social-item{ cursor: default; opacity: .75; }
.social-row a:hover{
  background: var(--navy);
  color: var(--cream);
  transform: translateY(-2px);
}
.social-row svg{ display: block; height: 18px; width: 18px; }
.section-navy .social-row a,
.section-navy .social-row .social-item{
  border-color: rgba(255,248,242,.22);
  color: var(--cream);
}
.section-navy .social-row a:hover{
  background: var(--apricot);
  color: var(--navy);
}
/* Selection + focus */
::selection{ background: var(--apricot); color: var(--navy); }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--raspberry);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Reduced motion: already handled upstream; keep hard guarantee */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 12. Mobile drawer: left slide-in panel ---------- */
@media (max-width: 940px){
  .drawer{
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: min(330px, 86vw);
    height: auto;
    max-height: 100dvh;
    overflow-y: auto;
    padding: 1rem 1.35rem 1.6rem;
    border-radius: 0 26px 26px 0;
    box-shadow: 30px 0 60px -28px rgba(60,20,40,.45);
    transform: translateX(-106%);
    z-index: 140;
  }
  .drawer.open{ transform: translateX(0); }
  .drawer-in{
    flex: 1;
    min-height: 100%;
  }
  /* Close button: sticky top-right of the panel so it never scrolls away */
  .drawer-top{
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    margin: -.35rem -1.35rem .4rem;
    padding: .35rem 1.35rem;
    background: var(--cream);
  }
  .drawer-close{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: #fffdf9;
    color: var(--navy);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .drawer-close:hover{
    background: var(--raspberry);
    border-color: var(--raspberry);
    color: #fff;
  }
  .drawer-close:active{ transform: scale(.93); }
  .drawer-close svg{ width: 18px; height: 18px; }
  /* Compact, elegant links */
  .drawer-in > a:not(.btn){
    display: flex;
    align-items: baseline;
    gap: .9rem;
    font-size: 1.22rem;
    font-weight: 500;
    letter-spacing: -.01em;
    padding-block: .8rem;
    padding-right: 1.6rem;
    position: relative;
    transition: color .25s ease, padding-left .25s ease;
  }
  .drawer-in > a:not(.btn):hover,
  .drawer-in > a:not(.btn):focus-visible{
    color: var(--raspberry);
    padding-left: .4rem;
  }
  .drawer-in > a:not(.btn)::after{
    content: "\2192";
    position: absolute;
    right: .1rem;
    top: 50%;
    transform: translate(-8px, -50%);
    opacity: 0;
    color: var(--raspberry);
    transition: opacity .25s ease, transform .25s ease;
  }
  .drawer-in > a:not(.btn):hover::after{ opacity: 1; transform: translate(0, -50%); }
  .drawer-num{
    font-family: var(--body);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--raspberry);
  }
  .drawer-in > a.router-link-active{ color: var(--raspberry); }
  /* Bold CTA pinned to the panel bottom */
  .drawer .btn.drawer-cta{
    font-weight: 800;
    font-size: 1.02rem;
    color: #fff;
    letter-spacing: .015em;
    padding: 1.05rem 1rem;
    margin-top: auto;
    width: 100%;
  }
  /* Dimmed backdrop over the rest of the page */
  .drawer-scrim{
    position: fixed;
    inset: 0;
    background: rgba(24,10,16,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s;
    z-index: 135;
  }
  .drawer-scrim.on{ opacity: 1; visibility: visible; }
}

/* ---------- 13. Contact page: info column left, form right (desktop only) ---------- */
/* NOTE: the two-column template must stay inside the desktop media query —
   the component collapses to a single column at <=900px, and a global
   !important here would permanently defeat that mobile stack (Oct 8 2026). */
@media (min-width: 901px){
  .contact-grid{ grid-template-columns: .85fr 1.15fr !important; }
}
.contact-grid > :first-child{ order: 2; }
.contact-grid > :nth-child(2){ order: 1; }

/* Screen-reader-only utility (used for icon button labels) */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- 13. Footer social icons (always visible) ---------- */
.foot-social-cms{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
}
.foot-social-cms a,
.foot-social-cms .foot-social-ph{
  background: #fff8f212;
  border: 1px solid rgba(255,248,242,.14);
  border-radius: 10px;
  color: #fff8f2b8;
  display: inline-grid;
  place-items: center;
  height: 38px;
  width: 38px;
  transition: color .25s ease, background .25s ease, transform .25s ease, border-color .25s ease, opacity .25s ease;
}
.foot-social-cms .foot-social-ph{ opacity: .55; cursor: default; }
.foot-social-cms a:hover{
  background: var(--apricot);
  border-color: var(--apricot);
  color: var(--navy);
  transform: translateY(-2px);
}
.foot-social-cms svg{ display: block; height: 18px; width: 18px; }

/* ---------- 15. Image hover effects ---------- */
.frame3d .photo img{
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.frame3d:hover .photo img,
.frame3d:focus-within .photo img{
  transform: scale(1.05);
}
.frame3d{
  transition: box-shadow .45s ease;
}
.frame3d:hover{
  box-shadow: 0 24px 48px -24px rgba(60,20,40,.35);
}
@media (prefers-reduced-motion: reduce){
  .frame3d .photo img,
  .frame3d{ transition: none; }
  .frame3d:hover .photo img{ transform: none; }
}

/* ---------- 16. Contact "Elsewhere": single icon row, like the footer ---------- */
.fact .social-row{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fact .social-row li{ margin: 0; padding: 0; }
.fact .social-row a,
.fact .social-row .social-item{
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(23,31,74,.16);
  color: var(--navy);
  cursor: pointer;
  position: relative;
  transition: color .4s ease, background .4s ease, transform .4s ease, border-color .4s ease;
}
.fact .social-row .social-item{ cursor: default; }
.fact .social-row a:hover{
  background: var(--raspberry);
  border-color: var(--raspberry);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -10px rgba(178,34,88,.55);
}
.fact .social-row .social-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -12px rgba(23,31,74,.35);
}
.fact .social-row svg{ display: block; width: 20px; height: 20px; }
/* playful icon pop on hover */
@keyframes jpc-icon-pop{
  0%{ transform: scale(1) rotate(0deg); }
  40%{ transform: scale(1.28) rotate(-10deg); }
  70%{ transform: scale(1.12) rotate(7deg); }
  100%{ transform: scale(1.18) rotate(0deg); }
}
.fact .social-row a:hover svg,
.fact .social-row .social-item:hover svg{
  animation: jpc-icon-pop .8s ease;
}
@media (prefers-reduced-motion: reduce){
  .fact .social-row a:hover svg,
  .fact .social-row .social-item:hover svg{ animation: none; }
  .fact .social-row a:hover,
  .fact .social-row .social-item:hover{ transform: none; }
}
/* icon-only buttons: hide text labels visually, keep them for screen readers */
.fact .social-row a span,
.fact .social-row .social-item span{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- 17. Contact: Elsewhere moved under the form (balances columns) ---------- */
.fact-below-form{ margin-top: 1.9rem; }

/* ---------- 18. Global hover animations: footer icons + all buttons ---------- */
/* Footer social icons: same playful pop as the Elsewhere icons */
.foot-social-cms a:hover svg,
.foot-social-cms .foot-social-ph:hover svg{
  animation: jpc-icon-pop .8s ease;
}
/* Buttons everywhere: springy lift on hover, gentle press on click */
.btn{
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease, background .45s ease, color .45s ease;
}
.btn:hover{
  transform: translateY(-2px) scale(1.03);
}
.btn:active{
  transform: translateY(0) scale(.98);
  transition-duration: .1s;
}
/* Primary buttons: light sheen sweeps across on hover */
.btn-primary{
  position: relative;
  overflow: hidden;
}
.btn-primary::after{
  content: "";
  position: absolute;
  top: 0;
  left: -90%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn-primary:hover::after{
  left: 140%;
  transition: left 1.1s ease;
}
@media (prefers-reduced-motion: reduce){
  .foot-social-cms a:hover svg,
  .foot-social-cms .foot-social-ph:hover svg{ animation: none; }
  .btn:hover{ transform: none; }
  .btn-primary:hover::after{ left: -90%; }
}

/* Mobile drawer menu: links glide in one after another when the menu opens */
@keyframes jpc-menu-in{
  from{ opacity: 0; transform: translateY(26px); }
  to{ opacity: 1; transform: translateY(0); }
}
.drawer.open .drawer-in > a{
  animation: jpc-menu-in .8s cubic-bezier(.22,.61,.36,1) both !important;
}
.drawer.open .drawer-in > a:nth-of-type(2){ animation-delay: .09s !important; }
.drawer.open .drawer-in > a:nth-of-type(3){ animation-delay: .18s !important; }
.drawer.open .drawer-in > a:nth-of-type(4){ animation-delay: .27s !important; }
.drawer.open .drawer-in > a:nth-of-type(5){ animation-delay: .36s !important; }
.drawer.open .drawer-in > a:nth-of-type(6){ animation-delay: .45s !important; }
.drawer.open .drawer-in > a:nth-of-type(7){ animation-delay: .54s !important; }
.drawer.open .drawer-top{
  animation: jpc-menu-in .8s cubic-bezier(.22,.61,.36,1) both !important;
}
@media (prefers-reduced-motion: reduce){
  .drawer.open .drawer-in > a,
  .drawer.open .drawer-top{ animation: none !important; }
}

/* ---------- 19. Desktop nav: slow staggered entrance + graceful hover ---------- */
@keyframes jpc-nav-in{
  from{ opacity: 0; transform: translateY(-16px); }
  to{ opacity: 1; transform: translateY(0); }
}
.nav > li{
  animation: jpc-nav-in 1s cubic-bezier(.22,.61,.36,1) both;
}
.nav > li:nth-child(2){ animation-delay: .09s; }
.nav > li:nth-child(3){ animation-delay: .18s; }
.nav > li:nth-child(4){ animation-delay: .27s; }
.nav > li:nth-child(5){ animation-delay: .36s; }
.nav > li:nth-child(6){ animation-delay: .45s; }
.nav > li:nth-child(7){ animation-delay: .54s; }
/* slow underline sweep + color shift on hover (overrides the motion-kill in §8) */
.nav a .nav-label{
  transition: color 1s ease !important;
}
.nav a .nav-label::after{
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1) !important;
}
.nav a:hover .nav-label{
  color: var(--raspberry);
}
.nav a:hover .nav-label::after{
  transform: scaleX(1) !important;
  transform-origin: left !important;
}
@media (prefers-reduced-motion: reduce){
  .nav > li{ animation: none; }
  .nav a .nav-label,
  .nav a .nav-label::after{ transition: none !important; }
}

/* §20 — legal page tables (retention schedule on Privacy Notice) */
.legal-table{border-collapse:collapse;font-size:.95em;margin:1.4em 0 1.6em;width:100%;}
.legal-table th{background:var(--navy);color:var(--cream);font-weight:600;padding:.7rem .9rem;text-align:left;}
.legal-table td{border-bottom:1px solid var(--rule);padding:.7rem .9rem;vertical-align:top;}
.legal-table tr:nth-child(even) td{background:rgba(29,43,79,.04);}
@media(max-width:640px){
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:100%;}
  .legal-table thead{display:none;}
  .legal-table td{border-bottom:1px solid var(--rule);padding:.5rem 0;}
  .legal-table td:first-child{font-weight:600;}
}

/* §20b — sensitive-information warning below the contact form message field */
.field-warning-jpc{color:var(--plum);font-size:.85em;line-height:1.5;margin:.6rem 0 0;opacity:.85;}