@import "tailwindcss";

@theme {
  /* Brand fonts */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-display: "Dela Gothic One", sans-serif;

  /* Brand colours — OKLCH */
  --color-blush: oklch(68% 0.19 8);
  --color-raspberry: oklch(52% 0.19 358);
  --color-cream: oklch(97.5% 0.025 78);
  --color-sunshine: oklch(87% 0.17 82);
  --color-mint: oklch(87% 0.07 163);
  --color-charcoal: oklch(22% 0 0);
  --color-warm-grey: oklch(57% 0.01 75);
  --color-off-white: oklch(98.5% 0.003 102);
  --color-mint-dark: oklch(48% 0.1 163);
  --color-sunshine-dark: oklch(47% 0.09 82);

  /* Custom animations */
  --animate-float: float 3s ease-in-out infinite;
  --animate-float-delayed: float 3s ease-in-out 1.5s infinite;
  --animate-scroll-slogan: scroll-slogan 20s linear infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes scroll-slogan {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

body {
  @apply bg-cream text-charcoal antialiased;
}

.shadow-card {
  box-shadow: 0 8px 32px oklch(0% 0 0 / 8%), 0 2px 8px oklch(0% 0 0 / 4%);
}

.shadow-float {
  box-shadow: 0 8px 24px oklch(0% 0 0 / 10%);
}

.shadow-modal {
  box-shadow: 0 24px 64px oklch(0% 0 0 / 28%), 0 6px 20px oklch(0% 0 0 / 12%);
}

dialog {
  padding: 0;
  border: none;
  max-width: min(30rem, calc(100vw - 2rem));
  background: transparent;
  /* Restore centering removed by CSS preflight */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}

dialog::backdrop {
  background: oklch(0% 0 0 / 55%);
  backdrop-filter: blur(3px);
}

/* Remove default disclosure triangle from <summary> elements */
summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Changeover checklist: dim a section's items when it is marked not applicable */
.checklist-section:has(.na-checkbox:checked) .checklist-items {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

/* Rotate chevron when a checklist section is open */
details[open] .section-chevron {
  transform: rotate(180deg);
}

/* Rotate chevron when a checklist group is open */
details[open] .checklist-group-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-float-delayed,
  .animate-scroll-slogan {
    animation: none;
  }
}

/* ── Printable checklist layout ──────────────────────────────── */
@media print {
  @page {
    size: A4;
    margin: 15mm 15mm 18mm 15mm;
  }

  body.printable-layout {
    font-size: 11pt;
    color: oklch(22% 0 0);
    background: white;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printable-layout .print-page {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  /* Keep section headings with their content */
  body.printable-layout .print-section-heading,
  body.printable-layout h3 {
    break-after: avoid;
  }

  /* Keep subsections together where possible */
  body.printable-layout .print-subsection {
    break-inside: avoid;
  }

  /* Force a new page before each major group (except the first) */
  body.printable-layout .print-section + .print-section {
    break-before: page;
  }

  /* Keep footer on the last page, avoid orphaned footer */
  body.printable-layout .print-footer {
    break-inside: avoid;
  }

  /* Hide screen-only elements */
  body.printable-layout .print\:hidden {
    display: none !important;
  }
}