/*
 * 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.
 *


 */

/* Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Force Mobile View - Override Tailwind - ALWAYS APPLY FIRST */
html body #desktop-table-view {
  display: none !important;
}

html body #mobile-card-view {
  display: flex !important;
  flex-direction: column !important;
}

html body header nav {
  display: none !important;
}

html body header button[aria-label="Menu"] {
  display: block !important;
}

/* Desktop Responsive Styles - Override Everything at 768px+ */
@media (min-width: 768px) {
  /* FORCE Desktop view - test with background color */
  html body {
    background-color: #f3f4f6 !important; /* Light gray to confirm CSS is loading */
  }
  
  /* Desktop: Show full navigation, hide hamburger */
  html body header nav {
    display: flex !important;
  }
  
  html body header button[aria-label="Menu"] {
    display: none !important;
  }
  
  /* Desktop: Footer layout */
  html body footer > div > div:first-child {
    flex-direction: row !important;
    gap: 48px !important;
  }
  
  html body footer > div > div:first-child > div:first-child {
    flex: 1 1 0 !important;
    min-width: 300px !important;
  }
  
  html body footer > div > div:first-child > div:nth-child(2) {
    flex: 0 0 auto !important;
  }
  
  html body footer > div > div:last-child {
    flex-direction: row !important;
    justify-content: space-between !important;
    text-align: left !important;
  }
  
  /* Desktop: Show table, hide card view - CRITICAL */
  html body #desktop-table-view {
    display: block !important;
  }
  
  html body #mobile-card-view {
    display: none !important;
  }
  
  /* Desktop: Press Release Detail Page */
  html body #mobile-meta {
    display: none !important;
  }
  
  html body #desktop-sidebar {
    display: flex !important;
  }
  
  html body #content-grid {
    grid-template-columns: 1fr 320px !important;
  }
  
  html body article > header > div {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
  
  html body article > header > div > div:last-child {
    flex-direction: row !important;
    width: auto !important;
  }
  
  html body article > header h1 {
    font-size: 32px !important;
  }
}