/*
Theme Name: LK DESIGN
Template: kadence
Description: A child theme of Kadence, custom for LK DESIGN.
Author: Gao ZhenBao
Version: 1.0.0
Text Domain: kadence-child
Last Modified: 2024-03-21
*/
/* 在主题的style.css中添加 */
/* @font-face {
    font-family: 'CustomFont';
    src: url('fonts/yourfont.woff2') format('woff2'),
         url('fonts/yourfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 优化加载体验 */
/* } */

/* Import parent theme styles */
@import url("../kadence/style.css?v=1.0.4");

/* Base font settings */
body {
    font-family: 'Source Han Sans CN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5 {
    font-family: 'Source Han Sans CN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
}

h6 {
    font-family: 'Source Han Sans CN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-weight: 400 !important;
    letter-spacing: -0.015em;
}
h6.has-background {
    padding: 1.25em
}
p.has-background {
    padding: 1.25em
}

/* Navigation */
.main-navigation .menu > .menu-item > a {
    font-family: 'Source Han Sans CN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Site title */
.site-title {
    font-family: 'Source Han Sans CN', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.hero-section-overlay{
    background-image: linear-gradient(140deg,rgb(250,250,0) 0%,rgba(125,180,200,0.75) 50%,rgb(20,250,80) 100%);
}
/* Add your custom styles here */

/* Underlined Heading Style - Similar to Stuck Design Team Page */
.underlined-heading {
    position: relative;
    display: inline-block;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.underlined-heading::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.underlined-heading:hover::after {
    transform: scaleX(1);
}

/* Alternative style with always visible underline */
.underlined-heading::after {
    transform: scaleX(1);
}

/* Light version for light backgrounds */
.underlined-heading.light {
    color: #666;
}

.underlined-heading.light::after {
    background-color: #666;
}

/* Colored version */
.underlined-heading.primary {
    color: #007cba;
}

.underlined-heading.primary::after {
    background-color: #007cba;
}

/* Large version for headings */
.underlined-heading.large {
    font-size: 1.5em;
    font-weight: 700;
}

.underlined-heading.large::after {
    height: 3px;
    bottom: -12px;
}

/* Small version for captions */
.underlined-heading.small {
    font-size: 0.9em;
    font-weight: 500;
}

.underlined-heading.small::after {
    height: 1px;
    bottom: -4px;
}

.slider-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-wechat{
    background-color:#2AAE67;
    color:#fff;
}
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-weibo{
    background-color:#ff2026;
    color:#fff;
}
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-rednote{
    background-color:#ff2442;
    color:#fff;
}
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-douyin{
    background-color:#333333;
    color:#fff;
}
:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-wechat{
    color:#2AAE67;
}
:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-weibo{
    color:#ff2026;
}
:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-rednote{
    color:#ff2442;
}
:where(.wp-block-social-links.is-style-logos-only) .wp-social-link-douyin{
    color:#333333;
}
.kb-gallery-main-contain .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure .kb-gallery-image-ratio-land53{padding-bottom:64.14%}
.wp-block-kadence-image .kb-image-ratio-land53{padding-bottom:64.14%}
.kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure .kb-gallery-image-ratio-land53{padding-bottom:64.14%}


.wp-block-latest-posts__list.is-grid .wp-block-latest-posts__post-title{
    font-weight: 600;
}
.wp-block-latest-posts__list.is-grid .wp-block-latest-posts__post-title a:hover{
    text-decoration: underline !important;
}
.project-info-wrap{
    font-weight: 600;
}
.content-image-not-last{
    margin-bottom: 0 !important;
}
@media screen and (min-width: 767px) {
    .single-content .wp-block-latest-posts.wp-block-latest-posts__list.is-grid.columns-2{
        grid-column-gap: 30px;
        grid-row-gap:0;
    }
    .right-slider-bar.wp-block-latest-posts.wp-block-latest-posts__list.is-grid.columns-2{
        grid-column-gap: 15px;
        grid-row-gap:0;
    }
    #secondary .sidebar-inner-wrap .is-grid li>a{
        font-size: 12px !important;
        font-weight: 400 !important;
        color: #4a4a4a !important;
    }
    .project-info-wrap{
        display: inline-flex;
        width: 180px;
    }
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
    .right-slider-bar.wp-block-latest-posts.wp-block-latest-posts__list.is-grid.columns-2{
        grid-column-gap: 15px;
        grid-row-gap:0;
    }
    #secondary .sidebar-inner-wrap .is-grid li>a{
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #4a4a4a !important;
    }
}
.special-static-section .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kb-gallery-image-contain{
    width: 211px !important;
    height: 135px !important;
}
.has-sidebar:not(.has-left-sidebar) .content-container{
    grid-column-gap: 20px;
}

#secondary .sidebar-inner-wrap{
    top: 0 !important;
    margin-top: 10px;
    max-height: 100vh !important;
    padding-left: 20px;
    border-left: 2px solid #eeeeee;
}

