/*
Theme Name: My themes2
Theme URI: https://wordpress.org/themes
Author: the hua jiang
Author URI: https://huajiang.com
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* Base Styles - Tailwind will handle most of this */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
}

/* Logo Styles */
.logo img {
    height: 50px;
    width: auto;
}

/* Navigation - Active state for first menu item */


/* Dropdown positioning fix */
.menu-item {
    position: relative;
}

/* Hero Slider - Custom animations and effects */
.slide {
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1;
}

.slide-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
    z-index: 2;
}

/* Slider Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide.active .slide-title {
    animation: fadeInUp 1s ease-out;
}

.slide.active .btn {
    animation: fadeInUp 1.2s ease-out;
}

/* Indicator active state */
.indicator.active {
    background-color: #a4c639 !important;
    border-color: #a4c639 !important;
    width: 2.5rem !important;
    border-radius: 0.375rem !important;
}

/* Product Series Section */
.product-card {
    cursor: pointer;
}

.product-card .product-image-wrapper {
    position: relative;
    overflow: hidden;
}

.product-card:hover .product-image-wrapper img {
    transform: scale(1.05);
    transition: transform 0.5s ease;
}

.product-card .product-image-wrapper img {
    transition: transform 0.5s ease;
}

.product-label {
    position: relative;
}

/* Scroll Animation Styles */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* 产品区块整体动画 */
.product-series-section .container.animate-on-scroll {
    transform: translateY(100px);
}

.product-series-section .container.animated {
    transform: translateY(0);
}

/* About Section Styles */
.about-section {
    position: relative;
}

.about-section .about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-section .about-text h2 {
    letter-spacing: 0.02em;
    font-weight: 700;
}

/* 小屏幕允许标题换行 */
@media (max-width: 767px) {
    .about-section .about-text h2 {
        white-space: normal !important;
    }
}

.about-section .about-description {
    max-width: 100%;
}

.about-section .about-description p {
    margin-bottom: 0;
}

.about-section .about-description p:last-child {
    margin-bottom: 0;
}

.about-section .about-image {
    position: relative;
    height: 100%;
}

.about-section .about-image > div {
    height: 100%;
}

.about-section .about-image img {
    transition: transform 0.5s ease;
}

.about-section .about-image:hover img {
    transform: scale(1.02);
}

/* Video Play Button */
.video-play-btn .play-button {
    position: relative;
}

.video-play-btn .play-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(220, 38, 38, 0.3);
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* About Section 整体动画 */
.about-section .container.animate-on-scroll {
    transform: translateY(100px);
}

.about-section .container.animated {
    transform: translateY(0);
}

/* 响应式优化 - About Section */
@media (max-width: 1023px) {
    .about-section .about-text {
        text-align: center;
        padding-right: 0 !important;
    }
    
    .about-section .about-text h2 {
        font-size: 2.25rem;
        margin-bottom: 2rem;
    }
    
    .about-section .about-description {
        margin-bottom: 2.5rem;
    }
    
    .about-section .about-button {
        display: flex;
        justify-content: center;
    }
    
    .about-section .about-image img {
        min-height: 320px !important;
    }
}

@media (max-width: 640px) {
    .about-section .about-text h2 {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }
    
    .about-section .about-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }
    
    .about-section .about-image img {
        min-height: 280px !important;
    }
}

/* ESG Page Styles */
.esg-page {
    position: relative;
}

.esg-hero .summary-box {
    transition: all 0.3s ease;
}

.esg-hero .summary-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(164, 198, 57, 0.2);
}

.esg-logo-wrapper {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* ESG Pillar Cards */
.pillar-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.pillar-card .pillar-content {
    flex: 1;
}

.pillar-card h3 {
    position: relative;
    padding-left: 12px;
}

.pillar-card h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background-color: #a4c639;
}

/* 响应式优化 - ESG */
@media (max-width: 768px) {
    .esg-hero .esg-summary h1 {
        text-align: center;
    }
    
    .esg-hero .summary-box {
        text-align: center;
    }
    
    .pillar-card .flex {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .pillar-card .text-6xl {
        font-size: 3rem;
    }
}

/* Project Archive Page Styles */
.project-archive-page {
    min-height: 70vh;
}

.project-sidebar {
    position: relative;
}

.sidebar-title {
    font-size: 1.125rem;
    line-height: 1.5;
}

.sidebar-menu li a {
    display: block;
    transition: all 0.3s ease;
}

.sidebar-menu li a:hover {
    padding-left: 1.25rem;
}

.featured-item {
    cursor: pointer;
}

.featured-item img {
    flex-shrink: 0;
}

/* Featured Module Scroll Styles */
.featured-module-section {
    position: relative;
}

.featured-scroll-wrapper {
    position: relative;
}

.featured-list {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-right: 8px;
}

/* 隐藏滚动条但保留滚动功能 */
.featured-list::-webkit-scrollbar {
    width: 0;
    display: none;
}

/* Firefox */
.featured-list {
    scrollbar-width: none;
}

/* IE and Edge */
.featured-list {
    -ms-overflow-style: none;
}

/* Scroll Buttons */
.scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #a4c639;
    z-index: 10;
}

.scroll-up-btn {
    margin-bottom: 0.5rem;
}

.scroll-down-btn {
    margin-top: 0.5rem;
}

