/* ==========================================================================
   KODA 4 Kids - page modules
   The three ways to give, the printable size sheet and its thumbnail, the
   staff login drawer, and the printed sheet itself.
   Depends on koda.css tokens.

   The sticky section bar that used to live at the top of this file is gone.
   It listed About / Needs / How to Give / Contact a second time, directly
   under a header that already carried all four, so the page opened with two
   navigation bars saying the same thing. The header is now the only nav, and
   it carries the scrollspy.
   ========================================================================== */

/* ---------- page banner (bright, never a dark scrim) ---------- */
.pagehead{
  background:
    radial-gradient(760px 380px at 88% -20%, var(--yellow-wash) 0%, transparent 65%),
    radial-gradient(600px 340px at 2% 120%, var(--teal-soft) 0%, transparent 62%),
    var(--white);
  /* The band that follows is .band--lift, which pulls up by --curve to make the
     curved overlap. Pay that back here or it crowds the intro text. */
  padding:clamp(2.5rem,5vw,4rem) 0 calc(clamp(2.5rem,5vw,3.75rem) + var(--curve));
  border-bottom:0;
}
.pagehead h1{margin-bottom:.3em}
.pagehead .lede{margin-bottom:0}

/* ---------- How to Give: the three ways ----------
   These were three generic .card--lift boxes that happened to sit in a row,
   with the middle one marked as primary by an inline style painting a 2px
   pink border on it. They are one designed set now: a shared color rail along
   the top edge, one logo color each, a tag naming what each way is good for,
   and the online card raised a full elevation step instead of outlined in a
   color that appeared nowhere else on the page. */
.ways{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,1.6rem);align-items:stretch;
}
@media (max-width:900px){.ways{grid-template-columns:1fr}}

.way{
  --accent:var(--teal);--accent-soft:var(--teal-soft);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,1.9rem);
  box-shadow:var(--sh-2), var(--sh-inset-top);
  transition:transform .25s var(--bounce),box-shadow .25s var(--ease);
}
.way::before{
  content:'';position:absolute;inset:0 0 auto;height:5px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
}
.way:hover{transform:translateY(-6px);box-shadow:var(--sh-4), var(--sh-inset-top)}
/* the primary way. Elevation and a heavier rail, not a border. */
.way--lead{box-shadow:var(--sh-4), var(--sh-inset-top);border-color:var(--red-soft)}
.way--lead::before{height:8px}
.way--lead:hover{box-shadow:var(--sh-5), var(--sh-inset-top)}

