/* Custom styles for Elenika Docs - Add here any specific styles not covered by Tailwind */
/* These styles might be used for specific components like code blocks, forms, and buttons with custom effects */

/* Example: Custom code block styles */
code {
    background-color: #f4f4f5;
    padding: 4px 8px;
    border-radius: 0.375rem;
    font-family: 'Courier New', monospace;
    color: #1f2937;
}

pre {
    background-color: #f9fafb;
    padding: 1rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

/* Optional: Custom form input styles */
input[type="text"],
input[type="email"],
textarea {
    border-color: #e5e7eb;
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 90, 241, 0.5);
}

/* Optional: Enhance button hover effects */
.button-custom:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Optional: Custom link styles */
a {
    color: #3b82f6;
    text-decoration: none;
    transition: 0.3s ease all;
}

a:hover {
    color: #2563eb;
}

/* Optional: Custom form field spacing */
.doc-form {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E5E7EB;
}

/* Optional: Custom section background */
.docs-section {
    padding: 2rem;
    background-color: #fbfbfb;
    border-radius: 1rem;
}

/* Ensure compatibility and specific overrides */
/* More custom styles can be added here */
</style>