/* Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body with WCAG-compliant font and contrast */
body, .survey-footer, .survey-intro {
    font-family: Arial, Helvetica, sans-serif; /* Accessible font */
    background-color: #000000; /* Black background */
    color: #ff9500; /* Orange text, contrast ratio ~7:1 against black */
    padding: 1.25rem; /* 20px */
    margin: 0;
    text-align: justify!;
    font-size: 1.125rem; /* 18px, minimum for WCAG Level AA */
    line-height: 1.6;
}

/* Ensure proper content width */
.container {
    max-width: 56.25rem; /* 900px */
    margin: auto;
    padding: 1.25rem; /* 20px */
}

/* Responsive Input Fields with WCAG focus indicators */
input, textarea, select {
    background-color: #FFFF00; /* Yellow background, contrast ~21:1 with black text */
    color: #000000; /* Black text */
    border: 0.125rem solid #00FF00; /* Green border, contrast ~21:1 with yellow */
    padding: 0.75rem; /* 12px */
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.125rem; /* 18px */
    min-height: 2.5rem; /* 40px */
    border-radius: 0.375rem; /* 6px */
}

input::placeholder, textarea::placeholder {
    color: #333333; /* Dark gray for contrast */
    font-size: 1rem; /* 16px */
    opacity: 1; /* Ensure visibility */
}

input:focus, textarea:focus, select:focus {
    outline: 0.1875rem solid #FFFFFF; /* White outline for focus, contrast ~21:1 */
    outline-offset: 0.125rem; /* 2px */
}

/* Universal Button & Link Styling with WCAG focus and hover */
button, a {
    display: inline-block;
    background-color: #00FF00; /* Green background, contrast ~21:1 with black */
    color: #000000; /* Black text */
    padding: 0.75rem 1.125rem; /* 12px 18px */
    text-decoration: none;
    border: 0.125rem solid #000000; /* Black border */
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-size: 1.125rem; /* 18px */
    border-radius: 0.375rem; /* 6px */
    min-width: 10rem; /* 160px */
}

button:hover, a:hover {
    background-color: #FFFF00; /* Yellow on hover, contrast ~21:1 with black */
    color: #000000;
    border-color: #ff9500; /* Orange border for contrast */
}

button:focus, a:focus {
    outline: 0.1875rem solid #FFFFFF; /* White outline for focus */
    outline-offset: 0.125rem; /* 2px */
}

/* Ensure all links behave like buttons */
a {
    display: inline-block;
    width: fit-content;
    margin: 0.625rem auto; /* 10px */
}

/* Forms and Labels with WCAG association */
label {
    display: block;
    margin-bottom: 0.625rem; /* 10px */
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: #ff9500; /* Orange for consistency */
}

/* Admin Panel Styling */
.admin-container {
    width: 95%;
    margin: auto;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem; /* 20px */
}

.admin-table th, .admin-table td {
    border: 0.125rem solid #FFFF00; /* Yellow border, contrast ~21:1 with black */
    padding: 0.625rem; /* 10px */
    text-align: left;
    font-size: 1.125rem; /* 18px */
}

.admin-table th {
    background-color: #00FF00; /* Green background, contrast ~21:1 with black */
    color: #000000;
}

/* Responsive Action Buttons */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem; /* 10px */
    justify-content: center;
}

/* Hairline Boxes Around Questions */
.question-box {
    border: 0.125rem solid #FFFF00; /* Yellow border */
    padding: 0.75rem; /* 12px */
    margin-bottom: 0.75rem; /* 12px */
    background-color: #000000;
    color: #ff9500; /* Orange text */
    display: flex;
    flex-direction: column;
    font-size: 1.125rem; /* 18px */
}

/* Ensure text alignment for readability */
.question-box p {
    text-align: left;
    margin: 0 0 0.75rem 0; /* 12px */
}

.survey-intro, .survey-footer {
    text-align: left;
    /* margin: 1.25rem 0; /* 20px */
}

.survey-intro, .survey-footer, p {
    text-align: left;
    /* text-indent: 2em; */
    margin: 0 0 1em 0; 
}

/* Distinct HR Styling */
.styled-divider {
    border: 0.1875rem solid #FFFF00; /* Yellow border */
    margin: 1.25rem 0; /* 20px */
    width: 80%;
}

.divider-label {
    font-size: 1.375rem; /* 22px */
    font-weight: 700;
    color: #ff9500; /* Orange text */
    text-align: center;
    margin-bottom: 1.25rem; /* 20px */
}

/* Mobile Optimization: Larger text & elements */
@media (max-width: 1024px) {
    body {
        font-size: 1.375rem; /* 22px */
        padding: 0.9375rem; /* 15px */
    }

    .admin-table, .admin-table th, .admin-table td {
        font-size: 1.375rem; /* 22px */
        padding: 0.75rem; /* 12px */
    }

    button, a {
        font-size: 1.375rem; /* 22px */
        padding: 1rem 1.25rem; /* 16px 20px */
        width: 100%;
    }

    .action-buttons {
        flex-direction: column;
        align-items: center;
    }

    input, textarea, select {
        font-size: 1.375rem; /* 22px */
        min-height: 3.125rem; /* 50px */
    }

    .survey-intro, .question-box, , .survey-footer {
        font-size: 1.375rem; /* 22px */
    }
}

@media (max-width: 768px) {
    body {
        font-size: 1.5rem; /* 24px */
        padding: 0.9375rem; /* 15px */
    }

    .admin-table, .admin-table th, .admin-table td {
        font-size: 1.5rem; /* 24px */
        padding: 0.875rem; /* 14px */
    }

    button, a {
        font-size: 1.5rem; /* 24px */
        padding: 1.125rem 1.375rem; /* 18px 22px */
    }

    input, textarea, select {
        font-size: 1.5rem; /* 24px */
        min-height: 3.4375rem; /* 55px */
    }

    .survey-intro, .question-box, .survey-footer {
        font-size: 1.5rem; /* 24px */
    }
}

@media (max-width: 480px) {
    body {
        font-size: 1.625rem; /* 26px */
        padding: 0.625rem; /* 10px */
    }

    button, a {
        font-size: 1.625rem; /* 26px */
        padding: 1.25rem 1.5rem; /* 20px 24px */
        width: 100%;
    }

    .admin-table, .admin-table th, .admin-table td {
        font-size: 1.625rem; /* 26px */
        padding: 1rem; /* 16px */
    }

    input, textarea, select {
        font-size: 1.625rem; /* 26px */
        min-height: 3.75rem; /* 60px */
    }

    .survey-intro, .question-box, .survey-footer {
        font-size: 1.625rem; /* 26px */
    }
}