/* SECTION: NATO Phonetic Output - Styles for NATO Phonetic Conversion Display */
/*
 * Styles the container and elements for displaying NATO phonetic conversions in both light and dark modes.
 * - **Displays** output in a structured, scrollable container with wrapping for easy reading.
 * - **Color-codes** characters (uppercase, lowercase, numbers, punctuation, symbols) for distinction.
 * - **Separates** words with horizontal lines and consistent spacing for clarity.
 * - **Adjusts** layout and colors dynamically for dark mode compatibility.
 * - **Supports** responsive design for mobile devices with adjusted sizing and spacing.
 */

/* Purpose: NATO Output Container - Inner container for NATO phonetic text */
#natoOutput {
    /* Purpose: Layout */
    display: flex; /* Uses flexbox for flexible arrangement */
    flex-wrap: wrap; /* Allows wrapping of child elements */
    align-items: flex-start; /* Aligns items to the top */
    
    /* Purpose: Typography */
    font-family: 'Source Code Pro', monospace; /* Monospaced font for alignment */
    font-size: 18px; /* Readable size for desktop */
    line-height: 1; /* Compact line spacing */
    
    /* Purpose: Spacing */
    padding: 0px; /* No padding to maximize space */
    gap: 20px; /* Gap between flex items */
    
    /* Purpose: Alignment */
    justify-content: flex-start; /* Left-aligned items */
    
    /* Purpose: Sizing */
    width: 100%; /* Full width of parent */
    box-sizing: border-box; /* Includes padding/border in width */
}

/* Purpose: NATO Output Container - Outer scrollable container */
.nato-output-container {
    /* Purpose: Visibility */
    display: none; /* Hidden by default, toggled by JS */
    margin: 0 auto; /* Centers horizontally */
    
    /* Purpose: Sizing */
    max-height: 300px; /* Caps height for scrolling */
    width: 100%; /* Full width */
    min-height: 100px; /* Minimum height for visibility */
    box-sizing: border-box; /* Includes padding/border */
    
    /* Purpose: Scrolling */
    overflow-y: auto; /* Vertical scrolling when needed */
    overflow-x: hidden; /* No horizontal scrolling */
    
    /* Purpose: Appearance */
    background: white; /* Light mode background */
    border-radius: 8px; /* Rounded corners */
    border: none; /* No border */
    
    /* Purpose: Spacing */
    padding: 12px; /* Internal padding */
    
    /* Purpose: Typography */
    font-family: 'Source Code Pro', monospace; /* Monospaced font */
    font-size: 16px; /* Desktop readability */
    color: #222; /* Dark gray text in light mode */
}

/* Purpose: Dark Mode Adjustments - Updates NATO container for dark mode */
body.dark-mode .nato-output-container {
    /* Purpose: Appearance */
    background: #2b2b2b; /* Dark gray background matching textarea */
    color: #d3d3d3; /* Light gray text for contrast */
}

/* Purpose: Responsive Design - Mobile portrait adjustments */
@media (max-width: 767px) and (orientation: portrait) {
    .nato-output-container {
        /* Purpose: Visibility */
        display: none; /* Hidden by default */
        
        /* Purpose: Sizing */
        max-height: 300px; /* Consistent height cap */
        width: calc(100% - 20px); /* Full width minus margins */
        max-width: 100%; /* Full width on mobile */
        min-height: 120px; /* Increased minimum height */
        
        /* Purpose: Scrolling */
        overflow-y: auto; /* Vertical scrolling */
        overflow-x: hidden; /* No horizontal overflow */
        
        /* Purpose: Appearance */
        background: #f9f9f9; /* Light gray in light mode */
        border-radius: 8px; /* Rounded corners */
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05), -4px -4px 8px rgba(255, 255, 255, 1); /* Neumorphic shadow */
        border: 0.5px solid #ccc; /* Thin border */
        
        /* Purpose: Spacing */
        padding: 12px; /* Consistent padding */
        margin: auto; /* Centered */
        
        /* Purpose: Typography */
        font-size: 14px !important; /* Smaller font for mobile */
        line-height: 1.4 !important; /* Improved readability */
        color: #222; /* Dark gray in light mode */
    }

    /* Purpose: Child Elements - Adjust font size for mobile */
    .nato-output-container * {
        font-size: 14px !important; /* Consistent mobile sizing */
    }

    /* Purpose: Dark Mode Mobile - Overrides for dark mode on mobile */
    body.dark-mode .nato-output-container {
        background: #2b2b2b; /* Dark gray */
        color: #d3d3d3; /* Light gray text */
        border: 0.5px solid #444; /* Mid-gray border */
        box-shadow: none; /* Flat appearance in dark mode */
    }
}

/* Purpose: NATO Word Container - Styles individual word blocks */
.nato-word {
    /* Purpose: Layout */
    display: flex; /* Vertical stacking */
    flex-direction: column; /* Column layout */
    align-items: flex-start; /* Left-aligned */
    justify-content: flex-start; /* Top-aligned */
    
    /* Purpose: Spacing */
    padding: 0px; /* Tight layout */
    
    /* Purpose: Typography */
    line-height: 1.2; /* Compact spacing */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    
    /* Purpose: Sizing */
    width: auto; /* Content-based width */
    
    /* Purpose: Alignment */
    text-align: left; /* Left-aligned text */
}

