/* CSS DOCUMENT 
*/

body {
  --color: white;
  color: var(--color);
  background-image: unset;
  background-color: #000000;
}

h2 {
  font-size: clamp(32px, 3.25vw, 48px);
}



a {
  text-decoration: none;
}
a:is(:hover, :focus-visible) {
  /* color: var(--army-c-tan); */
  text-shadow: 1px 2px 3px rgb(0,0,0,.3);
}

/* < Containers */
#wrap-jcte {
  position: relative;
  background-color: #2f2f2f;
  width: -webkit-fill-available;
  max-width: 1400px;
  height: inherit;
  margin-inline: auto;
  padding-block: 20px;
  padding-inline: clamp(10px, 2.5%, 80px);
  box-sizing: border-box;
  
  > *, * {box-sizing: border-box;}

  h2.mainJCTE {
    font-weight: 700;
    text-align: center;
  }

  h3.h3Heading.mainJCTE {
    font-weight: 500;
    text-align: center;
  }
}

.mainContainer {
  padding-block-start: 40px;
  padding-block-start: 60px;
  margin-inline: auto;
  max-width: 1200px;
  min-height: 100%;

    h3.h3Heading {
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    align-content: center;
    height: 40px;
    margin: 0;
  }
}

.mainCon.jcte50 {
  width: min(580px, 100%);
  margin-block-end: 60px;

  h2.mainJCTE {border-bottom: 1.5px solid #FFCC01;}
}


/* /// HEADER /// */
header {
  position: relative;
  padding-block-start: 1px;

  img.qmCrest {
    position: absolute;
    top: 17.5px;
    z-index: 1;
    height: 80px;
    margin-block-start: 15px;

    @media(max-width: 768px) {
      height: 57px;
      margin-block-start: unset;
    }
  }

  img.cascomFB {
    position: absolute;
    top: 17.5px;
    right: 10px;
    z-index: 1;
    height: 50px;
    margin-block-start: 15px;
    opacity: .4;
    transition: opacity ease-in-out 350ms;

    @media(max-width: 768px) {
      height: 40px;
      top: 10px;
    }
  }
  img.cascomFB:hover {opacity: 1;}

  h1.h1Heading {
    color: white;
    text-align: center;
    padding-block-start: 10px;
  }
}
/* MARK: JCTE MENU
*/
.jcteMenu {
  display: flex;
  column-gap: 20px;
  justify-content: end;
  align-items: center;
  height: 60px;
  margin-block-start: 0 20px;
  margin-inline-end: 10px;

  a {font-size: 16px;}
}

.heroCon {
  max-width: 1400px;
  max-height: 450px;
  min-height: 250px;
  overflow: hidden;
  margin-block-start: 30px;
}
.hero {
  place-items: center;
  width: 100%;
  height: auto;
  max-width: 1400px;
  max-height: 450px;
  min-height: 250px;
  object-fit: cover;
}

.mainCon ul li {
  font-size: 16px;
  padding-block-start: 10px;
}

/*< Live Demo Schd */
.mainCon.jcte50.liveDemo h3.h3Heading {
  background-color: #000000;
  /* height: 16px; */
  padding-block: 3px;
  margin-block: 20px 5px;
}
.mainCon.jcte50 .grid-table {
  display: grid;
  grid-template: "cell1 cell2 cell3"
  "chef chef chef"
  / 1fr 100px 100px;

  > div:not(:last-of-type) {
    border: 1px solid #444444;
    padding-block: 5px;
  }

  div:last-of-type {
    text-align-last: left;
    padding-inline-start: 5px;
    padding-block: 5px;
  }
}
.mainCon.jcte50 .grid-table:nth-child(even) {
  background-color:#7e7e7e;
  color: black;
}
.mainCon.jcte50 .demoGrid .grid-table:first-child {grid-area: cell1;}
.mainCon.jcte50 .demoGrid .grid-table:nth-child(2) {grid-area: cell2;}
.mainCon.jcte50 .demoGrid .grid-table:nth-child(3) {grid-area: cell3;}
.mainCon.jcte50 .demoGrid .grid-table:last-of-type {grid-area: chef; padding-block: 5px;}

.mainCon.jcte50 .demoGrid.grid-table > div:not(:first-of-type) {
  text-align: center;
}
.mainCon.jcte50 .demoGrid.grid-table > div:first-of-type {
  padding-inline-start: 5px;
}

/* /// MAIN CONTENT /// */
/* MARK: TAB MENU
*/
/*< Tab Menu */
.tabMenu {
  display: flex;
  column-gap: 2px;
  background-color: #dddddd;
  border-radius: 10px 10px 0 0;
  width: fit-content;
  height: auto;
  margin-inline: 40px auto;

  a {
    font-size: 16px;
    background-color: white;
    color: black;
    padding-block: 12px;
    padding-inline: 8px
  }
  a:is(:hover, :focus-visible) {
    background-color: black;
    color: white;
    cursor: pointer;
  }

  @media(max-width: 425px) {margin-inline: auto;}
}
.tabMenu a:first-of-type {border-radius: 10px 0 0 0;}
.tabMenu a:last-of-type {border-radius: 0 10px 0 0;}

/*< Schedule Container */
#jcteCon {
  background-color: #dddddd;
  border: 1.5px solid #adadad;
  border-radius: 10px;
  min-height: 600px;
  padding-inline: 10px;
  overflow-x: hidden;
}
/* MARK: TOPICS
*/
/*< TOPICS */
.topics {
  display: grid;
  grid-template: "coy sps1 sks1 int1 int2"
  /1fr 1fr 1fr 1fr 1fr;  
  justify-content: center;
  justify-items: center;
  align-items: stretch;
  column-gap: 5px;
  row-gap: 10px;
  margin-block: 20px 40px;
  width: 100%;

  .coy {grid-area: coy;}
  .sps1 {grid-area: sps1;}
  .sks1 {grid-area: sks1;}
  .int1 {grid-area: int1;}
  .int2 {grid-area: int2;}

  @media(max-width: 1024px) {
    grid-template: "coy sps1 sks1"
    "int1 int2 ."
    / 1fr 1fr 1fr;}

  @media(max-width: 680px) {
    grid-template: "coy sps1"
    "sks1 int1"
    "int2 ."
    / 1fr 1fr;
  }

  @media(max-width: 400px) {
    grid-template: "coy"
    "sps1"
    "sks1"
    "int1"
    "int2"
    / 1fr;
  }
}
.topics > div {
  color: black;
  background-color: white;
  border: 1px solid black;
  width: 100%;
  max-width: 250px;
  ul {padding-inline-start: 5px;}

  li {font-size: 12px;}
}
.coy h3.h3Heading {color: black; background-color: #ffff00;}
.sps1 h3.h3Heading {color: black; background-color: #fac090;}
.sks1 h3.h3Heading {color: black; background-color: #ccffcc;}
.int1 h3.h3Heading {color: black; background-color: #ccecff;}
.int2 h3.h3Heading {color: white; background-color: #003399;}
.mkt h3.h3Heading {color: black; background-color: #FFC000;}
.nutrition h3.h3Heading {color: black; background-color: #00CCFF;}
.pastryChef h3.h3Heading {color: white; background-color: #990000;}
.studentPastry h3.h3Heading {color: black; background-color: #FF9900;}
.studentChef h3.h3Heading {color: black; background-color: #70DA46;}
.studentTeam h3.h3Heading {color: white; background-color: #800080;}
.coldFoodH3 h3.h3Heading {color: black; background-color: #E6BEFE;}
.enlistedAide h3.h3Heading {color: white; background-color: #FF0000;}
.social h3.h3Heading {color: white; background-color: #000000;}

h2.topicsHeader {
  position: relative;
  font-size: 20px;
  background-color: #444444;
  text-align: center;
  width: calc(100% + 20px);
  left: -10px;
}
/* MARK: EVENTS
*/
/*< EVENTS */
section:is([class^="events"], .closing) {margin-block-start: 20px;}

.mainContainer [class^="events"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  column-gap: 5px;
  row-gap: 10px;
  width: 100%;

  .h3Heading {
    font-size: 14px;
    padding-block: 2px;
  }
}
[class^="events"] > div {
  background-color: white;
  color: black;
  border: 1px solid #232323;

  ul {
    padding-inline: 10px 5px;
    margin-block: 5px;
  }
}
.closing p {
  color: black;
  font-size: 16px;
}
/* MARK: COLD FOOD
*/



/* MARK: GRID TABLE
*/
/*  ///  COLD FOOD GRID TABLE  ///  */
#jcteCon .coldFood { 
  max-width: 1060px;
  margin-inline: auto;

  h3.h3Heading {
    background-color: #E6BEFE;
    color: #000000;
    border: 1px solid #2f2f2f;
    width: 100%;
    height: fit-content;
  }
}

.teams {width:135px; height: -webkit-fill-available;}
.setup {height: -webkit-fill-available;}
.judging {height: -webkit-fill-available;}
.critique {height: -webkit-fill-available;}
.display {height: -webkit-fill-available;}

.gridCon.jcteGrid {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #2f2f2f;
  border-left: 1px solid #2f2f2f;
  width: 100%;
  height: auto;
  max-width: 1060px;
  margin-inline: auto;
  box-sizing: border-box;

  @media(max-width: 800px) {flex-wrap: wrap;}
}

.gridCon.jcteGrid > ul {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0; 
  margin: 0;
  border-right: 1px solid #2f2f2f;
  min-width: 150px;

  li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: -webkit-fill-available;
  }  

  .time {
    background-color: #7e7e7e;
    color: white;
    border-bottom: 1px solid #2f2f2f;
    border-right: 1px solid #2f2f2f;
    max-height: 20px;
  }
}

.gridCon.jcteGrid .teams {
  background-color: #E6BEFE;
  color: black;
  max-width: 135px;

  li {
    border-bottom: 1px solid #2f2f2f;
    border-right: 1px solid #2f2f2f;
  }
  li:last-of-type {
    border-bottom: unset;
  }
  li.header {background-color: #D59EF4;}
    /* border-left: 1px solid #2f2f2f; */

}
.gridCon.jcteGrid ul:not(.teams) {
  border-bottom: unset;
  border-right: 1px solid #2f2f2f;
  border-left: unset;

  li:first-of-type {
    background-color: #7e7e7e;
    color: white;
  }
  
  li:nth-child(2) {
    color: black;
    min-height: 60px;
    height: 100%;
    place-content: center;
  }

}
.gridCon.jcteGrid ul.display {width: 100%;}
.gridCon.jcteGrid .display .time {
  border-right: unset;
}

/* MARK: TIME SCHD
*/
/*  ///  TIME SCHEDULE  ///  */
:is(.timeSchedule, .timeSchedule-m) {
  display: flex;
  width: 100%;
  height: auto;
  max-width: 1060px;
  /* border-left: 1px solid black; */
  margin-inline: auto;

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.timeSchedule {
  display: none;
  margin-block-end: 40px;
}
.timeSchedule-m {
  margin-block-end: 10px;
  margin-inline: auto;
}
.timeSchedule-m:last-of-type {margin-block-end: 40px;}

img.timeBlock {
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.mobileTimeCon {
  display: grid;
  place-content: center;
  width: 100%;
}

@media(min-width: 1024px) {
  .mobileTimeCon {display: none;}

  .timeSchedule {display: flex;}
}
/* MARK: MENU sec
*/

/*  ///  =====  MENU SECTION  =====  ///  */
section.menuGrid {margin-block-start: 15px;}
.menuGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);
  justify-content: center;
  column-gap: 5px;
  row-gap: 10px;
  width: 100%;

  > div {
    color: black;
    background-color: white;
    border: 1px solid black;
    width: 100%;
    max-width: 250px;
  }
}

.menuBtn {
  display: flex;
  column-gap: 5px;
  padding-block: 5px;
  padding-inline: 10px;

  img {justify-self: start;}

  h3.h3Heading {
    justify-self: center;
  }
}
.menuBtn:hover {
  background-color: #fff9e3;
  box-shadow: 2px 4px 4px rgb(0,0,0,.25);
}

.teamHeader {
  display: flex;
  justify-content: center;
  column-gap: 5px;
  border-bottom: 2px solid #232323;
  padding-block-end: 3px;

  img {height: 35px;}

  h3.h3Heading {
    color: black;
    font-size: 26px;
  }
}

.menuItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);
  column-gap: 10px;
  row-gap: 20px;
  place-content: center;
  margin-block-start: 20px;

  > div {
    background-color: white;
    border: 1.5px solid #232323;
    padding-block-end: 10px;
  }

  h4.h4Heading {
    background-color: #232323;
    color: #FFCC01;
    font-size: 16px;
    text-align: center;
    padding-block: 3px;
    margin: 0;
  }

  p {
    color: black;
    padding-inline-start: 5px;
  }
}
@media(max-width: 600px) {
  .mainCon .col2 {
    columns: initial;
    width: fit-content;
    margin-inline: auto;
  }
}


/* MARK: MEDALS
*/
/*  ///  =====  MEDALS  =====  ///  */

.medalsCon {
  place-items: center;
  margin-block-start: 0;

  h2.topicsHeader {left: 0;}

  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-block: 30px 60px;
  }

  img:hover {
    cursor: pointer;
  }

}

.updated {
  color: black;
  font-size: .85em;
  font-style: italic;
  text-align: center;
  margin-block-end: 20px;
}



.footerJCTE {
  position: relative;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7e7e7e;
  width: -webkit-fill-available;
  max-width: 1400px;
  margin-inline: auto;
  padding-block: 80px 30px;
  padding-inline: clamp(10px, 2.5%, 80px);

  a:hover {color: white;}

  @media(max-width: 540px) {
    flex-direction: column-reverse;
    row-gap: 20px;

    div:last-of-type {
      display: none;
    }
  }
}




/* MARK: MODAL
*/
/* /// MODAL /// */
.modal-content img {
    display: block;
    width: 100%;
    height: auto;
}