.scroll-btn:hover {
    background: linear-gradient(to bottom, #a4c639, #8fb02b);
    color: white;
}

.scroll-btn:active {
    transform: scale(0.95);
}

/* Project Cards */
.project-card {
    cursor: pointer;
}

.project-card:hover .project-info h2 {
    color: #a4c639;
}

.project-image {
    position: relative;
    overflow: hidden;
}

.project-info {
    background-color: #f9fafb;
    transition: background-color 0.3s ease;
}

.project-card:hover .project-info {
    background-color: #f3f4f6;
}

/* News List Styles */
.news-item {
    transition: all 0.3s ease;
}

.news-item:hover {
    transform: translateY(-4px);
}

.news-image-wrapper {
    position: relative;
    overflow: hidden;
}

.news-image {
    transition: transform 0.5s ease;
}

.news-content {
    position: relative;
}

.news-header h2 a {
    text-decoration: none;
    color: inherit;
}

.news-header h2:hover {
    color: #a4c639;
}

.news-date {
    display: flex;
    align-items: center;
}

.news-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-footer a {
    display: inline-flex;
    align-items: center;
    text-transform: lowercase;
	float:right;
	
}

/* 响应式 - News Page */
@media (max-width: 767px) {
    .news-image-wrapper {
        width: 100%;
    }
    
    .news-content {
        padding: 1.5rem !important;
    }
    
    .news-header h2 {
        font-size: 1.25rem;
    }
}

/* Pagination Styles */
.pagination-wrapper {
    display: flex;
    justify-content: center;
}

.pagination-wrapper nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pagination-item a,
.pagination-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    font-weight: 500;
    color: #4b5563;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.pagination-item a:hover {
    background-color: #a4c639;
    color: #fff;
    border-color: #a4c639;
}

.pagination-item .current {
    background-color: #a4c639;
    color: #fff;
    border-color: #a4c639;
}

.pagination-item .dots {
    border: none;
    background: none;
}

/* 响应式 - Project Archive */
@media (max-width: 1023px) {
    .project-sidebar {
        order: 2;
        margin-top: 3rem;
    }
    
    .project-content {
        order: 1;
    }
    
    .sidebar-section {
        max-width: 100%;
    }
    
    .featured-scroll-wrapper {
        max-height: none;
    }
    
    .featured-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        max-height: none;
        overflow: visible;
    }
    
    .scroll-btn {
        display: none;
    }
}

@media (max-width: 640px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .featured-list {
        grid-template-columns: 1fr;
    }
}

/* Arrow Icon Animation */
.arrow-icon {
    pointer-events: none;
}

.arrow-circle {
    animation: slideDown 0.5s ease-out forwards;
}

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

/* Reset animation when not hovering */
.product-card:not(:hover) .arrow-circle {
    animation: none;
    transform: translateY(-100px);
    opacity: 0;
}

/* Product label hover effect */
.product-card:hover .product-label {
    background-color: #8fb02b;
}

/* 移动端产品卡片优化 */
@media (max-width: 768px) {
    .product-card {
        margin-bottom: 1rem;
    }
    
    .product-image-wrapper {
        min-height: 250px !important;
    }
    
    .arrow-circle {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    
    .arrow-circle svg {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
}


/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #333;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Navigation Styles */
@media (max-width: 1023px) {
    .main-navigation {
        position: fixed !important;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: #fff;
        flex-direction: column;
        padding: 80px 0 20px;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
        z-index: 1001;
        display: flex !important;
    }

    .main-navigation.active {
        left: 0;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1000;
    }

    .nav-menu {
        flex-direction: column !important;
        width: 100%;
        gap: 0 !important;
    }

    .menu-item {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .menu-item:first-child {
        background-color: transparent !important;
    }

    .menu-item > a {
        padding: 15px 20px !important;
        color: #333 !important;
    }

    .menu-item:hover > a,
    .menu-item.active > a {
        background-color: #f5f5f5 !important;
        color: #a4c639 !important;
    }

    .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        display: none;
        background-color: #f9f9f9 !important;
    }

    .has-dropdown.active .dropdown-menu,
    .has-dropdown:hover .dropdown-menu,
    .group:hover .dropdown-menu {
        display: block !important;
    }

    .dropdown-menu a {
        padding: 12px 30px !important;
        font-size: 14px !important;
    }

    .search-icon {
        margin: 20px auto 0 !important;
        padding: 0 20px !important;
    }

    .search-btn {
        width: 100%;
        padding: 10px !important;
        background-color: #f5f5f5;
        border-radius: 5px;
    }

    .logo {
        margin: 0 auto !important;
    }
}

/* Mobile slider adjustments */
@media (max-width: 768px) {
    .hero-slider {
        height: 70vh !important;
        min-height: 500px;
    }
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
    text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
    display: block;
}

/* ========================================
 * Icon Animation for FARADY IN FIGURES
 * ======================================== */

/* Icon rotation animation keyframes */
@keyframes iconRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    20% {
        transform: rotate(-15deg) scale(1.05);
    }
    40% {
        transform: rotate(15deg) scale(1.1);
    }
    60% {
        transform: rotate(-10deg) scale(1.1);
    }
    80% {
        transform: rotate(5deg) scale(1.05);
    }
    100% {
        transform: rotate(0deg) scale(1.15);
    }
}

/* Icon animation wrapper */
.icon-animate {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effect on figure card - trigger icon animation */
.figure-card:hover .icon-animate img {
    animation: iconRotate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 1 !important;
}

/* Additional hover effect for icon wrapper */
.figure-card:hover .icon-animate {
    transform: scale(1.15);
}