/* Custom styles for transparent background when embedded in Homepage */

/* Set modern font stack to match Homepage */
html,
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

/* Apply font consistently throughout the application */
*,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.widget-header,
.widget-title,
.stat-label,
.stat-value {
  font-family: inherit !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Target all major container elements */
body,
#app,
.app-wrapper,
.page-container,
.page-content,
.main-container,
.widget-container,
.column-container,
.page-columns,
.widget-content,
.app-background,
[class*="background"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Override any potential page background */
.page-background {
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Make widgets semi-transparent but still visible */
.widget {
  background-color: rgba(20, 25, 35, 0.6) !important;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Make video thumbnails slightly smaller */
.widget-type-videos .thumbnail {
  width: 75%;
  margin: auto;
}

/* Style video widget tiles */
.widget-type-videos .video-tile {
  background-color: rgba(58, 70, 96, 1) !important;
}

/* Adjust font size for better readability */
.size-h4 {
  font-size: 0.95rem;
}

/* Soften the Reddit widget headers */
.widget-type-reddit .widget-header {
  padding: 8px 10px;
  font-weight: 500;
  background-color: transparent !important;
}

/* Add a subtle hover effect to clickable items */
a:hover,
.bookmarks-link:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

/* Make media stats cards more consistent with Homepage */
.stat-box {
  border-radius: 8px;
  transition: background-color 0.2s ease;
  background-color: rgba(58, 70, 96, 1) !important;
}

.stat-box:hover {
  background-color: rgba(58, 70, 96, 1) !important;
}

/* Remove background from expand toggle button */
button.expand-toggle-button {
  background: transparent !important;
  background-color: transparent !important;
  display: none !important;
}

/* Reduce top margin for better spacing */
.margin-top-10 {
  margin-top: .2rem;
}

.margin-top-7 {
  margin-top: .2rem;
}

.margin-bottom-widget {
  margin-bottom: .2rem;
}

/* Override widget content background color */
.widget-content:not(.widget-content-frameless),
.widget-content-frame {
  background: #1C5063 !important;
  background-color: #1C5063 !important;
}