/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Base
2.0 Removes the default margin-top for template part
3.0 Header, Button, and Navigation CSS
4.0 Sportlight effect for Hero area
5.0 Marquee effect
6.0 Single post comment label styles
7.0 Pagination navigation styles
8.0 Small screen media queries
  8.1 Body primay padding
  8.2 Header Adjustment
  8.3 Mobile menu overlay adjustment
  8.4 Mobile button orientation adjustment
  8.5 Mobile Row nowrap adjustment


--------------------------------------------------------------*/

/* 
 * ============================================
 * 1. Base
 * ============================================
 *  
 */

html {
  scroll-behavior: smooth;
}


.wp-theme-blockway .header{
  position: sticky;
  top: 0;
}

/* 
 * ============================================
 * 2. Removes the default margin-top for template part
 * ============================================
 *  
 */

.wp-theme-blockway .margin-top-0{
  margin-top: 0;
}

.wp-theme-blockway :where(.wp-site-blocks) > :last-child{
  margin-block-start: 0;
}

/* 
 * ============================================
 * 3. Header, Button, and Navigation CSS
 * ============================================
 *  
 */


.wp-theme-blockway :where(.wp-site-blocks) > :first-child{
  position: fixed;
  width: 100%;
  top: 0;
  transition: top 0.5s ease-in-out;
  z-index: 9999;
}

.wp-theme-blockway :where(.wp-site-blocks) > :first-child.scrolling-to-bottom{
  top: -100%;
}

.wp-theme-blockway :where(.wp-site-blocks) > :first-child .header .header-container{
  background: rgba(226, 232, 240, 0.4);
  backdrop-filter: blur(12px);
  border: 1px solid var(--wp--preset--color--border);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  padding: 0 20px;
}

.wp-theme-blockway .header .header-container nav.wp-block-navigation .current-menu-item{
  color: var(--wp--preset--color--light);
}

.wp-theme-blockway nav.wp-block-navigation ul > li:hover{
  color: var(--wp--preset--color--light);
}

.wp-theme-blockway .wp-block-button__link:hover{
  background-color: var(--wp--preset--color--dark);
}



/* 
 * ============================================
 * 4. Spotlight effect for Hero area
 * ============================================
 *  
 */

.wp-theme-blockway .spotlight {
    position: relative;
    overflow: hidden;

    --x: 50%;
    --y: 50%;
}

.wp-theme-blockway .spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            500px circle at var(--x) var(--y),
            rgba(0, 128, 117, 0.35) 0%,
            rgba(0, 128, 117, 0.18) 30%,
            rgba(0, 128, 117, 0.08) 55%,
            transparent 75%
        );

    filter: blur(40px);
    transition: opacity .3s;
}


/* 
 * ============================================
 * 5. Marquee effect
 * ============================================
 *  
 */

.wp-theme-blockway .marquee {
  --gap: 2rem;
  display: flex;
  overflow: hidden;
  max-width: fit-content;
}

.wp-theme-blockway .marquee__content {
  flex-shrink: 0;
  display: flex;
  min-width: 100%;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* 
 * ============================================
 * 6. Single post comment label styles
 * ============================================
 *  
 */

.wp-theme-blockway .comment-form label {
  color: var(--wp--preset--color--dark);
}

.wp-theme-blockway .comment-form .logged-in-as{
  color: var(--wp--preset--color--light);
}

.wp-theme-blockway .comment-form .required-field-message{
  color: var(--wp--preset--color--muted);
}


/* 
 * ============================================
 * 7. Pagination navigation styles
 * ============================================
 *  
 */

.wp-theme-blockway nav.wp-block-query-pagination span.page-numbers.current {
    background-color: var(--wp--preset--color--light);
    color: #ffffff;
    width: 35px;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 35px;
    align-content: center;
    justify-content: center;
    border-radius: 50px;
}

.wp-theme-blockway nav.wp-block-query-pagination .page-numbers{
  margin: 0 5px;
}

/* 
 * ============================================
 * 8. Small screen media queries - max-width: 800px
 * ============================================
 *  
 */

@media screen and (max-width: 800px){

    /**
     * ============================================
     * 8.1 Body primay padding
     * ============================================
     * 
     */

    .wp-site-blocks > div:not(:first-child, :last-child),
    .wp-site-blocks main > div,
    .wp-site-blocks footer{
      padding: 0 15px !important;
    }

    /* 
     * ============================================
     * 8.2 Header Adjustment
     * ============================================
     *  
     */
    
    .wp-theme-blockway :where(.wp-site-blocks) > :first-child .header .header-container {
        padding: 0 !important;
    }


    /**
     * ============================================
     * 8.3 Mobile menu overlay adjustment
     * ============================================
     * 
     */

    .wp-theme-blockway .wp-block-navigation__responsive-container.is-menu-open{
      height: 100vh;
    }


    /**
     * ============================================
     * 8.4 Mobile button orientation adjustment
     * ============================================
     * 
     */
    .wp-theme-blockway .wp-block-buttons.is-content-justification-right {
      justify-content: flex-start;
    }

    /**
     * ============================================
     * 8.5 Mobile Row nowrap adjustment
     * ============================================
     * 
     */
    .wp-theme-blockway .footer-copyright,
    .wp-theme-blockway.blog .wp-block-group.is-nowrap,
    .wp-theme-blockway.archive .wp-block-group.is-nowrap{
      flex-wrap: wrap;
    }


}