/* Custom CSS Variables for Theme Colors (from Fiscal Journal) */
:root {
    /* Light mode defaults */
    --primary-light: #1E3A8A; /* Dark blue */
    --secondary-light:#fdfbf9; /* Light gray */
    --accent-light: #D69E2E; /* Golden brown */
    --text-light: #1F2937; /* Dark gray */
    --logo-color-light: #1E3A8A; /* Dark blue for logo in light mode */
}

/* Apply theme colors based on body classes (from Fiscal Journal) */
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);
    background-color: var(--secondary-color); /* Body background */
    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);
    background-color: var(--secondary-color); /* Body background */
    color: var(--text-color);
}

/* Dark mode overrides (from Fiscal Journal) */
html.dark body.dark-mode {
    --primary-dark: #60A5FA; /* Lighter blue */
    --secondary-dark:#0a1823; /* Darker gray/almost black */
    --accent-dark: #D69E2E; /* Golden brown (same as light for accent) */
    --text-dark: #D1D5DB; /* Light gray */
    --logo-color-dark: #FFFFFF; /* White for logo in dark mode */
}

/* Ensure smooth transition for background and text colors (from Fiscal Journal) */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Define 'Tecwo' font for the specific headline (from Fiscal Journal) */
@font-face {
    font-family: 'Tecwo';
    src: url('path-to-your-tecwo-font.woff2') format('woff2'),
         url('path-to-your-tecwo-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Font styles for consistency (from Fiscal Journal) */
.font-tecwo-headline {
    font-family: 'Tecwo', 'Oswald', sans-serif;
}
.font-headline {
    font-family: 'Merriweather', serif;
}
.font-body {
    font-family: 'Roboto', sans-serif;
}

/* Keyframe animations for existing icons (from Fiscal Journal) */
@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; }

/* Search Input Specific Styles (from Fiscal Journal) */
/* Container always in layout */
.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;
    border: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
    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;
    }
}

/* Desktop dropdown hover effect (from Fiscal Journal) */
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 10;
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Adjusted vertical padding and font size for dropdown items (from Fiscal Journal) */
.dropdown-menu a {
    display: block;
    padding: 0.125rem 1rem;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--text-color);
}
.dropdown-menu a:hover {
    background-color: transparent; /* Keep background same as menu */
    color: var(--accent-color); /* Text color changes to accent */
}

/* Mobile dropdown specific styles (from Fiscal Journal) */
.mobile-dropdown-content {
    display: none;
}
.mobile-dropdown-content.active {
    display: flex;
}
.mobile-dropdown-content a {
    padding: 0.125rem 1rem 0.125rem 2rem;
    font-size: 0.75rem;
    color: var(--text-color); /* Ensure default text color is applied */
}
.mobile-dropdown-content a:hover {
    background-color: transparent; /* Keep background same as menu */
    color: var(--accent-color); /* Text color changes to accent */
}

/* Tab styles (from NewsToday, retained and adapted to theme variables) */
.tabs .tab-content {
    display: none;
}
.tabs .tab-content.active {
    display: block;
}
.tab-btn:hover .material-icons, .tab-btn:hover span:not(.material-icons) {
    color: var(--primary-color) !important;
}
.tab-btn.active .material-icons, .tab-btn.active span:not(.material-icons) {
    color: var(--primary-color) !important;
}
.tab-btn .material-icons, .tab-btn span:not(.material-icons) {
    transition: color 0.2s ease-in-out;
}
.tab-active {
    border-bottom-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.tab-inactive {
    border-bottom-color: transparent !important;
    color: var(--text-color) !important;
}

/* Pagination styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.5rem;
}
.pagination button {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--primary-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.pagination button:hover:not(.active) {
    background-color: var(--primary-color);
    color: white;
}
.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}