/* F3 printable resources: portrait layouts, ink-friendly, certificate accents */

:root {
  --f3-navy: #1a5276;
  --f3-teal: #1abc9c;
  --f3-blue: #2e86c1;
  --f3-light: #e8f4fc;
  --f3-pale: #f5fafd;
  --f3-text: #222;
  --f3-muted: #555;
  --f3-white: #fff;
  --print-corner: 18mm;
  --print-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='4' cy='4' r='1.2' fill='%231abc9c' fill-opacity='0.16'/%3E%3C/svg%3E");
  --print-bg-soft:
    radial-gradient(circle 40mm at 96% 4%, rgba(26, 188, 156, 0.08) 0%, transparent 68%),
    radial-gradient(circle 36mm at 4% 96%, rgba(46, 134, 193, 0.06) 0%, transparent 65%),
    radial-gradient(circle 24mm at 10% 14%, rgba(26, 82, 118, 0.04) 0%, transparent 72%),
    var(--print-dot);
}

* {
  box-sizing: border-box;
}

html.print-doc {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body.print-body {
  margin: 0;
  font-family: "Segoe UI", Calibri, Arial, sans-serif;
  color: var(--f3-text);
  background: var(--f3-pale);
  line-height: 1.45;
}

.print-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--f3-white);
  border-bottom: 1px solid rgba(26, 82, 118, 0.1);
  box-shadow: 0 2px 12px rgba(26, 82, 118, 0.08);
}

.print-toolbar button,
.print-toolbar a.print-toolbar-link {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--f3-navy);
  background: var(--f3-navy);
  color: var(--f3-white);
  cursor: pointer;
  text-decoration: none;
}

.print-toolbar a.print-toolbar-link {
  background: var(--f3-white);
  color: var(--f3-navy);
}

.print-toolbar .print-size-hint {
  font-size: 0.82rem;
  color: var(--f3-muted);
}

.print-workspace {
  padding: 1.5rem 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.print-sheet {
  width: var(--sheet-w);
  min-height: var(--sheet-h);
  margin: 0 auto;
  background: var(--f3-white);
  box-shadow: 0 12px 40px rgba(26, 82, 118, 0.14);
  position: relative;
  overflow: hidden;
}

.print-sheet--a6 { --sheet-w: 105mm; --sheet-h: 148mm; }
.print-sheet--a5 { --sheet-w: 148mm; --sheet-h: 210mm; }
.print-sheet--a4 { --sheet-w: 210mm; --sheet-h: 297mm; }
.print-sheet--a3 { --sheet-w: 297mm; --sheet-h: 420mm; }

/* Certificate-style frame (portrait-safe decorations) */
.print-frame-outer {
  padding: 5px;
  height: 100%;
  min-height: inherit;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--f3-navy) 0%, #1e6b8a 45%, var(--f3-teal) 100%);
}

.print-frame-outer--tight {
  padding: 4px;
  border-radius: 10px;
}

.print-frame-inner {
  height: 100%;
  min-height: inherit;
  padding: var(--frame-pad, 14mm);
  border-radius: 8px;
  border: 2px solid rgba(26, 82, 118, 0.12);
  background-color: #fff;
  background-image: var(--print-bg-soft);
  background-size: auto, auto, auto, 32px 32px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-position: top right, bottom left, top left, 0 0;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-gap, 3mm);
}

.print-frame-inner--left {
  text-align: left;
  align-items: stretch;
}

/* Even vertical distribution on portrait sheets */
.print-frame-inner--spread {
  justify-content: space-between;
  gap: 5mm;
}

.print-frame-inner--spread > .print-block {
  flex: 0 0 auto;
}

.print-frame-inner--spread > .print-block--grow {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.print-block--grow.print-v-center {
  align-items: center;
}

/* L-shaped corners: fixed mm size (matches certificate proportions, not stretched) */
.print-frame-inner::before,
.print-frame-inner::after {
  content: "";
  position: absolute;
  width: var(--print-corner);
  height: var(--print-corner);
  border: 2px solid rgba(26, 188, 156, 0.38);
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
}

.print-frame-inner::before {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}

.print-frame-inner::after {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
}

.print-frame-inner > * {
  position: relative;
  z-index: 1;
}

.print-frame-inner--no-corners::before,
.print-frame-inner--no-corners::after {
  display: none;
}

/* Typography scale (importance → size) */
.print-cta {
  margin: 0 0 2mm;
  font-size: var(--cta-size, 17pt);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--f3-teal);
}

.print-headline {
  margin: 0 0 2mm;
  font-size: var(--headline-size, 12pt);
  font-weight: 700;
  line-height: 1.2;
  color: var(--f3-navy);
}

.print-deck {
  margin: 0 0 3mm;
  font-size: var(--deck-size, 9pt);
  font-weight: 500;
  line-height: 1.35;
  color: var(--f3-muted);
}

