/* Text Case Converter specific styles */

/* Different gradient for this tool page */
body {
    background: linear-gradient(135deg, #f3e8ff 0%, #fce7f3 50%, #fee2e2 100%); /* Light Purple -> Light Pink -> Light Red */
}

/* Style the tool title with a different gradient */
.gradient-text-alt {
    background: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); /* Purple -> Pink -> Red */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem; /* Add slight space below for visual balance */
}

/* Style the case conversion buttons */
.btn-case {
    padding-top: 0.75rem; /* 12px */
    padding-bottom: 0.75rem; /* 12px */
    font-weight: 600; /* semibold */
    font-size: 0.875rem; /* 14px */
    text-transform: none; /* Let the button text dictate case visually */
    border: none;
    transition: transform 0.1s ease-out, box-shadow 0.2s ease-in-out;
}

.btn-case:active {
    transform: scale(0.98); /* Slight shrink effect on click */
}

/* Focus styles specific to this tool */
#textInputOutput:focus {
    outline: none;
    border-color: #a855f7; /* Purple-500 */
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

/* Utility button styling */
.btn-secondary {
    /* Styles defined in HTML via Tailwind for now */
}

.btn-danger {
     /* Styles defined in HTML via Tailwind for now */
}

/* Style adjustments for the button grid */
.button-grid {
    /* Optional: Add specific styles if needed, e.g., for alignment */
}

/* Copy feedback message styling */
#copy-feedback {
    transition: opacity 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .button-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns on small screens */
    }
    h1.tool-title {
        font-size: 1.5rem; /* Adjust title size on smaller screens */
    }
}