/* base.css */

/*
 * LOG-BOOK
 * 2025-06-11: Refactored background for new visualizer.
 *             - Problem: The `body` element had the tiling background image, but we need it to host the
 *               new note-reactive color visualizer.
 *             - Solution:
 *               - The `body` background is now set to a solid black color. This will be the base layer for the visualizer.
 *               - A new class, `.content-wrapper`, has been created. This class will be applied to a new `div`
 *                 in `index.html` that wraps all existing content.
 *               - The tiling background image (`page_bg.png`) has been moved from `body` to `.content-wrapper`.
 *               - This creates a new layer stack: `body` (black/visualizer) -> `.content-wrapper` (tiling image) -> main content.
 */

/* === HTML & BODY BASE === */
html {
    font-size: 85%; /* Base font size for rem calculations */
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape on iOS */
    -ms-text-size-adjust: 100%; /* Same for IE/Edge */
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    font-size: 1rem; /* Base font size for body, derived from html */
    font-weight: lighter:
    line-height: 1.5;
    color: #e0e0e0 !important; /* Default text color */
    background-color: #000000 !important; /* Default background is now solid black for the visualizer base */
    margin: 0;
    padding: 0; 
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden; 
    width: 100vw;

    display: flex;
    flex-direction: column;
    align-items: center; 
}

*,
*::before,
*::after {
    box-sizing: inherit; 
}

.content-wrapper {
    width: 100%;
    min-height: 100vh;
    background-image: url('../images/page_bg.png');
    background-repeat: repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* === ROOT CSS VARIABLES === */
:root {
    --font-size-module-title: 0.9em;
    --font-size-label: 0.75em;
    --font-size-input-text: 0.85em;
    --font-size-button: 0.8em;
    --font-size-value-display: 0.7em;
    --font-size-results-base: 1.15em;
    --font-size-results-table: 0.9em;
}

/* === GENERAL TEXT & LINKS === */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: bold;
    line-height: 1.2;
    color: inherit; 
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a {
    color: #99ccff; 
    text-decoration: none; 
    transition: color 0.15s ease-in-out;
}
a:hover {
    color: #bbeeff;
    text-decoration: underline;
}

/* Utility class for visually hidden elements accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}