/* Birthday Saint Finder — scoped styles, matching the pattern baby-names.css set.
   Layout lives in inline styles inside birthday-saint.js (ported from the design);
   this file holds only what a stylesheet must own: fonts, focus, print and keyframes. */
.bs-sans{ font-family:'Plus Jakarta Sans', sans-serif; }
.bs-serif{ font-family:'EB Garamond', Georgia, serif; }
#bs-root a{ color:#B0473C; text-decoration:none; }
#bs-root a:hover{ color:#97382E; }
#bs-root input, #bs-root button, #bs-root select{ font-family:'Plus Jakarta Sans', sans-serif; }
#bs-root input:focus, #bs-root select:focus{ outline:none; border-color:#B0473C !important; }
#bs-root ::placeholder{ color:#b3aa9c; }

/* Keyboard users must keep a visible focus ring; the rule above only removes the
   default outline where a border stands in for it. */
#bs-root button:focus-visible, #bs-root a:focus-visible{
  outline:2px solid #B0473C; outline-offset:2px; border-radius:6px;
}

/* /birthday-saint sits on a light background (no dark hero), so the fixed site header
   must always use the solid, dark-text treatment — not the cream-on-hero default that
   only kicks in on scroll — and the page content must clear the fixed header. */
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 native date picker indicator is invisible against the cream field. */
#bs-root input[type="date"]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }

@keyframes bsFade{ from{opacity:0} to{opacity:1} }
@keyframes bsRise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }

@media (prefers-reduced-motion: reduce){
  #bs-root *, #bs-root *::before, #bs-root *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
}

/* The printable Birthday Saint card is a full letter page (the design is authored on
   an 8.5×11in sheet). At print it fills the sheet exactly. */
@page{ size:letter; margin:0; }

@media print{
  .bs-noprint{ display:none !important; }
  body{ background:#FFFFFF !important; }
  main#top{ padding-top:0 !important; }
  .site-header, .footer, .mobile-menu{ display:none !important; }
  #bs-card-wrap{ display:block !important; min-height:0 !important; background:#FFFFFF !important; padding:0 !important; }
  /* The on-screen holder caps the card at 500px; the printed card must ignore that
     and become the physical sheet. */
  .bs-card-holder{ max-width:none !important; width:auto !important; margin:0 !important; }
  #bs-card-print{
    width:8.5in !important; height:11in !important; max-width:none !important;
    /* Inches, not aspect-ratio: Chrome's print layout resolves aspect-ratio
       unreliably and can collapse the card to zero height, printing a blank page. */
    aspect-ratio:auto !important;
    border-radius:0 !important; box-shadow:none !important; break-inside:avoid;
  }

  /* Chrome leaves "Background graphics" unchecked by default, which drops every
     painted background: the season gradient that IS the artwork on 274 of the 366
     days, the "Saint of the day" pill, and the memorial badge. Without this the card
     prints as text on white. (The print dialog toggle still wins if the user turns it
     off — hence the on-screen note.) */
  #bs-card-print, #bs-card-print *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
}