/* Custom CSS for Playbattlespain */

/* Font settings from Google Fonts */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
}
body {
  font-family: "Poppins", sans-serif;
}

/* Material Symbols initialization */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Custom gradient text for headings */
.gradient-text {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Base button styling to remove underline */
button {
  text-decoration: none !important;
}

/* Hero section game card animations */
#game-card-stack .game-card:nth-child(1) {
  animation: card-fly-in-1 0.8s ease-out forwards;
}
#game-card-stack .game-card:nth-child(2) {
  animation: card-fly-in-2 0.8s ease-out forwards 0.2s;
}
#game-card-stack .game-card:nth-child(3) {
  animation: card-fly-in-3 0.8s ease-out forwards 0.4s;
}

@keyframes card-fly-in-1 {
  from {
    opacity: 0;
    transform: translateY(100%) rotate(10deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes card-fly-in-2 {
  from {
    opacity: 0;
    transform: translateY(100%) rotate(10deg);
  }
  to {
    opacity: 1;
    transform: translateY(20px) translateX(20px) rotate(0deg);
  }
}
@keyframes card-fly-in-3 {
  from {
    opacity: 0;
    transform: translateY(100%) rotate(10deg);
  }
  to {
    opacity: 1;
    transform: translateY(40px) translateX(40px) rotate(0deg);
  }
}

/* Ensure game cards have consistent height in games section */
.game-card-item .h-48 {
  height: 12rem; /* Fixed height for image container */
}

/* Blog card image height consistency */
.blog-card img {
  height: 12rem; /* Fixed height for blog card images */
}

/* Footer accordion styles for mobile */
@media (max-width: 767px) {
  .footer-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  .footer-accordion-content.active {
    max-height: 200px; /* Adjust as needed */
  }
  .footer-accordion-icon.rotated {
    transform: rotate(180deg);
  }
}

/* Ensure prose styles apply correctly within blog modal */
.prose {
  color: var(--tw-prose-body);
}
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: var(--tw-prose-headings);
}
.prose strong {
  color: var(--tw-prose-bold);
}
.prose ul,
.prose ol {
  color: var(--tw-prose-body);
}
.prose li::marker {
  color: var(--tw-prose-bullets);
}

/* Custom colors for prose if needed */
.prose-invert h1,
.prose-invert h2,
.prose-invert h3,
.prose-invert h4,
.prose-invert h5,
.prose-invert h6 {
  color: #ef4444; /* Red for headings in dark mode */
}
.prose-invert strong {
  color: #fca5a5; /* Lighter red for bold text */
}
.prose-invert ul,
.prose-invert ol {
  color: #d4d4d8; /* Light gray for lists */
}
.prose-invert li::marker {
  color: #ef4444; /* Red bullets */
}
.prose-invert p {
  color: #d4d4d8;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #333;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #ef4444;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #dc2626;
} /*
 * Stock styles for content within .dataClauseFrame
 * These styles provide a clean and readable base for headings, paragraphs, and lists.
 */

.dataClauseFrame {
  padding: 20px; /* Top, right, bottom, and left padding for the container */
}

.dataClauseFrame h1 {
  font-size: 1.8em; /* Heading 1 font size, relatively large but not excessive */
  margin-top: 1.5em; /* Space above the heading */
  margin-bottom: 0.8em; /* Space below the heading */
  font-weight: bold; /* Bold font weight */
  line-height: 1.2; /* Line height for better readability */
  color: #ccc8c8; /* Darker color for headings */
}

.dataClauseFrame h2 {
  font-size: 1.5em; /* Heading 2 font size */
  margin-top: 1.4em;
  margin-bottom: 0.7em;
  font-weight: bold;
  line-height: 1.3;
  color: #ccc8c8;
}

.dataClauseFrame h3 {
  font-size: 1.2em; /* Heading 3 font size */
  margin-top: 1.3em;
  margin-bottom: 0.6em;
  font-weight: bold;
  line-height: 1.4;
  color: #ccc8c8;
}

.dataClauseFrame h4 {
  font-size: 1.1em; /* Heading 4 font size, slightly larger than body text */
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  font-weight: 600; /* Semi-bold font weight */
  line-height: 1.5;
  color: #ccc8c8;
}

.dataClauseFrame h5 {
  font-size: 1em; /* Heading 5 font size, same as body text for emphasis */
  margin-top: 1.1em;
  margin-bottom: 0.4em;
  font-weight: 500; /* Medium font weight */
  line-height: 1.6;
  color: #ccc8c8;
}

.dataClauseFrame p {
  font-size: 1em; /* Base font size for paragraphs */
  margin-bottom: 1em; /* Space between paragraphs */
  line-height: 1.6; /* Optimal line height for readability */
  color: #ccc8c8; /* Standard text color */
}

.dataClauseFrame ul {
  margin-top: 1em; /* Space above the unordered list */
  margin-bottom: 1em; /* Space below the unordered list */
  padding-left: 25px; /* Indent for bullet points */
  list-style: disc; /* Default disc bullet style */
  color: #ccc8c8;
}

.dataClauseFrame li {
  margin-bottom: 0.5em; /* Space between individual list items */
  line-height: 1.5; /* Line height for list item text */
}
#blog-modal {
  overflow-y: auto;
  align-items: flex-start;
}

#blog-modal > div {
  max-height: 90vh;
  overflow-y: auto;
}
iframe {
  width: 100%;
  height: 100vh;
}