/* --- START OF FILE style.css --- */

body {
    background-color: #000000;
    color: #e0e0e0;
    margin: 0;
    padding: 0; /* Changed from 20px for full-screen canvas */
    height: 100vh; /* For full-screen canvas effect */
    overflow: hidden; /* To prevent scrollbars from canvas animation */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Added to better center container vertically */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}

#plexus-canvas { /* Style for the new background canvas */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure it's behind other content */
    pointer-events: none; /* Allow clicks to pass through to content below */
}

.container {
    background-color: #121212;
    border: 1px solid #282828;
    border-radius: 8px;
    padding: 25px 30px;
    min-width: 300px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative; /* Ensure container is above canvas in stacking context */
    z-index: 1; /* Explicitly set above background canvas */
    overflow-y: auto; /* Allow container to scroll if content overflows */
    height: 90vh; /* MODIFIED: Use fixed height instead of max-height */
    /* max-height: 95vh; */ /* REPLACED by height */
    box-sizing: border-box; /* ADDED: Ensure padding is included in the fixed height */
}

h1 { /* Base H1 styling */
    font-size: 2.2em;
    /* color: #00aeef; /* Color will be handled by gradient or fallback */
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: bold; /* Ensure font-weight is set for gradient */
}

.gradient-text-effect {
    /* Fallback color if gradient/clipping is not supported */
    color: #007bff; /* A common, bright bootstrap-like blue for fallback */

    /* Gradient background - Appealing Light Blue to Royal Blue */
    background: linear-gradient(to right, #add8e6, #4169e1);
    /*  #add8e6 is LightBlue
        #4169e1 is RoyalBlue */

    /* Clip the background to the text */
    -webkit-background-clip: text;
    background-clip: text;

    /* Make the text color transparent so the background shows through */
    -webkit-text-fill-color: transparent;
    color: transparent;
}


#gematria-interface > p:first-of-type {
    font-size: 1.1em;
    color: #b0b0b0;
    margin-bottom: 15px;
    line-height: 1.6;
}

.video-link-paragraph {
    margin-bottom: 30px;
    margin-top: 10px;
}

/* --- VERSE LOADER MINIMAL CONTROLS --- */
.verse-loader-minimal-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ensures 3 equal columns */
    gap: 15px; /* Adjusted gap for potentially tighter fit */
    margin-bottom: 25px; /* INCREASED: e.g., from 10px to 25px to make more space ABOVE buttons */
}

.verse-loader-minimal-controls select {
    padding: 8px 12px;
    font-size: 0.9em;
    color: #e0e0e0;
    background-color: #1f1f1f;
    border: 1px solid #383838;
    border-radius: 5px;
    min-width: 80px; /* Allow selects to shrink a bit more if needed */
    box-sizing: border-box;
    width: 100%;
}

.verse-loader-minimal-controls select:focus {
    border-color: #00aeef;
    box-shadow: 0 0 8px rgba(0, 174, 239, 0.3);
    outline: none;
}

.verse-loader-minimal-controls select option {
    background-color: #1f1f1f;
    color: #e0e0e0;
}

/* --- VERSE NAVIGATION CONTROLS --- */
.verse-navigation-controls { /* Renamed from chapter-navigation-controls */
    display: flex;
    justify-content: space-between; /* Pushes buttons to either side */
    gap: 10px; /* Space between buttons if they were centered */
    margin-bottom: 25px; /* DECREASED: e.g., from 15px to 5px to shrink space BELOW buttons */
}

.verse-navigation-controls button {
    padding: 8px 12px;
    font-size: 0.9em;
    color: white;
    background-color: #007bff;
    border: 1px solid #0069d9;
    border-radius: 5px;
    cursor: pointer;
    flex-grow: 1; /* Make buttons share space equally */
    max-width: calc(50% - 5px); /* Ensure they don't get too wide, considering gap */
}

.verse-navigation-controls button:hover {
    background-color: #0069d9;
}

.verse-navigation-controls button:disabled {
    background-color: #383838;
    border-color: #282828;
    color: #666;
    cursor: not-allowed;
}

.verse-navigation-controls button:focus {
    border-color: #00aeef;
    box-shadow: 0 0 8px rgba(0, 174, 239, 0.3);
    outline: none;
}


