/* assets/css/styles.css */

/* 基础样式 */
:root {
    --main-bg-color: #f9f9f9;
    --main-font-color: #333;
    --header-bg-color: #A7D3E0;
    --link-color: #2C2C2C;
    --button-bg-color: #5cb85c;
    --button-hover-bg-color: #4cae4c;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    background-image: url('/assets/images/dragon-pattern.png');
    background-repeat: repeat;
    background-size: 150px 150px;
    background-position: center;
}

header {
    background-color: #A7D3E0; /* 主色调 */
    color: #2C2C2C; /* 标题颜色 */
}

/* ---------------------- 
   导航样式 
   ---------------------- */

nav ul {
    list-style-type: none; /* 去掉默认的列表样式 */
    padding: 0; /* 去掉内边距 */
    margin: 0; /* 去掉外边距 */
    display: flex; /* 使用 flexbox 来横排 */
}

nav ul li {
    margin-right: 20px; /* 设置列表项之间的间距 */
}

nav ul li a {
    text-decoration: none; /* 去掉链接的下划线 */
    color: #2C2C2C; /* 链接颜色 */
    transition: color 0.3s ease; /* 平滑过渡效果 */
}

nav ul li a:hover {
    text-decoration: underline; /* 鼠标悬停时添加下划线 */
    color: #007F7F; /* 悬停时链接颜色 */
}

/* 通用按钮样式 */
.button {
    padding: 10px 15px;
    background-color: var(--button-bg-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none; /* 去掉下划线 */
}

.button:hover {
    background-color: var(--button-hover-bg-color);
}

/* 提交按钮 */
.submit-button {
    color: blue; /* 初始文字颜色 */
    font-size: 20px; /* 字体大小 */
    background-color: lightgray; /* 按钮背景色 */
    border: none; /* 去掉默认边框 */
    padding: 10px 20px; /* 内边距 */
    cursor: pointer; /* 鼠标悬浮时显示手型光标 */
    transition: color 0.3s; /* 平滑过渡效果 */
}

.submit-button:hover {
    color: red; /* 鼠标悬浮时文字变为红色 */
}

.allowed-tags {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    background-color: #e9ecef; /* 修改为浅灰色背景 */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
}

/* 后台*/
.admin {
	margin: 20px;
	padding: 20px;
}

.admin table {
    width: 100%;
    border-collapse: collapse;
}
.admin th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.admin middle {
    text-align: center;
}
.admin th {
    background-color: #f2f2f2;
}
.admin tr:hover {
    background-color: #f1f1f1;
}

/* 提交表单样式 */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical; /* 允许用户垂直调整大小 */
    font-size: 14px; /* 设置字体大小 */
}

.form-group input[type="text"] {
    width: 40%;
}

.form-group textarea {
	height: 200px; /* 调整高度以适应更多内容 */
}

.form-group input[type="checkbox"] {
    margin-top: 5px;
}

/* 产品样式，兼顾新闻和龙文化*/
.product, .news-item, .dragon-culture-item {
    border: 1px solid #A7D3E0; /* 边框颜色 */
    padding: 10px;
    background-color: white;
    width: 30%; /* 默认宽度 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: transform 0.3s; /* 平滑动画效果 */
    margin: 10px; /* 添加间距 */
}

.news-item, .dragon-culture-item {
	width: 95%; /* 默认宽度 */
}

.latest-products {
    display: flex;
    flex-wrap: wrap; /* 适应屏幕大小的换行 */
    justify-content: center; /* 居中对齐 */
}

.product-detail {
    padding: 20px; /* 添加内边距 */
    max-width: 800px; /* 限制最大宽度 */
    margin: 0 auto; /* 居中对齐 */
}

.product-image {
    max-width: 100%; /* 确保图像在小屏幕下自适应 */
    height: auto; /* 高度自适应 */
}

.back-button {
    display: inline-block; /* 使链接成为块级元素 */
    margin-top: 20px; /* 添加顶部间距 */
    padding: 10px 15px; /* 添加内边距 */
    background-color: #5cb85c; /* 按钮背景色 */
    color: white; /* 按钮文字颜色 */
    text-decoration: none 去掉下划线 */
    border-radius: 4px; /* 圆角效果 */
}

.back-button:hover {
    background-color: #4cae4c; /* 悬停时的背景颜色 */
}

/* 小屏幕的适配 */
@media (max-width: 768px) {
    .product, .news-item, .dragon-culture-item {
        width: 90%; /* 在小屏幕上，产品展示占满宽度 */
        margin-bottom: 20px; /* 设置底部间距 */
    }

    .admin th:nth-child(5),
    .admin td:nth-child(5) {
        display: none;
    }
}