/**
 * @file
 * Styles for the ⭐ Electromoisés highlighted category in Layout Builder.
 * Scoped to the off-canvas dialog wrapper so it applies inside the sidebar.
 */

/* ── Highlighted category ────────────────────────────────────────────── */
#drupal-off-canvas-wrapper .js-layout-builder-category.lb-custom-highlight,
.js-layout-builder-category.lb-custom-highlight {
  border: 2px solid #0d6efd !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #e8f0fe 0%, #d0e3ff 100%) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.18) !important;
}

/* Summary / toggle bar */
#drupal-off-canvas-wrapper .js-layout-builder-category.lb-custom-highlight > summary,
.js-layout-builder-category.lb-custom-highlight > summary {
  font-weight: 700 !important;
  font-size: 1.05em !important;
  color: #0a58ca !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  background: rgba(13, 110, 253, 0.06) !important;
  border-radius: 6px 6px 0 0 !important;
  letter-spacing: 0.02em !important;
}

/* Links inside the highlighted category */
#drupal-off-canvas-wrapper .js-layout-builder-category.lb-custom-highlight a,
.js-layout-builder-category.lb-custom-highlight a {
  font-weight: 600 !important;
  color: #0d6efd !important;
}

#drupal-off-canvas-wrapper .js-layout-builder-category.lb-custom-highlight a:hover,
.js-layout-builder-category.lb-custom-highlight a:hover {
  color: #0a58ca !important;
  text-decoration: underline !important;
}

/* ── Collapsed categories – subtle dimming ───────────────────────────── */
#drupal-off-canvas-wrapper .js-layout-builder-category:not(.lb-custom-highlight) > summary,
.js-layout-builder-category:not(.lb-custom-highlight) > summary {
  opacity: 0.85;
}

#drupal-off-canvas-wrapper .js-layout-builder-category:not(.lb-custom-highlight):not([open]),
.js-layout-builder-category:not(.lb-custom-highlight):not([open]) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}