/* Patron Saint Finder — scoped styles ported from the design's helmet <style> block
   ("Patron Saint Tool.dc.html"). Layout lives in inline styles on the rendered
   markup, same as /baby-names; this file carries only what a style attribute
   cannot express (fonts, pseudo-elements, keyframes, print rules). */
.ps-sans{ font-family:'Plus Jakarta Sans', sans-serif; }
.ps-serif{ font-family:'EB Garamond', Georgia, serif; }
#ps-root a{ color:#B0473C; text-decoration:none; }
#ps-root a:hover{ color:#97382E; }
#ps-root input, #ps-root button{ font-family:'Plus Jakarta Sans', sans-serif; }
#ps-root input:focus{ outline:none; border-color:#B0473C !important; }
#ps-root ::placeholder{ color:#b3aa9c; }

/* /patron-saint sits on a light background (no dark hero), so the fixed site
   header must always use the solid, dark-text treatment rather than the
   cream-on-hero default that only kicks in on scroll. Matches baby-names.css. */
main#top{ padding-top:76px; }
.site-header:not(.scrolled){
  color:var(--color-text-primary);
  background:rgba(250,247,242,0.85);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--color-border);
}

/* The quiz and the matching interstitial are full-screen takeovers — the site
   chrome would fight the "one question at a time" calm the design asks for. */
body.ps-immersive .site-header,
body.ps-immersive .footer,
body.ps-immersive .mobile-menu{ display:none !important; }
body.ps-immersive main#top{ padding-top:0; }

#ps-root button:focus-visible,
#ps-root a:focus-visible{ outline:2px solid #B0473C; outline-offset:3px; border-radius:6px; }

@keyframes psFade{ from{opacity:0} to{opacity:1} }
@keyframes psRise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@keyframes psBreathe{ 0%,100%{ opacity:0.35; transform:scale(0.94) } 50%{ opacity:0.9; transform:scale(1.06) } }
@keyframes psHalo{ 0%,100%{ opacity:0.25; transform:scale(1) } 50%{ opacity:0.55; transform:scale(1.14) } }

/* Respect a reduced-motion preference: the breathing halo on the matching
   screen is decorative, and the rise/fade transitions are not load-bearing. */
@media (prefers-reduced-motion: reduce){
  #ps-root *, #ps-root *::before, #ps-root *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* Printable holy card. Everything but the card itself is dropped, and the card
   is pinned to the top of a single sheet. */
@media print{
  .ps-noprint{ display:none !important; }
  .site-header, .footer, .mobile-menu{ display:none !important; }
  body{ background:#FFFFFF !important; }
  main#top{ padding-top:0 !important; }
  #ps-card-wrap{ min-height:0 !important; background:#FFFFFF !important; padding:0 !important; }
  #ps-card-print{
    box-shadow:none !important;
    border:1px solid #ddd6c8 !important;
    break-inside:avoid;
    page-break-inside:avoid;
  }
  /* Portraits are remote images; make sure the browser prints them. */
  #ps-card-print img{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}