/*
Theme Name: Chainis
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght,CRSV@100..900,0&display=swap');

:root { 
    --primary: #231f20;
    --accent: #007878;
}  

body,html{ 
    scroll-behavior: smooth;
}  

body {
    font-family: 'geologica', sans-serif;
}

 /* ── Dropdown ── */ 

 /* Parent item με children */
 .main-nav .menu-item-has-children {
     position: relative;
 }

 /* Βελάκι μετά τον τίτλο */
 .main-nav .menu-item-has-children>a::after {
     content: '';
     display: inline-block;
     width: 12px;
     height: 12px;
     margin-left: 5px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='var(--primary)' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: contain;
     vertical-align: middle;
     transition: transform 0.3s ease;
     border: none;
     border-bottom: none;
 }

 .main-nav .menu-item-has-children:hover>a::after {
     transform: rotate(180deg);
 }

 /* override header-link underline για τα nav links */
 .main-nav a {
     position: relative;
     text-decoration: none;
     color: inherit;
 }

 .main-nav {

    .current_page_item{
        a{
            font-weight: 600;
        }
    }

     nav>ul>li>a {
         position: relative;

         transition: all 0.3s ease-out;
     }

     nav>ul:hover>li {

         >a {
             opacity: 0.5;
         }


         &:hover {
             >a {
                 opacity: 1;
             }
         }
     }
 }

 .main-nav .menu-item-has-children {
     ul {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
         top: 104%;
         padding: 1rem;
         padding-top: 2rem;
         z-index: 1;
         color: black;
         font-size: 1rem;
         width: max-content;
         transition: all 0.3s ease-out;
         opacity: 0;
         pointer-events: none;

         a {
             transition: all 0.3s ease-out;
             display: block;
             padding-block: 3px;

             &:hover {
                 opacity: 0.6;
             }
         }

         &:before {
             content: "";
             position: absolute;
             background: #f6f6f6;
             inset-inline: 0;
             bottom: 0;
             top: 1rem;
             z-index: -1;
         }

     }

     &:hover {
         ul {
             opacity: 1;
             pointer-events: auto;
             top: 100%;
         }
     }
 }

 /* ── Header CTA hover animation ── */
 .header-cta {
     position: relative;
     overflow: hidden;
     display: inline-block;
     vertical-align: middle;
 }

 .cta-original,
 .cta-hover {
     display: flex;
 }

 .cta-hover {
     position: absolute;
     top: 100%;
     left: 0;
     opacity: 0.5;
 }

 .cta-original .char,
 .cta-hover .char {
     display: inline-block;
     transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
     transition-delay: calc(var(--i) * 0.02s);
 }

 .header-cta:hover .cta-original .char {
     transform: translateY(-100%);
 }

 .header-cta:hover .cta-hover .char {
     transform: translateY(-100%);
 }

 .header {
     transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
 }

 .header.scrolled {
     background-color: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
 }

 .mobile-on{
    .header.scrolled{
        background: transparent;
        backdrop-filter: blur(0px);
    }
 }

   .hero-images img {
       position: absolute;
       object-fit: cover;
       aspect-ratio: 3 / 4;
       will-change: transform;
       transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }

   /* Top-left — large, bleeds off screen */
   .hi-1 {
       width: 17%;
       left: -1%;
       top: 15%;
   }

   /* Top-center — tall */
   .hi-2 {
       width: 13%;
       left: 43%;
       top: 6%;
   }

   /* Upper-right */
   .hi-3 {
       width: 15%;
       right: 20%;
       top: 7%;
   }

   /* Far right — faded */
   .hi-4 {
       width: 10%;
       right: -1%;
       top: 14%;
   }

   /* Mid-left — small, faded */
   .hi-5 {
       width: 8%;
       left: 26%;
       top: 40%;
       opacity: 0.1;
   }

   /* Mid-right — small, faded */
   .hi-6 {
       width: 10%;
       right: 30%;
       top: 46%;
       opacity: 0.1;
   }

   /* Bottom-left — bleeds off */
   .hi-7 {
       width: 12%;
       left: -1%;
       bottom: -3%;
   }

   /* Bottom-right — large, bleeds off */
   .hi-8 {
       width: 16%;
       right: -1%;
       bottom: -3%;
   }

   /* Hero link hover animations */
   .hero-link {
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
   }

   .hero-link i {
       display: inline-block;
       transform: scale(0);
       transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .hero-link:hover i {
       transform: scale(1);
   }

   .hero-link span {
       position: relative;
   }

   .hero-link span::after {
       content: '';
       position: absolute;
       bottom: -3px;
       left: 0;
       width: 100%;
       height: 2px;
       background: currentColor;
       transform: scaleX(0);
       transform-origin: right;
       transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
   }

   .hero-link:hover span::after {
       transform: scaleX(1);
       transform-origin: left;
   }

   /* Main CTA hover animations */
   .main-cta {
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
       color: rgba(0, 0, 0, 0.5);
       transition: color 0.3s ease;
       font-weight: 700;
   }

   .main-cta:hover {
       color: rgba(0, 0, 0, 1);
   }

   .main-cta i {
       display: inline-block;
       transform: scale(0);
       transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .main-cta:hover i {
       transform: scale(1);
   }

   .main-cta span {
       position: relative;
   }

   .main-cta span::after {
       content: '';
       position: absolute;
       bottom: -3px;
       left: 0;
       width: 100%;
       height: 2px;
       background: currentColor;
       transform: scaleX(0);
       transform-origin: right;
       transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
   }

   .main-cta:hover span::after {
       transform: scaleX(1);
       transform-origin: left;
   }

   /* Scroll indicator */
   .scroll-indicator {
       position: absolute;
       bottom: 2rem;
       left: 50%;
       transform: translateX(-50%);
       z-index: 10;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.5rem;
   }

   .scroll-label {
       font-size: 0.65rem;
       font-weight: 700;
       letter-spacing: 0.2em;
       text-transform: uppercase;
       opacity: 0.35;
   }

   .scroll-line {
       width: 1px;
       height: 60px;
       background: rgba(0, 0, 0, 0.15);
       position: relative;
       overflow: hidden;
   }

   .scroll-dot {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 40%;
       background: black;
       animation: scrollDown 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
   }

   @keyframes scrollDown {
       0% {
           transform: translateY(-100%);
           opacity: 1;
       }

       70% {
           transform: translateY(250%);
           opacity: 1;
       }

       71% {
           transform: translateY(250%);
           opacity: 0;
       }

       100% {
           transform: translateY(-100%);
           opacity: 0;
       }
   }

         .sales-card__cta span {
             position: relative;
             padding-bottom: 2px;
         }
    
         .sales-card__cta span::after {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
             bottom: 0;
             height: 1px;
             background: currentColor;
             transform: scaleX(0);
             transform-origin: right center;
             transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
         }
    
         .sales-card__cta:hover span::after {
             transform: scaleX(1);
             transform-origin: left center;
         }

                  .project-slider {
                      height: calc(100vh - 227px);
                      max-height: calc(100vh - 227px);
                  }
        
                  .project-splide-main,
                  .project-thumbs-col {
                      height: 100%;
                  }
        
                 
        
                  .project-splide-main .splide__track,
                  .project-splide-main .splide__list,
                  .project-splide-main .splide__slide {
                      height: 100%;
                  }
        
                  .project-splide-main .splide__slide {
                      overflow: hidden;
                  }
        
                  .project-splide-main .splide__slide img {
                      width: 100%;
                      height: 100%;
                      object-fit: contain;
                      display: block;
                  }
        
                  .project-splide-main .splide__arrow {
                      background: rgba(255, 255, 255, 0.85);
                      opacity: 1;
                  }
        
                  .project-thumbs-list {
                      width: 110px;
                      height: 100%;
                      overflow-y: auto;
                      overscroll-behavior: contain;
                      display: flex;
                      flex-direction: column;
                      gap: 8px;
                      scrollbar-width: none;
                  }
        
                  .project-thumbs-list::-webkit-scrollbar {
                      display: none;
                  }
        
                  .project-thumb {
                      flex: 0 0 80px;
                      width: 100%;
                      height: 80px;
                      padding: 0;
                      border: 0;
                      background: transparent;
                      cursor: pointer;
                      overflow: hidden;
                      opacity: 0.80;
                      transition: opacity 0.2s ease;
                  }
        
                  .project-thumb:hover {
                      opacity: 1;
                  }
        
                  .project-thumb.is-active {
                      opacity: 1;
                  }
        
                  .project-thumb img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                      display: block;
                  }
        
                  .project-thumbs-progress {
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      gap: 8px;
                      font-size: 11px;
                      font-weight: 600;
                      color: rgba(0, 0, 0, 0.5);
                      letter-spacing: 0.05em;
                  }
        
                  .project-thumbs-progress__bar {
                      flex: 1;
                      width: 2px;
                      background: rgba(0, 0, 0, 0.1);
                      position: relative;
                      overflow: hidden;
                  }
        
                  .project-thumbs-progress__fill {
                      position: absolute;
                      top: 0;
                      left: 0;
                      right: 0;
                      height: 0%;
                      background: #231f20;
                      transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                  }
        
                  .project-description-collapse {
                      overflow: hidden;
                      height: 0;
                      transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
                  }
        
                  .project-description-collapse[hidden] {
                      display: none;
                  }
        
                  .project-info-toggle {
                      transition: color 0.2s ease;
                  }
        
                  .project-info-toggle[aria-expanded="true"] {
                      color: #231f20;
                      text-decoration: underline;
                      text-underline-offset: 4px;
                  }

                                        .single-project-sales .project-slider {
                                            height: 50vh;
                                            max-height: 50vh;
                                        }
                    
                                        .single-project-sales .project-splide-main,
                                        .single-project-sales .project-thumbs-col {
                                            height: 100%;
                                        }
                    
                                       
                    
                                        .single-project-sales .project-splide-main .splide__track,
                                        .single-project-sales .project-splide-main .splide__list,
                                        .single-project-sales .project-splide-main .splide__slide {
                                            height: 100%;
                                        }
                    
                                        .single-project-sales .project-splide-main .splide__slide {
                                            overflow: hidden;
                                        }
                    
                                        .single-project-sales .project-splide-main .splide__slide img {
                                            width: 100%;
                                            height: 100%;
                                            object-fit: contain;
                                            display: block;
                                        }
                    
                                        .single-project-sales .project-splide-main .splide__arrow {
                                            background: rgba(255, 255, 255, 0.85);
                                            opacity: 1;
                                        }

                                        .project-splide-main.is-single {
                                            visibility: visible !important;
                                        }
                                        .project-splide-main.is-single .splide__arrows,
                                        .project-splide-main.is-single .splide__arrow {
                                            display: none !important;
                                        }
                                        .project-splide-main.is-single .splide__track {
                                            overflow: hidden;
                                            height: 100%;
                                        }
                                        .project-splide-main.is-single .splide__list {
                                            display: block !important;
                                            transform: none !important;
                                            height: 100%;
                                        }
                                        .project-splide-main.is-single .splide__slide {
                                            display: block !important;
                                            width: 100% !important;
                                            height: 100% !important;
                                            opacity: 1 !important;
                                            visibility: visible !important;
                                        }
                                        .project-splide-main.is-single .splide__slide img {
                                            width: 100%;
                                            height: 100%;
                                            object-fit: contain;
                                            display: block;
                                        }
                                        .project-splide-main.is-single .splide__slide {
                                            display: block !important;
                                            width: 100% !important;
                                            opacity: 1 !important;
                                            visibility: visible !important;
                                        }

                                        .single-project-sales .project-thumbs-list {
                                            width: 110px;
                                            height: 100%;
                                            overflow-y: auto;
                                            overscroll-behavior: contain;
                                            display: flex;
                                            flex-direction: column;
                                            gap: 8px;
                                            scrollbar-width: none;
                                        }
                    
                                        .single-project-sales .project-thumbs-list::-webkit-scrollbar {
                                            display: none;
                                        }
                    
                                        .single-project-sales .project-thumb {
                                            flex: 0 0 80px;
                                            width: 100%;
                                            height: 80px;
                                            padding: 0;
                                            border: 0;
                                            background: transparent;
                                            cursor: pointer;
                                            overflow: hidden;
                                            opacity: 0.80;
                                            transition: opacity 0.2s ease;
                                        }
                    
                                        .single-project-sales .project-thumb:hover,
                                        .single-project-sales .project-thumb.is-active {
                                            opacity: 1;
                                        }
                    
                                        .single-project-sales .project-thumb img {
                                            width: 100%;
                                            height: 100%;
                                            object-fit: cover;
                                            display: block;
                                        }
                    
                                        .single-project-sales .project-thumbs-progress {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: center;
                                            gap: 8px;
                                            font-size: 11px;
                                            font-weight: 600;
                                            color: rgba(0, 0, 0, 0.5);
                                            letter-spacing: 0.05em;
                                        }
                    
                                        .single-project-sales .project-thumbs-progress__bar {
                                            flex: 1;
                                            width: 2px;
                                            background: rgba(0, 0, 0, 0.1);
                                            position: relative;
                                            overflow: hidden;
                                        }
                    
                                        .single-project-sales .project-thumbs-progress__fill {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            right: 0;
                                            height: 0%;
                                            background: #231f20;
                                            transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                                        }
                    
                                        .apt-row summary::-webkit-details-marker {
                                            display: none;
                                        }

   .footer-site-name {
       display: block;
       width: 100%;
       letter-spacing: -0.03em;
       line-height: 0.85;
   } 

   .mobile-navigation{
    nav{
        li{
            opacity: 0;
            transform: translateY(10px);
        }
    }
   }