/* ── Kalam (local) ──────────────────────────────────────── */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../dynamic/fonts/kalam/kalam-latin-ext-400-normal.woff2') format('woff2'),
       url('../dynamic/fonts/kalam/kalam-latin-400-normal.woff2')     format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../dynamic/fonts/kalam/kalam-latin-ext-700-normal.woff2') format('woff2'),
       url('../dynamic/fonts/kalam/kalam-latin-700-normal.woff2')     format('woff2');
}

/* ═══════════════════════════════════════════════════════════
   WEYWAY — CALLOUT / MESSAGE STYLES
   Targets Publii's built-in .msg classes:

     .msg.msg--highlight   → post-it note
     .msg.msg--warning     → rubber stamp
     .msg.msg--info        → marginalia (handwritten aside)
     .msg.msg--success     → tick + underline (confirmed)

   Marginalia usage in post HTML:
     Wrap the paragraph + .msg--info in:
       <div class="marginalia-right"> or
       <div class="marginalia-left">
     Fine-tune per note with style="top:Xrem; transform:rotate(Xdeg)"
     on the .msg element itself.

   All four callouts work with plain text only — no extra HTML needed.
   The warning label and stamp are injected entirely via CSS ::before/::after.

   Mobile (≤600px):
     Marginalia collapses to an inline handwritten aside,
     indented with a left border, sitting between paragraphs.
     Arrows are hidden. All other callouts scale down slightly.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. msg--highlight → POST-IT NOTE ──────────────────────
   ::before covers the bottom-left corner in the page bg colour.
   ::after draws the fold triangle on top.
   ─────────────────────────────────────────────────────────── */
.msg.msg--highlight {
  position: relative;
  background: #fff9a0 !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 0.9rem 1.1rem 1.2rem 1rem !important;
  width: fit-content;
  transform: rotate(-1.2deg);
  box-shadow: 20px 6px 15px 0px rgba(0,0,0,0.10);
  margin: 0.5rem 0 1.25rem 1.5rem;
  font-family: 'Kalam', cursive;
  line-height: 1.55;
  color: #4a3a00 !important;
  display: block;
}
/* Single gradient element — lower-left triangle = page bg (peeled corner),
   upper-right triangle = fold crease colour. No alignment seam possible. */
.msg.msg--highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(45deg, var(--page-bg) 50%, #c8a800 50%);
  pointer-events: none;
}

