:root {
  --t-color-accent: rgba(255, 208, 68, 0.5);
  --highlight-purple: hsl(292, 23%, 38%);
  --highlight-pink: hsl(335, 100%, 75%);
}

h2 {
  position: relative;
}

h2::before {
  content: attr(data-title);
  position: absolute;
  bottom: -3px; left: -3px;
  width: 100%; height: 100%;
  opacity: 0.5;
}

/* ------------- FEATURED ARTICLES / QUICK LINKS SECTION ------------- */
.quick-links-wrapper .row {
  border: 2px solid var(--divider) !important;
  border-radius: 32px;
  overflow: hidden;
}

.quick-links-wrapper .row .col svg {
  top: 35px; left: 20px;
  opacity: 1;
}

.quick-links-wrapper .row .col i.bi-square {
  bottom: -50px; right: 10%;
  font-size: 6rem;
  color: gray;
  opacity: 0.4;
  transform: rotate(-15deg);
  transition: transform 0.2s ease, color 0.15s ease-in-out;
}

/* remove default bs styles for the button (that triggers the modal) */
.quick-links-wrapper .row a {
  background: var(--off-black);
}

/* hover animations */
.quick-links-wrapper .row:hover a {
  border-color: hsl(from var(--divider) h s 30%);
  background: linear-gradient(to bottom right, hsl(from var(--divider) h s 15%));
}
.quick-links-wrapper .row svg { transition: 0.2s ease-in-out; }
.quick-links-wrapper .row:hover svg { fill: var(--color-accent); }
.quick-links-wrapper .row .col:hover i {
  transform: rotate(-11deg) translateY(-4px);
  color: var(--color-accent);
  opacity: 0.8;
}
.quick-links-wrapper .row:hover h3,
.quick-links-wrapper .row:hover p {
  cursor: pointer;
}

/* MODAL STYLING */
.quick-links-wrapper .modal-footer a, 
.quick-links-wrapper .modal-footer button {
  height: 40px;
}

.quick-links-wrapper .modal-footer .btn-outline-secondary {
  border-width: 2px !important;
}

/* featured articles: image carousel */
#featured-section .carousel, #featured-section .carousel-inner, #featured-section .carousel-item {
  overflow: visible !important;
}
#featured-section .carousel-item {
  padding: .5rem;
  background-color: hsl(0, 0%, 85%);
}

#featured-section .carousel-item img {
  height: 500px;
  transition: 0.5s ease;
}

#featured-section .carousel-item img:active {
  position: absolute;
  transform: scale(1.3);
  box-shadow: 5px 5px 32px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(100px);
}

.carousel-control-prev,
.carousel-control-next {
  background-color: rgba(255, 0, 0, 0.75);
}

/* ------------- FILTER BUTTONS SECTION ------------- */
.filter-section button {
  border-width: 2.4px !important;
  transition: all 0.25s ease;
}

/* ------------- ARTICLE GRID SECTION ------------- */
/* ARTICLE BADGE STYLING (NEW, HOT) */
.badge {
  position: relative;
  cursor: pointer;
  backdrop-filter: blur(10px);
  overflow: hidden; /* hides the slash */
}
.badge-new { background: linear-gradient(to right, var(--color-primary), var(--highlight-purple)); }
.badge-hot { background: linear-gradient(to right, var(--highlight-pink), hsl(from var(--highlight-pink) h s 40%)); }

/* periodic slash animation */
.badge::before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: -100%; /* Start off-screen */
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: slash 2s ease-in-out infinite;
}
@keyframes slash {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* PRODUCT CARD STYLING */
.product-card {
  background-color: var(--dark-surface);
  border: 2px solid var(--divider);
  overflow: hidden;
}

/* product image */
.product-card .product-img {
  width: 100%; height: 600px;
  filter: brightness(50%);
  transition: all 0.3s ease; /* used transition all to make the responsive height switches smooth as well. (refer to media queries at bottom of this file) */
}
.product-img:hover {
  filter: brightness(100%);
}

.btn-3d {
  border: none;
  color: var(--text-primary) !important;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.059), transparent) !important;
  box-shadow: inset 0 0.5px #6f6f6f, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 2px;
}
.btn-3d:hover {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.05)) !important;
  box-shadow: inset 0 0.7px #7e7e7e, 0 6px 8px -1px rgb(0 0 0 / 0.15), 0 3px 6px -2px rgb(0 0 0 / 0.1);
  letter-spacing: 2.1px;
}

/* star color using Bootstrap Icons */
.star-rating i {
  color: var(--color-accent);
}

/* ------------- PAGINATION (modified bs base variables) ------------- */
.pagination {
  --bs-pagination-padding-x: 1rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--text-secondary);
  --bs-pagination-bg: var(--elevated-surface);
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-color: var(--divider);
  --bs-pagination-border-radius: 16px;
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-hover-bg: var(--dark-surface);
  --bs-pagination-hover-border-color: var(--color-primary);
  --bs-pagination-focus-color: var(--text-primary);
  --bs-pagination-focus-bg: var(--dark-surface);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(126, 87, 251, 0.25);
  --bs-pagination-active-color: var(--text-heading);
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  --bs-pagination-disabled-color: var(--text-secondary);
  --bs-pagination-disabled-bg: var(--dark-surface);
  --bs-pagination-disabled-border-color: var(--divider);
  
  gap: 1rem;
  margin: 2rem 0;
}

/* 
  ***SPECIAL USE OF MEDIA QUERIES DESPITE BOOTSTRAP FRAMEWORK***
  i am applying specific styles (in this case, a unique 800px height, to my .product-img) ONLY BETWEEN the lg and md breakpoints.
*/
/* between lg and md */
@media (max-width: 991.98px) {
  .product-card .product-img {
    width: 100%;
    height: 800px;
  }
}

/* below md breakpoint */
@media (max-width: 575.98px) {
  .product-card .product-img {
    height: 500px;
  }
}

/* bs medium screens breakpoint */
@media (min-width: 768px) {
  .quick-links-wrapper .row {
    width: 60% !important;
  }
}