.way__tag{
  align-self:flex-start;margin-bottom:1rem;
  font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:.32em .8em;border-radius:999px;
}
.way__mark{
  width:52px;height:52px;border-radius:16px;margin-bottom:.9rem;
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
}
.way__mark svg{
  width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.way h3{margin:0 0 .45rem}
.way > p{margin:0 0 .95rem;color:var(--ink-soft);font-size:.98rem}
.way .chips{margin:0 0 1.1rem}
/* margin-top:auto floors the address / button in every card, so the three
   line up along the bottom however long the paragraphs run. */
.way__act{margin:auto 0 0}
.way__act.small{line-height:1.65}

.way--red  {--accent:var(--red-text);--accent-soft:var(--red-soft)}
.way--teal {--accent:var(--teal);    --accent-soft:var(--teal-soft)}
.way--green{--accent:var(--green);   --accent-soft:var(--green-soft)}

/* ---------- The printable size sheet ----------
   What is left of the Winter Kit Builder. The builder asked for six dropdown
   choices before it would hand over anything, and the sheet it produced always
   carried the whole size list regardless - the picks were only highlighted on
   it - so the work never changed the output enough to be worth asking for.
   The button now prints that sheet directly.

   Its panel used to be washed in --yellow-wash over #FFF1D4, which went muddy
   against the cream page. It is cool now, teal and sky, which also gives the
   warm bands either side of it something to sit against. */
.sheet{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
  margin-top:clamp(2.4rem,5vw,3.5rem);
  padding:clamp(1.6rem,3.5vw,2.6rem);
  background:linear-gradient(150deg,var(--sky),#fff 55%,var(--teal-soft));
  border:2px solid #CFE4EE;border-radius:var(--r-lg);
  box-shadow:var(--sh-3), var(--sh-inset-top);
}
@media (max-width:900px){.sheet{grid-template-columns:1fr}}
.sheet__body h3{margin:0 0 .5rem}
.sheet__body > p{margin:0 0 1.1rem;color:var(--ink-soft)}
.sheet__facts{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.sheet__facts li{position:relative;padding-left:1.7rem;font-size:.96rem;line-height:1.5}
.sheet__facts li::before{
  content:'';position:absolute;left:.15rem;top:.45em;
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 4px rgba(0,72,104,.14);
}

/* A miniature of the sheet, drawn in CSS rather than shipped as an image: it
   is decorative, it has to stay in step with the real sheet, and a screenshot
   of a document is a lot of bytes to spend on a thumbnail. aria-hidden in the
   markup - a screen reader gets the button and the list, which is the content.
   The 8.5/11 ratio is Letter, which is what it prints on. */
.sheet__preview{display:grid;place-items:center}
.sheetmini{
  width:100%;max-width:18rem;aspect-ratio:8.5/11;
  display:flex;flex-direction:column;gap:.5rem;
  padding:1rem .95rem;
  background:#fff;border:1px solid #DED9D1;border-radius:5px;
  box-shadow:var(--sh-4);
  transform:rotate(-2.2deg);
  transition:transform .4s var(--ease);
}
.sheet:hover .sheetmini{transform:rotate(0) translateY(-5px)}
.sheetmini__head{display:flex;align-items:center;gap:.45rem}
.sheetmini__head img{height:24px;width:auto}
.sheetmini__head b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:.7rem;line-height:1.15;color:var(--ink);
}
.sheetmini__head i{
  display:block;font-style:normal;font-size:.5rem;line-height:1.4;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);
}
.sheetmini__rule{display:block;height:2px;background:var(--ink);border-radius:1px}
.sheetmini__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 .7rem;flex:1}
.sheetmini__h{
  display:block;height:5px;width:64%;border-radius:2px;
  background:var(--teal);margin:0 0 .3rem;
}
.sheetmini__chips{display:flex;flex-wrap:wrap;gap:3px;margin:0 0 .5rem}
.sheetmini__chips i{
  display:block;width:15px;height:8px;
  border:1px solid #C9BFAB;border-radius:2px;
}
.sheetmini__foot{display:block;height:8px;border-radius:2px;background:var(--yellow)}
@media (max-width:900px){
  .sheetmini{max-width:14rem;transform:rotate(-1.5deg)}
}

/* ---------- staff login drawer ---------- */
.drawer__veil{
  position:fixed;inset:0;z-index:200;background:rgba(31,29,26,.42);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
.drawer__veil.is-open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:201;
  width:min(420px,100%);
  background:linear-gradient(180deg,#fff,var(--cream));
  box-shadow:-24px 0 60px -20px rgba(70,54,32,.45);
  transform:translateX(101%);
  transition:transform .38s var(--ease);
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.drawer.is-open{transform:none}
.drawer__head{
  padding:1.4rem var(--gut) 1.1rem;border-bottom:var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  background:linear-gradient(180deg,var(--yellow-wash),transparent);
}
.drawer__head h2{margin:0 0 .15rem;font-size:1.5rem}
.drawer__head p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.drawer__close{
  flex:none;width:38px;height:38px;border-radius:50%;border:2px solid #DED9D1;
  background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink-soft);
  transition:background .18s,color .18s,transform .18s;
}
.drawer__close:hover{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(90deg)}
.drawer__close svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round}
.drawer__body{padding:1.4rem var(--gut) 2rem;display:grid;gap:1rem}
.drawer__foot{margin-top:auto;padding:1rem var(--gut) 1.4rem;border-top:var(--line);font-size:.84rem;color:var(--ink-faint)}

