/* layouts/header.css */

/* This file assumes that :root CSS variables (e.g., --color-background-panel, 
   --color-border, --font-display, --text-sm, --space-*, etc., 
   AND specific theme variables like --theme-dark-surface1, --theme-accent-red-primary, etc.) 
   are defined in a globally loaded CSS file like enhanced-styles.css or theme.css. 
*/

/* === Existing Header Content Styles (Brand, Search, Actions) === */
.app-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
    gap: var(--space-4, 1rem);
    max-width: 100%;
}

.app-header .brand-area {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    margin-right: var(--space-4, 1rem);
}

.app-header .title-glow {
    font-family: var(--font-display, 'Pirata One', cursive);
    font-size: clamp(1.25rem, 4vw, var(--text-2xl, 1.5rem));
    color: #ff2600; 
    text-shadow: 
        0 0 2px #ff8800,
        0 0 4px #ff0000,
        0 0 6px #4a5568;
    animation: flicker 3s infinite alternate;
    white-space: nowrap;
}

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 
            0 0 2px #4a5568, 0 0 4px #4a5568, 0 0 6px #4a5568,
            0 0 8px #ff2600, 0 0 10px #ff8800;
        opacity: 1;
    }
    20%, 24%, 55% {
        text-shadow: 
            0 0 1px #2d3748, 0 0 2px #2d3748, 0 0 3px #2d3748,
            0 0 5px #ff2600;
        opacity: 0.7;
    }
}

