/* styles.css */

/* Custom styles that work with DaisyUI */

/* Bookmark card styling for grid view */
.bookmark-card {
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

/* Semi-transparent overlay for text readability */
.bookmark-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.6)
  );
  z-index: 1;
}

.bookmark-card .card-body {
  position: relative;
  z-index: 2;
}

/* Favicon styling to match card border radius */
[id^='hm_links-favicon-'],
[id^='hm_links-list-favicon-'],
.hm_links-favicon {
  border-radius: var(--rounded-box, 1rem);
  overflow: hidden;
  object-fit: cover;
  border: 1px solid rgba(var(--b3, var(--b2)) / var(--tw-bg-opacity, 1));
}

/* Ensure favicon border radius is applied in all themes */
:root {
  --favicon-border-radius: var(--rounded-box, 1rem);
}

[data-theme] [id^='hm_links-favicon-'],
[data-theme] [id^='hm_links-list-favicon-'],
[data-theme] .hm_links-favicon {
  border-radius: var(--favicon-border-radius);
  transition: border-radius 0.3s ease;
}

/* Theme selector styling */
.dropdown-content button.active {
  background-color: hsl(var(--p) / 0.2);
  color: hsl(var(--p));
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bookmark-card {
    min-height: 150px;
  }
}