/*
 * Author: Jared Hall
 * Purpose: To style the content of the webpages
 * Last Updated: March 31st, 2026
*/

/* ===== General Styles ===== */

html {
    font-size: 62.5%;
}

body {
    box-sizing: border-box;
    font-size: 1.6rem;
    padding: 0;
    margin: 0;
    color: #46223c;
    background-color: #e7e7e7;
    font-family: "Marmelad", sans-serif;
}

img { 
    width: 100%;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none;
}

h2, h3 {
    font-family: "Farro", sans-serif;
    font-weight: 300;
    padding-top: 30px;
    margin-top: 0px;
    text-align: center;
}

.content {
    padding: 0 30px;
    max-width: 1170px;
    margin: auto;
}

a {
    color: #e7e7e7;
    text-decoration: none;
}

.scroll-to {
    position: relative;
    bottom: 50px;
}

/* ===== Navigation ===== */

header {
    background-color: #35281f;
    color: #e7e7e7;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 100;
    box-shadow: 0 0 5px black;
}

header .content {
    padding: inherit;
}

header img {
    position: absolute;
    width: 75px;
    top: -15px;
    left: -18px;
}

header .container {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .branding {
    position: relative;
    padding-left: 60px;
    font-size: 1.4rem;
    font-family: "Farro", sans-serif;
    display: flex;
    align-items: center;
}

header .fa {
    font-size: 3.2rem;
}

header span span {
    font-size: 1.8rem;
    display: block;
}

header nav {
    text-align: right;
    max-height: 0;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

header nav.show-items {
    max-height: 100vh;
}

header nav > ul {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

nav > ul {
    padding: 10px 15px;
}

nav ul li {
    padding: 10px 0;
    font-weight: 300;
}

nav > ul > li > a {
    display: block;
    font-size: 2.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 400;
}

.nav-link:has(a.button) {
    padding: 0;
}

.button {
    font-size: 1.6rem;
    border-radius: 10px;
    background-color: #191822;
    color:#e7e7e7;
    border: 2px solid rgba(255, 255, 255, 0.25);
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

.button:hover {
    background-color: #e7e7e7;
    border: 2px solid #191822;
    color:#191822;
}


/* ===== Hero ===== */

.hero {
    position: relative;
    margin-top: 52px;
    background-color: #191822;
    display: flex;
    height: 480px;
    box-shadow: 0 0 5px black;
    overflow: hidden;
}

.hero .video-container {
    position: absolute;
    object-fit: cover;
    height: 100%;
    opacity: 25%;
    left: -25%;
    top: 0;
}

video {
    /* I've included this because the click event on the hamburger icon wasn't registering when the icon was over the video. 
    I assumed the video was taking the click somehow so I've just disabled pointer events to prevent that. */
    pointer-events: none;
    height: 100%;
}

.hero h1 {
    font-size: 3.0rem;
    position: relative;
    letter-spacing: 5px;
    z-index: 1;
    text-align: center;
    text-shadow: 0 0 10px #191822;
    color: #FFFFFF;
    margin: auto;
    padding: 0 25px;
    font-weight: 300;
}

.hero h1 span {
    display: block;
}

/* ====== Intro ====== */
.intro {
    background: linear-gradient(#e7e7e7ea, #e7e7e7ff), url("../images/music-notation.jpg") no-repeat;
    background-position: 50%;
    background-size: cover;
    text-align: justify;
    padding-bottom: 50px;
}

/* this section gets a bit squashed at higher screen-widths, and since it's just text I wanted to limit the amount of travelling the users' eyes would have to do across the screen */
.intro .content {
    max-width: 720px;
}

.intro h2 {
    text-align: center;
    font-size: 3.2rem;    
    padding-top: 50px;
}

.intro span {
    display: block;
}

.intro .sign-off {
    text-align: right;
    margin-top: 45px;
}

/* ===== Adjudicators ===== */
.adjudicators {
    background-color: #35281f;
    color: #e7e7e7;
    padding-bottom: 20px;
}

.adjudicators h2 {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 25px;
}

.adjudicators li {
    position: relative;
    max-height: 425px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px #191822, 0 0 2px black;
}

.adjudicators a {
    display: block;
}

.adjudicators a > span {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 2.4rem;
    text-shadow: 0 0 5px #000;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.adjudicators span {
    display: block;
}

.adjudicators span span {
    font-size: 1.6rem;
    text-decoration: none;
}

/* The picture of the final adjudicator has a lot more space at the top of the photo than the others do, so the photo had a lot of empty space above the adjudicator. I've implemented this to offset the photo so that it matches the others a bit better */
.adjudicators li:last-child img {
    position: relative;
    top: -50px;
}

/* ===== Schedule ===== */
.schedule {
    overflow: hidden;
    padding-top: 10px;
}

.schedule h2 {
    margin-bottom: 35px;
}

.schedule > section {
    margin-top: 30px;
}

/* I noticed I was having an issue trying to reintroduce these columns in the desktop version and the styling wasn't applying properly. I've elected to invert the media query so that the default styling will be applied to the desktop version */
@media only screen and (max-width: 1023px) {
    /* removing a few columns from the tables so they fit better on the screen */
    .schedule tr *:nth-child(1), .schedule tr *:nth-child(3), .schedule tr *:nth-child(6)  {
        display: none;
    }
}

.schedule iframe {
    width: 100%;
    min-height: 400px;
    border: none;
    box-shadow: 0 0 2.5px black;
    margin-bottom: 30px;
}

/* ===== Table ===== */
table {
    border-collapse: collapse;
    width: calc(100vw - 10px);
    margin: auto;
    margin-bottom: 50px;
}

caption {
    max-width: 80%;
    margin: auto;
    margin-bottom: 10px;
}

th, td {
    border: 1px solid #35281f;
    padding: 5px;
}

th {
    background-color: #35281f;
    color: #e7e7e7;
}

td {
    text-align: center;
}

tr:nth-child(even) {
    background-color: #d5d5d5;
}

/* ===== Newsletter ===== */
.newsletter {
    background-color: #35281f;
    color: #e7e7e7;
    padding: 5px 0 50px;
}

.newsletter p {
    padding-bottom: 15px;
}


/* ===== Form ===== */
form fieldset {
    border: none;
    padding: 5px 0;
    margin-bottom: 10px;
}

form label {
    font-size: 1.2rem;
}

form legend {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

form fieldset * {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

form input, .ticket-options input {
    background-color: #ffffff;
    border-radius: 10px;
    font-size: 1.8rem;
    padding: 5px;
    min-height: 28px;
    margin: 5px 0;
    border: 1px solid #35281f;
}

form div {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

label:has(+select) {
    font-size: 1.6rem;
}

select {
    flex: 1;
    background-color: #e7e7e7;
    color: #191822;
    border-radius: 10px;
    padding: 5px;
    min-height: 28px;
    margin: 5px 0;
}

form .privacy-policy label {
    flex: 1;
    text-align: right;
}

form .button-container {
    justify-content: center;
    margin-top: 15px;
}

form button {
    border-radius: 10px;
    background-color: #191822;
    color: #e7e7e7;
    border: 2px solid rgba(255, 255, 255, 0.25);
    padding: 15px;
    width: 100%;
}

.required::after {
    content: ' *';
}

/* ===== Acknowledgements ===== */
.acknowledgements {
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 800px;
}

.acknowledgements ul {
    list-style-type: disc;
    padding: 0 25px;
}

.acknowledgements p:last-child {
    margin-top: 25px;
    text-align: center;
    font-weight: 600;
    font-size: 1.8rem;
}

/* ===== Footer ===== */

footer {
    padding-top: 20px;
    background-color: #35281f;
    color: #e7e7e7;
    box-shadow: 0 -2px 5px #19182255;
}

footer .content {
    margin: auto;
}

footer img {
    width: 60%;
    display: block;
    margin: 0 auto 50px;
}

footer nav > ul {
    justify-content: space-between;
    display: flex;
    gap: 30px;
}

footer nav > ul > * {
    flex: 1;
}

footer nav > ul ul li:first-child {
    font-size: 2.0rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

footer nav > ul li:last-child > ul {
    text-align: right;
}

footer nav ul ul li {
    padding: 10px 0;
}

footer span {
    margin-top: 30px;
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding: 15px 30px;
    text-align: right;
}

/* ===== Adjudicators Page ===== */

.adjudicators-page .hero {
    background: linear-gradient(#e7e7e7ea, #e7e7e7ff), url("../images/music-notation.jpg") no-repeat;
    background-position: 50%;
    background-size: cover;
    text-align: justify;
}

.adjudicators-page h1 {
    color: #46223c;
    text-shadow: none;
}

.adjudicators-page h2 {
    padding: 20px 0;
    margin: 0 auto;
    width: 75%;
}

.adjudicators-page h2 span {
    display: block;
    font-size: 1.8rem;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.adjudicators-page .content {
    padding-bottom: 25px;
    text-align: justify;
}

/* initially I had intended to just give these brown background, but I didn't like the brown background against the footer so I added the image and the gradient instead to break things up a bit */
.adjudicators-page section:nth-child(even){
    background: linear-gradient(#35281fff, #35281fea), url("../images/music-notation.jpg") no-repeat;
    background-position: 50%;
    background-size: cover;
    color: #e7e7e7;
}

.adjudicators-page section:nth-child(odd) h2 span {
    border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.adjudicators-page section img {
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px #191822, 0 0 2px black;
}

/* ===== Tickets Page ===== */
.tickets-page h1 {
    padding: 16px;
    padding-top: 64px;
    color: #46223c;
    text-shadow: none;
    text-align: center;
}

.tickets-page a {
    color: #46223c;
    text-decoration: underline;
}

.tickets-page .content {
    max-width: 720px;
}

.tickets-page .ticket-form {
    background: linear-gradient(#e7e7e7ea, #e7e7e7ff), url("../images/music-notation.jpg") no-repeat;
    background-position: 50%;
    background-size: cover;
    color: #46223c;
    margin: 64px auto;
}

.ticket-form .field {
    display: block;
}

.ticket-form fieldset {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.tickets-page table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
}

.tickets-page td select {
    width: 100%;
}

.ticket-options input {
    padding: initial;
    padding-right: 8px;
    padding-left: 8px;
    font-size: initial;
    width: 80%;
}

.ticket-options table thead tr th:first-child {
    width: 84px;
}

.ticket-options p:last-child {
    text-align: right;    
    font-size: 2.0rem;
}

.ticket-options p:last-child span {
    font-weight: 600;
    margin-left: 84px;
}

.ticket-options table .button {
    text-decoration: none;
    color: #e7e7e7;
    display: block;
    width: stretch;
}

.ticket-options table .button:hover {
    text-decoration: none;
    color: #191822;
}

.ticket-options table tbody:first-of-type tr {
    border-bottom: 2px solid black;
}

/* ===== Volunteers ===== */
.volunteer-page {
    min-height: calc(100vh - 375px);
    background: linear-gradient(#e7e7e7ea, #e7e7e7ff), url("../images/music-notation.jpg") no-repeat;
    background-position: 50%;
    background-size: cover;
    color: #46223c;
    margin: 64px auto 0;
    padding-bottom: 64px;
}

.volunteer-page h1 {
    padding: 16px;
    padding-top: 64px;
    color: #46223c;
    text-shadow: none;
    text-align: center;
}

.volunteer-page .header-container * {
    max-width: 720px;
    margin: auto;
}

/* I had a lot of trouble figuring out how to get this grid to format properly. I used this reddit post to help

https://www.reddit.com/r/css/comments/15qu1ml/restrict_childs_height_to_parents_height_which_is/ */

.volunteer-page .frame {
    background-color: #e7e7e7;
    margin-top: 48px;
    border: 1px solid #191822;
    border-radius: 4px;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr 3fr;
}

.volunteer-page .overview-container {
    height: 0; 
    min-height: 100%; 
    overflow-y: scroll;
}

.overview-scroller {
    height: 100%;
}

.volunteer-page #details-container {
    height: fit-content;
}

.sidebar > p:first-child {
    padding: 0 16px;
}

.volunteer-page .details {
    border-left: 1px solid #191822;
}

#opportunity-counter {
    font-weight: bold;
    color: rgb(118, 238, 118);
    padding-right: 4px;
}

.overview-header, .details-header {
    background-color: #35281f;
    color: #e7e7e7;
    padding: 16px;
    margin: 0;
}

.volunteer-page .overview-item {
    padding: 16px;
    border-bottom: 1px solid #d5d5d5;
}

.volunteer-page .title {
    margin: 4px 0;
    font-size: 2.0rem;
}

.volunteer-page .location {
    margin: 4px;
    color: #35281f;
    font-size: 1.4rem;
}

.volunteer-page .overview-item button {
    font-size: 1.4rem;
    margin-top: 8px;
    width: 100%;
}

.volunteer-page #details-container h2 {
    margin: 0;
    padding: 0;
    font-size: 2.4rem;
    text-align: left;
    font-family: "Marmelad";
}

#details-container {
    padding: 16px;
}

.volunteer-page #details-container p {
    margin: 0;
}

.volunteer-page #details-container .label {
    font-size: 1.4rem;
    margin-top: 16px;
    margin-bottom: 4px;
}

.volunteer-page #details-container p:not(.label) {
    padding-left: 4px;
}

.volunteer-page #details-container p:last-of-type {
    border-bottom: 1px solid #46223c;
    padding-bottom: 16px;
}

.volunteer-page #details-container .button {
    margin-top: 16px;
}

.volunteer-page #details-container label {
    font-size: 1.4rem;
}

.volunteer-page form {
    margin-top: 16px;
}

.volunteer-page form fieldset {
    margin: 0;
}

.volunteer-page input {
    font-size: 1.6rem;
}

.volunteer-page input[type="file"] {
    border: 0;
    background-color: initial;
}

.highlight {
    background-color: white;
}

.volunteer-page form small {
    color: red;
}



/* I've added in this breakpoint to easy the transition between the mobile version and the desktop version */
/* ===== Desktop Styling ===== */
@media only screen and (min-width: 680px) { 
    .hero .video-container {
        height: fit-content;
        width: 100%;
        left: 0;
    }

    video {
        height: 100%;
    }
}

@media only screen and (min-width: 1024px) {
    /* ===== General ===== */
    h2 {
        font-size: 1.8em;
    }

    /* ===== Header & Nav ===== */
    #hamburger-icon, #x-icon {
        display: none;
    }

    header {
        height: 6rem;
    }

    header .content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    
    header .branding {
        align-items: center;
    }

    header img {
        position: absolute;
        width: 60px;
        top: -8px;
    }

    header nav {
        max-height: inherit;
        align-items: center;
        display: flex;
        gap: 16px;
    }

    header nav a:hover {
        text-decoration: underline;
    }

    header nav ul {
        display: flex;
        gap: 32px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    header nav > ul > li > a {
        border: none;
        display: block;
    }

    header nav > ul > li:first-child {
        margin-bottom: 0;
    }

    header nav .submenu {
        max-height: 0;
        box-sizing: border-box;
        overflow: hidden;
        /* targetting just the height because I was getting some issues with the width of the nav animating when the site loads  */
        transition: max-height 0.2s ease-in-out;
        background-color: #35281f;
        flex-direction: column;
        display: flex;
        position: relative;
        top: 12px;
        left: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
        flex-basis: 100px;
    }
    
    header nav .submenu * {
        padding: 8px;
        margin: 0;
    }

    header nav .submenu *:last-child {
        padding-bottom: 15px;
    }

    .nav-link:hover .submenu {
        max-height: 100vh;
    }

    .nav-link:hover {
        cursor: pointer;
    }

    .nav-link:hover > a  {
        text-decoration: underline;
    }

    .nav-link:hover > a.button  {
        text-decoration: none;
    }

    nav > ul > li > a {
        font-size: 2.0rem;
    }    
    
    /* ===== Hero ===== */
    .hero {
        margin-top: 60px;
        height: calc(75vh - 60px);
    }

    .hero h1 {
        font-size: 4.8rem;
    }

    .hero h1 span {
        display: inline-block;   
    }

    .hero h1 span::before {
        /* https://stackoverflow.com/questions/5467605/add-a-space-after-an-element-using-after */
        content: "\00a0";
    }

    /* ===== Adjudicators ===== */
    .adjudicators ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 25px;
    }

    .adjudicators li {
        transition: transform 0.15s ease-in-out;
        flex: 1;
    }

    .adjudicators li:hover {    
        transform: scale(1.025);
        box-shadow: 0 2px 10px #191822, 0 0 5px black;
    }

    /* ===== Schedule ===== */
    .schedule table {
        max-width: 1170px;
    }

    .schedule tr *:nth-child(1), .schedule tr *:nth-child(2) {
        width: 10%;
    }

    .schedule tr *:nth-child(3) {
        width: 5%;
    }

    .schedule tr *:nth-child(5), .schedule tr *:nth-child(6) {
        width: 20%;
    }

    .schedule .container {
        background-color: #35281f;
        color: #e7e7e7;
    }

    .schedule .container .content {
        padding: 0;
    }

    .schedule .container > div {
        display: flex;
        flex-direction: row-reverse;
        max-width: 1170px;
        margin: 0 auto;
        gap: 100px
    }

    .schedule .container > div section {
        flex: 1;
    }

    .schedule .join-us {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin: 0 auto 20px;
    }

    .schedule .join-us iframe {
        height: 100%;
    }

    button {
        cursor: pointer;
        transition: all 0.1s ease-in-out;
    }

    button:hover {
        background-color: #e7e7e7;
        color:#191822;
        border: 2px solid #191822;
    }

    /* ===== Acknowledgements ===== */
    .acknowledgements {
        text-align: center;
    }

    .acknowledgements p {
        padding-bottom: 30px;
    }

    .acknowledgements li {
        list-style-type: none;
        padding: 5px;
    }

    .acknowledgements p:last-child {
        padding-top: 30px;
    }

    /* ===== Footer ===== */
    footer .content {
        display: flex;
        justify-content: flex-end;
        position: relative;
    }

    footer .content img {
        width: 250px;
        position: absolute;
        /* top: -50px; */
        left: -50px;
        margin: 0;
    }

    footer nav > ul {
        gap: 150px;
    }

    footer span {
        max-width: 1170px;
        margin: 0 auto;
    }

    footer nav > ul li:last-child > ul {
        text-align: left;
    }

    footer a:hover {
        text-decoration: underline;
    }

    /* ===== Adjudicators Page ===== */

    .adjudicators-page > section .content {
        display: grid;
        grid-template-areas: 
        "a a a"
        "b b c";
        column-gap: 50px
    }

    .adjudicators-page h2 {
        grid-area: a;
    }

    .adjudicators-page img {
        grid-area: c;
        object-fit: cover;
        height: 450px;
        width: 350px;
    }
    
    .adjudicators-page .text-container {
        grid-area: b;
    }

    .adjudicators-page section:nth-child(even) .content{
        grid-template-areas: 
        "a a a"
        "c b b";
    }
}