/*
Theme Name: 灵思绘梦小程序
Theme URI: https://www.minddraw.cn
Author: the 飞飞
Author URI: https://www.minddraw.cn
Description: 灵思绘梦（https://www.minddraw.cn）。
Version: 1.1.5
Requires PHP: 7.4
*/

/* 重置默认边距和填充 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 包含边框和内边距在元素宽度/高度内 */
}

body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden; /* 防止滚动条出现 */
    font-family: Arial, sans-serif; /* 设置默认字体 */
}

/* 全屏背景容器 */
.full-bg-container {
    position: fixed; /* 固定定位，相对于视口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 将背景置于内容下方 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-position: center center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
}

/* 内容区域 - 居中放置二维码等 */
.content-center {
    position: relative; /* 相对定位，作为子元素的定位基准 */
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 使用视口高度 */
    text-align: center; /* 文本居中 */
    z-index: 9; /* 确保内容在背景之上 */
}

/* 标题样式 */
.header-title {
    color: white; /* 白色文字 */
    font-size: 2em; /* 字体大小 */
    margin-bottom: 20px; /* 下边距 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 文字阴影增加可读性 */
    z-index: 10; /* 确保标题在二维码之上 */
}

/* 二维码样式 */
.qr-code-image {
    max-width: 200px; /* 最大宽度 */
    max-height: 200px; /* 最大高度 */
    width: auto; /* 保持宽高比 */
    height: auto; /* 保持宽高比 */
    border: 5px solid white; /* 白色边框 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 阴影效果 */
    background-color: white; /* 确保二维码在透明背景上清晰可见 */
    margin-bottom: 20px; /* 与下方按钮留出间距 */
}

/* 官方网站按钮样式 */
.official-site-button {
    margin-top: 20px; /* 与上方元素留出间距 */
    padding: 12px 24px; /* 内边距 */
    background-color: #0073aa; /* WordPress 蓝色 */
    color: white; /* 文字颜色 */
    text-decoration: none; /* 去除下划线 */
    font-size: 1.2em; /* 字体大小 */
    border-radius: 5px; /* 圆角 */
    transition: background-color 0.3s ease; /* 背景色过渡效果 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 阴影效果 */
}

.official-site-button:hover {
    background-color: #005a87; /* 悬停时更深的颜色 */
}