.wp-block-kadence-column .kt-inside-inner-col li>a{
    color: #666 !important;
    display: -webkit-box !important;;
    height: 21px !important;;
    font-size: 14px !important;;
    line-height: 1.5 !important;;
    -webkit-line-clamp: 1 !important;;
    -webkit-box-orient: vertical !important;;
    overflow: hidden;
    text-overflow: ellipsis !important;;
}
.wp-block-kadence-column .kt-inside-inner-col li>a:hover{
    text-decoration: underline;
}
.wp-block-kadence-column .kt-inside-inner-col ul{
    list-style-type: disc;
}
.link-style-hover-background .entry-content>ul a{
    background-image:unset !important;
}

.wechat-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 1002; /* 添加较高的z-index */
}

.wechat-icon:hover::after {
    content: "";  /* 必须设置content */
    
    /* 二维码容器样式 */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    
    width: 180px;
    height: 180px;
    background: white url('wechat-qrcode-service.png') center/contain no-repeat;
    padding: 30px;
    bottom: calc(100% + 10px);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1003; /* 确保二维码显示在最上层 */
}

.wechat-icon:hover::after {
    opacity: 1;
}

.instagram-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 1002; /* 添加较高的z-index */
}
/* 使用 :after 伪元素作为容器 */
.instagram-icon:hover::after {
    content: "";  /* 必须设置content */
    
    /* 二维码容器样式 */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    
    width: 150px;
    height: 200px;
    background: white url('instagram-qrcode.jpg') center/cover no-repeat;
    padding: 30px;
    bottom: calc(100% + 10px);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1002; /* 确保二维码显示在最上层 */
}
.instagram-icon:hover::after {
    opacity: 1;
}

.tiktok-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
/* 使用 :after 伪元素作为容器 */
.tiktok-icon:hover::after {
    content: "";  /* 必须设置content */
    
    /* 二维码容器样式 */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    
    width: 149px;
    height: 222px;
    background: white url('tiktok-qrcode.jpg') center/contain no-repeat;
    padding: 30px;
    top: calc(100% + 10px);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
}
.tiktok-icon:hover::after {
    opacity: 1;
}

.weibo-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.weibo-icon:hover::after {
    content: "";  /* 必须设置content */
    
    /* 二维码容器样式 */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    
    width: 201px;
    height: 145px;
    background: white url('weibo-qrcode.png') center/contain no-repeat;
    padding: 30px;
    top: calc(100% + 10px);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
}
.weibo-icon:hover::after {
    opacity: 1;
}

.rednote-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.rednote-icon:hover::after {
    content: "";  /* 必须设置content */
    
    /* 二维码容器样式 */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    
    width: 200px;
    height: 137px;
    background: white url('rednote-qrcode.png') center/contain no-repeat;
    padding: 30px;
    top: calc(100% + 10px);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
}
.rednote-icon:hover::after {
    opacity: 1;
}

