/*
 * Styles for form elements, such as login and signup pages.
 */

.auth-form {
    max-width: 600px; /* A standard width for login/signup forms */
    margin: 0rem auto; /* Center the form horizontally */
    padding: var(--auth-form-padding);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: white;  /* var(--article-background-color); */
    display: flex; /* Use flexbox to arrange form elements */
    flex-direction: column; /* Stack elements vertically */
    color: var(--text-color);
}

.auth-form form {
    display: flex;
    flex-direction: column;
}

.auth-form hgroup {
    margin-top: 0;
    margin-bottom: 0rem;
}

.auth-form button[type="submit"] {
    width: 100%; /* Make the submit button full-width */
    padding: 0.85rem 1.5rem;
    font-size: 1.1rem;
}

.auth-form footer {
    /* undo auth-form padding */
    margin: 0 calc(-1 * var(--auth-form-padding));
    margin-bottom: calc(-1 * var(--auth-form-padding));
    margin-top: 1.1rem;
    /* add border */
    border-top: 1px solid var(--border-color);
    /* add footer padding */
    padding-top: var(--auth-form-footer-padding);
    padding-bottom: var(--auth-form-footer-padding);
    padding-left: var(--auth-form-padding);
    padding-right: var(--auth-form-padding);
}

/* --- Buttons --- */

/* Base style for elements that should look like buttons */
/* This is the primary/default button style */
button, a[role="button"],
.auth-form button[type="submit"] {
    display: inline-block;
    padding: 0.75rem 1rem;
    border-radius: 0.3rem;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-family: var(--font-family);
    font-size: 1rem;
}

button, a[role="button"]:hover,
.auth-form button[type="submit"]:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: white; /* Ensure text stays white on hover */
    text-decoration: none; /* Override the default link underline on hover */
}

/* Contrast button style for the "Sign Up" link */
a[role="button"].contrast {
    background-color: #181c25;
    color: white; /* Explicitly set text color to contrast with the dark background */
    border-color: #181c25;
}