/*
Theme Name:     Kawista Made Child
Theme URI:      https://kawistamade.id/
Description:    Child theme for Kawista Made theme
Author:         Mayantara.id
Author URI:     https://mayantara.id/
Template:       kawistamade
Version:        1.0.0
*/

body {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

/* === PRELOADER === */
/* wrapper tetap sama */
#site-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e3e60; /* fallback solid */
  padding: 0 1rem;
  transition: 1s all;
}

/* layer gradient utama — gunakan transform animation (GPU) */
#site-preloader::before,
#site-preloader::after {
  content: "";
  position: absolute;
  inset: -30%;               /* buat sangat besar sehingga cover dan 'bergerak' */
  z-index: 0;
  pointer-events: none;
  filter: blur(28px);
  transform-origin: center;
  will-change: transform, opacity;
}

/* layer 1 (lebih gelap) */
#site-preloader::before {
  background: linear-gradient(180deg, rgba(30,62,96,0.95) 0%, rgba(98,120,144,0.72) 60%);
  opacity: 1;
  animation: layer1Move 28s linear infinite;
}

/* layer 2 (lebih terang / subtle) */
#site-preloader::after {
  background: linear-gradient(120deg, rgba(98,120,144,0.92) 0%, rgba(30,62,96,0.06) 70%);
  opacity: 0.85;
  mix-blend-mode: screen; /* opsional, pakai atau hapus tergantung hasil visual */
  animation: layer2Move 36s linear infinite reverse;
}

/* animasi transform — menggunakan translate & rotate (GPU) */
@keyframes layer1Move {
  0%   { transform: translate3d(-10%, -5%, 0) rotate(0.001deg) scale(1.06); }
  50%  { transform: translate3d(8%, 6%, 0) rotate(3deg) scale(1.08); }
  100% { transform: translate3d(-10%, -5%, 0) rotate(0.001deg) scale(1.06); }
}

@keyframes layer2Move {
  0%   { transform: translate3d(6%, 8%, 0) rotate(0.001deg) scale(1.04); }
  50%  { transform: translate3d(-9%, -7%, 0) rotate(-2.5deg) scale(1.06); }
  100% { transform: translate3d(6%, 8%, 0) rotate(0.001deg) scale(1.04); }
}

/* content tetap di atas (logo + text) */
.preloader-content { position: relative; z-index: 2; text-align: center; color: #fff; }

/* contoh small polish: memaksa composite ke GPU */
#site-preloader, #site-preloader::before, #site-preloader::after {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Content */
.preloader-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.preloader-logo img {
  height: 56px;
  filter: brightness(0) invert(1);
  transform: scale(1);
  transition: transform 0.2s ease;
  animation: logoScale 2s ease-in-out forwards;
}

@keyframes logoScale {
  0% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Text lines */
.preloader-text {
    margin-top: 4rem;
    font-size: 24px;
    font-weight: 200;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    overflow: hidden;
}

.preloader-text .line {
  display: block;
  overflow: hidden;
  transform: translateY(100%);
  opacity: 0;
  animation: lineSlideUp 1.2s ease forwards;
}

.preloader-text .line:nth-child(1) { animation-delay: 0.4s; }
.preloader-text .line:nth-child(2) { animation-delay: 0.7s; }
.preloader-text .line:nth-child(3) { animation-delay: 1.0s; }
.preloader-text .line:nth-child(4) { animation-delay: 1.3s; }

@keyframes lineSlideUp {
  0% { transform: translateY(100%); opacity: 0; }
  30% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


body.preloader-done #site-preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* === HEADER === */
header .custom-logo-link img {
    filter: brightness(0) invert(1);
}

.blog header .custom-logo-link img, .archive header .custom-logo-link img, .search header .custom-logo-link img {
    filter: none;
}

.main-header-menu > .menu-item {
    padding: 0 1em;
}

.main-header-menu > .menu-item > .menu-link {
    transition: .3s all;
    border-bottom: 1px transparent solid;
    padding-bottom: 5px;
}

.main-header-menu > .menu-item > .menu-link:hover, .main-header-menu > .menu-item.current-menu-item > .menu-link {
    border-color: inherit;
}

/* === ARCHIVE === */
.archive.ast-separate-container #primary, .archive.ast-separate-container.ast-left-sidebar #primary, .archive.ast-separate-container.ast-right-sidebar #primary, 
.archive.ast-separate-container #secondary, .archive.ast-separate-container.ast-left-sidebar #secondary, .archive.ast-separate-container.ast-right-sidebar #secondary
.search.ast-separate-container #primary, .search.ast-separate-container.ast-left-sidebar #primary, .search.ast-separate-container.ast-right-sidebar #primary, 
.search.ast-separate-container #secondary, .search.ast-separate-container.ast-left-sidebar #secondary, .search.ast-separate-container.ast-right-sidebar #secondary{
    margin: 0;
}

.search .ast-article-post .ast-article-inner, .search .ast-article-post .ast-article-inner:hover {
    border-radius: 16px;
    overflow: hidden;
}


/* === HOME === */
.home-logos img {
/*     filter: grayscale(1) brightness(2);
    transition: .3s all; */
}

.home-logos img:hover {
/*     filter: none; */
}

.boxed-icon .elementor-icon-box-icon {
    background: #1E3E60;
    padding: 8px;
    border-radius: 8px;
    transition: .3s all;
}

.boxed-icon .elementor-icon-box-wrapper:hover .elementor-icon-box-icon {
    background: #1A1A1A;
}

/* === BLOG === */
.ast-blog-layout-4-grid .ast-article-inner {
    border: 1px #CECECE solid;
    box-shadow: none;
}

.ast-blog-layout-4-grid .ast-article-inner {
    border: 1px #CECECE solid;
    box-shadow: none;
}

.ast-separate-container.ast-right-sidebar #secondary .sidebar-main, .ast-separate-container.ast-left-sidebar #secondary .sidebar-main {
    border: 1px #CECECE solid;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    background: #1E3E60;
    color: #f2f2f5;
    height: unset !important;
    transition: .3s all;
}

.ast-separate-container.ast-right-sidebar #secondary a:hover, .ast-separate-container.ast-left-sidebar #secondary a:hover {
    color: #fff;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    border: 0;
    padding: 0;
    outline: none;
}

