/* style.css */
:root {
    --font-primary: 'Inter', sans-serif; /* Our new primary font */

    --primary-color: #3B82F6;         /* Blue 500 */
    --primary-hover-color: #2563EB;    /* Blue 600 */
    --accent-color: #10B981;          /* Green 500 (for specific CTAs like calculate) */
    --accent-hover-color: #059669;     /* Green 600 */

    --text-color-primary: #1F2937;    /* Gray 800 (main text) */
    --text-color-secondary: #4B5563;  /* Gray 600 (labels, secondary text) */
    --text-on-primary: #FFFFFF;       /* White text on primary color backgrounds */

    --bg-page: #F3F4F6;               /* Gray 100 (page background) */
    --bg-converter-section: #FFFFFF;  /* White (for the converter cards) */
    --bg-input: #FFFFFF;              /* White (for input backgrounds) */
    
    --border-color-light: #E5E7EB;    /* Gray 200 (subtle borders) */
    --border-color-medium: #D1D5DB;   /* Gray 300 (input borders) */

    --shadow-color: rgba(0, 0, 0, 0.1); /* For box shadows */
    --focus-ring-color: rgba(59, 130, 246, 0.25);
}

.converter-app-wrapper {
    max-width: 850px;   /* Controls max width of the app */
    margin: 50px auto;  /* Centers the app on the page, adds 50px top/bottom margin */
    padding: 35px 40px; /* Inner padding of the app */
    background-color: var(--bg-converter-section); /* Main app background (white) */
    border-radius: 16px; /* Rounded corners for the app block */
    box-shadow: 0 10px 30px var(--shadow-color); /* A slightly more prominent shadow for the app */
    border: 1px solid var(--border-color-light); /* Optional: subtle border */
    /* position: relative; /* Add if you have deeply nested absolute elements that need this as a container, generally good practice */
}

body {
    font-family: var(--font-primary); /* Apply new font */
    margin: 0; /* Remove default browser margin */
    padding: 20px 0; /* Add some padding to the page */
    background-color: var(--bg-page); /* New page background */
    color: var(--text-color-primary); /* New default text color */
    line-height: 1.6; /* Improve readability */
}

h1 {
    color: var(--text-color-primary);
    text-align: center;
    margin-bottom: 40px; /* Increased spacing */
    font-weight: 700; /* Bolder for main title */
}

h2 { /* For converter section titles */
    color: var(--text-color-primary);
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px; /* Increased spacing */
    font-weight: 600; /* Semi-bold */
}

.converter-section {
    background-color: var(--bg-converter-section);
    padding: 25px 30px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    border: 1px solid var(--border-color-light);
    display: none; /* Make sure this line is present */
}

.converter-section.active-converter {
    display: block; /* Make sure this rule is present */
}
.converter-section h2 {
    color: var(--text-color-primary);
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px; /* Good spacing above controls */
    font-weight: 600;
}
/* Category Navigation Styles */

.category-navigation {
    display: flex;
    justify-content: center; /* Or flex-start if you prefer tabs aligned to the left */
    margin-bottom: 30px;   /* Space below the row of tabs */
    flex-wrap: wrap;
    gap: 8px; /* Spacing between individual tab items if they wrap */
    padding-bottom: 0; /* Remove any padding if you want underline closer to text */
    }

.nav-button {
    padding: 12px 18px; /* Adjust padding for a good clickable area and text spacing */
    font-size: 1em;     /* Or adjust to your preference e.g., 0.95em */
    font-weight: 500;   /* Medium weight for inactive tabs */
    cursor: pointer;
    border: none;       /* Remove previous borders */
    border-bottom: 3px solid transparent; /* Reserve space for the underline, make it transparent initially */
    background-color: transparent; /* No background for inactive tabs */
    color: var(--text-color-secondary); /* Use secondary text color for inactive tabs */
    border-radius: 0;   /* Sharp corners for a classic tab underline look. Or use top-rounding (e.g., 6px 6px 0 0) if you want them to look like they connect to the panel below. */
    transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    outline: none; /* Remove default browser outline on focus if any */
}


