/* =============================================
   1. 全局重置与基础设置
   ============================================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    line-height: 1.6; 
    margin: 0; 
    color: #333; 
    background-color: #fff;
}

/* =============================================
   2. 抬头导航 (Header) - 核心对齐逻辑
   ============================================= */
header { 
    background: #fff; 
    padding: 15px 5%; 
    display: flex; 
    justify-content: space-between; /* 左右分布 */
    align-items: center;           /* 关键：确保左侧内容与右侧导航链接在同一水平线 */
    border-bottom: 3px solid #2e7d32; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Logo 和 公司名的组合容器 */
.logo {
    display: flex;
    align-items: center;           /* 关键：确保图片和公司名垂直居中对齐 */
    gap: 15px; 
}

.logo img { 
    height: 65px;                  /* 保持 Logo 比例 */
    width: auto;
}

/* 公司名称样式 - 调大字号并加粗 */
.company-name {
    font-size: 1.5rem;             /* 字体加大 */
    font-weight: 700;              /* 加粗 */
    color: #2e7d32;
    white-space: nowrap;           /* 禁止换行 */
    line-height: 1;                /* 消除多余行高带来的偏位 */
    letter-spacing: -1px;
}

/* 右侧导航 */
nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

nav a { 
    text-decoration: none; 
    color: #2e7d32; 
    font-weight: bold; 
    font-size: 1.1rem;             /* 稍微加大导航字号保持平衡 */
    transition: color 0.3s;
}

nav a:hover {
    color: #1b5e20;
}

/* =============================================
   3. 首页 Hero 区域与容器
   ============================================= */
.hero { 
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('PEAKAGRO.jpg'); 
    background-size: cover; 
    background-position: center; 
    height: 450px; 
    color: white; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
    padding: 0 10%; 
}

.hero h1 { font-size: 3rem; margin-bottom: 10px; color: #fff; }
.hero p { font-size: 1.5rem; }

.container { padding: 40px 10%; }
h1, h2 { color: #2e7d32; margin-bottom: 15px; }

/* 产品网格布局 */
.product-grid, .grid-box { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
    margin-top: 20px; 
}

.product-card { 
    border: 1px solid #ddd; 
    padding: 15px; 
    border-radius: 8px; 
    text-align: center; 
    background: #f9f9f9; 
    transition: 0.3s;
}

.product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.product-card img { width: 100%; max-height: 250px; object-fit: contain; }

.product-info {
    text-align: left;           /* 文字左对齐，方便阅读详细参数 */
    background: #f4fbf4;        /* 淡淡的绿色背景，增加专业感 */
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
    border-left: 4px solid #2e7d32; /* 左侧绿色竖线，起到强调作用 */
}

.product-info p {
    margin-bottom: 8px;         /* 行间距 */
    font-size: 0.95rem;         /* 字号稍微调小一点，显得精致 */
    color: #444;
}

.product-info strong {
    color: #2e7d32;             /* 将标题文字（Target Crops等）设为品牌绿 */
    display: inline-block;
    min-width: 50px;           /* 确保左侧标题对齐 */
}

/* =============================================
   4. 底部联系方式 (Footer) - 带文字标签
   ============================================= */
.contact-footer { 
    background: #2e7d32; 
    color: white; 
    padding: 40px 10%; 
    margin-top: 50px; 
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 手机端自动换行 */
    gap: 25px;
    margin-top: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-item span {
    font-weight: bold;
    color: #c8e6c9; /* 浅绿色文字标签 */
    font-size: 0.9rem;
}

.contact-item a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 500;
    transition: 0.3s;
}

.contact-item a:hover {
    color: #ffeb3b; /* 悬停变黄色 */
}

/* =============================================
   5. 手机/平板自适应 (Media Queries)
   ============================================= */
@media (max-width: 992px) {
    .company-name { font-size: 1.6rem; }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;    /* 手机端 Logo 在上，导航在下 */
        padding: 15px 5%;
    }

    .logo { margin-bottom: 15px; }

    .company-name {
        font-size: 1.2rem;         /* 缩小公司名防止溢出 */
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    nav a {
        margin: 5px;
        font-size: 0.95rem;
    }

    .hero {
        height: 300px;
        background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('0.jpg'); /* 手机端使用 0.jpg */
    }

    .hero h1 { 
        font-size: 1.8rem;   /* 从 1.8rem 调大到 2.2rem，确保醒目但不过大 */
        margin-bottom: 10px;
    }

    /* --- 修改：手机端副标题字号优化 --- */
    .hero p { 
        font-size: 1.0rem;   /* 从 0.95rem 左右调大到 1.1rem */
        padding: 0 3%;       /* 增加一点内边距，防止文字贴边 */
    }

    .footer-links {
        flex-direction: column;    /* 底部链接垂直排布 */
        gap: 10px;
    }

    .container { padding: 20px 5%; }
}