/* ==========================================
   CSS Variables for Catppuccin Mocha theme - high contrast
   ==========================================
   These CSS custom properties define the color palette based on Catppuccin Mocha.
   Using variables ensures theme consistency and easy dark/light mode switching.
   Benefits: Maintainable, performant (no recalc on changes), accessible contrast ratios. */
:root {
    --highlight-1: #f38ba8; /* Catppuccin Mocha red - used for active states and accents */
    --highlight-2: #fab387; /* Catppuccin Mocha peach - warm highlights */
    --highlight-3: #f9e2af; /* Catppuccin Mocha yellow - warnings/alerts */
    --highlight-4: #a6e3a1; /* Catppuccin Mocha green - success/positive */
    --highlight-5: #94e2d5; /* Catppuccin Mocha teal - info/cool accents */
    --highlight-6: #89b4fa; /* Catppuccin Mocha blue - links, back buttons */
    --highlight-7: #b4befe; /* Catppuccin Mocha lavender - subtle highlights */
    --highlight-8: #f5c2e7; /* Catppuccin Mocha pink - secondary accents */
    --bg-color: #1e1e2e;    /* Catppuccin Mocha base - dark background for low eye strain */
    --text-color: #cdd6f4;  /* Catppuccin Mocha text - high contrast light text */
    --card-bg: #313244;    /* Catppuccin Mocha surface0 - card and component backgrounds */
    --border-color: #45475a; /* Catppuccin Mocha surface1 - subtle borders and dividers */
}

/* ==========================================
   Header Styling
   ==========================================
   Styles for the application header: Includes title, back button, and language toggle.
   Responsive via Tailwind (stacked on mobile, row on desktop md:768px+).
   Uses body.sentence-view class (toggled in JS) for visibility logic: Hides title in sentence view
   to focus on content, efficient CSS selector avoids per-element JS manipulation.
   10px bottom margin (mb-[10px]) provides consistent spacing below header. */

/* App title styling: Semantic class for maintainability over inline styles */
.app-title {
    color: var(--highlight-1); /* Red accent for brand identity */
    margin: 0; /* Ensures no default margins interfere with Tailwind spacing */
    font-family: 'Noto Sans JP', serif; /* Japanese font for title glyph support */
}

/* Back button styling: Semantic class, uses blue for navigation cues */
.back-btn {
    color: var(--highlight-6); /* Blue for intuitive "back" action */
}

/* Language toggle container: Flex layout with Tailwind space-x-2 for button spacing */
#language-toggle {
    gap: 0.3rem; /* Fine-tune spacing beyond Tailwind for pixel-perfect alignment */
}

/* Title visibility toggle: Uses body class for global state management, performant for single rule */
body.sentence-view #app-title {
    display: none; /* Hides title when in sentence view, reduces visual clutter */
}

/* ==========================================
   Catppuccin Mocha color classes for category backgrounds
   ==========================================
   These classes apply light backgrounds with dark text for category cards.
   Rotated via JS array for visual variety. Ensures accessibility with sufficient contrast. */