.nav-button:hover {
    color: var(--primary-color); /* Change text color to primary on hover */
    border-bottom-color: var(--border-color-light);
}

.nav-button:focus-visible { /* Better focus indication for accessibility */
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.nav-button.active {
    color: var(--primary-color); /* Active tab text color */
    font-weight: 600;           /* Bolder font for active tab */
    border-bottom-color: var(--primary-color); /* Solid underline for the active tab */
}

/* Converter Controls (for most unit converters) */
.converter-controls {
    display: flex;
    align-items: center;
    gap: 12px; /* Spacing between control elements */
    flex-wrap: wrap;
}

.converter-controls input[type="number"],
.converter-controls select {
    padding: 10px 12px;
    border: 1px solid var(--border-color-medium); /* Use variable */
    border-radius: 6px; /* Softer rounding */
    font-size: 1em;
    font-family: var(--font-primary); /* Ensure consistent font */
    background-color: var(--bg-input);
    color: var(--text-color-primary);
    flex-grow: 1; /* Allow input to take more space if needed */
    min-width: 100px; /* Prevent them from becoming too small */
}
.converter-controls select {
    flex-grow: 0.5; /* Selects don't need to be as wide as number input */
}


.converter-controls input[type="number"]:focus,
.converter-controls select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); /* Focus ring using primary color */
}



/* Styling for the span "to" text to ensure it aligns well */
.converter-controls > span { /* Targeting only direct children spans in .converter-controls */
    color: var(--text-color-secondary);
    font-weight: 500;
    align-self: center; /* Align vertically with inputs */
    padding: 0 5px; /* Add some horizontal padding */
    margin-bottom: 10px; /* Match input margin if they stack */
}

.converter-controls p {
    color: var(--text-color-primary); /* For the "Result: " label */
    font-size: 1.05em; /* Keeps existing size for "Result:" */
    font-weight: 500;

    display: flex;         /* Use flexbox for alignment */
    align-items: center;   /* Vertically align "Result:" and the output box */
    gap: 8px;              /* Space between "Result:" and the box */

    flex-basis: 100%;      /* Ensure it takes full width if it wraps */
    margin-top: 20px;      /* More space above the result line */
    margin-left: 0;        /* Ensure no unintended left margin */
}

/* Shared style for result spans (the actual numbers/equation) */
#tempResult, 
#areaResult,
#lengthResult,
#volumeResult,
#massResult,
#dataResult,
#speedResult,
#timeResult,
#fuelEfficiencyResult,
#pressureResult,
#energyResult,
#powerResult,
#angleResult,
#torqueResult,
#frequencyResult,
#densityResult,
#forceResult,
#accelerationResult {
    display: inline-block;  /* Allows padding/border and can grow */
    flex-grow: 1;           /* Allows the box to take available horizontal space */
    padding: 12px 18px;     /* Comfortable padding inside the box */
    background-color: var(--bg-page); /* A light background, e.g., page background, or var(--bg-input) */
    border: 1px solid var(--border-color-light); /* Subtle border */
    border-radius: 8px;     /* Consistent rounding */

    color: var(--primary-color);   /* The equation text color */
    font-weight: 600;             /* Keep equation text prominent */
    font-size: 1em;               /* Relative to parent P's 1.05em, or set fixed like 1.1em */
    text-align: center;           /* Center the equation string within its box */
    line-height: 1.5;             /* Good line height for readability */

    min-width: 200px;       /* Ensure it has a decent minimum width */
    word-break: break-word; /* Break long words/strings if necessary */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* Optional: subtle inner shadow for depth */
}


