/* 
    This CSS file contains styles to make our app look clean, modern, and readable.
    CSS stands for Cascading Style Sheets, which allows us to control the visual
    presentation of HTML elements.
*/

/* Sets the default font for the whole app to Roboto, which is clean and modern */
body {
    font-family: 'Roboto', Arial, sans-serif;
    background-color: #f4f8fc;
}

/* Add a bit of corner rounding and shadow to our main card areas */
.card {
    border-radius: 18px;
    border: 1px solid #e3edf7;
    background: #fff;
}

h2, h5 {
    font-weight: 700;
    color: #22537a;
}

/* Make sure textarea is easy to read and type in */
textarea.form-control {
    font-size: 1.1em;
}

/* Add spacing between inline radio buttons (email types) */
#emailTypeOptions .form-check-inline {
    margin-right: 12px;
    margin-bottom: 5px;
}

/* The area where AI-generated result displays gets a colored left border */
#aiOutput {
    border-left: 6px solid #42a5f5;
    background: #fcfdff;
    font-size: 1.09em;
}

/* Add a little highlight on important buttons */
#generateEmailBtn {
    box-shadow: 0 2px 10px rgba(66,165,245,0.10);
}

#fetchDescriptionBtn {
    min-width: 166px;
}

footer {
    letter-spacing: 0.02em;
}