/* Custom helpers on top of Tailwind. */

[x-cloak] { display: none !important; }

/* ============================================================
   PRINT MARKS — drukarski overlay (crop marks + CMYK bar + slug)
   ============================================================ */

:root {
  --pm-bar-h: 56px;
  --pm-margin-top: 40px;   /* "paper margin" above the header */
  --pm-margin-x:   18px;   /* left / right page margin */
  --pm-color: #0a1c30;        /* ink-900 */
  --pm-muted: rgba(10, 28, 48, 0.5);
}

/* Paper margins around the whole site */
body {
  padding-top:    var(--pm-margin-top);
  padding-bottom: var(--pm-bar-h);
  padding-left:   var(--pm-margin-x);
  padding-right:  var(--pm-margin-x);
}

/* Sticky header should stick BELOW the top margin, not over it */
body > header.sticky { top: var(--pm-margin-top) !important; }

.print-marks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;          /* above content but below modals/admin overlays */
}
.print-marks * { pointer-events: none; }

/* Crop marks – tiny black L's in each corner of the paper area */
.pm-crop {
  position: absolute;
  width: 16px;
  height: 16px;
  stroke: var(--pm-color);
  stroke-width: 1;
  fill: none;
  opacity: 0.5;
}
.pm-tl { top: 6px;                                    left:  6px; }
.pm-tr { top: 6px;                                    right: 6px; }
.pm-bl { bottom: calc(var(--pm-bar-h) + 6px);         left:  6px; }
.pm-br { bottom: calc(var(--pm-bar-h) + 6px);         right: 6px; }

/* Top slug area – white strip across the full top margin with metadata */
.pm-slug-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pm-margin-top);
  background: #ffffff;
  border-bottom: 1px solid #e6ebf2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pm-muted);
  white-space: nowrap;
  overflow: hidden;
  justify-content: center;
}

/* Crop marks must sit above the white strip */
.pm-crop { z-index: 1; }
.pm-mono { font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; }
.pm-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--pm-muted);
  display: inline-block;
}

/* Bottom color bar – CMYK patches + registration marks + slug labels */
.pm-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--pm-bar-h);
  background: #ffffff;
  border-top: 1px solid #e6ebf2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}

.pm-reg svg {
  width: 22px; height: 22px;
  stroke: var(--pm-color);
  stroke-width: 0.8;
  fill: none;
}

.pm-bar-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pm-muted);
  white-space: nowrap;
}

.pm-patches {
  display: flex;
  gap: 3px;
}
.pm-patch {
  width: 28px; height: 32px;
  border-radius: 1px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.pm-patch-paper {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #cbd5e1; /* visible against white bar */
}

/* Flexible spacer that pushes greyscale + credit to the right */
.pm-bar-spacer { flex: 1; }

/* Credit – right side, with link to taskIT.pl */
.pm-credit {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-muted);
  white-space: nowrap;
}
.pm-credit-link {
  color: var(--pm-color);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  pointer-events: auto;        /* clickable inside the otherwise-passive overlay */
  transition: color .2s, border-color .2s;
}
.pm-credit-link:hover { color: #f97316; border-bottom-color: currentColor; }

/* Mobile: shrink margins + bar, drop top slug & registration marks */
@media (max-width: 768px) {
  :root {
    --pm-bar-h: 42px;
    --pm-margin-top: 22px;
    --pm-margin-x: 10px;
  }
  .pm-slug-top, .pm-reg, .pm-bar-label { display: none; }
  .pm-patch  { width: 18px; height: 22px; }
  .pm-bar    { padding: 0 8px; gap: 8px; }
  .pm-credit { font-size: 9px; letter-spacing: 0.08em; }
}

@media (max-width: 480px) {
  :root { --pm-bar-h: 36px; --pm-margin-x: 6px; }
  .pm-patch { width: 14px; height: 18px; }
}

/* Print: hide the print marks — silly to print fake print marks */
@media print {
  .print-marks { display: none; }
  body { padding-bottom: 0; }
}

/* line clamp helpers (Tailwind plugin not loaded via CDN) */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Prose / Markdown content (no @tailwindcss/typography on CDN) */
.prose { color: #243e57; max-width: 65ch; }
.prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.25rem auto; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin: .75rem 0; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin: .75rem 0; }
.prose li { margin: .25rem 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: #0a1c30; font-weight: 700; line-height: 1.25; margin-top: 1.6em; margin-bottom: .5em; }
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.5rem; padding-bottom: .3em; border-bottom: 1px solid #e6ebf2; }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1.05rem; }
.prose p  { margin: .85em 0; line-height: 1.7; }
.prose a  { color: #f97316; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #dc5a08; }
.prose strong { color: #0a1c30; font-weight: 700; }
.prose blockquote { border-left: 3px solid #f97316; padding-left: 1rem; color: #2f4f6e; font-style: italic; margin: 1.2em 0; }
.prose hr { border: 0; border-top: 1px solid #e6ebf2; margin: 2em 0; }
.prose code { background: #f5f7fa; color: #b6440a; padding: .15em .35em; border-radius: 4px; font-size: .9em; }
.prose pre { background: #0a1c30; color: #e6ebf2; padding: 1rem; border-radius: .5rem; overflow-x: auto; font-size: .9em; }
.prose pre code { background: transparent; color: inherit; padding: 0; }

/* Hero / page-header wave divider — slide-in animation on every page load.
   SVG is rendered ~16% wider than viewport (-8% / +8% bleed) so the slide
   animation never exposes empty edges. bottom: -1px hides the sub-pixel
   seam between SVG and the next section. */
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: -8%;
  width: 116%;
  pointer-events: none;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-wave {
    animation: wave-flow 1.6s cubic-bezier(0.45, 0, 0.55, 1) both;
    transform-origin: center bottom;
    will-change: transform;
  }
  @keyframes wave-flow {
    /* starts in final position, drifts left, returns. No "jump" on page load. */
    0%   { transform: translate3d(0,    0, 0); }
    50%  { transform: translate3d(-6%,  0, 0); }
    100% { transform: translate3d(0,    0, 0); }
  }
}

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Better focus rings on dark surfaces */
.bg-ink-950 *:focus-visible,
.bg-ink-900 *:focus-visible,
.bg-hero-gradient *:focus-visible { outline: 2px solid #ffc24a; outline-offset: 2px; }