.category-rosewater { background-color: #f5e0dc; color: #1e1e2e; }
.category-flamingo { background-color: #f2cdcd; color: #1e1e2e; }
.category-pink { background-color: #f5c2e7; color: #1e1e2e; }
.category-mauve { background-color: #cba6f7; color: #1e1e2e; }
.category-red { background-color: #f38ba8; color: #1e1e2e; }
.category-maroon { background-color: #eba0ac; color: #1e1e2e; }
.category-peach { background-color: #fab387; color: #1e1e2e; }
.category-yellow { background-color: #f9e2af; color: #1e1e2e; }
.category-green { background-color: #a6e3a1; color: #1e1e2e; }
.category-teal { background-color: #94e2d5; color: #1e1e2e; }
.category-sky { background-color: #89dceb; color: #1e1e2e; }
.category-sapphire { background-color: #74c7ec; color: #1e1e2e; }
.category-blue { background-color: #89b4fa; color: #1e1e2e; }
.category-lavender { background-color: #b4befe; color: #1e1e2e; }

/* Override category text to theme color for consistency on light backgrounds */
.category-rosewater,
.category-flamingo,
.category-pink,
.category-mauve,
.category-red,
.category-maroon,
.category-peach,
.category-yellow,
.category-green,
.category-teal,
.category-sky,
.category-sapphire,
.category-blue,
.category-lavender {
    color: var(--text-color) !important; /* Ensures high contrast on colored backgrounds */
}

/* ==========================================
   Button Styles for Language Toggle and Navigation
   ==========================================
   Base button rules for language selection and home/back buttons.
   Active state uses red (highlight-1) for visual feedback; inactive uses surface1.
   Transitions for smooth hover/active states enhance UX without JS. */

/* Common button base: Position and interaction properties */
#lang-en, #lang-de, #home-btn, #lang-es, #lang-vn, #lang-bn {
    position: relative;
    z-index: 1000; /* Above other elements for clickability */
    cursor: pointer;
    user-select: none; /* Prevents accidental text selection on long press */
}

/* English button: Default active, red background for prominence */
#lang-en {
    background-color: var(--highlight-1); /* Active: Red for current language */
    color: #1e1e2e; /* Dark text on light bg for contrast */
    border: 2px solid var(--highlight-1);
    transition: all 0.3s ease; /* Smooth color/border changes */
}

#lang-en:hover {
    background-color: #eba0ac; /* Lighter red variant on hover */
    border-color: #eba0ac;
}

/* Inactive language buttons: Surface color, light text; hover lightens for feedback */
#lang-de, #lang-es, #lang-vn, #lang-bn {
    background-color: var(--border-color); /* Inactive: Subtle gray */
    color: var(--text-color);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

#lang-de:hover, #lang-es:hover, #lang-vn:hover, #lang-bn:hover {
    background-color: #585b70; /* Lighter gray on hover */
    border-color: #585b70;
}

/* Home button: Blue for navigation, similar hover effect */
#home-btn {
    background-color: var(--highlight-6); /* Blue for action buttons */
    color: #1e1e2e;
    border: 2px solid var(--highlight-6);
    transition: all 0.3s ease;
}

#home-btn:hover {
    background-color: #74c7ec; /* Lighter blue */
    border-color: #74c7ec;
}

/* ==========================================
   Base Body and Typography Styling
   ==========================================
   Global styles: Font, colors from variables. Transition for theme changes.
   Noto Sans JP ensures proper Japanese rendering; fallback to sans-serif. */
body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s; /* Smooth theme switches */
}

/* Mystical app name fallback: Italic with shadow for emphasis (if not using .app-title) */
.app-name {
    color: var(--highlight-1);
    font-style: italic;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-family: 'Noto Sans JP', serif;
}

/* Category title and description: Ensure theme colors override Tailwind defaults */
#category-title,
#category-description {
    color: var(--text-color) !important;
}

/* ==========================================
   Card and Component Styling
   ==========================================
   Styles for sentence cards, category cards, play buttons.
   Uses variables for theme consistency; transitions for interactive feedback. */

/* Sentence card base: Dark bg, bordered for separation */
.sentence-card {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

/* Play button: Compact, hover effects for engagement */
.play-btn {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

.play-btn:hover {
    background-color: var(--border-color); /* Subtle highlight */
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Category card interactions: Hover lift for discoverability */
.category-card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   Text Highlighting and Interactive Elements
   ==========================================
   Styles for sentence highlights, karaoke, word highlights.
   Uses Catppuccin colors; inline-block for word spans to enable clicks. */

/* Sentence highlight: Subtle bg for emphasis without distraction */
.sentence-highlight {
    background-color: rgba(137, 220, 235, 0.25); /* Semi-transparent sky blue */
    color: #1e1e2e; /* Dark font for sentence highlights to improve readability */
    padding: 2px 4px;
    border-radius: 3px;
}

/* Karaoke active word: Red bg during playback for focus */
.karaoke-active {
    background-color: var(--highlight-1); /* Red for active */
    color: #1e1e2e;
    font-weight: normal;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

/* Word highlight base: Clickable spans for TTS */
.word-highlight {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    margin: 0 2px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.word-highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Highlight color variants: Randomly applied via JS, using theme vars for dark text */
.highlight-1 { background-color: var(--highlight-1); color: #1e1e2e !important; }
.highlight-2 { background-color: var(--highlight-2); color: #1e1e2e !important; }
.highlight-3 { background-color: var(--highlight-3); color: #1e1e2e !important; }
.highlight-4 { background-color: var(--highlight-4); color: #1e1e2e !important; }
.highlight-5 { background-color: var(--highlight-5); color: #1e1e2e !important; }
.highlight-6 { background-color: var(--highlight-6); color: #1e1e2e !important; }
.highlight-7 { background-color: var(--highlight-7); color: #1e1e2e !important; }
.highlight-8 { background-color: var(--highlight-8); color: #1e1e2e !important; }

/* ==========================================
   Progress Bar Styling
   ==========================================
   Simple animated bar for sentence progress; hidden by default, shown during playback. */
.progress-bar {
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--highlight-1); /* Red fill for progress */
    width: 0%;
    transition: width 0.3s; /* Smooth animation */
}

/* ==========================================
   Mobile Responsiveness Optimizations
   ==========================================
   Custom media query for max-width 640px portrait (beyond Tailwind's sm:640px).
   Enhances touch targets (min 44px), disables hovers, adjusts spacing.
   Header: Forces column stack, makes toggle scrollable horizontally for 5 buttons.
   Tailwind provides base responsiveness; custom CSS handles edge cases like overflow. */
@media (max-width: 640px) and (orientation: portrait) {
    /* Typography scaling: Larger base for readability on small screens */
    body {
        font-size: 16px;
    }

    /* Heading adjustments: Smaller but legible */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    /* Touch-friendly buttons: WCAG-compliant min sizes */
    button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        font-size: 16px;
    }

    /* Container padding: Standard mobile gutters */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Card spacing: More vertical room for thumb scrolling */
    .category-card {
        margin-bottom: 16px;
    }

    /* Disable hover, enable active states for touch devices */
    .category-card:hover { transform: none; box-shadow: none; }
    .category-card:active { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); }

    .word-highlight:hover { transform: none; box-shadow: none; }
    .word-highlight:active { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

    .play-btn:hover { transform: none; box-shadow: none; }
    .play-btn:active { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

    /* Word highlights: Larger padding/font for fat-finger targeting */
    .word-highlight {
        padding: 4px 6px;
        margin: 2px;
        font-size: 16px;
    }

    /* Progress bar: Thicker for visibility */
    .progress-bar { height: 6px; }

    /* Sentence and karaoke: Enhanced padding for mobile */
    .sentence-highlight { padding: 4px 6px; }
    .karaoke-active { font-size: 18px; padding: 4px 6px; }

    /* Header mobile overrides: Vertical stack, full-width toggle with horizontal scroll */
    header.flex {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.5rem 1rem 0.75rem;
    }

    #back-to-categories {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 0.5rem;
    }

    header h1 {
        margin: 0;
        width: 100%;
        text-align: left;
    }

    #language-toggle {
        width: 100%;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
        padding-bottom: 0.25rem;
        scrollbar-width: none; /* Firefox: Hide scrollbar */
        -ms-overflow-style: none; /* IE/Edge: Hide scrollbar */
    }

    #language-toggle::-webkit-scrollbar {
        display: none; /* Chrome/Safari: Hide scrollbar */
    }

    #language-toggle > * {
        flex-shrink: 0 !important; /* Prevent button compression */
    }
}