/**
 * Theme Name: eastoncowfolk2024
 * Template:   twentytwentyfour
 * ...other header fields
 */

 

/* Colour scheme */
:root {
  --grey-background: #D9D9D9;
  --vibrant-red: #B90E0A;
}

/* Hero */

.hero-text {
  background-color: var(--grey-background);
  --bs-body-bg: var(--grey-background);
}

/* Main content */

#trio-images-container {
  background-color: var(--vibrant-red);
}

#front-page-trio-left img, #front-page-trio-mid img, #front-page-trio-right img {
/*#front-page-trio-mid img {*/
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 0% 0%;
}

#red-float {
  background-color: var(--vibrant-red);
  opacity: 0.5;
}

/*For smaller screens, ie mobiles*/

@media screen and (max-width: 768px) {
  #front-page-trio-left, #front-page-trio-mid, #front-page-trio-right {
    height: 75vw;
  }
  /*
  #front-page-trio-mid {
    height: calc(100vw * 284.5/423);
  }
    */

  #red-float {
    /*height: calc(100vw * 2 * 284.5/423);*/
    height: 150vw;
  }
  
}

/*For smaller and middle-sized screens, ie mobiles and tablets*/

@media screen and (max-width: 992px) {
  #front-page-trio-right {
    display: none;
  }
}

/*For middle-sized screens, ie tablets*/

@media screen and (min-width: 768px) and (max-width: 992px){
  #front-page-trio-left, #front-page-trio-mid, #front-page-trio-right {
    height: 37.5vw;
  }
  /*
  #front-page-trio-mid {
    height: calc(50vw * 284.5/423);
  }*/

  #red-float {
    /*height: calc(50vw * 284.5/423);*/
    height: 37.5vw;
  }

}

/*For larger screens, ie laptops / desktops */

@media screen and (min-width: 992px) {
  #red-float {
    /*height: calc(33.2vw * 284.5/423);*/
    height: 25vw;
  }

  #front-page-trio-left, #front-page-trio-mid, #front-page-trio-right {
    /*height: calc(32.8vw * 284.5/423);*/
    height: 25vw;
  }

}

/* white on red intro text */

#white-on-red-intro-container {
  padding: 10% 5%;
}

#white-on-red-intro-text {
  color: white;
  max-width: 90%;
  margin: auto;
}

@media screen and (min-width: 992px) {
  #white-on-red-intro-text {
    max-width: 80%;
  }
}

/* Footer nav*/

footer {
  margin-top: 0;
}

.footer-nav-list {
  list-style: none;
  margin: 0 !important;  
  border-bottom: black solid 2px;
}

.footer-list-link {  
  padding: 1rem;
}

/*This puts borders around the footer nav menu on smaller screens, ie: mobiles*/

@media screen and (max-width: 768px) {
  .footer-list-item {
    border-left: black solid 2px;
    border-top: black solid 2px;
    border-right: black solid 2px;
  }
}

/*This puts borders around the footer nav menu on larger screens, eg: tablets and desktops*/

@media screen and (min-width: 768px) {
  .footer-nav-list {    
    border-left: black solid 2px;
    border-top: black solid 2px;
    border-right: black solid 2px;
    border-bottom: none;
  }

  .footer-list-item:nth-child(3n+1) {
    border-bottom: black solid 2px;
    border-right: black solid 2px;
  }
  
  .footer-list-item:nth-child(3n+2) {
    border-bottom: black solid 2px;  
  }
  
  .footer-list-item:nth-child(3n) {
    border-bottom: black solid 2px;
    border-left: black solid 2px;
  }
}

.footer-list-item:hover, .footer-list-link:hover {
  background-color: black;
  color: white;
}

.footer-list-link {
  text-decoration: none;
  color: black;
  width: 100%;
  height: 100%;
  display: flex;
}

.footer-list-link:hover {
  cursor: pointer;
  text-decoration: underline;
}

.footer-list-link:active {
  text-decoration: none;
  color: var(--vibrant-red);
  border: none !important;
  outline: none !important;  
}



.footer-list-link:focus {
  text-decoration: none;
  color: var(--vibrant-red);
  border: none !important;
  outline: none !important;
}

/*white on red for visited*/

.footer-list-item:visited, .footer-list-link:visited {
  text-decoration: underline;
  color: var(--vibrant-red);
}

.footer-list-link:hover:active, .footer-list-link:hover:visited {
  color: white !important;
}

/* Footer support badges (black lives matter, refugees welcome, cowfolk logo*/

.support-badge-container {
  padding: 10% 0%;
}

/*Check this works, it's to get the navbar to work*/

.row {
    gap: 0;
  }
  
  .footer-li a {
    margin: auto;
  }
  
  .logo-div {
    margin: 5%;
  }

  .figure-width {
    max-width: 33%;
  }

  /*LGBTQKIA+ inclusivity flags*/
  
  #rainbow-stitch {
      background: url("images/rainbow-flag.png"), url("images/trans-flag.png") repeat-x;
      background-size: contain;
      height: 20px;
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
  
    .rainbow-stitch {
      background: url("images/rainbow-flag.png"), url("images/trans-flag.png") repeat-x;
      background-size: contain;
      height: 20px;
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
    
    #trans-stitch {
      background: url("images/trans-flag.png") repeat-x;
      background-size: contain;
      height: 20px;
      margin-bottom: 0px;
      padding-bottom: 0px;      
    }
    
    /*Footer skeleton is at the very bottom of the footer*/
    
    #footer-skeleton {      
      height: 40vw;/*Increase to 40vw, synch with styling in skeletons2.php*/
      background-position: 100% 0%;
      background-color: black;
    }

    /* MEDIA QUERY FOR TABLETS / DESKTOPS*/
    
    @media screen and (min-width: 768px) {
      .support-badge-container {
        padding: 5% 5%;
        margin: 5% 0%;
      }

      .logo-div {
        margin: 0%;
      }

      #sbc-left-child {
        padding-left: 14%;
      }

      #sbc-middle-child {
        padding: 0% 7%;        
      }

      #sbc-right-child {
        padding-right: 14%;        
      }

      .figure-width {
        max-width: 100%;
      }    
    
      #footer-skeleton {      
      height: 21.5vw;
      background-position: 50% 0%;
    }
  }