/* src/assets/css/style.css */
@import './tailwind.css';

/*
    This file is for custom CSS that complements Tailwind CSS and Bootstrap.
    Since we are using CDN for Tailwind, this file will contain any additional
    custom styles you want to apply.
*/

/* Example: Custom font import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif; /* Ensure Inter is applied */
}

/* Custom styles for specific elements or overrides */
/* Example: Adjusting Bootstrap button focus outline if needed */
.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25); /* Custom focus color for blue buttons */
}

/* Ensure images are responsive by default */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below images */
}

/* Basic styling for embed-responsive if using iframes for videos */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Form input focus styles */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #2563EB; /* Blue-600 */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); /* Blue-600 with opacity */
}

/* Add any other specific custom styles here */