/**
 * Theme Name: Lighthouse Darkroom
 * Template:   twentytwentyfive
 */

body {
  .wp-block-navigation-submenu {
  	padding: 0 !important;
    
    li {
      a {
        padding: 0 1em 0 0 !important;
      }
    }
  }
  
  header {
    height: 6rem;    
    
    > .wp-block-columns {
      padding-top: 1rem;
      
      .header-sitename {
        p {
          padding: 1rem;
          display: inline;
          line-height: 4rem;
        }
      }
      .header-navigation {
      }
    }
  }

  main {
    margin-top: 0 !important;
    
    ul.wp-block-post-template {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(max(20em,100%/8), 1fr));
      grid-gap: 3rem;
      padding: 0 3rem;
      
      li.wp-block-post {
        margin-block-start: 0 !important;
        padding: 0 !important;
        
        &:first-child {
          margin-bottom: 6rem;
          grid-column: 1 / -1;
        }
        &:not(:first-child) {
          .blog-post-header-group {
            position: relative;
            padding: 0 !important;
            
            .blog-post-text-group {
              position: absolute;
              z-index: 1;
              bottom: 10%;

        
              .wp-block-post-date {
                padding-left: 0 !important;

                time {
                  display: inline; 
                  background: white;
                }
              }
              h2 {
                margin-top: 0 !important;
                
                a {
                  display: inline;
                  background: white;
                }
              }
              .taxonomy-category {
                display: inline;
                background: white;
              }
              .wp-block-post-excerpt {
                display: none; 
              }
            }
          }
        }
      }
    }
    

    ul.wp-block-post-template li.wp-block-post:first-child,
    .blog-post-full {

      .blog-post-header-group {
      	position: relative;
        
        figure {
          aspect-ratio: auto !important;
          height: calc(100dvh - 12rem);
        }
        .blog-post-text-group {
          position: absolute;
          z-index: 1;
          width: clamp(16rem, 50%, 32rem);
          top: 6rem;
          left: 9rem;


          .wp-block-post-date {
            padding-left: 0 !important;

            time {
              display: inline; 
              background: white;
            }
          }
          h2 {
            margin-top: 0;

            a {
              display: inline;
              background: white;
            }
          }
          .taxonomy-category {
            display: none;
          }
          .wp-block-post-excerpt {
            p {
              display: inline;
              background: white;
            }
          }
          &.blog-single-post-text-group {                        
            top: auto;
            bottom: -1.5rem;
            left: 6rem;

            h1 {
              margin-top: 0;
              display: inline;
              background: white;
            }
            .blog-post-metadata {
              margin: 6rem 0 3rem 0 !important;
            }
          }
        }
      }
    }
    .blog-post-full {
      .blog-post-header-group {
        figure {
          padding: 0 3rem;
        }
      }
      .blog-post-metadata {
        margin: 6rem 0 3rem 0 !important;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  body {
    header {
      height: 3rem;
      
      .wp-block-columns {
        padding: 0 3rem !important;
        gap: 0 !important;
        
        .header-logo {
          width: 3rem !important;
          
          a {
            img {
              width: 3rem !important;
            }
          }
        }
        .header-sitename {
          p {
            padding: 0;
            line-height: 3rem;
            font-size: 1.5rem !important;
          }
        }
        .header-navigation {
          flex-basis: 3rem !important;
          padding: 0.75rem 0.5rem !important;
        }
      }
    }
    main {
      ul.wp-block-post-template {
        grid-gap: 1rem;
        padding: 0 1rem; 
      
        li.wp-block-post:first-child {
            margin-bottom: 3rem;
        }
      }
      ul.wp-block-post-template li.wp-block-post:first-child,
      .blog-post-full {
        .blog-post-header-group {
          left: 0;
          
          figure {
            height: calc(100dvh - 6rem);
          }
          .blog-post-text-group {
            left: 4rem;
            
            &.blog-single-post-text-group {  
              left: 2rem;
              
              .blog-post-metadata {
                margin: 3rem 0 1rem 0 !important;
              }
            }
          }
        }
      }
    .blog-post-full {
      .blog-post-header-group {
        figure {
          padding: 0 1rem;
        }
      }
      .blog-post-metadata {
        margin: 3rem 0 1rem 0 !important;
      }
    }
   }
  }
}
@media screen and (max-height: 600px) {
  body {
    main {
      ul.wp-block-post-template li.wp-block-post:first-child,
      .blog-post-full {
        .blog-post-header-group {
          .blog-post-text-group {
            .wp-block-post-excerpt {
              display: none;
            }
            .taxonomy-category {
                display: inline;
                background: white;
            }
          }
        }
      }
    }
  }
}