/* Date Calculator Specific Styles - Apply new scheme */
.date-calc-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
}
.date-calc-controls div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.date-calc-controls label {
    min-width: 80px;
    color: var(--text-color-secondary);
    font-weight: 500;
}
.date-calc-controls input[type="date"] {
    padding: 10px 12px;
    border: 1px solid var(--border-color-medium);
    border-radius: 6px;
    font-size: 0.95em;
    font-family: var(--font-primary);
    background-color: var(--bg-input);
    color: var(--text-color-primary);
}
.date-calc-controls input[type="date"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

#calculateDateDiffButton {
    padding: 10px 20px; /* Increased padding */
    background-color: var(--accent-color); /* Use accent color */
    color: var(--text-on-primary); /* White text */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s;
}
#calculateDateDiffButton:hover {
    background-color: var(--accent-hover-color); /* Darker accent on hover */
}

.date-result-output {
    margin-top: 20px;
    padding: 20px; /* Increased padding */
    background-color: var(--bg-page); /* Match page background or a slightly different neutral */
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    white-space: pre-wrap;
    font-family: var(--font-primary); /* Consistent font */
    line-height: 1.7; /* More spacing for readability */
    text-align: left;
    color: var(--text-color-primary);
}
.date-result-output p {
    margin: 8px 0; /* More spacing between result lines */
}
.date-result-output strong {
    font-weight: 600;
    color: var(--primary-color); /* Highlight numbers in the result */
}

/* Common styles for modern input fields and selects */
input[type="number"],
input[type="date"],
select {
    font-family: var(--font-primary);
    font-size: 1em; /* Or 0.95em for a slightly more refined look */
    color: var(--text-color-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border-color-medium);
    border-radius: 8px; /* Slightly more rounded */
    padding: 12px 15px; /* Increased padding for a more modern feel */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-sizing: border-box; /* Ensures padding and border don't expand the total width/height unexpectedly */
    width: 100%; /* Make them take available width in their container */
    margin-bottom: 10px; /* Add some space below if they stack */
}

/* Ensure specific container rules still apply for layout (flex-grow, etc.) */
.converter-controls input[type="number"],
.converter-controls select {
    flex-grow: 1;
    min-width: 120px; /* Adjusted min-width */
    width: auto; /* Override general width: 100% if within flex */
}
.converter-controls select {
    flex-grow: 0.8; /* Adjust flex-grow for select if needed */
}

.date-calc-controls input[type="date"] {
    width: auto; /* Allow it to size naturally or be controlled by its flex parent */
    min-width: 180px; /* Ensure enough space for date display */
}


/* Custom styling for SELECT elements */
select {
    appearance: none; /* Remove default browser appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%234B5563%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%20/%3E%3C%2Fsvg%3E'); /* Chevron down icon - color #4B5563 from --text-color-secondary */
    background-repeat: no-repeat;
    background-position: right 15px center; /* Position arrow */
    background-size: 1em 1em; /* Size of the arrow icon */
    padding-right: 40px; /* Add more padding to the right to make space for the arrow */
}

/* Focus styles for all relevant inputs and selects */
input[type="number"]:focus,
input[type="date"]:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

/* Placeholder styling (optional) */
input[type="number"]::placeholder,
input[type="date"]::placeholder { /* Note: date placeholder styling is tricky and browser-dependent */
    color: var(--text-color-secondary);
    opacity: 0.7;
}

.copy-button {
    background-color: transparent;
    border: 1px solid var(--border-color-medium);
    color: var(--text-color-secondary);
    padding: 6px 8px; /* Adjust padding for icon size */
    border-radius: 6px;
    cursor: pointer;
    margin-left: 10px; /* Space from the result box/span */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    display: inline-flex; /* For aligning icon nicely */
    align-items: center;
    justify-content: center;
    /* If your result span is a box, try to align this button with it */
    vertical-align: middle; /* May help alignment with the text/span */
}

.copy-button:hover {
    background-color: var(--border-color-light); /* Subtle background on hover */
    border-color: var(--text-color-secondary);
    color: var(--text-color-primary);
}

.copy-button:active {
    transform: translateY(1px); /* Simple pressed effect */
}

.copy-button svg {
    pointer-events: none; /* Ensures the click event registers on the button itself */
}

