/* Baserules */

.banner{
  background: url('../bilder/banners/close-up-golf-clubs-set.jpg') no-repeat center /cover;
}

.welcome{
    text-align: center;
    background-color: var(--Boxwhite);
    padding: 2rem;
    margin: 2rem;
}

.tournaments{
    display: flex;
    justify-content: center;
}

.junior, .senior, .veteran{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    background-color: var(--Boxwhite);
    margin: 2rem;
    padding:2rem ;
    width: 100%;
}

.tournaments img{
    max-width: 100%;
    width: 400px;
    border-radius: 8px;
}

.result{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid black;
}

h2, h3{
    padding-bottom: 10px;
}

.junior-result, .senior-result, .veteran-result{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    border-radius: 1em;
    background-color: var(--Boxwhite);
    margin: 2rem;
    padding: 2rem ;
    width: 100%;
}

table{
  border-collapse: collapse;
}

/* Table rules */

.result td, .result th, .tournaments td, .tournaments th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 10px;
}

.result tr:nth-child(odd), .tournaments tr:nth-child(odd) {
  background-color: #58833c;
}

.result tr:nth-child(even), .tournaments tr:nth-child(even) {
  background-color: #8dad72;
}

.important-information{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid black;
}

/* Calendar and table rulse */

.calendar{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid black;
    border-radius: 1em;
    background-color: var(--Boxwhite);
    padding: 2rem ;
    margin: 2rem;
    width: 100%;
}
.list{
    text-align: center;
    border: 1px solid black;
    border-radius: 1em;
    background-color: var(--Boxwhite);
    padding: 2rem ;
    margin: 2rem;
    width: 100%;
 }
 

.calendar td, .calendar th {
  border: 1px solid #000000;
  text-align: center;
  padding: 10px;
}

.calendar tr:nth-child(odd) {
  background-color: #ffffff;
}

.calendar tr:nth-child(even) {
  background-color: #cccccc;
}

/* List */

.title {
 padding: 20px 30px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.icon{
  width: 20px;
  position: relative;

}

.icon::before, .icon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 3px;
  background-color: #fff;
  top: -1.5px;
}

.icon::after {
  transform: rotate(90deg);
  transition: 0.5s linear;
}

.text{
  display: none;
  height: 0;
  
}
.item {
  margin-top: 5px;
}

.item:target .text {
  display: inline-block;
  height: auto;
  padding: 10px 10px;
}


.item:target .icon::after {
  transform: rotateY(90deg);
}

.list h2{
  text-align: center;
  padding: 2rem 0 3rem 0;
}

.item > a{
  color: black;
  font-weight: bold;
  background-color: var(--Bgreen);
  text-decoration: none;
}

/* Form */

.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid black;
    border-radius: 1em;
    background-color: var(--Boxwhite);
    padding: 2rem ;
    margin: 2rem auto;
    width: 50%;
  }

.form input{
    height: 3rem;
    margin-bottom: 10px;
    box-shadow: inset 10px 15px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;   
    padding: 0 0 0 20px;
    font-size:large;
}

.form label{
    font-size: large;
    font-weight: bold;
    padding: 5px;
}

.form select{
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
  }

select option:hover {
  box-shadow: 0 0 10px 100px var(--Bgreen) inset !important;
  color:white;
}
select option:checked{
  box-shadow: 0 0 10px 100px var(--Bgreen) inset !important;
  }

/* Hidden score */

.hidden-btn, .score-btn, #score-toggle1, #score-toggle2, #score-toggle3 {
  display: none;
}

.drop-result{
  display: none;
}

.small-calendar {
  display: none;
}

/* Screen Size */

/* Large screens 1200px and below */

@media only screen and (max-width: 1200px) {

  .junior, .veteran, .senior, .important-information, .calendar, .list, .big-result, .form {
    margin: 0;
    border-radius: 0;
  }
  .tournaments, .result {
    align-items: stretch;
  }
  .form-container, .form {
    margin: 0;
    width: 100%;
  }
  .welcome {
    margin: 0;
  }
}

/* Medium screens 992px and below */

@media only screen and (max-width: 992px) {
  .score-btn{
    display: block;
  }

  .btn {
    display: inline-block;
  }

  #score-toggle1:checked + .score-btn + .drop-result, #score-toggle2:checked + .score-btn + .drop-result, #score-toggle3:checked + .score-btn + .drop-result {
    display: flex;
  }
  
  input[name='score-toggle1'] ~ .drop-result, input[name='score-toggle2'] ~ .drop-result, input[name='score-toggle3'] ~ .drop-result {
    height: 0;
    overflow:hidden;
    transition: all 1s ease;
    border: none;
  }

  input[name='score-toggle1']:checked ~ .drop-result, input[name='score-toggle2']:checked ~ .drop-result, input[name='score-toggle3']:checked ~ .drop-result {
    height: 40em;
    overflow: hidden;
    border: 1px solid black;
    /* padding: 2rem; */
  }

  .tournaments, .important-information{
    flex-direction: column;
  }

  .junior-result, .senior-result, .veteran-result{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid black;
    border-radius: 1em;
    background-color: white;
    margin: 2rem;
    padding: 0 ;
    width: 100%;
    height: 100%;
  }

  .big-result{
    display: none;
  }
}

/* Small screens 600px and below */

@media only screen and (max-width: 600px) {
  .calendar td, .calendar th {
    padding: 3px 0;
  }
  .welcome, .junior, .senior, .veteran {
    padding: 2rem 0.5rem;
    margin: 0;
    border-radius: 0;
  }
}

/* Extra small screens 480px and below */

@media only screen and (max-width: 480px) {
  .calendar {
    display: none;
  }

  .small-calendar {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    gap: 2em;
  }
  input[name='score-toggle1']:checked ~ .drop-result, input[name='score-toggle2']:checked ~ .drop-result, input[name='score-toggle3']:checked ~ .drop-result {
    height: 50em;
    overflow: hidden;
  } 
  .form{
    padding: 15px;  
  }

  .form-container, .tournaments, .result, .small-calendar{
    padding: 0;
    margin: 0;

  }
}