/**
 * Beehive-inspired UI overrides
 * SaltedSpace UI Overhaul - Welcome & Landing Pages
 */

:root {
  --beehive-primary: #8224E3;
  --beehive-secondary: #11cdef;
  --beehive-card-bg: #fff;
  --beehive-card-shadow: 1px 0 4px rgba(0, 0, 0, 0.15);
  --beehive-card-hover: 1px 0 8px rgba(0, 0, 0, 0.25);
}

/* Beehive feature cards - Community, Market, Jobs */
.beehive-feature-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 2rem 0;
}

.beehive-feature-card {
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  background: var(--beehive-card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--beehive-card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.beehive-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--beehive-card-hover);
  color: inherit;
}

.beehive-feature-card .card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beehive-feature-card .card-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.beehive-feature-card h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #32325d;
}

.beehive-feature-card p {
  font-size: 0.9rem;
  color: #8898aa;
  margin: 0;
  line-height: 1.5;
}

/* Join the club hero */
.beehive-join-hero {
  text-align: center;
  padding: 2rem 1rem;
}

.beehive-join-hero h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #32325d;
  margin-bottom: 0.75rem;
}

.beehive-join-hero p {
  font-size: 1rem;
  color: #8898aa;
  max-width: 500px;
  margin: 0 auto;
}

/* Compact login block - Beehive style */
.beehive-login-block {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--beehive-card-shadow);
  max-width: 400px;
  margin: 2rem auto;
}

.beehive-login-block h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
  color: #32325d;
}

/* Members widget for guests - Beehive style */
.beehive-members-widget .card-header {
  font-weight: 600;
  color: #32325d;
}

/* Beehive About Group card */
.beehive-about-card .card-header {
  font-weight: 600;
  color: #32325d;
  padding: 0.75rem 1rem;
}

/* Beehive offers/adverts grid */
.card.product .product-overlay .btn {
  font-weight: 500;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .beehive-feature-cards {
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
  }
  
  .beehive-feature-card {
    max-width: 100%;
    min-width: 100%;
  }
  
  .beehive-join-hero h2 {
    font-size: 1.5rem;
  }
  
  .beehive-login-block {
    margin: 1rem auto;
    padding: 1.5rem;
  }
}

/* Cross-browser: ensure filters work in older browsers */
@supports not (filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15))) {
  .svg-container.icon-3d svg {
    filter: none;
  }
}

/* Extended Components - Beehive Style */

/* Activity Feed & Posts */
.post .post-avatar,
.post-comment .post-comment-avatar {
  border: solid 2px #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post .post-body,
.post-comment .comment-body {
  min-width: 0;
}

.post-actions a,
.post-actions button {
  transition: all 0.2s ease;
}

.post-actions a:hover,
.post-actions button:hover {
  color: var(--beehive-primary);
  transform: translateY(-1px);
}

/* Groups */
.group-card,
.group-item {
  transition: all 0.2s ease;
}

.group-card:hover,
.group-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--beehive-card-hover);
}

.group-card .group-avatar img,
.group-item .group-avatar img {
  border: solid 2px #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Profile */
.profile-card,
.profile-cover {
  box-shadow: var(--beehive-card-shadow);
}

.profile-avatar img {
  border: solid 4px #FFF;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.profile-name {
  font-family: var(--heading-font-family);
  font-weight: 700;
  color: var(--heading-color);
}

/* Adverts/Products */
.product-card,
.advert-card {
  transition: all 0.2s ease;
  box-shadow: var(--beehive-card-shadow);
}

.product-card:hover,
.advert-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--beehive-card-hover);
}

.product-card .product-image,
.advert-card .advert-image {
  border-radius: 12px 12px 0 0;
}

/* Buttons in cards */
.card .btn,
.beehive-feature-card .btn,
.product-card .btn,
.advert-card .btn {
  border-radius: 9999px;
  transition: all 0.2s ease;
}

.card .btn:hover,
.beehive-feature-card .btn:hover,
.product-card .btn:hover,
.advert-card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(130, 36, 227, 0.25);
}

/* Lists */
.list-group-item {
  transition: all 0.2s ease;
  border-color: var(--border-color);
}

.list-group-item:hover {
  background-color: rgba(130, 36, 227, 0.05);
  border-color: var(--beehive-primary);
}

/* User cards and widgets */
.widget-card,
.user-card {
  box-shadow: var(--beehive-card-shadow);
  transition: all 0.2s ease;
}

.widget-card:hover,
.user-card:hover {
  box-shadow: var(--beehive-card-hover);
}

.user-card .user-avatar img {
  border: solid 2px #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modals */
.modal-content {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: none;
}

.modal-header {
  border-radius: 16px 16px 0 0;
  background: linear-gradient(135deg, rgba(130, 36, 227, 0.05) 0%, rgba(130, 36, 227, 0.02) 100%);
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-family: var(--heading-font-family);
  font-weight: 700;
  color: var(--heading-color);
}

/* Forms */
.form-control:focus,
.form-select:focus {
  border-color: var(--beehive-primary);
  box-shadow: 0 0 0 3px rgba(130, 36, 227, 0.15);
}

/* Tabs */
.nav-tabs .nav-link {
  border-radius: 9999px 9999px 0 0;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
  color: var(--beehive-primary);
  background-color: rgba(130, 36, 227, 0.05);
}

.nav-tabs .nav-link.active {
  color: var(--beehive-primary);
  border-bottom-color: var(--beehive-primary);
}

/* Pagination */
.pagination .page-link {
  border-radius: 9999px;
  margin: 0 4px;
  transition: all 0.2s ease;
}

.pagination .page-link:hover {
  color: #fff;
  background-color: var(--beehive-primary);
  border-color: var(--beehive-primary);
  transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
  background-color: var(--beehive-primary);
  border-color: var(--beehive-primary);
}

/* Night mode adjustments */
body.night-mode .card,
body.night-mode .modal-content,
body.night-mode .widget-card,
body.night-mode .user-card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.night-mode .profile-avatar img,
body.night-mode .user-card .user-avatar img,
body.night-mode .group-card .group-avatar img {
  border-color: var(--card-dark-color);
}