/*
Theme Name: linkedalu88
Theme URI: https://linkedalu.com
Author: LINKEDALU METAL
Author URI: https://linkedalu.com
Description: A professional WordPress theme for LINKEDALU METAL - High-Performance Aluminum Extrusions. Features responsive design, multi-level navigation, and modern industrial aesthetics.
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: linkedalu4
Tags: responsive-layout, custom-menu, featured-images, theme-options, translation-ready
*/


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

h1,
h2,
h3,
.font-headline {
    font-family: 'Manrope', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-nav {
    background: rgba(247, 249, 255, 0.95);
    backdrop-filter: blur(24px);
}

.slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 66vh;
}

.slider-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.slide {
    flex: 0 0 100%;
    height: 66vh;
    position: relative;
    background-size: cover;
    background-position: center;
}

.text-shadow-strong {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* WordPress-Style Menu Desktop */
.menu-item-has-children {
    position: relative;
}

.menu-item-has-children:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-top: 4px solid #00478d;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
    z-index: 50;
    padding: 0.5rem 0;
}

/* Mobile Menu */
#mobile-menu.active {
    display: block;
}

.mobile-sub-menu.active {
    display: block;
}




.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu li {
    position: relative;
}

.main-menu a {
    display: block;
    text-decoration: none;
    transition: all 0.2s ease;
}

@media (min-width: 768px) {
    .menu-item-has-children>a {
        display: block;
        /* 确保块级元素撑开宽度 */
        padding-right: 1.5rem !important;
        /* 先加上 !important 测试 */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>');
        background-repeat: no-repeat;
        background-position: right 0.25rem center;
        background-size: 1rem;
    }

    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        padding: 0.5rem 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.5rem);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        z-index: 100;
        border: 1px solid #e5e7eb;
    }

    .menu-item-has-children:hover>.sub-menu,
    .menu-item-has-children:focus-within>.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* 子菜单项样式 */
    .sub-menu li {
        width: 100%;
    }

    .sub-menu a {
        padding: 0.5rem 1rem;
        color: #374151;
        font-size: 0.875rem;
    }

    .sub-menu a:hover {
        background-color: #f3f4f6;
        color: #1f2937;
    }

    .sub-menu .sub-menu {
        top: 0;
        left: 100%;
        margin-left: 0.25rem;
    }
}

@media (max-width: 767px) {
    .sub-menu {
        padding-left: 1.25rem;
        margin-top: 0.25rem;
        border-left: 2px solid #e5e7eb;
    }

    .sub-menu a {
        padding: 0.5rem 0;
        font-size: 0.875rem;
    }

    .menu-item-has-children>a {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>');
        background-repeat: no-repeat;
        background-position: right 0.25rem top 0.6rem;
        background-size: 1rem;
    }
}

.main-menu>.current-menu-item>a,
.main-menu>.current_page_item>a,
.main-menu>.current-menu-parent>a,
.main-menu>.current-menu-ancestor>a,
.main-menu>.current-page-ancestor>a {
    color: #2563eb;
    /* 蓝色文字 */
    border-bottom: 2px solid #2563eb;
    padding-bottom: 0.25rem;
}

.sub-menu .current-menu-item>a,
.sub-menu .current-menu-parent>a,
.sub-menu .current_page_item>a {
    background-color: #eff6ff;
    color: #1d4ed8;
    border-left: 3px solid #2563eb;
    font-weight: 500;
}

.main-menu a:hover {
    color: #2563eb;
}

@media (min-width: 768px) {
    .main-menu>li>a {
        padding: 0.5rem 0;
    }

    .menu-item-has-children>a {
        padding-right: 1.75rem;
    }
}


/* 基础按钮样式 */
.submit {
  display: inline-block;
  margin-top: 20px;
  width: 100%;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  outline: none;
}