.dfield{display:grid;gap:.35rem}
.dfield label{font-family:var(--display);font-weight:700;font-size:.92rem}
.dfield input{
  width:100%;padding:.72em .95em;border:2px solid #DED9D1;border-radius:14px;background:#fff;
  box-shadow:inset 0 1px 2px rgba(70,54,32,.07);
}
.dfield input:focus{outline:none;border-color:var(--teal);box-shadow:inset 0 1px 2px rgba(70,54,32,.07),0 0 0 4px var(--teal-soft)}
.drawer__msg{
  font-size:.9rem;font-weight:700;border-radius:12px;padding:.7rem .9rem;
  display:none;
}
.drawer__msg.is-err{display:block;background:#FFF0F1;color:#B3121F;border:1px solid #F3C9CD}
.drawer__msg.is-ok{display:block;background:var(--green-soft);color:var(--green-deep);border:1px solid #B8DCB2}
.drawer__msg.is-info{display:block;background:var(--teal-soft);color:var(--teal-deep);border:1px solid #B7D8E8}
.drawer .btn{width:100%}
.drawer__spin{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite;display:none;
}
.is-busy .drawer__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   The printed shopping list
   --------------------------------------------------------------------------
   This is a document, not a screenshot of a web page. It is built by needs.js
   as a separate node appended to <body>; in print every other top-level element
   is hidden so only this sheet prints. Nothing on it is chosen by the reader
   any more - it is always the complete size list - so it is built once on load
   and simply printed.

   Design rules it follows:
     * One sheet. Six items in two columns, sized so a full list fits on one
       page of Letter or A4 with a 12mm margin.
     * Branded, but it still prints correctly in black and white. Every logo
       color used is dark enough to fall to a legible grey, and nothing on the
       sheet depends on color to be understood.
     * Real tick boxes, because the person holding it is standing in a shop.
     * The drop-off address and hours are on the sheet, so it works as a
       handout on its own.
   ========================================================================== */
.print-sheet{display:none}

@media print{
  /* Fallback for when the sheet was never built (JS blocked or failed):
     print the page, minus the furniture. Never a blank sheet of paper. */
  .site-head,.site-foot,.promise,.pagehead,.sheet__preview,.sheet .btn,
  .drawer,.drawer__veil,.hero__snow{display:none !important}
  .sheet{border:0;box-shadow:none;background:#fff}

  /* Once the sheet exists, it is the only thing that prints. */
  .has-sheet body > *{display:none !important}
  .has-sheet body > .print-sheet{display:block !important}

  @page{margin:12mm}
  html,body{background:#fff !important;margin:0;padding:0}

  .print-sheet{
    display:block;color:#000;font-family:var(--body);
    font-size:12pt;line-height:1.4;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .print-sheet *{box-shadow:none !important}

  /* The palette, restated in literal hex.
     The sheet is branded on purpose - it goes home with a volunteer and gets
     pinned to a staff room wall - but every color used here is dark enough to
     fall to a legible grey on a mono printer, and nothing anywhere depends on
     color to be understood. Teal carries structure, red carries the one rule
     that matters, and yellow appears only as a fill behind black text. */

  /* ---- masthead ---- */
  .ps__head{
    display:flex;align-items:flex-end;gap:6mm;
    border-bottom:2.4pt solid #004868;padding-bottom:3mm;margin-bottom:3.5mm;
  }
  .ps__head img{width:15mm;height:auto;flex:none}
  .ps__ttl{flex:1}
  .ps__ttl h1{
    font-family:var(--display);font-size:21pt;line-height:1;margin:0 0 1.2mm;
    letter-spacing:-.01em;color:#004868;
  }
  .ps__ttl p{margin:0;font-size:10pt;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
  .ps__stamp{
    flex:none;text-align:right;font-size:9.5pt;line-height:1.35;
    border-left:.6pt solid #999;padding-left:4mm;
  }
  .ps__stamp b{display:block;font-family:var(--display);font-size:11.5pt;color:#004868}

  /* ---- the one rule that matters, given its own band ---- */
  .ps__rule{
    margin:0 0 4mm;padding:2.5mm 3.5mm;
    border:1.2pt solid #C8101E;border-left-width:2.6pt;border-radius:1.2mm;
    background:#FFF2F3;font-size:11.5pt;
  }
  .ps__rule b{font-weight:800;color:#C8101E}

  /* ---- the size matrix, two columns ---- */
  .ps__h2{
    font-family:var(--display);font-size:13.5pt;margin:0 0 3mm;color:#004868;
    border-bottom:1pt solid #004868;padding-bottom:1.2mm;
    display:flex;align-items:baseline;justify-content:space-between;
  }
  .ps__h2 em{
    font-style:normal;font-size:9.5pt;font-weight:400;
    font-family:var(--body);color:#000;
  }

  .ps__grid{columns:2;column-gap:8mm;column-fill:balance}

  .ps__item{
    margin:0 0 4mm;padding:0 0 3mm;
    border-bottom:.5pt solid #C8C8C8;
    page-break-inside:avoid;break-inside:avoid;
  }
  .ps__item h3{
    font-family:var(--display);font-size:12.5pt;margin:0 0 1.8mm;
    display:flex;align-items:baseline;gap:1.8mm;
  }
  /* the numeral: white on solid teal, so it still reads as a filled disc when
     the teal prints as dark grey */
  .ps__item h3 .ps__num{
    font-size:9pt;background:#004868;color:#fff;border-radius:50%;
    width:5.4mm;height:5.4mm;display:inline-grid;place-items:center;flex:none;
  }
  /* a real tick box per item, for ticking off in the aisle */
  .ps__box{
    width:4.6mm;height:4.6mm;border:1.2pt solid #000;border-radius:.7mm;
    flex:none;align-self:center;
  }
  /* the note takes whatever is left of the line, so a long one ("new, waterproof
     or water resistant") wraps on its own and never breaks the label */
  .ps__note{font-family:var(--body);font-weight:400;font-size:9.5pt;color:#3A3A3A;flex:1 1 0;min-width:0}
  .ps__row{display:flex;flex-wrap:wrap;align-items:center;gap:1.6mm;margin:0 0 1.6mm}
  .ps__lbl{font-size:9.5pt;font-weight:700;min-width:14mm;text-transform:uppercase;letter-spacing:.03em}
  .ps__size{
    border:.8pt solid #8A8A8A;border-radius:1.2mm;padding:.7mm 2.2mm;
    font-size:11pt;min-width:7.5mm;text-align:center;
  }

  /* ---- getting it to us: three numbered columns ---- */
  .ps__hand{
    display:flex;gap:5mm;align-items:flex-start;
    margin:1mm 0 3mm;padding:2.4mm 0 0;border-top:1pt solid #004868;
    font-size:10pt;line-height:1.4;
    page-break-inside:avoid;break-inside:avoid;
  }
  .ps__hand > div{flex:1}
  .ps__hand b{display:block;font-family:var(--display);font-size:11pt;margin-bottom:.8mm;color:#004868}
  .ps__hand p{margin:0}
  .ps__hand em{font-style:normal;font-weight:700}

  /* ---- notes ---- */
  .ps__notes{margin:0 0 3mm;page-break-inside:avoid;break-inside:avoid}
  .ps__notes b{
    display:block;font-family:var(--display);font-size:11pt;margin-bottom:2.6mm;
    letter-spacing:.04em;text-transform:uppercase;color:#004868;
  }
  .ps__notes span{display:block;border-bottom:.5pt solid #B4B4B4;height:7.5mm}

  /* ---- footer. The yellow bar is the only purely decorative color on the
          sheet; it carries no text, so it costs nothing in mono. ---- */
  .ps__foot{
    margin-top:1mm;padding-top:2.4mm;border-top:2.4pt solid #F8B820;
    display:flex;gap:5mm;align-items:flex-start;font-size:10pt;line-height:1.4;
    page-break-inside:avoid;break-inside:avoid;
  }
  .ps__foot p{margin:0;flex:1}
  .ps__foot b{font-family:var(--display);font-size:11pt;color:#004868}
  .ps__foot .ps__ein{flex:none;text-align:right;font-size:9pt}
}