/* 
  Core site-wide base styles.
  Logical sections refactored into:
  - _backgrounds.css (Global and settings-driven body backgrounds)
  - _logo.css (Header logo styling, shadows, and reflections)
  - _grid.css (Main homepage media grids and item layout)
  - _search-input.css (Homepage search bar variations)
  - _category-header.css (Animated category titles and sort ball)
*/
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar { display: none; }

/* Sidebar open lock */
body.sidebar-open {
  overflow: hidden !important;
  height: 100vh; width: 100vw;
}

.container {
  max-width: 90%;
  margin: 0 auto;
  padding: 2vh 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2vh;
  width: 100%;
}

.header-top {
  width: 100%;
  padding: calc(2vh + 20px) 0 calc(2vh - 20px) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2vh;
}

h1 { color: var(--primary-color); margin: 0; display: none; }

/* Quick Links Layout (Buttons styled in components.css) */
.quick-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: center;
  column-gap: 20px;
  row-gap: 10px;
  margin-bottom: 2vh;
}

/* Category display floating sticky */
.category-display {
  font-family: 'Abril Fatface', cursive;
  font-size: 1.2rem;
  padding: 8px 16px;
  margin: 20px;
  background: none;
  color: var(--text-color);
  border-radius: 5px;
  text-transform: uppercase;
  display: none;
  align-items: center;
  position: sticky;
  top: 2vh;
  z-index: 999;
  transition: opacity 0.5s;
  font-weight: bold; 
}
.category-display.visible { display: flex; opacity: 0.85; }
.category-display.fade { opacity: 0; }

[data-theme^="light"] .category-display { color: #000 !important; }

/* Global UI Utils */
.save-checkmark {
    position: fixed;
    width: 90px; height: 90px; border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--text-color); font-size: 48px;
    display: flex; align-items: center; justify-content: center;
    z-index: 60000; pointer-events: none; opacity: 0;
    transform: scale(0.5);
    box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.6);
}
.save-checkmark.visible {
    opacity: 1; transform: scale(1);
    animation: snap-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes snap-pop {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.15); }
    80% { opacity: 1; transform: scale(0.98); }
    100% { opacity: 0; transform: scale(0.6); }
}