.copy-button.copied { /* Style for when text is copied */
    background-color: var(--accent-color); /* Green for success */
    color: var(--text-on-primary);
    border-color: var(--accent-color);
}
.copy-button.copied svg { /* Hide original icon when "Copied!" text is shown */
   /* display: none; /* Or change icon to a checkmark */
   /* If replacing with text, you'd hide this. If icon changes, update SVG fill/path */
}

#copyDateResultButton {
    margin-top: 20px; /* Space above this button */
    padding: 10px 15px; /* Make it a bit more substantial */
    display: inline-flex; /* Align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    /* You can make it full width on mobile if desired using a media query */
}

.clear-button {
    padding: 8px 15px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-color-secondary);
    background-color: var(--bg-page); /* Light grey, like page bg or slightly different */
    border: 1px solid var(--border-color-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    align-self: center; /* Aligns nicely if flex items have different heights */
}

.clear-button:hover {
    background-color: var(--border-color-light); /* Slightly darker grey on hover */
    color: var(--text-color-primary);
    border-color: var(--text-color-secondary);
}

/* Specific placement tweaks if needed */
.converter-controls .clear-button {
    margin-left: 10px; /* Add some space from previous control */
    /* Or use margin-left: auto; to try and push to the right if container is flex row and has space */
    flex-shrink: 0; /* Prevent it from shrinking too much */
}

.date-calc-controls .clear-button {
    margin-top: 10px; /* Space it from the calculate button */
    width: 100%; /* Make it full width like the calculate button on mobile */
    max-width: 200px; /* But not too wide on larger screens */
    align-self: flex-start; /* Align with other buttons if they are not full width */
}

/* Main Category Navigation (Level 1) Styles */
.main-category-navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* Spacing between main category buttons */
    margin-bottom: 25px; /* Space below main categories */
    padding-bottom: 15px; /* Space for a potential border or just visual separation */
    border-bottom: 2px solid var(--border-color-light); /* Separator line */
}

.main-nav-button {
    padding: 10px 18px;
    font-size: 1.05em; /* Slightly larger for main categories */
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent; /* Keep it clean */
    background-color: transparent;
    color: var(--text-color-secondary);
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.main-nav-button:hover {
    background-color: var(--bg-page); /* Subtle hover */
    color: var(--primary-color);
}

.main-nav-button.active-main-category {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Sub-Category Navigation (Level 2 - your existing #categoryNav) */
#categoryNav { /* Renaming from .category-navigation for clarity if needed, or just use ID */
    display: flex;
    justify-content: center;
    margin-bottom: 30px; 
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual sub-category buttons (your existing .nav-button) */
/* Ensure they are hidden by default, JS will show relevant ones */
#categoryNav .nav-button { 
    padding: 12px 18px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    color: var(--text-color-secondary);
    border-radius: 0;
    transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    outline: none;
    display: none; /* Hide all sub-category buttons initially */
}
/* Style for visible sub-category buttons (JS will add this to appropriate buttons) */
#categoryNav .nav-button.visible-sub-category {
    display: inline-flex; /* Or your previous display type like 'inline-block' or 'flex' */
    align-items: center;
    justify-content: center;
}


#categoryNav .nav-button:hover { /* Existing hover for L2 */
    color: var(--primary-color);
}
#categoryNav .nav-button:focus-visible {  /* Existing focus for L2 */
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
#categoryNav .nav-button.active { /* Existing active for L2 */
    color: var(--primary-color);
    font-weight: 600;
    border-bottom-color: var(--primary-color);
}

.search-container {
    display: grid;
    gap: 10px;
    align-items: center;
    position: relative; /* Crucial: Establishes a positioning context for the results dropdown */
    margin-bottom: 10px; /* Space below the search input/button row itself */
    flex-direction:column
}

#unitSearchInput {
    font-family: var(--font-primary);
    font-size: 1em;
    color: var(--text-color-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border-color-medium);
    border-radius: 8px;
    padding: 12px 15px;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-sizing: border-box;
    flex-grow: 1; 
    /* Remove fixed width: 100% if it was there, rely on flex-grow */
    /* No margin-bottom here, parent .search-container handles it */
}