#secondary .wp-block-search__button {
    background: #1A1A1A;
    transition: .3s all;
    border: 1px #1A1A1A solid;
}

#secondary .wp-block-search__button:hover {
    background: transparent;
    border-color: #f2f2f5;
}

#secondary h2 {
    color: inherit;
}

#secondary .widget {
    margin-bottom: 2.5rem !important;
    background: transparent !important;
    padding: 0 !important;
}

#secondary .widget:last-child {
    margin-bottom: 0;
}

/* === PORTFOLIO === */
.elpt-portfolio-filter .portfolio-filter-item {
    font-size: 16px;
    border-radius: 10px;
    background: #1A1A1A;
    background: #F2F2F5;
    color: #1A1A1A;
    border: 1px #1A1A1A solid;
}

.elpt-portfolio-filter .portfolio-filter-item:hover, .elpt-portfolio-filter .portfolio-filter-item.item-active {
    background: #1E3E60;
    border-color: #1E3E60;
    opacity: 1;
    color: #F2F2F5;
}

.ast-single-entry-banner {
    background: transparent;
}

/* === PAGINATION === */
nav.navigation.pagination {
    justify-content: center;
    margin: 2rem 0 1rem;
}

.page-numbers {
    border: 1px #D9D9D9 solid;
    border-radius: 5px;
    min-width: 34px;
    display: inline-block;
    text-align: center;
    padding: 2px 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 19px;
    font-weight: 400;
    color: #A0A0A0;
}

a.page-numbers {
    background: #EC3E23;
    color: #fff;
    transition: .3s all;
}

a.page-numbers:hover {
    background: #353535;
}

a.prev.page-numbers, a.next.page-numbers {
    width: 70px;
}

/* === FOOTER === */
.site-footer-section .wp-block-image img {
    height: 52px;
    width: auto;
}

.footer-contact {
    margin-top: 2rem;
}

.footer-contact h4 {
    font-size: 18px;
    font-weight: 500;
    color: #A0A0A0;
}

.contact-desc {
    font-size: 18px;
    font-weight: 500;
    color: #1E3E60;
}

.contact-item {
    margin-bottom: 1.5rem;
}

.site-footer a.menu-link {
    font-size: 18px;
    font-weight: 500;
    color: #A0A0A0;
    line-height: 2;
    transition: .3s all;
}

.site-footer a.menu-link:hover, .site-footer .menu-item.current-menu-item a.menu-link {
    color: #1E3E60;
}

.site-footer-section-2, .site-footer-section-3, .site-footer-section-4 {
    padding-top: 4.8rem;
}

ul.wp-block-social-links li.wp-social-link {
    background: transparent;
    color: #000;
}

.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg {
    color: #1A1A1A;
    fill: #1A1A1A;
}

/* === FLOATING BUTTON === */
.footer-whatsapp {
    padding: 12px 14px;
    background: #25d366;
    border-radius: 100%;
    font-size: 30px;
    line-height: 1;
    position: fixed;
    bottom: 4.5rem;
    right: 20px;
    z-index: 99;
    transition: .3s all;
}

.footer-whatsapp:hover {
    background: #1E3E60;
}

.footer-whatsapp .whatsapp-icon {
    color: #fff;
	transition: .3s all;
}

.footer-whatsapp:hover .whatsapp-icon {
    /*color: #fff;*/
}

.mobile-text {
    display: none;
}

@media screen and (max-width: 1300px) {
    .site-footer {
        padding: 0 5%;
    }
}

@media screen and (max-width: 921px) {
    .blog.ast-separate-container.ast-right-sidebar #primary,
    .archive.ast-separate-container.ast-right-sidebar #primary,
    .search.ast-separate-container.ast-right-sidebar #primary {
        padding-top: 0;
    }
    
    .ast-theme-transparent-header #primary, .ast-theme-transparent-header #secondary {
        padding-top: 4em;
    }
    
    .site-footer-section .wp-block-image img {
        height: auto;
    }
}

@media screen and (max-width: 640px) {
    .home-testimonials {
        padding-top: 22rem !important;
    }
}

@media screen and (max-width: 560px) { 
    .home-testimonials {
        padding-top: 20rem !important;
    }
}

@media screen and (max-width: 544px) {
    .site-footer-section .wp-block-image img {
        height: 52px;
    }
    
    .site-footer-section-3, .site-footer-section-4 {
        padding-top: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .preloader-text {
        margin-top: 2rem;
        line-height: 1.2;
    }
    
    .home-testimonials {
        padding-top: 19rem !important;
    }
}