/*
.entry-hero-container-inner{
    height: 300px !important;
    background: linear-gradient(135deg, #0a9619, #087812, #06620f, #032d07, #012205);
    /*background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, .05) 5%, rgba(0, 0, 0, .85));
}

.hero-container.site-container h1{
    color: #ffffff;
    font-size: xxx-large;
}
*/

/*.kb-gallery-ul .kadence-blocks-gallery-item,.kb-gallery-ul .kadence-blocks-gallery-item{*/
/*    opacity: 1 !important;*/
/*}*/
/*.kb-gallery-ul.kb-gallery-caption-style-cover-hover .kadence-blocks-gallery-item:hover .kadence-blocks-gallery-item__caption,.kb-gallery-ul.kb-gallery-caption-style-cover-hover .kadence-blocks-gallery-item:focus-within .kadence-blocks-gallery-item__caption{*/
/*    opacity: 0 !important;*/
/*}*/

.hero-container .entry-header .entry-title {
    color: #ffffff;
    text-shadow: 
        -1px -1px 0 rgba(0, 0, 0, 0.7),
        1px -1px 0 rgba(0, 0, 0, 0.7),
        -1px 1px 0 rgba(0, 0, 0, 0.7),
        1px 1px 0 rgba(0, 0, 0, 0.7);
    font-weight: 700;
    font-size:3.5em;
    line-height: 1.3;
    text-align: center;
    margin: 0 auto;
    padding: 0 20px;
}
.footer2-a a{
    display: block;
    width: 100%;
    min-width: 230px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease-in-out;
    white-space: normal;
    word-wrap: break-word;
}

