@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(53% 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);
  --color-raspberry-dark: oklch(44% 0.2 358);

  /* Partner brand — Facebook blue, darkened from #1877F2 to clear WCAG AA (5.2:1 on white) */
  --color-facebook: oklch(54% 0.21 258);

  /* Cleaner card — coastal postcard surfaces */
  --color-paper: oklch(99% 0.012 85);      /* warm printed-paper card face */
  --color-ticket: oklch(96% 0.03 8);       /* blush-tinted service tag ground */
  --color-stamp-tint: oklch(93% 0.06 8);   /* postage-stamp paper */

  /* 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;
}

:focus-visible {
  outline: 2px solid oklch(52% 0.19 358);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: oklch(68% 0.19 8 / 25%);
  color: oklch(22% 0 0);
}

.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%);
}

/* ---------- Cleaner card: coastal postcard motifs ---------- */

/* Faint printed inner keyline, like a postcard border */
.cleaner-card { isolation: isolate; }
.cleaner-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 9px;
  border: 1px solid oklch(22% 0 0 / 0.06);
  pointer-events: none;
}

/* Featured cards get a soft sunshine wash over the paper */
.cleaner-card.is-featured {
  background: linear-gradient(180deg, oklch(97% 0.05 85 / 0.55), var(--color-paper) 42%);
}

/* Postage-stamp monogram. The perforated paper sits on ::before so the
   edge bites never clip the initials; a browser without mask support just
   shows a clean tinted rectangle. */
.cleaner-stamp {
  position: relative;
  filter: drop-shadow(0 1px 2px oklch(22% 0 0 / 0.16));
}
.cleaner-stamp::before {
  content: "";
  position: absolute;
  height: 12ch;
  inset: 0;
  z-index: 0;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, oklch(22% 0 0 / 0.045) 6px 7px),
    var(--color-stamp-tint);
  --s: 8px;
  -webkit-mask:
    radial-gradient(circle 3px at 50% 0, oklch(0 0 0 / 0) 96%, oklch(0 0 0)) 50% 0 / var(--s) 51% repeat-x,
    radial-gradient(circle 3px at 50% 100%, oklch(0 0 0 / 0) 96%, oklch(0 0 0)) 50% 100% / var(--s) 51% repeat-x,
    radial-gradient(circle 3px at 0 50%, oklch(0 0 0 / 0) 96%, oklch(0 0 0)) 0 50% / 51% var(--s) repeat-y,
    radial-gradient(circle 3px at 100% 50%, oklch(0 0 0 / 0) 96%, oklch(0 0 0)) 100% 50% / 51% var(--s) repeat-y,
    linear-gradient(oklch(0 0 0) 0 0);
  -webkit-mask-composite: source-out, source-out, source-out, source-over;
          mask-composite: subtract, subtract, subtract, add;
}

/* Rubber-stamp "Featured" postmark cancelling the corner */
.cleaner-postmark {
  border: 1.5px solid oklch(52% 0.19 358 / 0.55);
  box-shadow: inset 0 0 0 3px oklch(52% 0.19 358 / 0.14);
  background: oklch(52% 0.19 358 / 0.04);
  transform: rotate(-11deg);
}

/* Uppercase section label shared by the card's What/Where/Online groups */
.cleaner-card-label {
  @apply mb-1.5 text-[0.64rem] font-bold uppercase tracking-[0.13em] text-warm-grey;
}

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;
  }
}