.comment-form-cookies-consent
{
    display: none;
}

        :root {
            /* ========== 品牌色变量 ========== */
            --whatsapp-color: #25D366;
            --whatsapp-hover: #1ebe5b;
            --email-color: #EA4335;
            --email-hover: #d33426;
            --linkedin-color: #0077B5;
            --linkedin-hover: #00669e;
            --facebook-color: #1877F2;
            --facebook-hover: #1365d1;
            /* Instagram 渐变背景色 (用于图标) 与标签纯色 */
            --instagram-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --instagram-hover-gradient: linear-gradient(45deg, #d9832a 0%, #cf5a31 25%, #c42136 50%, #b31e58 75%, #a51575 100%);
            --instagram-label-color: #E1306C;

            /* ========== 尺寸变量 ========== */
            --icon-size: 48px;
            --icon-size-mobile: 42px;
            --bar-gap: 8px;
            --bar-padding: 10px;
            --bar-right-offset: 20px;
            --bar-right-offset-mobile: 8px;
            --label-font-size: 13px;
            --label-padding-x: 14px;
            --label-padding-y: 8px;

            /* ========== 阴影 & 圆角 ========== */
            --bar-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
            --icon-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
            --icon-shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.25);
            --bar-radius: 32px;
            --icon-radius: 50%;
            --label-radius: 20px;

            /* ========== 过渡 ========== */
            --transition-speed: 0.3s;
            --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ========== 浮动社交栏外层容器 ========== */
        .social-float-bar {
            position: fixed;
            right: var(--bar-right-offset);
            top: 50%;
            transform: translateY(-50%);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: var(--bar-gap);
            padding: var(--bar-padding);
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: var(--bar-radius);
            box-shadow: var(--bar-shadow);
            border: 1px solid rgba(255, 255, 255, 0.6);
            animation: barFadeIn 0.7s var(--transition-ease) forwards;
            opacity: 0;
        }

        @keyframes barFadeIn {
            from {
                opacity: 0;
                transform: translateY(-50%) translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
            }
        }

        .social-float-bar::before {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #c0c0c0;
            margin: 0 auto 2px;
            flex-shrink: 0;
            transition: background var(--transition-speed) var(--transition-ease);
        }

        .social-float-bar:hover::before {
            background: #888;
        }

        /* ========== 单个社交项容器 ========== */
        .social-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-decoration: none;
            cursor: pointer;
            flex-shrink: 0;
        }

        .social-label {
            position: absolute;
            right: calc(var(--icon-size) + 12px);
            top: 50%;
            transform: translateY(-50%) translateX(8px);
            white-space: nowrap;
            background: #333;
            color: #fff;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
            font-size: var(--label-font-size);
            font-weight: 500;
            letter-spacing: 0.3px;
            padding: var(--label-padding-y) var(--label-padding-x);
            border-radius: var(--label-radius);
            opacity: 0;
            pointer-events: none;
            transition:
                opacity var(--transition-speed) var(--transition-ease),
                transform var(--transition-speed) var(--transition-ease);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            line-height: 1.2;
        }

        .social-label::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 6px solid #333;
        }

        .social-icon-circle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--icon-size);
            height: var(--icon-size);
            border-radius: var(--icon-radius);
            background: #555;
            box-shadow: var(--icon-shadow);
            transition:
                transform var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease),
                background var(--transition-speed) var(--transition-ease);
            flex-shrink: 0;
            position: relative;
            z-index: 2;
        }

        .social-icon-circle svg {
            width: 22px;
            height: 22px;
            fill: #fff;
            transition: transform var(--transition-speed) var(--transition-ease);
            pointer-events: none;
        }

        /* ========== 悬停通用效果 ========== */
        .social-item:hover .social-label {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
            pointer-events: auto;
        }

        .social-item:hover .social-icon-circle {
            transform: scale(1.12);
            box-shadow: var(--icon-shadow-hover);
        }

        .social-item:hover .social-icon-circle svg {
            transform: scale(1.08);
        }

        /* ========== 各平台独立样式 ========== */
        .social-item.whatsapp .social-icon-circle {
            background: var(--whatsapp-color);
        }
        .social-item.whatsapp:hover .social-icon-circle {
            background: var(--whatsapp-hover);
        }
        .social-item.whatsapp .social-label {
            background: var(--whatsapp-color);
        }
        .social-item.whatsapp .social-label::after {
            border-left-color: var(--whatsapp-color);
        }

        .social-item.email .social-icon-circle {
            background: var(--email-color);
        }
        .social-item.email:hover .social-icon-circle {
            background: var(--email-hover);
        }
        .social-item.email .social-label {
            background: var(--email-color);
        }
        .social-item.email .social-label::after {
            border-left-color: var(--email-color);
        }

        .social-item.linkedin .social-icon-circle {
            background: var(--linkedin-color);
        }
        .social-item.linkedin:hover .social-icon-circle {
            background: var(--linkedin-hover);
        }
        .social-item.linkedin .social-label {
            background: var(--linkedin-color);
        }
        .social-item.linkedin .social-label::after {
            border-left-color: var(--linkedin-color);
        }

        .social-item.facebook .social-icon-circle {
            background: var(--facebook-color);
        }
        .social-item.facebook:hover .social-icon-circle {
            background: var(--facebook-hover);
        }
        .social-item.facebook .social-label {
            background: var(--facebook-color);
        }
        .social-item.facebook .social-label::after {
            border-left-color: var(--facebook-color);
        }

        /* Instagram 样式：图标使用渐变背景，标签使用纯色 */
        .social-item.instagram .social-icon-circle {
            background: var(--instagram-gradient);
        }
        .social-item.instagram:hover .social-icon-circle {
            background: var(--instagram-hover-gradient);
        }
        .social-item.instagram .social-label {
            background: var(--instagram-label-color);
        }
        .social-item.instagram .social-label::after {
            border-left-color: var(--instagram-label-color);
        }

        /* ========== 入场动画 (5个图标依次滑入) ========== */
        .social-item:nth-child(1) {
            animation: iconSlideIn 0.5s var(--transition-ease) 0.15s forwards;
            opacity: 0;
            transform: translateX(30px);
        }
        .social-item:nth-child(2) {
            animation: iconSlideIn 0.5s var(--transition-ease) 0.25s forwards;
            opacity: 0;
            transform: translateX(30px);
        }
        .social-item:nth-child(3) {
            animation: iconSlideIn 0.5s var(--transition-ease) 0.35s forwards;
            opacity: 0;
            transform: translateX(30px);
        }
        .social-item:nth-child(4) {
            animation: iconSlideIn 0.5s var(--transition-ease) 0.45s forwards;
            opacity: 0;
            transform: translateX(30px);
        }
        .social-item:nth-child(5) {
            animation: iconSlideIn 0.5s var(--transition-ease) 0.55s forwards;
            opacity: 0;
            transform: translateX(30px);
        }

        @keyframes iconSlideIn {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .social-item.animated-in {
            animation: none;
            opacity: 1;
            transform: translateX(0);
        }

        /* ========== 响应式 - 平板 ========== */
        @media (max-width: 1024px) {
            .social-float-bar {
                --bar-right-offset: 14px;
                --bar-padding: 8px;
                --bar-gap: 6px;
                border-radius: 28px;
            }
            .social-icon-circle {
                --icon-size: 44px;
            }
            .social-icon-circle svg {
                width: 20px;
                height: 20px;
            }
            .social-label {
                right: calc(44px + 10px);
            }
        }

        /* ========== 响应式 - 手机 ========== */
        @media (max-width: 768px) {
            .social-float-bar {
                --bar-right-offset: 6px;
                --bar-padding: 6px;
                --bar-gap: 5px;
                border-radius: 24px;
                background: rgba(255, 255, 255, 0.8);
                box-shadow: 0 3px 14px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1);
            }
            .social-icon-circle {
                --icon-size: 38px;
            }
            .social-icon-circle svg {
                width: 18px;
                height: 18px;
            }
            .social-label {
                right: calc(38px + 8px);
                font-size: 11px;
                padding: 6px 10px;
                border-radius: 16px;
            }
            .social-label::after {
                right: -5px;
                border-top-width: 5px;
                border-bottom-width: 5px;
                border-left-width: 5px;
            }
            .social-item:active .social-icon-circle {
                transform: scale(1.08);
            }
            .social-item:active .social-label {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
                transition-duration: 0.15s;
            }
        }

        /* ========== 超小屏幕 ========== */
        @media (max-width: 380px) {
            .social-float-bar {
                --bar-right-offset: 3px;
                --bar-padding: 5px;
                --bar-gap: 4px;
                border-radius: 20px;
            }
            .social-icon-circle {
                --icon-size: 34px;
            }
            .social-icon-circle svg {
                width: 16px;
                height: 16px;
            }
            .social-label {
                right: calc(34px + 6px);
                font-size: 10px;
                padding: 5px 8px;
                border-radius: 14px;
            }
            .social-label::after {
                right: -4px;
                border-top-width: 4px;
                border-bottom-width: 4px;
                border-left-width: 4px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .social-float-bar,
            .social-item,
            .social-icon-circle,
            .social-label,
            .social-icon-circle svg {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }





/**
 * Editor Styles for LinkedALU Theme
 *
 * @package LinkedALU
 */

/* Editor Typography */
.wp-block {
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--color-on-surface, #1a1c1e);
}

/* Headings in editor */
.wp-block h1,
.wp-block h2,
.wp-block h3,
.wp-block h4,
.wp-block h5,
.wp-block h6 {
    font-family: var(--font-headline, 'Manrope', sans-serif);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-on-surface, #1a1c1e);
}

.wp-block h1 { font-size: 2.5rem; }
.wp-block h2 { font-size: 2rem; }
.wp-block h3 { font-size: 1.5rem; }

/* Paragraphs */
.wp-block p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-secondary, #555f6f);
    margin-bottom: 1.5rem;
}

/* Links */
.wp-block a {
    color: var(--color-primary, #001329);
}

/* Buttons in editor */
.wp-block .wp-block-button__link {
    background: var(--color-primary, #001329);
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--font-headline, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
}

/* Images */
.wp-block-image img {
    border-radius: 8px;
    max-width: 100%;
}

/* Quotes */
.wp-block-quote {
    border-left: 4px solid var(--color-primary, #001329);
    padding-left: 24px;
    margin-left: 0;
    color: var(--color-secondary, #555f6f);
    font-style: italic;
}

/* Lists */
.wp-block ul,
.wp-block ol {
    padding-left: 24px;
    color: var(--color-secondary, #555f6f);
}

.wp-block li {
    margin-bottom: 8px;
}

/* Cover */
.wp-block-cover {
    border-radius: 8px;
    overflow: hidden;
}

/* Columns */
.wp-block-columns {
    gap: 32px;
}

/* Separator */
.wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-outline-variant, #c3c6cf);
    margin: 48px 0;
}

/* Code */
.wp-block-code {
    background: var(--color-surface-container-low, #f4f3f6);
    border-radius: 4px;
    padding: 16px;
    font-size: 0.875rem;
}

/* Table */
.wp-block-table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table td,
.wp-block-table th {
    border: 1px solid var(--color-outline-variant, #c3c6cf);
    padding: 12px;
}