/* public/css/components/content-block.css */

/* Base “content-block” styling (BEM naming) */

:root {
  /* Default box background and border colors */
  --box-bg: rgba(255, 255, 255, 0.1);
  --box-border: #444;
  --box-border-radius: 8px;

  /* Text defaults inside a content-block */
  --content-text-color: #ffd6e8;
  --content-font-size: 1rem;

  /* Panel (box) specific overrides */
  --panel-bg: rgba(42, 42, 42, 0.8);
  --panel-border-radius: 6px;
  --panel-padding: 12px;

  /* Transparent‐text variant (no background/border) */
  --transparent-bg: transparent;
  --transparent-border: none;
  --transparent-shadow: none;

  /* Image‐block fallback */
  --image-border-radius: 4px;
}

.content-block {
  /* Use the CSS variables we declared above */
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-radius: var(--box-border-radius);

  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* for absolutely‐positioned children like remove buttons */

  /* Let inline JS‐set width/height take effect (no forced 100%) */
  width: auto;
  height: auto;

  /* Do not allow children to steal pointer events unless .draggable */
  pointer-events: none;
}
.content-block--transparent {
  background: var(--transparent-bg) !important;
  border: var(--transparent-border) !important;
  border-radius: var(--transparent-border-radius, 0) !important;
  box-shadow: var(--transparent-shadow) !important;
  padding: 0 !important; /* remove default padding if any is applied */
}

/* THE ONE HEADER RULE (use this on every <h2> inside a box) */
.content-block__header {
  margin: 0;
  color: var(--header-text-color, var(--content-text-color));
  font-size: var(--header-font-size, 1.25rem);
  text-align: center;
  padding: var(--header-padding, 0.5rem 0);
  border-bottom: 1px solid var(--box-border);
  background: var(--header-bg, rgba(0, 0, 0, 0.2));
}

/* Optional: content area for text panels */
.content-block__body {
  padding: 0.5rem;
  flex: 1;
  overflow-y: auto;
}

/* ─── 7) (Optional) Image‐block and generic text‐block styling ─────────── */
/* This part remains unchanged if you still have other text/images absolutely placed */
.content-block--image img {
  object-fit: cover;
  border-radius: var(--image-border-radius);
}

/* 4) Generic text‐block variant: use variables for colors/padding */
.content-block--text {
  background: var(--text-bg, rgba(255, 255, 255, 0.1));
  border-radius: var(--text-border-radius, 4px);
  padding: var(--text-padding, 4px);
  color: var(--text-color, #ffd6e8);
  font-size: var(--text-font-size, 1rem);
}

/* Book‐list inside a book panel */
.book-list {
  flex: 1;
  overflow-y: auto;
}

/* Individual book items */
.book-item {
  border-bottom: 1px solid var(--box-border, #444);
  padding: 0.5rem;
  position: relative;
}
.book-item:last-child {
  border-bottom: none;
}
.book-title {
  font-weight: bold;
  color: var(--accent1);
}
.book-meta {
  font-size: 0.9rem;
  color: #ccc;
}

/* ─── Override: let .draggable receive pointer events ─── */
.draggable {
  pointer-events: auto !important;
}

/* …but none of its children should steal them. */
.draggable * {
  pointer-events: none;
}

/* 
  1) The base “highlighted‐draggable” class:
  – border: 2px dotted yellow
  – animation: pulseBlink 1s infinite
*/
.highlighted-draggable {
  position: relative; /* (ensure it can carry its own border) */
  border: 2px dotted #ffe564; /* choose any dotted‐line color you like */
  animation: pulseBlink 1s infinite;
}

/* 
  2) pulseBlink keyframes:
  – at 0%: border is fully visible 
  – at 50%: border-color becomes transparent → “blinks”
  – at 100%: back to visible 
*/
@keyframes pulseBlink {
  0% {
    border-color: #ffe564; /* same as above */
  }
  50% {
    border-color: transparent;
  }
  100% {
    border-color: #ffe564;
  }
}