#unitSearchInput:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

#unitSearchButton { 
    padding: 12px 20px;
    font-size: 1em;
    font-weight: 500;
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0; /* Prevent button from shrinking */
    /* display: none; /* You had this inline, uncomment if you want to hide it for live search */
}

#unitSearchButton:hover {
    background-color: var(--primary-hover-color);
}

/* Search Error Message */
#searchErrorMessage {
    color: red;
    text-align: center;
    margin-top: -5px; /* Pulls it a bit closer if search-container had margin */
    margin-bottom: 15px; /* Space below error message, before main nav */
    font-size: 0.9em;
    display: none; /* Initially hidden */
    width: 100%; /* Take full width of its container */
}

/* Search Results Dropdown Container */
#searchResultsContainer {
    display: none; /* Hidden by default */
    background-color: var(--bg-input);
    border: 1px solid var(--border-color-medium);
    border-top: none; /* Optional: if you want it to look like it's attached to the input */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 12px var(--shadow-color);
    max-height: 300px;
    overflow-y: auto;
    
    
    top: 100%;          
    left: 0;
    right: 0;           
    
    z-index: 1000;      
    margin-top: 1px;    /* Optional: Small gap from input. Remove if border-top:none is used and you want them flush. */
}

#searchResultsContainer.results-are-visible {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; /* Typically for a single column list, you might not want it to wrap into more columns.
                             Items will scroll vertically due to max-height and overflow-y. 
                             If items can be very wide and you have a fixed width for the container, 
                             then wrap might make sense. For now, let's assume a single column of results. */
    align-items: baseline; /* As you requested. This aligns items based on their text baseline.
                              If you want items to stretch to full width, 'align-items: stretch;' (default for column)
                              or 'align-items: flex-start;' might be more typical for list items. */
}
.search-results-container .search-result-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color-light);
    font-size: 0.95em;
    color: var(--text-color-primary);
}
.search-results-container .search-result-item:last-child {
    border-bottom: none;
}
.search-results-container .search-result-item:hover {
    background-color: var(--bg-page); 
}
.search-results-container .search-result-item strong {
    font-weight: 600;
    color: var(--primary-color);
}
.search-results-container .category-hint {
    font-size: 0.8em;
    color: var(--text-color-secondary);
    margin-left: 8px;
}
/* style.css - Add or update these footer styles */

.app-footer {
    padding: 25px 20px; /* Existing padding */
    background-color: var(--bg-page); 
    color: var(--text-color-secondary); 
    font-size: 0.9em;
    border-top: 1px solid var(--border-color-light); 
    margin-top: 40px; 
    /* Remove text-align: center; if it was there, as grid handles alignment */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Creates three equal-width columns */
    gap: 20px; /* Space between columns */
    align-items: start; /* Aligns items to the start of their grid cell (top) */
    max-width: 1200px; /* Optional: constrain the max-width of the grid itself */
    margin: 0 auto; /* Center the grid if max-width is set */
}

.footer-left,
.footer-center,
.footer-right {
    /* No specific styling needed here unless you want borders/backgrounds per column */
}

.footer-left {
    text-align: left;
}

.footer-center {
    text-align: center;
}

.footer-right {
    text-align: right;
}

.app-footer p { /* General styling for paragraphs within the footer */
    margin-top: 0;
    margin-bottom: 8px; /* Space between paragraphs within a column */
    line-height: 1.5;
}

.app-footer p:last-child {
    margin-bottom: 0;
}

/* Specific classes you defined (optional if general 'app-footer p' is enough) */
.copyright-text {}
.slogan-text {
    font-size: 0.9em; /* Slightly smaller for the slogan */
    color: var(--text-color-secondary);
}
.developed-by-text {}
.version-info {
    font-size: 0.9em;
}
.version-info span { /* For the #appVersion span */
    display: block; /* Makes version number appear on its own line above link */
    margin-bottom: 5px;
    font-weight: 500;
}
.version-info a {}