.input-field {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    font-size: 1.1em;
    color: #e0e0e0;
    background-color: #1f1f1f;
    border: 1px solid #383838;
    border-radius: 5px;
    margin-bottom: 30px;
    resize: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-field:focus {
    border-color: #00aeef;
    box-shadow: 0 0 8px rgba(0, 174, 239, 0.3);
    outline: none;
}

.input-field::placeholder {
    color: #666;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.result-column {
    background-color: #1a1a1a;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #2f2f2f;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* min-height, if desired for internal stability, would go here, but sticking to "put it back" */
}

.column-title {
    font-size: 1.3em;
    color: #00c6ff;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #383838;
    padding-bottom: 8px;
    text-align: center;
}

.result-item {
    display: flex;
    align-items: baseline;
    font-size: 0.95em;
    min-height: 1.5em;
}

.result-label {
    color: #999999;
    margin-right: 8px;
    flex-shrink: 0;
}

.result-value {
    font-size: 1.4em;
    font-weight: bold;
    color: #e0e0e0;
    background-color: #2a2a2a;
    margin-bottom: 5px;
    width: 100%;
    text-align: center;
    display: block;
    padding: 5px 0;
    border-radius: 4px;
    box-sizing: border-box;
}

.result-value.highlight-red {
    background-color: #ff0000;
    color: white;
}

.result-value.highlight-blue {
    background-color: #00008b;
    color: white;
}

.result-data {
    color: #d0d0d0;
    word-break: break-word;
    flex-grow: 1;
}

.divisors-list span {
    font-weight: bold;
}

.summary-stats {
    margin-top: 10px;
    margin-bottom: 25px;
    text-align: center;
}

.summary-stats span {
    background-color: #dbd300;
    color: black;
    padding: 6px 12px;
    border-radius: 4px;
    margin: 0 5px;
    display: inline-block;
    font-size: 0.95em;
    transition: background-color 0.3s, color 0.3s;
}

.summary-stats span.highlight-red-wc {
    background-color: #ff0000;
    color: white;
}

.summary-stats span.highlight-blue-wc {
    background-color: #00008b;
    color: white;
}

/* --- STYLES FOR CLEANED TEXT CODE WINDOW --- */
.cleaned-text-container {
    margin-top: 25px;
    margin-bottom: 15px;
    border: 1px solid #282828;
    border-radius: 6px;
    text-align: left;
}

.code-controls {
    padding: 8px 12px;
    background-color: #2a2a2a;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.top-controls {
    border-bottom: 1px solid #383838;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.code-controls button {
    background-color: #3f3f3f;
    border: 1px solid #555;
    color: #e0e0e0;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.code-controls button:hover {
    background-color: #00aeef;
    border-color: #0095cc;
}

.code-controls button img {
    width: 16px !important; 
    height: 16px !important; 
    max-width: 16px; 
    max-height: 16px; 
    object-fit: contain; 
    filter: invert(100%) brightness(150%); 
}

.code-window {
    /* height, if desired for internal stability, would go here, but sticking to "put it back" */
    max-height: 250px; /* This was the original setting */
    overflow-y: auto;
    background-color: #1a1a1a;
    padding: 12px 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#cleaned-up-text-content { /* This is the <pre> tag */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95em;
    color: #00aeef;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
    .container {
        padding: 20px;
        margin-top: 10px; 
        /* max-height: 90vh; */ /* Original, will be overridden by main 'height' */
        height: 88vh; /* MODIFIED: Adjust fixed height for smaller screens */
    }
    h1 { 
        font-size: 1.8em;
    }
    #gematria-interface > p:first-of-type {
        font-size: 1em;
        margin-bottom: 20px;
    }

    .verse-loader-minimal-controls {
        gap: 10px; 
    }


    .input-field {
        font-size: 1em;
        padding: 10px;
        margin-bottom: 25px;
    }
    .results-grid {
        grid-template-columns: 1fr;
    }
    .result-column {
        margin-bottom: 20px;
    }
    .result-column:last-child {
        margin-bottom: 0;
    }
    .column-title {
        font-size: 1.2em;
    }
    .result-value {
        font-size: 1.3em;
    }
    .summary-stats span {
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    .container {
        padding: 15px;
        /* max-height: 85vh; */ /* Original, will be overridden by main 'height' */
        height: 85vh; /* MODIFIED: Further adjust fixed height for very small screens */
    }
    h1 { 
        font-size: 1.6em;
    }
    .verse-loader-minimal-controls select,
    .verse-navigation-controls button { 
        font-size: 0.85em; 
        padding: 6px 8px;
    }
    .verse-loader-minimal-controls {
        gap: 8px;
    }
    .verse-navigation-controls { 
        gap: 8px;
    }

    .input-field {
        padding: 8px;
    }
    .column-title {
        font-size: 1.1em;
    }
    .result-value {
        font-size: 1.2em;
    }
    .result-item {
        font-size: 0.9em;
    }
    .summary-stats span {
        font-size: 0.9em;
        padding: 5px 10px;
    }
}