/* Custom CSS Variables for Theme Colors */
:root {
  /* Light mode defaults */
  --primary-light: #1E3A8A;
  --secondary-light: #fdfbf9;
  --accent-light: #D69E2E;
  --text-light: #1F2937;
  --logo-color-light: #1E3A8A; /* Dark blue for logo in light mode */

  /* Dark mode overrides */
  --primary-dark: #60A5FA;
  --secondary-dark: #0a1823;
  --accent-dark: #D69E2E;
  --text-dark: #D1D5DB;
  --logo-color-dark: #FFFFFF; /* White for logo in dark mode */
}

/* Apply theme colors based on body classes */
body.light-mode {
  --primary-color: var(--primary-light);
  --secondary-color: var(--secondary-light);
  --accent-color: var(--accent-light);
  --text-color: var(--text-light);
  --logo-color: var(--logo-color-light); /* Use light mode logo color */
  background-color: var(--secondary-color);
  color: var(--text-color);
}
body.dark-mode {
  --primary-color: var(--primary-dark);
  --secondary-color: var(--secondary-dark);
  --accent-color: var(--accent-dark);
  --text-color: var(--text-dark);
  --logo-color: var(--logo-color-dark); /* Use dark mode logo color */
  background-color: var(--secondary-color);
  color: var(--text-color);
}

/* Ensure smooth transition for background and text colors */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.font-headline {
  font-family: 'Merriweather', serif; /* Headlines in carousel and sections */
}
.font-body {
  font-family: 'Roboto', sans-serif; /* Main body font */
}

/* Material Icons specific styles */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

/* Keyframe animations for existing icons */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-rotate { animation: rotate 10s linear infinite; }
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
.animate-wave { animation: wave 2s ease-in-out infinite; }
@keyframes rise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.animate-rise { animation: rise 2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.animate-bob { animation: bob 1.5s ease-in-out infinite; }

/* New animation for the dark mode toggle icon (keyframes remain, but class application changed) */
@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px var(--glow-color));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 5px var(--glow-color));
    transform: scale(1.05);
  }
}
/* Note: pulse-glow class is not applied to theme toggle icons in this version */

/* Carousel specific styles */
.carousel-item {
  min-width: 100%;
  transition: transform 0.5s ease-in-out;
}
.carousel-container:hover .carousel-item {
  animation-play-state: paused; /* Pause autoplay on hover */
}

/* Styles for mobile responsiveness of the hero section */
@media (max-width: 767px) { /* Applies to screens 767px wide and smaller */
    .mobile-hero-top {
        padding-top: 0; /* Removes top padding from the main section */
        padding-bottom: 1.5rem; /* Adjusts bottom padding for better spacing */
        align-items: flex-start; /* Aligns content to the top within the flex container */
    }
    .mobile-hero-top .carousel-container {
        height: 50vh !important; /* Makes the hero section take up 50% of the viewport height on mobile */
    }
}

.search-input-container {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* Show when active */
.search-input-container.active {
    width: 200px;
    opacity: 1;
    margin-left: 0.5rem;
}


/* Ensure input itself fills the container (from Fiscal Journal) */
.search-input-container input {
    width: 100%;
    height: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--text-color);
    border-radius: 9999px;
    outline: none;
}

/* Hide the search icon when input is active on desktop (from Fiscal Journal) */
@media (min-width: 768px) {
    .search-button-desktop.active {
        display: none;
    }
}
/* Custom override for max-w-lg *only* within the hero carousel */
#article-carousel .max-w-lg {
    max-width: 55rem; /* Approximately 880px */
}
.line-clamp-13 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 13;
}



/* Dark mode styles from the new footer */
/* These are now directly supported by Tailwind's 'dark:' variant when 'dark' class is on body */