/* 
Theme Name: Artwork
*/

:root {
  --text: #333;
  --light-text: #666;
  --light-color: #CCC;
  --lighter-color: #F1F1F1;
}

.content {
  color: var(--text) !important;
  font-size: 0.9rem;
}

/* In header.php */

.header-title {
  display: flex;
  align-items: baseline;
  text-decoration: none !important;
  color: var(--text) !important;
  padding: 0.75rem 0;
  /* text-transform: uppercase; */
  font-size: 1.2rem;
  /* If font-size is changed, the height of #m-nav should also change */
}

.header-title span {
  font-size: 0.8rem;
}

/* In header.php, menu */

/* .navigation {
  position: fixed;
} */

.navigation ul, li, a {
  padding-left: 0;
  list-style: none;
}

/* First level  */
.navigation > ul > li {
  margin-bottom: 1rem;
}

.navigation > ul > li > a {
  text-decoration: none;
  color: var(--text);
  text-transform: uppercase;
  font-size: 0.8rem;
  display: inline-block;
  padding: 0.25rem 0;
}

.navigation > ul > li:first-child > a {
  pointer-events: none;
}

/* Second level  */
/* .navigation > ul > li > ul li {
  padding-left: 1rem;
} */

.navigation > ul > li > ul a {
  color: var(--text);
  font-size: 0.9rem;
}

.navigation .active {
  text-decoration: var(--light-text) underline;
}

.navigation .active a:hover {
  text-decoration: none;
}

.navigation {
  margin-bottom: 2rem;
}

form {
  margin-top: 2rem;
}

form button {
  width: 100%;
}


/* In front-page.php */

/*  
    Max container width	  None (auto)	  540px	      720px	      960px	      1140px
    Class prefix	        .col-	        .col-sm-	  .col-md-	  .col-lg-	  .col-xl- 
    .img-cover                          375/2       510/3       770/3       920/3
    .img-contain                        375/3       510/4       770/4       920/4
*/

/**
 * Bootstrap 4 all media queries #wMQ
 * https://getbootstrap.com/docs/4.5/layout/overview/
 * up       >     sm, md, lg, xl
 * down     <     sm, md, lg
 * only     =     xs, sm, lg, xl
 * between  <>    sm-lg, sm-xl, md-xl
 */


/* .xs = | Extra Small devices only (portrait phones) less than 576px */
@media (max-width: 575.98px) {
  .img-cover {
    width: 300px;
    height: 300px;
  }
  .img-contain {
    width: 300px;
    height: 300px;
    margin: 0 0 1rem 0;
  }
}

/* .sm > | Small devices and up (landscape, phones) 576px and up */
@media (min-width: 576px) {
  .img-contain {
    /* margin: 0rem 0.5rem 1rem; */
    margin: 0 1rem 1rem 0;
  }
}
/* .sm < | Small devices and down (landscape, phones) less than 768px */
/* @media (max-width: 767.98px) {

} */
/* .sm = | Small devices only (landscape, phones) upper 576px and less than 768px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .img-cover {
    width: 185px;
    height: 185px;
  }
  .img-contain {
    width: 165px;
    height: 165px;
  }
}



/* .md > | Medium devices and up (tablets) 768px and up */
/* @media (min-width: 768px) {

} */
/* .md < | Medium devices and down (tablets) less than 992px */
/* @media (max-width: 991.98px) {

} */
/* .md = | Medium devices only (tablets) upper 768px and less than 992px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .img-cover {
    width: 170px;
    height: 170px;
  }
  .img-contain {
    width: 150px;
    height: 150px;
  }
}



/* .lg > | Large devices and up (desktops) 992px and up */
/* @media (min-width: 992px) {

} */
/* .lg < | Large devices and down (desktops) less than 1200px */
/* @media (min-width: 1199.98px) {

} */
/* .lg = | Large devices only (desktops) upper 992px and less than 1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .img-cover {
    width: 256px;
    height: 256px;
  }
  .img-contain {
    width: 170px;
    height: 170px;
  }
}

/* .xl = | Large devices only (desktops, TV) 1200px and up */
@media (min-width: 1200px) {
  .img-cover {
    width: 306px;
    height: 306px;
  }
  .img-contain {
    width: 210px;
    height: 210px;
  }
}


/* Between <> .sm-lg, .sm-xl, .md-xl */
/* .sm <> .lg | From Small to Large devices only (landscape, phones, tablet, desktops) upper 576px and less than 1200px */
/* @media (min-width: 576px) and (max-width: 991.98px) {

} */
/* .sm <> .xl | From Small to Extra Large devices only (landscape, phones, tablet, desktops, TV) upper 576px and less than 1200px */
/* @media (min-width: 576px) and (max-width: 1199.98px) {

} */
/* .md <> .xl | From Medium to Extra Large devices only (tablet, desktops, TV) upper 768px and less than 1200px */
/* @media (min-width: 768px) and (max-width: 1199.98px) {

} */

.img-cover {
  object-fit: cover;
  transition: transform .1s;
}

.img-cover:hover{
  transform: scale(1.1);
}

.img-zoom{
  overflow: hidden;
}

/* archive.php, search.php */
.custom-image-style a {
  height: min-content;
}

/* In archive.php */

.categories {
  font-size: 0.8rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.img-contain {
  object-fit: contain;
  /* border: 1px solid var(--light-color); */
  /* background-color: var(--lighter-color); */
  /* margin: 0 1rem 1rem 0; */
}

/* In single-post.php */

.img-full {
  width: 100%;
  max-width: 600px;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}

.img-infos {
  padding-top: 1rem;
}

.img-infos .title {
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}

.img-infos .content {
  font-size: 0.9rem;
  color: var(--light-text);
  margin: 0;
}

.img-infos .content p {
  margin-bottom: 0;
}