.print-tagline {
  margin: 0 0 1.5mm;
  font-size: 8pt;
  font-weight: 700;
  color: var(--f3-navy);
  letter-spacing: 0.03em;
}

.print-caption {
  margin: 0;
  font-size: 6.5pt;
  line-height: 1.35;
  color: var(--f3-muted);
}

.print-display {
  font-size: var(--display-size, 22pt);
  font-weight: 800;
  line-height: 1.15;
  color: var(--f3-navy);
}

.print-logo {
  height: var(--logo-h, 14mm);
  width: auto;
  max-width: 90%;
  object-fit: contain;
  display: block;
  margin: 0 auto var(--logo-gap, 3mm);
}

.print-logo--lg {
  --logo-h: 16mm;
  --logo-gap: 4mm;
}

.print-logo--xl {
  --logo-h: 22mm;
  --logo-gap: 5mm;
  max-width: 92%;
}

.print-frame-inner--left .print-logo {
  margin-left: 0;
  margin-right: auto;
}

.print-eyebrow {
  margin: 0;
  font-size: var(--eyebrow-size, 7.5pt);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f3-teal);
}

.print-title {
  margin: 0;
  font-size: var(--title-size, 14pt);
  font-weight: 700;
  color: var(--f3-navy);
  line-height: 1.2;
}

.print-lead {
  margin: 0;
  font-size: var(--lead-size, 10pt);
  color: var(--f3-muted);
  line-height: 1.5;
  max-width: 36em;
}

.print-lead--center {
  margin-left: auto;
  margin-right: auto;
}

.print-url {
  font-size: var(--url-size, 8pt);
  font-weight: 600;
  color: var(--f3-navy);
  word-break: break-all;
  margin: 0;
  line-height: 1.35;
}

.print-footnote {
  margin: 0;
  font-size: 7pt;
  color: var(--f3-muted);
  line-height: 1.4;
}

.print-divider {
  height: 3px;
  border: none;
  margin: 6mm 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--f3-teal), var(--f3-navy), var(--f3-teal));
  opacity: 0.75;
}

/* QR panel: white quiet zone */
.print-qr-panel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3mm;
  padding: 4mm;
  background: #fff;
  border: 1px solid rgba(26, 82, 118, 0.15);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(26, 82, 118, 0.08);
}

.print-qr {
  width: var(--qr-size, 38mm);
  height: var(--qr-size, 38mm);
  display: block;
  margin: 0;
  object-fit: contain;
}

.print-qr--small {
  --qr-size: 22mm;
}

.print-qr--sticker {
  --qr-size: 30mm;
}

.print-qr-panel--hero {
  padding: 5mm;
  border-width: 2px;
  border-color: rgba(26, 82, 118, 0.2);
}

.print-qr-label {
  margin: 0;
  font-size: 7.5pt;
  font-weight: 700;
  color: var(--f3-navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Inline icons */
.print-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5mm;
  height: 5.5mm;
  flex-shrink: 0;
  color: var(--f3-teal);
}

.print-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.print-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3.5mm;
}

.print-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 3mm;
  font-size: 10pt;
  line-height: 1.45;
  color: var(--f3-text);
}

.print-icon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6mm;
  margin: 2mm 0 4mm;
}

.print-icon-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5mm;
  min-width: 22mm;
  font-size: 7pt;
  font-weight: 600;
  color: var(--f3-navy);
  text-align: center;
}

.print-icon-badge .print-icon {
  width: 8mm;
  height: 8mm;
  padding: 1.5mm;
  border-radius: 50%;
  background: var(--f3-light);
}

/* CTA row: QR + text side by side */
.print-cta-row {
  display: flex;
  align-items: center;
  gap: 5mm;
  padding: 5mm 6mm;
  background: var(--f3-pale);
  border: 1px solid rgba(26, 82, 118, 0.12);
  border-radius: 10px;
}

.print-cta-row .print-cta-text {
  flex: 1;
  min-width: 0;
}

.print-cta-row strong {
  display: block;
  font-size: 10pt;
  color: var(--f3-navy);
  margin-bottom: 1.5mm;
}

/* A5 pamphlet (light, ink-friendly) */
.print-pamphlet .print-frame-inner {
  --frame-pad: 16mm 14mm;
  --logo-h: 20mm;
  --stack-gap: 5mm;
  justify-content: space-between;
  align-items: stretch;
}

.print-pamphlet h1 {
  margin: 0 0 4mm;
  font-size: 17pt;
  font-weight: 800;
  color: var(--f3-navy);
  line-height: 1.2;
}

.print-pamphlet .print-intro {
  margin: 0 0 5mm;
  font-size: 10pt;
  color: var(--f3-text);
  line-height: 1.5;
}

.print-pamphlet .print-brand-line {
  margin: 0;
  font-size: 8pt;
  color: var(--f3-muted);
}

/* Poster */
.print-poster .print-frame-inner {
  --frame-pad: 20mm 18mm;
}

