@import url(./dr.css);
@import url(./ds.css);
@import url(./gc.css);
@import url(./jc.css);

/** ::before and ::after: those pseudo-elements can also affect layout, so including them ensures they follow the same sizing rules.
Placement: putting these rules at the top of style.css (before your @imports) ensures imported styles inherit border-box by default.
override for different behavior: per-element, e.g. input { box-sizing: content-box; }.**/
:root {
    --font-family: Arial, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    --background-color: #ffffff;
    --primary-color: #052c53;
    --primary-color-highlight: #24aac5;
    --secondary-color: #fce03b;
    --secondary-color-highlight: #5f410c;
    box-sizing: border-box;
    
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--primary-color);
    background-color: var(--background-color);

    background: url(../images/background1.png) no-repeat center center fixed;
    background-size: cover;

    /* Remove default browser margins so footer can touch viewport bottom */
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 100vh;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--secondary-color);
    margin-top: 0;
}
footer {
    text-align: center;
    padding: 1em 0;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    width: 100%;
    flex-shrink: 0;
    margin: 0;
}

.social-links a{
    color: var(--secondary-color);
    font-size: 1.5rem;
    transition: color 0.3s;
}

/* Make the main page content grow to push footer to bottom */
main {
    flex: 1;
}

/* Media Queries for Responsive Background Handling */

/* Desktop / large-screen background adjustments */

@media (min-width: 768px) {
    body {
        background-attachment: fixed;
    }
}
/* Mobile / small-screen background adjustments */
@media (max-width: 767px) {
    body {
        /* Use a smaller image (if provided) for bandwidth and better focal control */
        background-image: url(../images/background1-small.png);
        /* Center horizontally, slightly higher vertical focus so important content isn't cropped */
        background-position: center 20%;
        /* Keep cover so image fills area but allow nicer cropping on tall/narrow screens */
        background-size: cover;
        /* Avoid fixed attachment on mobile (poor performance / iOS issues) */
        background-attachment: scroll;
    }
}

/* Media Queries for Button Sizing */
@media (max-width: 425px) {
    .btn-jc,
    .btn-info-jc {
        width: 150px;
        height: 75px;
        font-weight: bold;
        font-size: 1.1rem;
    }
}

@media (min-width: 768px) {
    .btn-jc,
    .btn-info-jc {
        width: 175px;
        height: 85px;
        font-weight: bold;
        font-size: 1.15rem;
    }
}

@media (min-width: 1024px) {
    .btn-jc,
    .btn-info-jc {
        width: 200px;
        height: 75px;
        font-weight: bold;
        font-size: 1.25rem;
    }
}

@media (min-width: 1441px) {
    .btn-jc,
    .btn-info-jc {
        width: 300px;
        height: 100px;
        font-weight: bold;
        font-size: 1.5rem;
    }
}

/* Make label/select a bit larger on desktop (matches .btn-jc @1024px rules) */
@media (min-width: 1024px) {
    #questionsSelectContainer.options-jc,
    #difficultyLevel.options-jc {
        font-size: 1.15rem;
        padding: 0.5rem 1rem;
        gap: 0.75rem;
        border-radius: 0.6rem;
        width: 300px;
        height: 100px;
    }
    #questionsSelectContainer.options-jc .form-select,
    #difficultyLevel.options-jc .form-select {
        min-width: 4.25rem;
        padding: 0.6rem 0.6rem;
        font-size: 1rem;
    }
}