/* style.css
    Custom styles for the Voxivium website.
    These styles complement the Tailwind CSS framework.
*/

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* A very light gray background */
    color: #1e293b; /* A dark slate for text */
}

/* Custom color palette based on the logo.
    These classes can be used throughout the site for consistent branding.
*/
.bg-vox-blue { background-color: #1e3a8a; } /* A deeper blue for primary actions */
.text-vox-blue { color: #1e3a8a; }
.bg-vox-blue-light { background-color: #3b82f6; } /* A lighter blue for highlights */
.border-vox-blue { border-color: #1e3a8a; }
.ring-vox-blue-light:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
}

/* Styling for the mobile slide-out menu.
*/
#menu {
    transition: transform 0.3s ease-in-out;
}
.menu-hidden {
    transform: translateX(100%);
}

/* Custom focus styles for better accessibility and visual feedback on form inputs.
*/
.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
    border-color: #3b82f6;
}

/* A subtle gradient for the hero section to add visual depth.
*/
.hero-gradient {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}