.print-poster .print-logo--lg {
  --logo-h: 28mm;
  --title-size: 28pt;
  --lead-size: 12pt;
  --stack-gap: 5mm;
}

.print-poster--a3 .print-frame-inner {
  --frame-pad: 24mm 22mm;
}

.print-poster--a3 .print-logo--xl {
  --logo-h: 38mm;
  --title-size: 36pt;
  --lead-size: 15pt;
  --qr-size: 56mm;
}

.print-poster .print-sub {
  font-size: 15pt;
  font-weight: 800;
  color: var(--f3-teal);
  margin: 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.print-poster .print-cta-poster {
  font-size: 18pt;
  font-weight: 800;
  color: var(--f3-navy);
  margin: 0 0 4mm;
  line-height: 1.15;
}

.print-poster--a3 .print-sub {
  font-size: 17pt;
}

.print-poster .print-qr-panel {
  margin: 4mm 0;
}

/* QR stickers (course + EWS) */
.print-sticker--a6 .print-frame-inner,
.print-sticker-inner {
  --frame-pad: 11mm 9mm;
  --qr-size: 42mm;
  --cta-size: 20pt;
  --headline-size: 13pt;
  --deck-size: 8.5pt;
  text-align: center;
}

.print-sticker-sheet .print-frame-inner {
  padding: 12mm;
  display: block;
}

.print-sticker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10mm;
  width: 100%;
  height: calc(297mm - 24mm);
  min-height: 265mm;
}

.print-sticker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 8mm 7mm 7mm;
  border-radius: 10px;
  background: #fff;
  border: 2px solid rgba(26, 82, 118, 0.2);
  box-shadow: 0 2px 10px rgba(26, 82, 118, 0.07);
  position: relative;
  overflow: hidden;
  gap: 2mm;
}

.print-sticker-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5mm;
  background: linear-gradient(90deg, var(--f3-teal), var(--f3-navy));
}

.print-sticker-card--ews::before {
  background: linear-gradient(90deg, var(--f3-navy), var(--f3-teal));
}

.print-sticker-card .print-logo {
  margin-top: 6mm;
}

.print-sticker-card .print-cta {
  --cta-size: 15pt;
}

.print-sticker-card .print-headline {
  --headline-size: 11.5pt;
}

.print-sticker-card .print-deck {
  --deck-size: 8pt;
  margin-bottom: 2mm;
}

.print-sticker-card .print-qr-panel {
  padding: 3mm;
  margin: 1mm 0;
}

.print-sticker-card .print-caption {
  font-size: 7pt;
}

/* Homework tracker */
.print-tracker .print-frame-inner {
  --frame-pad: 16mm 14mm;
  --logo-h: 17mm;
  justify-content: flex-start;
  gap: 4mm;
}

.print-tracker h1 {
  margin: 0;
  font-size: 14pt;
  color: var(--f3-navy);
}

.print-tracker-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5mm 12mm;
  font-size: 9.5pt;
  margin: 0;
  color: var(--f3-navy);
}

.print-tracker-hint {
  font-size: 8.5pt;
  color: var(--f3-muted);
  margin: 0 0 3mm;
}

.print-tracker table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.5pt;
  flex: 1;
}

.print-tracker th,
.print-tracker td {
  border: 1px solid rgba(26, 82, 118, 0.18);
  padding: 3mm 2mm;
  text-align: center;
}

.print-tracker th {
  background: var(--f3-navy);
  color: #fff;
  font-weight: 600;
}

.print-tracker th:first-child,
.print-tracker td:first-child {
  text-align: left;
  min-width: 28mm;
}

.print-tracker tbody tr:nth-child(even) {
  background: var(--f3-pale);
}

/* Parent letter */
.print-letter .print-frame-inner {
  --frame-pad: 20mm 22mm;
  --logo-h: 18mm;
  text-align: left;
  font-size: 11pt;
  line-height: 1.55;
  gap: 4mm;
  justify-content: flex-start;
}

.print-letter h1 {
  font-size: 14pt;
  color: var(--f3-navy);
  margin: 0 0 4mm;
  padding-bottom: 3mm;
  border-bottom: 2px solid var(--f3-teal);
}

.print-letter .letter-placeholder {
  color: var(--f3-muted);
  font-style: italic;
  margin: 0;
}

.print-letter ul {
  margin: 0;
  padding-left: 5mm;
}

.print-letter .print-cta-row {
  margin-top: 6mm;
}

@media print {
  .no-print,
  .print-toolbar {
    display: none !important;
  }

  body.print-body {
    background: #fff;
  }

  .print-workspace {
    padding: 0;
  }

  .print-sheet {
    width: 100%;
    min-height: auto;
    height: auto;
    box-shadow: none;
    page-break-after: always;
  }

  .print-sheet:last-child {
    page-break-after: auto;
  }

  .print-frame-outer,
  .print-frame-inner {
    border-radius: 0;
  }
}