/* Hello and welcome to all the St Monican authored CSS that customises our site.
It is GREATLY RECOMMENDED that only people who know what they are doing edit this
portion of the website. The original author is Joanna Thorpe-Jones. If you need
help with it, you are 100% welcome to contact me. Just ask around the Barony for me.
Otherwise, I have tried to provide comments throughout the code of the site 
describing what certain things do. If you add things, please leave descriptive 
comments for future generations as well! Thank you for reading, and good luck! */

html, body {
  height: 100%;
}

a {
   text-decoration: none;
}

/* use this for subtitles under headings. Give the heading a class of has-subtitle 
and the paragraph that you want to be the subtitle a class of subtitle */

.has-subtitle {
  margin: 2px !important;
}

.subtitle {
  letter-spacing: 1px;
  font-style: italic;
  font-size: 13px;
}

/* use for 'this page under construction' messages */

#red {
  color: red;
}

/* use this for when you've used an alignleft or alignright and the image is 
messing up the flow of the page*/

.alignoverflow {
  overflow: auto;
}

/*---------- Homepage picture --------------/
This code fixes how the picture displays on different screen widths 
BEWARE: This code affects MORE items than just the homepage picture!! */

@media only screen and (max-width: 888px) {
    #place1 {
        display: none;
    }
    #place2 {
       display: inline;
    }
}
@media only screen and (min-width: 888px){
    #place1 {
        display: inline;
    }
    #place2 {
         display: none;
    }
}

/*--------- SCA Geography pictures ------------/
This code fixes how the pictures display on different screen widths */

@media only screen and (max-width:1100px) and (min-width:738px){
   #knownworld {
       width:75%;
       float:right;
       padding-left: 12px;
   }
}
@media only screen and (max-width: 700px) {
    #lochac1 {
        display: none;
    }
    #lochac2 {
        display: inline;
    }
}
@media only screen and (min-width: 700px){
    #lochac1 {
        display: inline;
    }
   #lochac2 {
       display: none;
    }
}
@media only screen and (max-width: 1150px){
    #lochacmap img {
          width: 500px;
      }
}

/*---------- Homepage links section ----------/
This code styles the links section just under the welcome section. Trying to add
more than four will mess up how the page looks so try to keep it to four only 
please. */

#lp-text-two {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('https://stmonica.lochac.sca.org/files/2019/11/lists-blur.png');
    background-blend-mode: multiply;
    background-position: 40% 30%;
    background-attachment: fixed;
    background-size: cover;
    padding: 0px;
}

#lp-text-two .lp-text-inside {
     max-width: none;
}
#icons {
     display: flex;
     flex-wrap: wrap;
}

.imageicons {
     flex: 25%;
     padding: 5px;
     text-align: center;
     margin-top: 50px;
     margin-bottom: 50px;
}

@media only screen and (max-width: 725px){
  .imageicons {
    flex: 50%;
    margin-top: 25px;
    margin-bottom: 25px;
  }
}
.imageicons img {
     border-radius: 50%;
     width: 125px;
}
.imageicons p {
     color: white;
     font-weight: bold;
}

/*--------- Homepage club section -----------/
This code removes the text title from the version of the club section on the 
homepage. It is important for that version to display properly. */

#lp-text-three .lp-text-title {
     display: none;
}
#lp-text-three .lp-text-content {
      margin-top: 0px;
}
#lp-text-three #history h2 {
      margin-top: 0px;
}

/*------------- Wiki page ----------------/
This code is the styling for tiles on the wiki page. To add another wiki page tile, 
go to the wiki page and read the html comment at the top which describes how. */

#links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

@media only screen and (max-width:510px){
  #links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
 }
}

.subpages {
     flex: 20%;
     width: 225px;
     height: 225px;
     padding: 5px;
     margin: 5px;
     overflow: hidden;
     background-size: cover;
     background-position: center;
     border-radius: 30px;
     position: relative;
}

/* Wiki page tile items */

#wiki-basic-garb-guide {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('https://stmonica.lochac.sca.org/files/2019/10/Dress-making.jpg');
}

#wiki-fighters-guide {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('https://stmonica.lochac.sca.org/files/2012/03/IMG_0874.jpg');
}

#wiki-guide-to-camping-events {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('https://stmonica.lochac.sca.org/files/2019/09/rowany-camping-small.jpg');
}

#wiki-sca-geography {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('https://stmonica.lochac.sca.org/files/2019/08/FinalColorKWMap_small.jpg');
}

#wiki-who-are-the-colleges {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('https://stmonica.lochac.sca.org/files/2019/08/Guitar.jpg');
}

#wiki-tutorials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('https://stmonica.lochac.sca.org/files/2020/08/items-scaled.jpg');
}

/* New wiki page tile items go just above here! */


.tile-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(rgba(36, 167, 207, 0.5), rgba(36, 167, 207, 0.5));
  mix-blend-mode: screen;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.tile-hover p {
  color: rgba(36, 167, 207, 0.0);
}

@media (hover: hover) {
   .subpages:hover .tile-hover {
      height: 100%;
   }
}

.tile-heading {
  position: absolute;
}

.tile-heading h4 {
  color: white;
  letter-spacing: 1px;
  margin-left: 15px;
  font-size: 1.7em;
  position: absolute;
}
.entry-content h4:first-child {
  margin-top: 15px;
}

/*------------ Site header ----------------/
This code changes the position of the background image used in the site header
to be better displayed at different screen widths*/

@media only screen and (min-width: 1170px){
  #masthead .header-image {
    background-position: bottom;
    position: relative;
    bottom: 65px;
  }
}
@media only screen and (min-width: 1720px){
  #masthead .header-image {
    position: relative;
    width: 150%;
    bottom: 150px;
  }
}

/*------------ Who Are The Colleges page ---------------/
This code fixes the look of the images on the Who Are The Colleges page */

.heraldry-container {
  display: flex;
  padding-bottom: 2vh;
}

.heraldry-img {
  align-self: flex-start;
  padding-right: 1vw;
  padding-top: 5px;
}

.heraldry-text {
  flex: 1 1 auto;
}

/*------------ Tutorials page ---------------/
This code fixes the look of the 'latest posts' block */

.wp-block-latest-posts a {
  font-weight: bold;
}