/* Ad Container Styles
 * Provides consistent styling for all advertisement placements
 * across the Soonerism application
 */

/* Base Ad Container */
.ad-container {
  margin: 1.5rem 0;
  max-width: 100%;
}

/* Ad Label - "Advertisement" text above ads */
.ad-label {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280; /* gray-500 */
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Ad Unit Container */
.ad-unit {
  background-color: #f9fafb; /* gray-50 */
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  overflow: hidden;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading State for Ad Units */
.ad-unit.loading::after {
  content: "Loading...";
  color: #9ca3af; /* gray-400 */
  font-size: 0.875rem;
  font-family: "Inter", sans-serif;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .ad-unit {
    min-height: 100px;
  }

  .ad-container {
    margin: 1rem 0;
  }
}

/* Mobile Footer Sticky Ad */
.ad-footer-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  animation: slideUp 350ms ease-out;
  background-color: #ffffff;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
  border-top: 1px solid #e5e7eb;
}

/* Slide Up Animation for Footer Ad */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Desktop: Hide mobile footer ads */
@media (min-width: 1024px) {
  .ad-footer-sticky {
    display: none;
  }
}

/* Sidebar Ad Specific Styles */
.ad-container[data-ad-placement^="sidebar"] {
  position: relative;
}

.ad-container[data-ad-placement^="sidebar"].sticky {
  position: sticky;
  top: 1rem;
}

/* Native Feed Ad - Matches Prediction Card Grid */
.ad-container[data-ad-placement="feed-native"] .ad-unit {
  min-height: 200px;
}

/* Inline Ad - Between Comments */
.ad-container[data-ad-placement="inline"] {
  margin: 2rem 0;
}

.ad-container[data-ad-placement="inline"] .ad-unit {
  min-height: 150px;
}

/* Development Placeholder Styles */
.ad-unit .ad-placeholder {
  padding: 1rem;
  text-align: center;
  background-color: #f3f4f6; /* gray-100 */
  border: 2px dashed #d1d5db; /* gray-300 */
  border-radius: 0.5rem;
}

/* AdSense Responsive Overrides */
.adsbygoogle {
  display: block;
  min-height: inherit;
}

/* Prevent layout shift during ad load */
.ad-unit > ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* Dark Mode Support (if implemented) */
@media (prefers-color-scheme: dark) {
  .ad-label {
    color: #9ca3af; /* gray-400 in dark mode */
  }

  .ad-unit {
    background-color: #1f2937; /* gray-800 */
    border-color: #374151; /* gray-700 */
  }

  .ad-footer-sticky {
    background-color: #111827; /* gray-900 */
    border-top-color: #374151; /* gray-700 */
  }
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ad-footer-sticky {
    animation: none;
  }
}

/* Print Styles - Hide ads when printing */
@media print {
  .ad-container,
  .ad-footer-sticky {
    display: none !important;
  }
}
/* Notification animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in {
  animation: slideIn 0.3s ease-out forwards;
}

.animate-slide-out {
  animation: slideOut 0.3s ease-in forwards;
}

/* Line clamp utilities (for truncating text) */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Ensure responsive images */
img {
  max-width: 100%;
  height: auto;
}
/* Dark mode text color overrides for better contrast */
@media (prefers-color-scheme: dark) {
  /* Override gray text colors to be lighter in dark mode */
  .text-gray-500 {
    color: oklch(70% 0.01 264.364) !important;
  }

  .text-gray-600 {
    color: oklch(75% 0.015 256.802) !important;
  }

  .text-gray-700 {
    color: oklch(80% 0.02 259.733) !important;
  }

  .text-gray-800 {
    color: oklch(85% 0.025 264.665) !important;
  }

  .text-gray-900 {
    color: oklch(90% 0.028 264.665) !important;
  }

  /* Ensure base content colors have good contrast */
  .text-base-content {
    color: var(--color-base-content) !important;
  }

  /* Fix neutral content to be lighter */
  .text-neutral-content {
    color: oklch(92% 0.004 286.32) !important;
  }

  /* Ensure borders are visible in dark mode */
  .border-gray-200 {
    border-color: oklch(40% 0.015 253.1) !important;
  }

  .border-gray-300 {
    border-color: oklch(45% 0.02 254.09) !important;
  }

  /* Fix any black text to be white in dark mode */
  .text-black {
    color: oklch(98% 0.002 247.839) !important;
  }

  /* Improve card backgrounds for better contrast */
  .bg-base-100 {
    background-color: var(--color-base-100);
  }

  .bg-base-200 {
    background-color: var(--color-base-200);
  }

  /* Additional color overrides for better readability */
  .text-slate-600 {
    color: oklch(75% 0.015 256.802) !important;
  }

  .text-slate-700 {
    color: oklch(80% 0.02 259.733) !important;
  }

  .text-slate-800 {
    color: oklch(85% 0.025 264.665) !important;
  }

  .text-slate-900 {
    color: oklch(90% 0.028 264.665) !important;
  }

  /* Fix link colors for better visibility in dark mode */
  a {
    color: oklch(75% 0.2 277.117) !important;
  }

  a:hover {
    color: oklch(85% 0.22 277.117) !important;
  }

  /* Primary links should be brighter */
  .link-primary,
  .text-primary a,
  a.text-primary {
    color: oklch(75% 0.233 277.117) !important;
  }

  .link-primary:hover,
  .text-primary a:hover,
  a.text-primary:hover {
    color: oklch(85% 0.25 277.117) !important;
  }

  /* Accent links */
  .link-accent,
  a.link {
    color: oklch(80% 0.152 181.912) !important;
  }

  .link-accent:hover,
  a.link:hover {
    color: oklch(90% 0.17 181.912) !important;
  }

  /* Navbar links */
  .navbar a,
  nav a {
    color: oklch(85% 0.015 256.802) !important;
  }

  .navbar a:hover,
  nav a:hover {
    color: oklch(95% 0.02 277.117) !important;
  }

  /* Fix hardcoded dark blue headings to be readable in dark mode */
  .text-\[\#0A1628\] {
    color: oklch(85% 0.015 256.847) !important;
  }

  /* Fix other hardcoded primary colors */
  .text-\[\#6366F1\] {
    color: oklch(75% 0.233 277.117) !important;
  }

  /* Fix hardcoded error/warning colors to be visible */
  .text-\[\#EF4444\] {
    color: oklch(75% 0.22 13.428) !important;
  }

  .text-\[\#F59E0B\] {
    color: oklch(82% 0.189 84.429) !important;
  }

  .text-\[\#10B981\] {
    color: oklch(76% 0.177 163.223) !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */