/* General styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Dosis', sans-serif;
    background-color: #181818;
    color: #fff;
    overflow: auto; /* Allow page scrolling */
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #111;
}

.logo img {
    width: 80px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

main {
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background-color: transparent; /* Needed for flipping effect */
  border-radius: 10px;
  cursor: pointer;
  perspective: 1000px;
  height: 200px; /* Ensures consistent height */
  position: relative;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #222;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Flip */
.card-back {
  transform: rotateY(180deg);
}

/* Responsive h2 and p text sizing */
.card-front h2,
.card-back p {
  font-size: clamp(12px, 1.5vw, 18px);
  text-align: center;
  word-break: break-word;
}

/* Center p elements and keep them tidy */
.card-back p {
  width: fit-content;
  max-width: 100%;
  margin: 4px 0;
  white-space: normal;
}


#search-bar {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #222;
    color: #fff;
}

.filters-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin-bottom: 20px; /* Add margin here to create space below the filter bar */
}

.center-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.sort-button-container {
    position: absolute;
    right: 20px; /* Adjust based on your padding */
}

.sort-button {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    background-color: #333;
    cursor: pointer;
}

.sort-button i {
    color: #fff;
}

.flip-button {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    background-color: #333;
    cursor: pointer;
}

.flip-button i {
    color: #fff;
}


.label-answer {
    color: limegreen;
    font-weight: bold;
}

.label-question {
  color: limegreen;
  font-weight: bold;
}

.label-1st {
    color: cyan;
    font-weight: bold;
}

.label-2nd {
    color: yellow;
    font-weight: bold;
}

.label-3rd {
    color: orange;
    font-weight: bold;
}

/* ------------------------------
   Light Mode Theme
------------------------------ */

#themeToggle {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
}

body.light-mode {
    background-color: #f5f5f5;
    color: #000;
}

body.light-mode header {
    background-color: #e0e0e0;
}

body.light-mode nav ul li a {
    color: #000;
}

body.light-mode #search-bar {
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
}

body.light-mode .sort-button,
body.light-mode .flip-button {
    background-color: #e0e0e0;
    border: 1px solid #bbb;
    color: #000;
}

body.light-mode .sort-button i,
body.light-mode .flip-button i,
body.light-mode .fa-solid {
    color: #000;
}

/* Darker label colors for light mode */
body.light-mode .label-answer,
body.light-mode .label-question {
    color: #2e7d32; /* dark green */
}

body.light-mode .label-1st {
    color: #007c91; /* dark cyan */
}

body.light-mode .label-2nd {
    color: #b28900; /* dark yellow/gold */
}

body.light-mode .label-3rd {
    color: #aa6c00; /* dark orange */
}

/* Smooth transitions */
.label-answer,
.label-question,
.label-1st,
.label-2nd,
.label-3rd,
.fa-solid,
.sort-button,
.flip-button {
    transition: color 0.3s ease;
}

/* Light Mode: card front and back background + text */
body.light-mode .card-front,
body.light-mode .card-back {
  background-color: #fff;
  color: #000;
}

/* Light Mode: headings and paragraph text inside cards */
body.light-mode .card-front h2,
body.light-mode .card-back p {
  color: #000;
}