/* Default Static Header for non-home pages */
body:not(.home):not(.page-contact) .site-header-wrap {
    position: fixed;
    width: 100%;
    background-color: #e0e0e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* Transparent Header only for homepage */
.home .site-header-wrap {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    box-shadow: none;
    transition: all 0.5s ease;
}

.home .site-header-wrap.scrolled {
    background-color: #e0e0e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Make header content more visible on transparent background - homepage only */
.home .site-header-wrap:not(.scrolled) .site-main-header-inner-wrap {
    transition: all 0.5s ease;
}

.home .site-header-wrap:not(.scrolled) .main-navigation .menu > .menu-item > a {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home .site-header-wrap:not(.scrolled) .site-branding .site-title {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hero section styles - homepage only */
.home .hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-image: url('/wp-content/uploads/2025/05/home-hero-new.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -70px;
    will-change: transform;
}

.home .hero-section.scrolling {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.home .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
    width: 100%;
    padding: 0 20px;
}

.home .main-content {
    position: relative;
    background: #fff;
    z-index: 3;
    padding-top: 50px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
}

.home .main-content.scrolling {
    position: relative;
    margin-top: calc(100vh);
}

/* Ensure proper spacing for non-home pages */
body:not(.home) .site-container {
    padding-top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .home .main-content.scrolling {
        margin-top: 60vh;
    }
    .home .hero-section{
        width: 100%;
        height: 55vh;
        background-image: url('/wp-content/uploads/2025/05/home-hero-mobile.jpg');
        margin-top: -50px;
        background-size: 100vw auto;
        background-repeat: no-repeat;
        background-position: center;
    }
}

@media (max-width: 440px) {
    .home .main-content.scrolling {
        margin-top: 30vh;
    }
    .home .hero-section {
        height: 34vh;
        margin-top: -5px;
    }
}

/* Image hover zoom effect */
.img-scale-section img {
    transition: transform 0.3s ease;
    will-change: transform;
}

.img-scale-section img:hover {
    transform: scale(1.05);
}

/* Ensure images don't overflow their containers */
.img-scale-section {
    overflow: hidden;
}

/* Hide contact form on contact page */

.contact-us-form  {
    display: none !important;
}

/* for search form style */
.fullscreen-search-overlay {
    display: none !important; /* Hidden by default */
    position: fixed !important; /* Full screen overlay */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent dark background */
    z-index: 999999; /* Ensure it's on top */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center content horizontally */
    align-items: flex-start; /* Align content to the top */
    overflow-y: auto; /* Add scroll if content overflows */
    padding-top: 150px; /* Space from the top, increased by 20px */
}

.fullscreen-search-overlay.active {
    display: flex !important; /* Show when active */
}

.search-overlay-content {
    background-color: #fff; /* White background for content */
    padding: 30px;
    border-radius: 8px;
    width: 90%; /* Max width of content */
    max-width: 800px; /* Maximum width */
    position: relative; /* For positioning the close button */
}

.search-close {
    position: absolute;
    top: 1px;
    right: 1px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #333; /* Dark color for visibility */
    z-index: 10; /* Ensure it's above the content */
}

.search-form {
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px; /* Space below the search form */
    border-bottom: 1px solid #eee; /* Separator line */
    padding-bottom: 20px;
    align-items: center;
}

.search-form label {
    flex-grow: 1;
}
.search-form svg{
    margin-bottom: 8px;
}

.search-field {
    width: 100%;
    padding: 10px 0;
    border: none; /* No border for the input */
    font-size: 20px;
    outline: none; /* Remove outline on focus */
}

.search-field::placeholder {
    color: #888; /* Placeholder color */
}

.search-submit {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.search-submit .search-icon {
     width: 30px;
     height: 30px;
     color: #333;
}

.search-tags-section p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
}

.kadence-search-icon-wrap .kadence-svg-iconset svg{
    width: 26px !important;
    height: 26px !important;
    margin-bottom: 20px;
}

.tag-category {
    margin-bottom: 25px;
}

.tag-category-title {
    font-size: 18px;
    margin-bottom: 15px;
    border-left: 4px solid var(--global-palette1); /* Example highlight color */
    padding-left: 10px;
    color: #333;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between tags */
}

.tag-list a {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    border-radius: 20px; /* Rounded corners for tags */
    text-decoration: none;
    color: #555;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tag-list a:hover {
    background-color: var(--global-palette1); /* Example hover background */
    color: #fff;
    border-color: var(--global-palette2);
}

/* 联系我们页面 banner 固定滚动样式 */
.page-contact .contact-banner {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-image: url('/wp-content/uploads/2025/05/home-hero-new.jpg'); /* 如需更换背景图可调整 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -70px;
    will-change: transform;
}

.page-contact .contact-banner.scrolling {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.page-contact .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 2;
    width: 100%;
    padding: 0 20px;
}

.page-contact .main-content {
    position: relative;
    background: #fff;
    z-index: 3;
    padding-top: 50px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
}

.page-contact .main-content.scrolling {
    position: relative;
    margin-top: calc(100vh);
}

@media (max-width: 1024px) {
    .page-contact .contact-banner {
        height: 80vh;
    }
    .page-contact .main-content.scrolling {
        margin-top: 80vh;
    }
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .page-contact .main-content.scrolling {
        margin-top: 60vh;
    }
    .page-contact .contact-banner{
        width: 100%;
        height: 55vh;
        background-image: url('/wp-content/uploads/2025/05/home-hero-mobile.jpg');
        margin-top: -50px;
        background-size: 100vw auto;
        background-repeat: no-repeat;
        background-position: center;
    }
}

@media (max-width: 440px) {
    .page-contact .main-content.scrolling {
        margin-top: 30vh;
    }
    .page-contact .contact-banner {
        height: 34vh;
        margin-top: -5px;
    }
}

/* 联系我们页面 header 透明滚动效果 */
.page-contact .site-header-wrap {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    box-shadow: none;
    transition: all 0.5s ease;
}

.page-contact .site-header-wrap.scrolled {
    background-color: #e0e0e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.page-contact .site-header-wrap:not(.scrolled) .site-main-header-inner-wrap {
    transition: all 0.5s ease;
}

.page-contact .site-header-wrap:not(.scrolled) .main-navigation .menu > .menu-item > a {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.page-contact .site-header-wrap:not(.scrolled) .site-branding .site-title {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mobile-navigation ul li.current-menu-item > a, .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap{
    color: #ffffff !important;
}