/* ========================================
   Competition Rules
   ======================================== */

.competition-rules {
    width: 100%;

    padding: 1.5rem 1.5rem 5rem;
}


.competition-rules__container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
}


/* ========================================
   Header
   ======================================== */

.competition-rules__header {
    text-align: center;

    margin-bottom: 1.5rem;
}


.competition-rules__title {
    margin: 0 0 1rem;

    font-size: 1.5rem;
    font-weight: 500;
}


.competition-rules__intro {
    max-width: 700px;

    margin: 0 auto;

    font-size: 1.05rem;
    line-height: 1.6;
}


/* ========================================
   Competition Selector
   ======================================== */

.competition-rules__selector {
    width: 100%;
    max-width: 500px;

    margin: 0 auto 2rem;
}


.competition-rules__selector-label {
    display: block;

    margin-bottom: 0.6rem;

    font-size: 0.95rem;
    font-weight: 500;

    text-align: center;
}


.competition-rules__select {
    width: 100%;

    min-height: 50px;

    padding: 0.7rem 1rem;

    border: 1px solid #14437b;
    border-radius: 4px;

    background-color: #ffffff;
    color: #222222;

    font-size: 1rem;

    cursor: pointer;
}


.competition-rules__select:focus {
    outline: none;

    border-color: #14437b;

    box-shadow: 0 0 0 3px rgba(20, 67, 123, 0.15);
}


/* ========================================
   Rules Content
   ======================================== */

.competition-rules__content {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
}


.competition-rules__content h2 {
    margin-top: 0;
    margin-bottom: 1rem;

    font-size: 1.5rem;
}


.competition-rules__content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;

    font-size: 1.25rem;
}


.competition-rules__content p {
    line-height: 1.7;
}


.competition-rules__content li {
    margin-bottom: 0.5rem;

    line-height: 1.6;
}


/* ========================================
   Empty State
   ======================================== */

.competition-rules__empty {
    padding: 3rem 1.5rem;

    border: 1px solid #e5e5e5;
    border-radius: 6px;

    text-align: center;
}


.competition-rules__empty p {
    margin: 0;
}


/* ========================================
   Mobile
   ======================================== */

@media (max-width: 575.98px) {

    .competition-rules {
        padding: 1rem 1rem 2rem;
    }


    .competition-rules__title {
        font-size: 1.5rem;
    }


    .competition-rules__intro {
        font-size: 1rem;
    }


    .competition-rules__selector {
        margin-bottom: 2rem;
    }


    .competition-rules__select {
        min-height: 48px;

        font-size: 1rem;
    }


    .competition-rules__content h2 {
        font-size: 1.75rem;
    }

}