/*
 * youtube.css - Unique styles for the YouTube page
 */
body {
  background-image: url("../images/racks.png");
}

.resource-grid {
  margin-top: 1.5rem;
  padding: 0 1.5rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, 1fr);
}

.resource-card {
  background: rgba(17, 34, 45, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.8rem;
  color: #e8f0f4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.resource-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.resource-card__title {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
}

.btn-pill {
  padding: 0.28rem 0.6rem;
  background: #3b83f7;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.64rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3px 10px rgba(59, 131, 247, 0.35);
  white-space: nowrap;
}

.btn-pill:hover {
  background: #2a6fd9;
}

.resource-card__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.resource-card__section-title {
  font-size: 0.6rem;
  font-weight: 600;
  color: #b8c6d1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.category-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-box {
  padding: 0.24rem 0.4rem;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(219, 231, 239, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.category-box--active {
  background: rgba(79, 179, 255, 0.25);
  color: #4fb3ff;
  border-color: rgba(79, 179, 255, 0.4);
  box-shadow: 0 2px 8px rgba(79, 179, 255, 0.2);
}

.resource-card__footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.favorites-group {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.favorite-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.24rem 0.48rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.64rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: inherit;
}

.favorite-indicator--love {
  background: rgba(255, 107, 129, 0.15);
  color: #ff9eb3;
  border: 1px solid rgba(255, 107, 129, 0.3);
}

.favorite-indicator--love:hover:not(:disabled) {
  background: rgba(255, 107, 129, 0.3);
  box-shadow: 0 2px 8px rgba(255, 107, 129, 0.25);
}

.favorite-indicator--like {
  background: rgba(79, 179, 255, 0.15);
  color: #4fb3ff;
  border: 1px solid rgba(79, 179, 255, 0.3);
}

.favorite-indicator--like:hover:not(:disabled) {
  background: rgba(79, 179, 255, 0.3);
  box-shadow: 0 2px 8px rgba(79, 179, 255, 0.25);
}

.icon {
  font-size: 0.76rem;
}

.favorite-count {
  font-weight: 700;
  font-size: 0.7rem;
  opacity: 0.9;
}

.resource-card--placeholder {
  display: grid;
  place-items: center;
  min-height: 200px;
  font-weight: 600;
  color: #dbe7ef;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: rgba(17, 34, 45, 0.4);
}

/* Reduce top-right logo size on YouTube page only */
.youtube-page::after {
  width: 270px; /* 40% reduction from global 450px */
  height: 150px; /* 40% reduction from global 250px */
}

/* Bottom-right disclaimer box specific to YouTube page */
.disclaimer-box {
  position: fixed;
  right: 8px; /* slight inset from edge */
  bottom: calc(30px + 8px); /* just above the footer height */
  background: #e6e6e6;
  color: #222;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.35;
  max-width: 462px; /* matches Websites width */
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}
 * The current body::before styles are inherited from styles.css.
 */
/* body::before {
    background: radial-gradient(
        1000px 600px at 60% 30%,
        transparent 0,
        rgba(11, 26, 36, 0.5) 70% 
      ),
      linear-gradient(to right, rgba(11, 26, 36, 0.7), rgba(11, 26, 36, 0.3));
}
*/