/**
 * Admin Preview – CMS Highlight Styles
 * Injected when ?cms=1 is present (preview iframe).
 * Split from admin-live-preview.js for maintainability.
 */

/* ── Section-level highlight (active section indicator) ── */
.cms-highlight {
  outline: 3px solid #6366f1 !important;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px rgba(99,102,241,0.1);
  transition: outline 0.2s ease, box-shadow 0.2s ease;
}

/* ── Element-level highlight (bidirectional link indicator) ── */
@keyframes hnElementPulse {
  0%   { box-shadow: 0 0 0 0 rgba(168,85,247,0.6); }
  50%  { box-shadow: 0 0 16px 4px rgba(168,85,247,0.3); }
  100% { box-shadow: 0 0 12px rgba(168,85,247,0.35); }
}
.hn-element-highlight {
  outline: 3px solid #a855f7 !important;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(168,85,247,0.35);
  animation: hnElementPulse 0.6s ease-out;
  transition: outline 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  z-index: 10;
}

/* ── Click ripple feedback ── */
@keyframes hnClickRipple {
  0%   { box-shadow: 0 0 0 0 rgba(168,85,247,0.5); }
  100% { box-shadow: 0 0 0 12px rgba(168,85,247,0); }
}
.hn-click-ripple {
  animation: hnClickRipple 0.6s ease-out !important;
}

/* ── Hover indicators on editable elements ── */
[data-cms-section] {
  cursor: pointer;
  position: relative;
  transition: outline 0.15s ease;
}
[data-cms-section]:hover {
  outline: 2px dashed rgba(99, 102, 241, 0.35);
  outline-offset: -2px;
}
[data-cms-field] {
  cursor: pointer;
  transition: outline 0.15s ease, background 0.15s ease;
}
[data-cms-field]:hover {
  outline: 2px solid rgba(99, 102, 241, 0.5);
  outline-offset: 2px;
  background: rgba(99, 102, 241, 0.06);
}
[data-cms-subfield] {
  cursor: pointer;
  transition: outline 0.15s ease, background 0.15s ease;
}
[data-cms-subfield]:hover {
  outline: 2px solid rgba(99, 102, 241, 0.5);
  outline-offset: 2px;
  background: rgba(99, 102, 241, 0.06);
}
[data-cms-index] {
  cursor: pointer;
  transition: outline 0.15s ease, background 0.15s ease;
}
[data-cms-index]:hover {
  outline: 1px dashed rgba(99, 102, 241, 0.3);
  outline-offset: 1px;
}