.app-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.app-footer a:hover {
    text-decoration: underline;
}

/* Language Switcher Styles */
.language-switcher {
    text-align: right; /* Aligns buttons to the right */
    margin-bottom: 15px; /* Adds some space below the switcher */
    padding: 5px 0; /* Some padding above/below the buttons */
}

.lang-button {
    background-color: transparent;
    border: 1px solid var(--border-color-medium);
    color: var(--text-color-secondary);
    padding: 6px 12px;
    margin-left: 8px; /* Space between language buttons */
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.lang-button:hover {
    background-color: var(--border-color-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.lang-button.active-lang {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--primary-color);
    font-weight: 600;
}

/* Adjustments for the main title if needed */
h1 {
    /* If the language switcher makes the title too close to the top, 
       you might adjust its margin-top, or ensure the switcher itself 
       is within the main .converter-app-wrapper padding.
       The current placement should be okay. */
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* For tablets and smaller desktops (up to 768px wide) */
@media (max-width: 600px) { /* Adjust breakpoint as needed */
    .footer-row {
        flex-direction: column; /* Stack columns vertically */
        align-items: center;    /* Center columns when stacked */
        text-align: center;     /* Center text within stacked columns */
    }
    .footer-col {
        min-width: 100%; /* Allow columns to take full width when stacked */
        margin-bottom: 10px;
    }
    .footer-col:last-child {
        margin-bottom: 0;
    }
    .app-footer p {
        margin: 6px 0; /* Slightly more margin when stacked */
    }
}


@media (max-width: 768px) {
    body {
        /* If you had horizontal padding on body, you might reduce or remove it here,
           as the wrapper will mostly control content width. */
    }

    .converter-app-wrapper {
        margin: 30px 15px; /* Reduced top/bottom margin, added side margin for small padding from screen edge */
        padding: 25px 20px; /* Reduced inner padding */
        border-radius: 12px; /* Can slightly reduce rounding if desired */
    }

    h1 {
        font-size: 1.9em; /* Adjust font size for readability */
        margin-bottom: 25px;
    }

    .category-navigation {
        margin-bottom: 25px;
        gap: 6px; /* Slightly reduce gap between tabs if they wrap */
    }
    .nav-button {
        padding: 10px 15px; /* Adjust padding for smaller tabs */
        font-size: 0.9em;
    }

    .converter-section {
        padding: 20px; /* Reduced padding inside converter cards */
    }
    .converter-section h2 {
        font-size: 1.35em;
        margin-bottom: 25px;
    }

    /* General input styling for mobile */
    input[type="number"],
    input[type="date"],
    select {
        font-size: 0.95em; /* Slightly smaller font in inputs */
        padding: 10px 12px;
    }

    .converter-controls input[type="number"],
    .converter-controls select {
        min-width: 100px; /* Slightly reduce min-width */
    }
    
    .converter-controls > span { /* The "to" text */
        padding: 0 5px; /* Adjust if needed */
        margin-bottom: 10px; /* Align with stacked inputs if they wrap */
    }

    .converter-controls p { /* Result paragraph */
        font-size: 1em;
        margin-top: 20px; /* Space above result */
    }

    /* Result spans that are boxes */
    #tempResult, 
    #areaResult,
    #lengthResult,
    #volumeResult,
    #massResult,
    #dataResult,
    #speedResult,
    #timeResult {
        padding: 10px 15px;
        font-size: 0.95em; 
        min-width: 180px; /* Reduce min-width if needed */
    }

    /* Date Calculator on mobile */
    .date-calc-controls label {
        font-size: 0.95em;
    }
    #calculateDateDiffButton {
        padding: 12px; /* Make tap target a bit larger */
        font-size: 1em;
        width: 100%; /* Make button full width */
    }
    .date-result-output {
        padding: 15px;
        font-size: 0.9em;
    }
	
	.footer-grid {
        grid-template-columns: 1fr; /* Stack columns on top of each other */
        text-align: center; /* Center text for all stacked columns */
    }

    .footer-left,
    .footer-center,
    .footer-right {
        text-align: center; /* Ensure all content is centered when stacked */
        margin-bottom: 15px; /* Add some space between stacked sections */
    }
    .footer-right {
        margin-bottom: 0;
    }

    .version-info span {
        display: inline; /* Put version and link on same line for mobile if desired */
        margin-bottom: 0;
        margin-right: 8px; /* Space between version and link */
    }
}

/* For smaller mobile phones (up to 480px wide) */
@media (max-width: 480px) {
    .converter-app-wrapper {
        margin: 15px 10px; /* Further reduce margins */
        padding: 20px 15px; /* Further reduce padding */
        border-radius: 10px;
    }


    h1 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    .nav-button {
        font-size: 0.85em;
        padding: 8px 10px;
    }

    .converter-section {
        padding: 15px;
    }
    .converter-section h2 {
        font-size: 1.2em;
        margin-bottom: 20px;
    }

    /* Force controls in .converter-controls to stack nicely */
    .converter-controls {
        flex-direction: column; /* Stack all items vertically */
        align-items: stretch;   /* Make items take full width */
    }
    .converter-controls input[type="number"],
    .converter-controls select,
    .converter-controls > span, /* Make "to" span also behave block-like */
    .converter-controls p { /* And the result paragraph */
        width: 100%;
        flex-grow: 0; /* Reset grow as width is 100% */
        margin-left: 0; /* Reset any specific margins */
        margin-right: 0;
    }
     .converter-controls > span { /* The "to" text */
        text-align: center; /* Center "to" text when it's full width */
        padding: 8px 0; /* Add some vertical padding */
        margin-bottom: 0; /* Remove its own bottom margin if inputs have it */
     }
     .converter-controls p { /* Result paragraph */
        text-align: center; /* Center the "Result: [box]" as well */
     }
     .converter-controls .clear-button {
        width: 100%;
        margin-left: 0; /* Reset margin if it's full width */
        margin-top: 10px; /* Add space when it stacks */
    }


    #tempResult, 
    #areaResult,
    #lengthResult,
    #volumeResult,
    #massResult,
    #dataResult,
    #speedResult,
    #timeResult {
        min-width: 0; /* Allow it to be smaller */
        width: 100%;  /* Make output box full width */
        text-align: center;
        font-size: 0.9em;
    }

    #copyDateResultButton {
        width: 100%;
        justify-content: center; /* Center content if button is full width */
        }

    .date-calc-controls div { /* Stack label and date input in date calc */
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .date-calc-controls label {
        margin-bottom: 5px;
    }
    .date-calc-controls input[type="date"] {
        width: 100%;
        min-width: 0;
    }
    .date-result-output {
        font-size: 0.85em;
    }

.search-container {
        flex-direction: column; 
        align-items: stretch;
        margin-bottom: 10px; /* Adjust space when stacked */
    }


    #unitSearchInput {
        margin-bottom: 10px; 
    }
    #unitSearchButton {
        width: 100%; 
        /* display: block; /* Make visible if it was hidden and you want it on mobile */
    }
    #searchResultsContainer {
        /* On mobile, absolute positioning might still be fine if .search-container takes full width */
        /* position: absolute; /* Recalculate or ensure it still aligns well */
        width: 100%; /* Ensure it spans the width of the (now full-width) search container */
        left: 0;
        right: auto; /* Or also 0, test what works best for parent */
    }
    #searchErrorMessage {
        margin-bottom: 10px;
    }
    #mainCategoryNav {
        margin-top: 10px; /* Ensure some space if error message is hidden */
    }
	
	 .app-footer {
        padding: 15px 10px; /* Further reduce padding */
        margin-top: 25px;  /* Further reduce top margin */
        font-size: 0.8em;  /* Even smaller font for footer on small mobiles */
    }

    .app-footer p {
        margin: 3px 0; /* Further reduce paragraph spacing */
        line-height: 1.4; /* Slightly tighter line height if space is very constrained */
    }
}