/* Custom styles for the IDML Translator */

/* Accessibility helper class */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; /* Prevent potential scrollbars */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* Keep text on one line */
  border: 0;
}

/* Style the remove button in the file list */
#file-list .remove-btn {
    display: inline-block; /* Keep it inline */
    font-size: 0.8em; /* Make the 'X' smaller */
    font-weight: bold;
    color: var(--muted-color); /* Use a less prominent color */
    background: none; /* Remove default button background */
    border: none; /* Remove default button border */
    padding: 0 0.5em; /* Minimal padding */
    margin-left: 0.5em; /* Space it from the text */
    cursor: pointer; /* Indicate it's clickable */
    vertical-align: middle; /* Align with text */
    line-height: 1; /* Adjust line height */
}

#file-list .remove-btn:hover {
    color: var(--primary); /* Highlight on hover */
}

/* Adjust list item display if needed for alignment */
#file-list li {
   display: flex; /* Use flexbox for better alignment */
   justify-content: space-between; /* Push button to the right */
   align-items: center; /* Vertically center items */
}

/* Ensure file info takes up available space */
#file-list li > span:first-of-type { /* Target the main text span if you wrap it */
    flex-grow: 1;
}

/* Style for the status span */
.file-status {
    font-style: italic;
    color: #dc2626; /* Tailwind red-600 for errors, or override in JS for other statuses */
    margin-left: 0.5em;
    white-space: normal; /* Allow wrapping */
    word-break: break-word; /* Break long words if needed */
    display: inline-block;
    max-width: 100%;
}

/* Specific message area styles */
.message {
    padding: 1em;
    margin-bottom: 1em;
    border-radius: var(--border-radius);
    border: 1px solid transparent; /* Base border */
}

.message.info {
    color: var(--contrast);
    background-color: var(--card-background-color);
    border-color: var(--primary-focus);
}

.message.success {
    color: #0f5132; /* Dark green text */
    background-color: #d1e7dd; /* Light green background */
    border-color: #badbcc;
}

.message.error {
    color: #842029; /* Dark red text */
    background-color: #f8d7da; /* Light red background */
    border-color: #f5c2c7;
}

.message.processing {
    color: #055160; /* Dark cyan text */
    background-color: #cff4fc; /* Light cyan background */
    border-color: #b6effb;
}

/* Drop area styling */
.drop-area {
    border: 2px dashed var(--form-element-border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    background-color: var(--card-background-color);
    color: var(--muted-color);
    margin-bottom: 1rem;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.drop-area.dragover {
    border-color: var(--primary);
    background-color: var(--primary-focus);
}

.drop-area p {
    margin: 0;
    font-style: italic;
}

/* --- Layout Adjustments --- */

/* Reduce footer vertical padding */
body > footer {
    padding-top: calc(var(--spacing) * 0.5);
    padding-bottom: calc(var(--spacing) * 0.5);
    margin-top: var(--spacing); /* Keep some top margin */
}

/* Reduce bottom margin of main content area */
main.container {
     padding-bottom: calc(var(--spacing) * 0.5); /* Reduce bottom padding */
     max-width: none; /* Remove the 960px constraint */
}

/* Optional: Slightly reduce vertical spacing within the main article */
/* article > * {
    margin-bottom: calc(var(--spacing) * 0.75);
} */
/* --- End Layout Adjustments --- */

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    /* Adjust header navigation */
    nav.container-fluid {
        /* Pico uses flex on nav, let's allow stacking */
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    nav.container-fluid ul {
        /* Stack the two ULs (main links and auth links) */
        flex-direction: column;
        align-items: flex-start; /* Align items to the start */
        width: 100%; /* Make ULs take full width */
    }

    nav.container-fluid ul:last-child {
         margin-top: var(--spacing); /* Add space between the two ULs when stacked */
    }

    nav.container-fluid ul li {
        /* Ensure list items take full width and have spacing */
        display: block; /* Make list items block level */
        width: 100%;
        margin-bottom: calc(var(--spacing) * 0.5); /* Add spacing between stacked items */
    }

    nav.container-fluid ul li:last-child {
        margin-bottom: 0; /* Remove margin from last item in each list */
    }

    /* Style auth buttons/links specifically if needed */
    nav.container-fluid ul:last-child li a[role="button"],
    nav.container-fluid ul:last-child li button {
        width: 100%; /* Make buttons full width */
        text-align: center;
    }

    nav.container-fluid ul:last-child li form {
        display: block; /* Ensure form takes block level */
        width: 100%;
    }

    /* Adjust main content padding */
    main.container,
    article {
        padding-left: var(--spacing);
        padding-right: var(--spacing);
    }

    /* Adjust grid layout if needed (Pico usually handles this) */
    /* .grid {
        grid-template-columns: 1fr; 
    } */

     /* Adjust specific elements like hero image if needed */
    .hero-image-section img {
        max-width: 95%; /* Ensure image doesn't touch edges */
    }

}
/* --- End Mobile Responsiveness --- */

/* --- Layout Fixes --- */
/* Override base.html inline style for .container to allow full-width Tailwind pages */
main.container {
    max-width: none; /* Remove the 960px constraint */
}
/* Rule removed as container constraint is the root cause */
/* --- End Layout Fixes --- */