input {display: none;} /*hides default input buttons*/

.slider {
  background-color: rgba(255, 255, 255, .3);
  margin: 1rem;
  gap: 1rem;
  display: grid;
  grid-template-areas: 
      "left img-box text-box right"
      "slidenav slidenav slidenav slidenav";
  grid-template-columns: 5% 1fr 1fr 5%;
  grid-template-rows: 30rem 3rem;
}

.img-box, .text-box {overflow: hidden; position: relative;}

#text1 {background-color: #937bcf;}
#text2 {background-color: #00b69a;}
#text3 {background-color: #ff8335;}
#text4 {background-color: #00b6e3;}
#text5 {background-color: #e98cb6;}
#text6 {background-color: #ffeea4;}

.img-box {
  grid-area: img-box;
  display: flex;
  justify-content: center;
  align-content: center;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-image: url(/daycare/images/arch.png);
}

.img-box img {height: 100%;}
.text-box {
position: relative;
grid-area: text-box;}

.text-box div {
height: 100%;
padding: 1rem 0;
top: .5rem;
border-radius: 0 7.5rem 0 0;}

.text-box p {
  font-size: clamp(10px, 14px, 18px); 
  padding: 2.5rem 1.5rem 1rem 1.5rem;
  position: relative;
}

.text-box p:last-child {
  font-size: clamp(12px, 1rem, 22px);
  padding: 0 1.5rem;
}

.text-box p::before,
.text-box p::after {
  position: absolute;
  color: rgba(255, 255, 255, 0.4); 
  font-size: 8rem; 
}

.text-box p:first-child::before {
  content: '“'; 
  top: -2rem;
  left: .5rem;
}

.text-box p:last-child::after {
  content: '”';
  bottom: -6rem;
  right: .5rem;}


@media (max-width: 880px) {
    .slider {
        grid-template-areas: 
        "img-box text-box"
        "slidenav slidenav";
        grid-template-columns: 1fr 1fr}
    }

/* stacks images and text for mobile */
@media (max-width: 530px) {
    header h1 {font-size: 3rem;}
    .slider {
    display: flex;
    flex-direction: column;
    }
    .text-box {height: 500px;}
    .img-box {
      mask-image: none;
      height: 200px;}

    .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;}
}

/* new navigation icons */
.img-box img, .text-box div{
  opacity: 0;
  visibility: hidden;
  transition-duration: .8s;
  position: absolute;
  display: block;
}

.slidenav {
    grid-area: slidenav;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    width: 50%; margin: auto;
}
.radio {
    width: 15px;
    height: 15px;
    overflow: hidden;
    margin: 8px 0;
    color: #ff8335;
    font-weight: 900;
    cursor: pointer;
    border: 2px solid #ff8335;
    border-radius: 50%;
    transition: background-color .4s;
  }
.radio:hover {background-color:hsl(23, 100%, 85%);}

input:checked ~ .radio {
    color: #FFF;
    background-color: #ff8335;
    opacity: 1;
}


/* attempting to change the background with slide transitions

#slide-1:checked ~ .slider {
background: rgb(147,123,207);
background: linear-gradient(275deg, rgba(147,123,207,1) 41%, rgba(147,123,207,0) 100%);
transition: 0.3s ease;}

*/

/* slide animation controls */
  #slide-1:checked ~ .img-box #img1,
  #slide-2:checked ~ .img-box #img2,
  #slide-3:checked ~ .img-box #img3, 
  #slide-4:checked ~ .img-box #img4, 
  #slide-5:checked ~ .img-box #img5, 
  #slide-6:checked ~ .img-box #img6 {
    opacity: 1;
    visibility: visible;
  }

  #slide-1:checked ~ .text-box #text1,
  #slide-2:checked ~ .text-box #text2,
  #slide-3:checked ~ .text-box #text3, 
  #slide-4:checked ~ .text-box #text4, 
  #slide-5:checked ~ .text-box #text5, 
  #slide-6:checked ~ .text-box #text6 {
    opacity: 1;
    visibility: visible;
  }
  
  #slide-1:checked ~ .slidenav label #radio1.radio,
  #slide-2:checked ~ .slidenav label #radio2.radio,
  #slide-3:checked ~ .slidenav label #radio3.radio,
  #slide-4:checked ~ .slidenav label #radio4.radio,
  #slide-5:checked ~ .slidenav label #radio5.radio,
  #slide-6:checked ~ .slidenav label #radio6.radio {
    color: #FFF;
    background-color: #ff8335;
  }

footer {background-color: #ff8335; height: 50px; padding-top: 10px;}