:root.color-scheme--dark .msg.msg--highlight {
  background: #2e2a00 !important;
  color: #c0a030 !important;
}
:root.color-scheme--dark .msg.msg--highlight::after {
  background: linear-gradient(45deg, var(--page-bg) 50%, #6a5400 50%);
}

@media (max-width: 600px) {
  .msg.msg--highlight {
    max-width: 220px;
    font-size: 13px;
    margin-left: 1rem;
  }
}

/* ── 2. msg--warning → RUBBER STAMP ────────────────────────
   Plain text inside .msg.msg--warning is all that's needed.
   ::before injects the "WARNING" label; ::after places the stamp.
   ─────────────────────────────────────────────────────────── */
.msg.msg--warning {
  position: relative;
  border: 2px solid #e06040;
  box-shadow: inset 0 0 0 1px rgba(224,96,64,0.12);
  border-radius: 4px;
  padding: 0.8rem 1rem 0.8rem 1rem;
  padding-right: 3.5rem; /* clear the stamp */
  margin: 0.5rem 0 1rem;
  display: block;
  background: #fff7f5;
  font-family: 'Kalam', cursive;
  font-size: inherit;
  line-height: 1.65;
  color: #3a1000;
}

:root.color-scheme--dark .msg.msg--warning {
  background: #2a0a00;
  border-color: #c04828;
  box-shadow: inset 0 0 0 1px rgba(192,72,40,0.15);
  color: #e0a880;
}

/* "WARNING" label generated above the text */
.msg.msg--warning::before {
  content: 'WARNING';
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #b83010;
}
:root.color-scheme--dark .msg.msg--warning::before { color: #f08060; }

/* Stamp SVG — light mode */
.msg.msg--warning::after {
  content: '';
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 42px;
  height: 42px;
  transform: rotate(-12deg);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='21' cy='21' rx='18.5' ry='18' stroke='rgba(184,48,16,0.55)' stroke-width='1.8' stroke-dasharray='3 1.2'/%3E%3Cellipse cx='21' cy='21' rx='14' ry='13.5' stroke='rgba(184,48,16,0.3)' stroke-width='1'/%3E%3Cline x1='21' y1='13' x2='21' y2='23' stroke='rgba(184,48,16,0.7)' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='21' cy='27.5' r='1.6' fill='rgba(184,48,16,0.7)'/%3E%3C/svg%3E");
}

/* Stamp SVG — dark mode */
:root.color-scheme--dark .msg.msg--warning::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='21' cy='21' rx='18.5' ry='18' stroke='rgba(240,128,96,0.55)' stroke-width='1.8' stroke-dasharray='3 1.2'/%3E%3Cellipse cx='21' cy='21' rx='14' ry='13.5' stroke='rgba(240,128,96,0.3)' stroke-width='1'/%3E%3Cline x1='21' y1='13' x2='21' y2='23' stroke='rgba(240,128,96,0.7)' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='21' cy='27.5' r='1.6' fill='rgba(240,128,96,0.7)'/%3E%3C/svg%3E");
}

/* ── 3. msg--info → MARGINALIA ──────────────────────────────
   Wrap the paragraph + note in .marginalia-right or .marginalia-left.
   ─────────────────────────────────────────────────────────── */
.marginalia-right {
  position: relative;
  padding-right: 172px;
  margin-bottom: 0.75rem;
}
.marginalia-left {
  position: relative;
  /*padding-left: 172px;*/
  margin-bottom: 0.75rem;
}
.marginalia-right .msg.msg--info {
  position: absolute;
  right: 0;
  top: 0;
  width: 160px;
  text-align: left;
}
.marginalia-left .msg.msg--info {
  position: absolute;
  left: -200px;
  top: 0;
  width: 160px;
  text-align: right;
}

.msg.msg--info {
  font-family: 'Kalam', cursive;
  font-size: 0.82em;
  line-height: 1.5;
  display: block;
  color: #a0aeff;
  /* Reset Publii default msg padding/border */
  padding: 0;
  border: none;
  background: none;
}

/* Light mode — via class or OS preference */
:root.color-scheme--light .msg.msg--info { color: #3545b8; }
@media (prefers-color-scheme: light) { .msg.msg--info { color: #3545b8; } }

/* Dark mode — explicit override in case class is set */
:root.color-scheme--dark .msg.msg--info { color: #a0aeff; }

/* Arrows — auto-generated, no inline SVG needed in HTML */
/* Right marginalia: arrow curves left toward the paragraph */
.marginalia-right .msg.msg--info::after {
  content: '';
  display: block;
  width: 44px;
  height: 20px;
  margin-top: 4px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='44' height='20' viewBox='0 0 44 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 C32 4 18 15 7 13' stroke='rgba(136,152,240,0.5)' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M9 10 L7 13 L10.5 14' stroke='rgba(136,152,240,0.5)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root.color-scheme--light .marginalia-right .msg.msg--info::after {
  background-image: url("data:image/svg+xml,%3Csvg width='44' height='20' viewBox='0 0 44 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 C32 4 18 15 7 13' stroke='rgba(42,56,180,0.45)' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M9 10 L7 13 L10.5 14' stroke='rgba(42,56,180,0.45)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Left marginalia: arrow curves right toward the paragraph, pushed to right edge */
.marginalia-left .msg.msg--info::after {
  content: '';
  display: block;
  width: 40px;
  height: 20px;
  margin-top: 4px;
  margin-left: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5 C12 4 24 15 35 13' stroke='rgba(136,152,240,0.5)' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M33 10 L35 13 L32 14.5' stroke='rgba(136,152,240,0.5)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root.color-scheme--light .marginalia-left .msg.msg--info::after {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5 C12 4 24 15 35 13' stroke='rgba(42,56,180,0.45)' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M33 10 L35 13 L32 14.5' stroke='rgba(42,56,180,0.45)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Mobile collapse */
@media (max-width: 600px) {
  .marginalia-right, .marginalia-left { padding-right: 0; padding-left: 0; }
  .marginalia-right .msg.msg--info,
  .marginalia-left  .msg.msg--info {
    position: static;
    width: auto;
    text-align: left;
    display: block;
    margin: 0.25rem 0 0.65rem 1.25rem;
    padding-left: 0;
    border-left: none;
    font-size: 13px;
    transform: none !important;
  }
  /* Up-arrow pointing back to the paragraph above */
  .marginalia-right .msg.msg--info::before,
  .marginalia-left  .msg.msg--info::before {
    content: '';
    display: block;
    width: 24px;
    height: 20px;
    margin-bottom: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none'%3E%3Cpath d='M12 18 C11 14 9 8 12 3' stroke='rgba(42,56,200,0.4)' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M9 6 L12 3 L15 6' stroke='rgba(42,56,200,0.4)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .marginalia-right .msg.msg--info svg,
  .marginalia-left  .msg.msg--info svg { display: none; }
  .marginalia-right .msg.msg--info::after,
  .marginalia-left  .msg.msg--info::after { display: none; }
}

/* Marginalia helper spans */
.mnote-ul {
  text-decoration: underline wavy rgba(42,56,200,0.4);
  text-underline-offset: 3px;
}
.mnote-circ {
  border: 1.5px solid rgba(42,56,200,0.48);
  border-radius: 50% 45% 55% 48% / 48% 55% 45% 52%;
  padding: 0 4px;
  display: inline-block;
}
.mnote-del {
  text-decoration: line-through;
  text-decoration-color: rgba(180,30,30,0.5);
}
.mnote-arr       { display: block; margin-top: 3px; }
.mnote-arr--left { display: block; margin-top: 3px; margin-left: auto; }

:root.color-scheme--dark .mnote-ul   { text-decoration-color: rgba(136,152,240,0.4); }
:root.color-scheme--dark .mnote-circ { border-color: rgba(136,152,240,0.45); }

/* ── 4. msg--success → TICK + UNDERLINE ────────────────────
   ─────────────────────────────────────────────────────────── */
.msg.msg--success {
  position: relative;
  /*padding-left: 3rem;*/
  margin: 0.4rem 0 1rem;
  font-family: 'Kalam', cursive;
  font-size: inherit;
  line-height: 1.6;
  transform: rotate(-0.5deg);
  display: block;
  color: #399955;
  /* Reset Publii defaults */
  background: none;
  border: none;
}
:root.color-scheme--dark .msg.msg--success { color: #80c898; }

/* Tick mark */
.msg.msg--success::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-3deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M4 17 C6 15 9 19 12 23 C15 20 22 10 30 5' stroke='rgba(14,138,80,0.72)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root.color-scheme--dark .msg.msg--success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none'%3E%3Cpath d='M4 17 C6 15 9 19 12 23 C15 20 22 10 30 5' stroke='rgba(80,210,130,0.72)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Wavy underline rule */
.msg.msg--success::after {
  content: '';
  display: block;
  margin-top: 6px;
  width: 110px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 8' fill='none'%3E%3Cpath d='M2 5 C20 3 42 6 64 4 C78 3 94 5 108 4' stroke='rgba(14,138,80,0.45)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root.color-scheme--dark .msg.msg--success::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 8' fill='none'%3E%3Cpath d='M2 5 C20 3 42 6 64 4 C78 3 94 5 108 4' stroke='rgba(80,210,130,0.4)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}