/* ==================== */
/* Container Styles */
/* ==================== */
#practitionerDetailsContent {
    background-color: white;
}

.practitioner-details-container {
    background-color: #f5f5f5;
    overflow: hidden;
    min-height: 100vh;
}

/* ==================== */
/* Header Styles */
/* ==================== */
header {
    background-color: var(--color-secondary-dark);
    color: var(--color-white);
    min-height: 150px;
    padding: 2rem 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

    header h1 {
        font-weight: 800;
        font-size: 28px;
    }

    header h2 {
        font-size: 14px;
        font-weight: 300;
        font-variant: small-caps;
    }

/* ==================== */
/* Content Section Styles */
/* ==================== */
#contactInformation {
    flex-wrap: wrap;
}

    #contactInformation > div {
        background-color: var(--color-white);
        border-radius: 16px;
        padding: 0.75rem;
        margin: 0.5rem;
        flex: 1 1 300px;
    }

        #contactInformation > div > p {
            font-weight: 300;
        }

#qualifications {
    margin: 0.75rem;
    padding: 1.5rem;
    border: solid 1px transparent;
    border-radius: 16px;
    background-color: white;
}

#biography {
    margin: 0.75rem;
    padding: 1rem;
    background-color: white;
    border-radius: 16px;
}

    #biography > div {
        text-align: center;
        line-height: 1.5rem;
        font-weight: 400;
    }

/* ==================== */
/* Responsive Styles */
/* ==================== */
@media(min-width: 760px) {
    #practitionerDetailsContent {
        padding: 1rem;
    }

    .practitioner-details-container {
        border-radius: 16px;
    }
}

@media (min-width: 768px) {
    #practitionerDetailsContent {
        padding: 2rem;
    }

    header {
        padding: 5rem;
        min-height: 200px;
        margin-bottom: 1.5rem;
    }

        header h1 {
            font-size: 36px;
        }

        header h2 {
            font-size: 18px;
            font-weight: 400;
        }

    #contactInformation > div {
        padding: 1rem;
        margin: 1rem;
    }

    #qualifications {
        margin: 1rem;
        padding: 2rem;
    }

    #biography {
        margin: 1rem;
    }
}