/* === Version Badge Styling (Changelog Button) === */
.app-header .version-badge {
    display: inline-block;
    background-color: var(--theme-accent-red-secondary, #a33030); /* Darker red base */
    color: var(--theme-text-light, #e0e0e0); 
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--theme-border-accent-red, rgba(163, 48, 48, 0.7));
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    margin-left: var(--space-3, 0.75rem);
    cursor: pointer;
    transition: background-color var(--transition-fast, 150ms) ease, 
                box-shadow var(--transition-fast, 150ms) ease,
                transform var(--transition-fast, 150ms) ease;
    user-select: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Subtle base shadow */
}
.app-header .version-badge:hover,
.app-header .version-badge:focus {
    background-color: var(--theme-accent-red-primary, #dc2626) !important; /* Brighter red on hover */
    color: white; /* Ensure text remains visible */
    box-shadow: 0 0 10px var(--theme-accent-red-glow, rgba(255, 0, 0, 0.6)), /* Red glow */
                0 0 15px var(--theme-accent-red-glow, rgba(255, 0, 0, 0.4));
    transform: scale(1.05);
    outline: none;
}


/* === Search Container & Input Styles === */
.app-header .search-container {
    position: relative; width: 300px; max-width: 100%;
    flex-grow: 1; max-width: 400px;
}
.app-header .search-input {
    width: 100%; padding: var(--space-2, 0.5rem) 2.5rem; /* Adjusted for icons on both sides */
    border-radius: var(--radius-md, 0.375rem); background-color: var(--color-background-input);
    color: var(--color-text-primary); border: 1px solid var(--color-border);
    font-size: var(--text-sm, 0.875rem); transition: all var(--transition-fast, 150ms) ease;
}
.app-header .search-input:focus {
    outline: none; border-color: var(--color-primary, #f87171);
    box-shadow: 0 0 0 2px var(--color-focus-ring, rgba(248, 113, 113, 0.2));
}
.app-header .search-input::placeholder { color: var(--color-text-placeholder); }
.app-header .search-icon {
    position: absolute; left: var(--space-3, 0.75rem); top: 50%;
    transform: translateY(-50%); color: var(--color-text-secondary);
    pointer-events: none; font-size: var(--text-sm, 0.875rem); z-index: 1;
}
.app-header .clear-search {
    position: absolute; right: var(--space-3, 0.75rem); top: 50%;
    transform: translateY(-50%); color: var(--color-text-secondary);
    cursor: pointer; font-size: var(--text-sm, 0.875rem);
    transition: color var(--transition-fast, 150ms) ease; z-index: 2;
    background: transparent; padding: var(--space-1, 0.25rem); border-radius: var(--radius-full, 50%);
}
.app-header .clear-search:hover { color: var(--color-text-primary); }

/* === Header Actions & Buttons === */
.app-header .header-actions {
    display: flex; align-items: center;
    gap: var(--space-3, 0.75rem); margin-left: var(--space-4, 1rem);
}
.app-header #discords-button-container {
    display: flex; align-items: center;
    gap: var(--space-3, 0.75rem); /* For Info button and Discord button */
}

/* General style for header buttons (Info, Settings, Submit, Discord) */
.app-header .discord-button,
.app-header .access-button, /* Includes submission-button */
.app-header .key-info-button, /* From legend_popup.js, ensure it gets this base style */
.app-header .settings-button { /* From settings.js, ensure it gets this base style */
    background-color: var(--button-bg-header, rgba(107, 114, 128, 0.2));
    color: var(--button-text-header, var(--color-text-secondary));
    border: 1px solid var(--button-border-header, var(--color-border));
    border-radius: var(--radius-md, 0.375rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms) ease;
    display: inline-flex; align-items: center;
    gap: var(--space-2, 0.5rem); text-decoration: none;
    height: 36px; line-height: 1; white-space: nowrap;
}
.app-header .discord-button:hover,
.app-header .access-button:hover,
.app-header .key-info-button:hover,
.app-header .settings-button:hover {
    background-color: var(--button-bg-header-hover, rgba(107, 114, 128, 0.4));
    color: var(--button-text-header-hover, var(--color-text-primary));
    border-color: var(--button-border-header-hover, var(--color-accent, #fbbf24));
}

/* Specific overrides from your enhanced-styles */
.app-header #discords-button-container .discord-button {
    background-color: #43084e; color: white; border-color: #34063a;
}
.app-header #discords-button-container .discord-button:hover {
    background-color: #9800df; border-color: #a002e9; transform: translateY(-1px);
}
.app-header #submission-button { /* This already has .access-button */
    background-color: #43084e; color: white; border-color: #34063a; font-weight: 600;
}
.app-header #submission-button:hover {
    background-color: #9800df; border-color: #a002e9;
    transform: translateY(-1px); box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

/* --- Changelog Modal Styles (Adapted from your example, focusing on Dark Theme) --- */
/* Uses .key-popup-* classes from legend_popup.js as a base for structure,
   and .changelog-modal-dark for specific dark theme overrides. */

.changelog-modal-overlay { /* This class is added by header.js */
    position: fixed; inset: 0;
    background-color: var(--color-overlay, rgba(0, 0, 0, 0.85)); /* Darker overlay */
    display: none; 
    align-items: center; justify-content: center;
    z-index: var(--z-modal, 1100); 
    opacity: 0;
    transition: opacity var(--transition-normal, 250ms) ease-in-out;
}
.changelog-modal-overlay.visible { display: flex; opacity: 1; }

/* Base modal content structure (shared with legend_popup.js via .key-popup-content) */
.changelog-modal-content.key-popup-content { /* Targeting the div with both classes */
    width: 90%; 
    max-width: 700px; /* Wider for changelog */
    border-radius: var(--radius-md, 0.375rem); /* Sharper corners from your example */
    /* Dark theme defaults, overridden by .changelog-modal-dark if present */
    background-color: var(--theme-dark-surface1, #161618); 
    color: var(--theme-text-light, #e0e0e0);
    border: 1px solid var(--theme-border-dark, #383838);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
}

/* Dark Theme Specifics for Changelog Modal */
.changelog-modal-dark .changelog-modal-content.key-popup-content {
    background-color: var(--theme-dark-surface1, #161618);
    color: var(--theme-text-light, #e0e0e0);
    border-color: var(--theme-border-accent-red, rgba(163, 48, 48, 0.7)); /* Red border for modal */
    box-shadow: 0 0 25px rgba(0,0,0,0.5), 0 0 15px var(--theme-accent-red-glow, rgba(255, 0, 0, 0.6));
}

.changelog-modal-header.key-popup-header { /* Targeting the div with both classes */
    padding: var(--space-4, 1rem) var(--space-6, 1.5rem); /* More padding */
    /* Dark theme defaults */
    background-color: var(--theme-dark-surface2, #212124);
    border-bottom: 1px solid var(--theme-border-dark, #383838);
}
.changelog-modal-dark .changelog-modal-header.key-popup-header {
    background-color: var(--theme-dark-surface2, #212124);
    color: var(--theme-accent-red-primary, #dc2626); /* Red title text */
    border-bottom: 1px solid var(--theme-border-accent-red, rgba(163, 48, 48, 0.7));
}

.changelog-modal-title.key-popup-title { /* Targeting the h3 with both classes */
    font-family: var(--font-theme-title, 'Pirata One', cursive);
    font-size: var(--text-2xl, 1.5rem); /* Larger title */
    font-weight: normal;
    letter-spacing: 1px;
}
.changelog-modal-dark .changelog-modal-title.key-popup-title {
    color: var(--theme-accent-red-primary, #dc2626);
    text-shadow: 0 0 5px var(--theme-accent-red-glow, rgba(255, 0, 0, 0.6));
}

.changelog-modal-close.key-popup-close i { /* Targeting FontAwesome icon inside close button */
    /* Default color is fine, hover is handled by .key-popup-close:hover */
}
.changelog-modal-dark .changelog-modal-close.key-popup-close i {
     filter: invert(60%) sepia(100%) saturate(5000%) hue-rotate(330deg) brightness(100%) contrast(100%); /* Reddish close */
}
.changelog-modal-dark .changelog-modal-close.key-popup-close:hover i {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(200%) contrast(100%); /* Brighter on hover */
}


.changelog-modal-body.key-popup-body { /* Targeting the div with both classes */
    padding: var(--space-6, 1.5rem); /* More padding */
}

.changelog-modal-dark .text-muted { /* For text-muted class inside dark modal */
    color: var(--theme-text-muted-dark, #888888) !important;
}
.changelog-modal-dark hr {
    border-top-color: var(--theme-border-dark, #383838);
}

/* Accordion styling for changelog (using details/summary) */
.changelog-accordion-item {
    border-bottom: 1px solid var(--theme-border-dark, #383838); /* Darker border */
    margin-bottom: var(--space-2, 0.5rem);
}
.changelog-accordion-item:last-child { border-bottom: none; }

.changelog-accordion-header { /* This is the <summary> tag */
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
    cursor: pointer;
    font-weight: 600; /* Bolder header */
    list-style: none; 
    display: flex;
    align-items: center;
    justify-content: space-between; /* Push arrow to the right */
    transition: background-color var(--transition-fast, 150ms);
    border-radius: var(--radius-sm, 0.25rem);
}
.changelog-accordion-header::-webkit-details-marker { display: none; }
.changelog-accordion-header::before { /* Custom arrow */
    content: '▶';
    font-size: 0.8em;
    margin-right: var(--space-2, 0.5rem);
    transition: transform 0.2s ease-in-out;
    color: var(--theme-accent-purple-primary, #8a2be2);
}
.changelog-accordion-item[open] > .changelog-accordion-header::before {
    transform: rotate(90deg);
}
.changelog-modal-dark .changelog-accordion-header:hover {
    background-color: var(--theme-dark-surface2, #212124); /* Darker hover */
}
.changelog-accordion-item[open] > .changelog-accordion-header {
    background-color: var(--theme-dark-surface2, #212124);
    color: var(--theme-accent-purple-primary, #8a2be2);
}

.changelog-accordion-body {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background-color: rgba(0,0,0,0.15); /* Slightly different bg for content */
    border-top: 1px solid var(--theme-border-dark, #383838);
}

.changelog-category { margin-bottom: var(--space-6, 1.5rem); } /* More spacing */
.changelog-category-title {
    font-family: var(--font-theme-title, 'Pirata One', cursive);
    border-bottom: 1px solid var(--theme-border-accent-purple, rgba(75, 0, 130, 0.7));
    font-size: var(--text-xl, 1.25rem); /* Adjusted from 1.5rem */
    letter-spacing: 0.5px;
    padding-bottom: var(--space-2, 0.5rem);
    margin-bottom: var(--space-3, 0.75rem);
}
.changelog-modal-dark .changelog-category-title {
     color: var(--theme-accent-purple-primary, #8a2be2);
     border-bottom-color: var(--theme-border-accent-purple, rgba(75, 0, 130, 0.7));
     text-shadow: 0 0 4px var(--theme-accent-purple-glow, rgba(138, 43, 226, 0.5));
}

.changelog-item {
    margin-bottom: var(--space-3, 0.75rem); /* More spacing */
    line-height: 1.6; /* Adjusted from 1.7 */
    font-size: var(--text-sm, 0.875rem); /* Adjusted from 0.95rem */
    padding-left: 20px; 
    position: relative;
}
.changelog-item::before {
    content: "†"; 
    position: absolute; left: 0px; top: 1px;
    font-size: 1.1em; font-weight: bold;
}
.changelog-modal-dark .changelog-item::before {
    color: var(--theme-accent-red-secondary, #a33030);
}

/* --- Keyword Styling (Horror Theme for Dark Mode, from your example) --- */
.changelog-keyword {
    font-weight: bold; padding: 0.15em 0.4em; border-radius: var(--radius-sm, 0.25em);
    margin-right: 0.4em; font-size: 0.9em; display: inline-block;
    line-height: 1.3; vertical-align: baseline;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
}

.changelog-modal-dark .changelog-keyword-added,
.changelog-modal-dark .changelog-keyword-new {
    background-color: rgba(75, 0, 130, 0.4); color: #dda0dd; border: 1px solid rgba(138, 43, 226, 0.6);
}
.changelog-modal-dark .changelog-keyword-improved,
.changelog-modal-dark .changelog-keyword-updated {
    background-color: rgba(100, 20, 20, 0.4); color: #ff7f7f; border: 1px solid rgba(178, 34, 34, 0.6);
}
.changelog-modal-dark .changelog-keyword-fixed {
    background-color: rgba(139, 69, 19, 0.3); color: #ffcc80; border: 1px solid rgba(210, 105, 30, 0.5);
}
.changelog-modal-dark .changelog-keyword-changed,
.changelog-modal-dark .changelog-keyword-replaced {
    background-color: #2a2a2e; color: #aaaaaa; border: 1px solid #444444;
}
.changelog-modal-dark .changelog-keyword-removed,
.changelog-modal-dark .changelog-keyword-reduced {
    background-color: rgba(139, 0, 0, 0.5); color: #ff6b6b; border: 1px solid rgba(178, 34, 34, 0.8);
}

.changelog-subsection-title { /* General class for any subsection title */
    display: block; font-weight: 600; margin-top: 0.7em; margin-bottom: 0.3em;
    font-size: var(--text-base, 1rem); /* Slightly larger than item text */
}
.changelog-modal-dark .changelog-subsection-title { color: var(--theme-text-light, #c0c0c0); }

.changelog-subsection-title.tech-path { /* Specific for tech paths */
    font-family: var(--font-mono, 'Courier New', Courier, monospace);
    font-size: 0.9em; 
    background-color: rgba(255,255,255,0.05); 
    padding: 0.1em 0.3em; border-radius: 0.2em;
    border: 1px dashed var(--theme-border-dark, #555);
    color: var(--theme-text-muted-dark, #9e9e9e); 
}

.changelog-category ul { list-style: none; padding-left: 0; }

/* Responsive Header Adjustments (already defined, ensure they are comprehensive) */
@media (max-width: 768px) {
    /* ... existing responsive rules from previous header.css ... */
    .app-header .version-badge {
        margin-left: var(--space-2, 0.5rem);
        padding: 0.15rem 0.4rem;
        font-size: calc(var(--text-xs, 0.75rem) - 0.1rem);
    }
}
/* Dark Mode Keyword Colors */
.changelog-modal-dark .changelog-keyword-added,
.changelog-modal-dark .changelog-keyword-new {
    background-color: #4b0082; /* Indigo */
    color: #ffffff; /* White text */
    border: 1px solid #6a0dad; /* Purple border */
}

.changelog-modal-dark .changelog-keyword-improved,
.changelog-modal-dark .changelog-keyword-updated {
    background-color: #8b0000; /* Dark Red */
    color: #ffffff; /* White text */
    border: 1px solid #ff4500; /* Orange-Red border */
}

.changelog-modal-dark .changelog-keyword-fixed {
    background-color: #8b4513; /* SaddleBrown */
    color: #ffffff; /* White text */
    border: 1px solid #d2691e; /* Chocolate border */
}

.changelog-modal-dark .changelog-keyword-changed,
.changelog-modal-dark .changelog-keyword-replaced {
    background-color: #2f4f4f; /* Dark Slate Gray */
    color: #ffffff; /* White text */
    border: 1px solid #708090; /* Slate Gray border */
}

.changelog-modal-dark .changelog-keyword-removed,
.changelog-modal-dark .changelog-keyword-reduced {
    background-color: #8b0000; /* Dark Red */
    color: #ffffff; /* White text */
    border: 1px solid #ff6347; /* Tomato border */
}

/* Light Mode Keyword Colors */
.changelog-modal-light .changelog-keyword-added,
.changelog-modal-light .changelog-keyword-new {
    background-color: #e6e6fa; /* Lavender */
    color: #4b0082; /* Indigo text */
    border: 1px solid #d8bfd8; /* Thistle border */
}

.changelog-modal-light .changelog-keyword-improved,
.changelog-modal-light .changelog-keyword-updated {
    background-color: #ffe4e1; /* Misty Rose */
    color: #8b0000; /* Dark Red text */
    border: 1px solid #ff7f7f; /* Light Coral border */
}

.changelog-modal-light .changelog-keyword-fixed {
    background-color: #fffacd; /* Lemon Chiffon */
    color: #8b4513; /* SaddleBrown text */
    border: 1px solid #ffd700; /* Gold border */
}

.changelog-modal-light .changelog-keyword-changed,
.changelog-modal-light .changelog-keyword-replaced {
    background-color: #dcdcdc; /* Gainsboro */
    color: #2f4f4f; /* Dark Slate Gray text */
    border: 1px solid #a9a9a9; /* Dark Gray border */
}

.changelog-modal-light .changelog-keyword-removed,
.changelog-modal-light .changelog-keyword-reduced {
    background-color: #f08080; /* Light Coral */
    color: #8b0000; /* Dark Red text */
    border: 1px solid #ff6347; /* Tomato border */
}