/* ──────────────────────────────────────────────────────────────────────────
   _print-system.css — shared printable-worksheet design system for Policy & Play.
   Captures the Stitch EYFS worksheet look (pastel rounded section cards, brand
   palette, friendly display heading) so every printable template is consistent.
   Self-contained (brand colours inlined) so a template can be printed standalone.
   ────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --ws-teal:  #00D1C1; --ws-teal-pale:  #E0FAF8;
  --ws-coral: #F26E20; --ws-coral-pale: #FFF1E8;
  --ws-amber: #F4B13B; --ws-amber-pale: #FFF8E8;
  --ws-green: #9CC689; --ws-green-pale: #EFF8EC;
  --ws-navy:  #0A1C30; --ws-text: #2C4A5A; --ws-muted: #4F6B78;
  --ws-line:  #D7E2E8; --ws-border: #E4EDF1; --ws-tint: #FBFDFE;
}

* { box-sizing: border-box; }
body.ws { margin: 0; background: #E9EEF1; font-family: 'Montserrat', sans-serif; color: var(--ws-text); padding: 24px; }

/* A4 sheet */
.ws-page {
  width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; background: #fff;
  padding: 18mm 16mm; box-shadow: 0 6px 28px rgba(10,28,48,0.14); position: relative;
}

.ws-head { text-align: center; margin-bottom: 1.6rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ws-border); }
.ws-title { font-family: Montserrat, serif; font-weight: 800; font-size: 2rem; color: var(--ws-navy); margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: -0.01em; }
.ws-title .material-symbols-outlined { color: var(--ws-teal); font-size: 1.9rem; }
.ws-sub { font-family: 'Montserrat', sans-serif; color: var(--ws-muted); font-size: 0.95rem; margin-top: 0.3rem; font-weight: 600; }

/* Section card grid — equal heights, clean gutters */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: stretch; }
.ws-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.ws-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* BUILD_FORCE: 2026-07-05T20:25Z */

.template-preview {
  min-height: 480px !important;
  overflow: visible !important;
}

/* Card — white body, hairline border... */
.ws-card { border: 1px solid var(--ws-border); border-top: 3px solid var(--ws-teal); border-radius: 10px; padding: 1.1rem 1.15rem; background: #fff; break-inside: avoid; }
.resource-card {
  min-height: 480px !important;
  overflow: visible !important;
}
.ws-card { border: 1px solid var(--ws-border); border-top: 3px solid var(--ws-teal); border-radius: 10px; padding: 1.1rem 1.15rem; background: #fff; break-inside: avoid; }
.ws-card.teal  { border-top-color: var(--ws-teal);  }
.ws-card.coral { border-top-color: var(--ws-coral); }
.ws-card.amber { border-top-color: var(--ws-amber); }
.ws-card.green { border-top-color: var(--ws-green); }
.ws-card.plain { border-top-color: var(--ws-border); background: var(--ws-tint); }

.ws-card-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; color: var(--ws-navy); margin: 0 0 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ws-border); display: flex; align-items: center; gap: 0.45rem; letter-spacing: 0.01em; }
.ws-card-title .material-symbols-outlined { color: var(--ws-coral); font-size: 1.15rem; }
.ws-card.teal  .ws-card-title .material-symbols-outlined { color: var(--ws-teal); }
.ws-card.amber .ws-card-title .material-symbols-outlined { color: var(--ws-amber); }
.ws-card.green .ws-card-title .material-symbols-outlined { color: #6FA958; }

/* Fill-in fields */
.ws-field { margin-bottom: 0.7rem; font-size: 0.95rem; color: var(--ws-text); }
.ws-line { display: block; border-bottom: 2px dotted var(--ws-line); height: 1.5rem; }
.ws-field label { display: block; font-weight: 600; margin-bottom: 0.15rem; }

/* Checkbox rows */
.ws-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; margin-bottom: 0.5rem; }
.ws-box { width: 18px; height: 18px; border: 2px solid var(--ws-navy); border-radius: 5px; flex-shrink: 0; }

/* Trace / write rows */
.ws-trace { border-top: 1.5px solid var(--ws-line); border-bottom: 1.5px solid var(--ws-line); height: 2.2rem; margin: 0.4rem 0; background: repeating-linear-gradient(90deg, transparent, transparent 6px, #eef4f7 6px, #eef4f7 12px); }
.ws-letter { font-family: Montserrat, serif; font-weight: 800; font-size: 2.4rem; color: var(--ws-navy); }

.ws-foot { margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--ws-line); display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; color: var(--ws-muted); }
.ws-foot strong { color: var(--ws-teal); font-weight: 700; }

/* ── Preview watermark (ON by default; removed by _watermark.js for paid members) ── */
.ws-page::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='240'%3E%3Ctext x='12' y='140' transform='rotate(-28 170 120)' font-family='Montserrat,Arial,sans-serif' font-size='23' font-weight='700' fill='%2367BCCF' fill-opacity='0.17'%3Epolicyandplay.co.uk%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}
body.unlocked .ws-page::after { display: none; }

/* Print */
@page { size: A4; margin: 0; }
@media print {
  body.ws { background: #fff; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ws-page { box-shadow: none; width: 100%; min-height: auto; padding: 12mm; }
  .ws-page::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ws-noprint { display: none !important; }
}