/* Pour Now — Handwritten annotations
   Optional layer for marketing surfaces, blog, comms. NOT for product UI.
   Usage:
     <link rel="stylesheet" href="annotations.css">
     <span class="pn-circle">gen marketer</span>
     <span class="pn-underline">measurable</span>
     <aside class="pn-margin-note">Load accounts<br>into your CRM<br>in advance</aside>
*/

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

:root {
  --pn-hand-color: var(--pn-naranja, #FF5A4D);  /* default mark color */
  --pn-hand-stroke: 2.2px;
}

/* ─── Handwritten note (sets in the margin or floats inline) ─── */
.pn-margin-note,
.pn-handwritten {
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--pn-hand-color);
  letter-spacing: 0.005em;
  font-style: normal;
}

.pn-margin-note {
  position: absolute;
  max-width: 200px;
  font-size: 1.05rem;
  line-height: 1.2;
}

/* ─── Inline circle around a word/phrase ─── */
.pn-circle {
  position: relative;
  display: inline-block;
  padding: 0.05em 0.25em;
}
.pn-circle::before {
  content: '';
  position: absolute;
  inset: -6px -8px -8px -8px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'><path d='M14 32 C 18 14, 60 8, 100 9 C 150 10, 188 16, 191 30 C 194 46, 150 53, 96 53 C 42 53, 10 48, 9 33 C 9 22, 22 14, 50 11' fill='none' stroke='%23FF5A4D' stroke-width='2.2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* ─── Wavy underline (hand-drawn) ─── */
.pn-underline {
  position: relative;
  display: inline-block;
}
.pn-underline::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px;
  bottom: -6px;
  height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M2 5 C 30 1, 60 7, 96 4 C 130 1, 160 7, 198 3' fill='none' stroke='%23FF5A4D' stroke-width='2.2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* ─── Straight underline w/ slight wobble ─── */
.pn-underline-straight {
  position: relative;
  display: inline-block;
}
.pn-underline-straight::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 4px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4' preserveAspectRatio='none'><path d='M2 2.4 L 60 1.8 L 130 2.6 L 198 2' fill='none' stroke='%23FF5A4D' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

/* ─── Highlighter swipe ─── */
.pn-highlight {
  background: linear-gradient(180deg, transparent 50%, rgba(248, 189, 34, 0.45) 50%);
  padding: 0 0.05em;
}

/* ─── Strike-through (single hand-drawn stroke) ─── */
.pn-strike {
  position: relative;
  display: inline-block;
}
.pn-strike::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px; top: 48%;
  height: 4px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4' preserveAspectRatio='none'><path d='M2 2.5 C 50 1.6, 100 3.2, 198 1.8' fill='none' stroke='%23FF5A4D' stroke-width='2.2' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

/* ─── Margin bracket — wraps a paragraph and points to a note ─── */
.pn-bracketed { position: relative; }
.pn-bracketed::after {
  content: '';
  position: absolute;
  right: -22px; top: 0; bottom: 0;
  width: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'><path d='M2 2 L 11 4 L 11 96 L 2 98' fill='none' stroke='%23FF5A4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}
.pn-bracketed-left::before {
  content: '';
  position: absolute;
  left: -22px; top: 0; bottom: 0;
  width: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'><path d='M12 2 L 3 4 L 3 96 L 12 98' fill='none' stroke='%23FF5A4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* ─── Arrow (pointing left, for margin notes) ─── */
.pn-arrow {
  display: inline-block;
  width: 48px;
  height: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'><path d='M44 12 C 30 10, 16 14, 6 12 M 12 6 L 5 12 L 12 18' fill='none' stroke='%23FF5A4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  vertical-align: middle;
}

/* ─── Asterisk / star — hand-drawn marker ─── */
.pn-star {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M9 2 L 9 16 M 2.5 9 L 15.5 9 M 4 4 L 14 14 M 14 4 L 4 14' fill='none' stroke='%23FF5A4D' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat center / contain;
  vertical-align: middle;
  margin: 0 2px;
}

/* ─── Container helper — gives space for margin notes ─── */
.pn-with-margin {
  position: relative;
  padding-right: 220px;
}
@media (max-width: 900px) {
  .pn-with-margin { padding-right: 0; }
  .pn-margin-note { position: static; display: block; margin-top: 12px; }
}

/* Color variants */
.pn-mark--selva  { --pn-hand-color: #0E5B3D; }
.pn-mark--ink    { --pn-hand-color: #1A1614; }

/* Slight rotation utility for that hand-drawn-not-aligned feel */
.pn-tilt-l { transform: rotate(-1.5deg); }
.pn-tilt-r { transform: rotate(1.5deg); }