/* Purpose: Original Word - Styles the original word box */
.nato-word strong {
    /* Purpose: Typography */
    font-weight: normal; /* Normal weight */
    font-size: 16px; /* Balanced size */
    
    /* Purpose: Alignment */
    text-align: left; /* Left-aligned */
    
    /* Purpose: Layout */
    display: inline-block; /* Inline-block for shadow box */
    
    /* Purpose: Spacing */
    margin-bottom: 10px; /* Separation from conversion */
    padding: 6px 10px; /* Padding for box effect */
    
    /* Purpose: Appearance */
    color: white; /* White text in light mode */
    background: lightsteelblue; /* Light blue background */
    border-radius: 6px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Purpose: Dark Mode Original Word - Updates for dark mode */
body.dark-mode .nato-word strong {
    /* Purpose: Appearance */
    color: #d3d3d3; /* Light gray text */
    background: #444; /* Mid-gray background */
}

/* Purpose: Responsive Original Word - Mobile adjustments */
@media (max-width: 767px) and (orientation: portrait) {
    .nato-word strong {
        font-size: 14px; /* Smaller for mobile */
        padding: 4px 8px; /* Compact padding */
    }
}

/* Purpose: Separator Line - Divides NATO word entries */
.nato-separator {
    /* Purpose: Sizing */
    width: 100%; /* Full width */
    
    /* Purpose: Appearance */
    border: 0; /* No default border */
    border-top: 1px solid #ccc; /* Light gray separator */
    
    /* Purpose: Spacing */
    margin: 10px 0; /* Vertical spacing */
}

/* Purpose: Dark Mode Separator - Updates for dark mode */
body.dark-mode .nato-separator {
    /* Purpose: Appearance */
    border-top: 1px solid #666; /* Mid-gray separator */
}

/* Purpose: NATO Conversion Container - Holds phonetic words */
.nato-word .nato-conversion {
    /* Purpose: Layout */
    display: flex; /* Horizontal arrangement */
    flex-direction: row; /* Row layout */
    flex-wrap: wrap; /* Wraps items */
    justify-content: flex-start; /* Left-aligned */
    align-items: flex-start; /* Top-aligned */
    
    /* Purpose: Sizing */
    width: auto; /* Content-based width */
    
    /* Purpose: Alignment */
    text-align: left; /* Left-aligned */
    
    /* Purpose: Spacing */
    gap: 5px; /* Spacing between phonetic words */
}

/* Purpose: Phonetic Words - Styles individual NATO words */
.nato-word .nato-conversion span {
    /* Purpose: Layout */
    display: inline-block; /* Inline-block for flow */
    
    /* Purpose: Typography */
    font-size: 14px; /* Readable size */
    font-weight: normal; /* Normal weight */
    
    /* Purpose: Spacing */
    margin: 0 2px; /* Slight separation */
    
    /* Purpose: Behavior */
    white-space: nowrap; /* No wrapping within words */
    
    /* Purpose: Alignment */
    text-align: left; /* Left-aligned */
}

/* Purpose: NATO Lowercase - Styles lowercase phonetic words in light mode */
.nato-lowercase {
    /* Purpose: Appearance */
    color: black !important; /* Black in light mode, high priority */
}

/* Purpose: Dark Mode Lowercase - Updates for dark mode */
body.dark-mode .nato-lowercase {
    /* Purpose: Appearance */
    color: #d3d3d3 !important; /* Light gray in dark mode */
}

/* Purpose: NATO Uppercase - Styles uppercase phonetic words in light mode */
.nato-uppercase {
    /* Purpose: Appearance */
    color: darkblue !important; /* Dark blue in light mode */
}

/* Purpose: Dark Mode Uppercase - Updates for dark mode */
body.dark-mode .nato-uppercase {
    /* Purpose: Appearance */
    color: #66b3ff !important; /* Light blue in dark mode */
}

/* Purpose: NATO Numbers - Styles number phonetic words in light mode */
.nato-number {
    /* Purpose: Appearance */
    color: blue !important; /* Blue in light mode */
}

/* Purpose: Dark Mode Numbers - Updates for dark mode */
body.dark-mode .nato-number {
    /* Purpose: Appearance */
    color: #3399FF !important; /* Lighter blue in dark mode */
}

/* Purpose: NATO Punctuation/Symbols - Common styles in light mode */
.nato-punctuation,
.nato-symbol {
    /* Purpose: Appearance */
    color: green !important; /* Green in light mode */
    font-size: 14px; /* Consistent size */
    font-style: italic; /* Italic for distinction */
    
    /* Purpose: Spacing */
    line-height: 1; /* Compact spacing */
    
    /* Purpose: Layout */
    display: inline-block; /* Inline-block flow */
    
    /* Purpose: Behavior */
    white-space: nowrap; /* No wrapping */
}

/* Purpose: Dark Mode Punctuation - Updates for dark mode */
body.dark-mode .nato-punctuation {
    /* Purpose: Appearance */
    color: #4CAF50 !important; /* Muted green in dark mode */
}

/* Purpose: NATO Symbols - Overrides for symbols in light mode */
.nato-symbol {
    /* Purpose: Appearance */
    color: red !important; /* Red in light mode */
}

/* Purpose: Dark Mode Symbols - Updates for dark mode */
body.dark-mode .nato-symbol {
    /* Purpose: Appearance */
    color: #FF4444 !important; /* Softer red in dark mode */
}