/*
Theme Name: Moonit Flex
Theme URI: https://moonit.cn
Author: Moonit
Description: 深蓝+电光青配色的科技感IT服务网站主题，所有内容、菜单均可在WordPress后台自由编辑。
Version: 1.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moonit-flex
*/

:root{
  --bg: #f5f7fa;
  --bg-soft: #eef2f7;
  --card: #ffffff;
  --navy: #0b1f3a;
  --navy-light: #14315c;
  --accent: #2563eb;       /* 电光蓝 */
  --accent-dark: #1d4ed8;
  --highlight: #22d3ee;    /* 青色点缀 */
  --text: #1f2937;
  --muted: #6b7280;
  --dark: #0b1f3a;
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.8;
  margin: 0;
}
a { color: var(--accent); }
img { max-width: 100%; height: auto; }

.container,
.entry-content > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.container { padding: 0 24px; }

/* ===== Header ===== */
.site-header {
  background: var(--navy);
  padding: 18px 0;
}
.site-header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.site-title { font-size: 22px; font-weight: bold; color: #fff; letter-spacing: .5px; }
.site-title a { color: inherit; text-decoration: none; }
.site-description { font-size: 13px; color: #9fb3d1; }
.main-nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a { color: #d6e2f5; font-size: 15px; text-decoration: none; transition: color .2s ease; }
.main-nav a:hover { color: var(--highlight); }

/* ===== Generic content wrapper ===== */
.entry-content {
  padding: 60px 24px;
}
.entry-content h1 { font-size: 32px; color: var(--dark); margin-top: 0; }
.entry-content h2 { font-size: 26px; color: var(--dark); margin-top: 1.4em; }
.entry-content h3 { font-size: 19px; color: var(--dark); }
.entry-content p { margin: 0 0 1em; }

/* ===== Reusable components ===== */

/* Hero section */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  padding: 80px 24px;
  text-align: center;
  border-radius: 16px;
}
.hero h1 { font-size: 34px; margin-bottom: 18px; line-height: 1.6; color: #fff; }
.hero h1 span { color: var(--highlight); }
.hero p { font-size: 16px; max-width: 700px; margin: 0 auto 30px; color: #c3d1e8; }

/* Button */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 14px 36px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.btn:hover { background: var(--accent-dark); transform: translateY(-2px); color: #fff; }

/* Section title */
.section-title { text-align: center; font-size: 28px; margin-bottom: 40px; color: var(--dark); }
.section-title span { display: block; font-size: 14px; color: var(--muted); margin-top: 8px; font-weight: normal; }

/* Card grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 24px 0; }
.card {
  background: var(--card);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 18px rgba(11, 31, 58, .06);
  border-top: 3px solid var(--accent);
}
.card-icon {
  font-size: 28px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  border-radius: 10px;
  margin-bottom: 14px;
}
.card h3 { margin-bottom: 10px; }
.card p strong { color: var(--accent-dark); }

/* Comparison table */
.table-wrapper { overflow-x: auto; border-radius: 12px; background: var(--card); box-shadow: 0 4px 18px rgba(11,31,58,.06); margin: 24px 0; }
.table-wrapper table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrapper th, .table-wrapper td { padding: 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bg-soft); }
.table-wrapper th { background: var(--navy); color: #fff; }
.highlight-box {
  background: #e0f2fe;
  color: var(--accent-dark);
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* Callout box */
.ad-box {
  background: var(--card);
  border-left: 4px solid var(--highlight);
  padding: 22px;
  margin: 24px 0;
  border-radius: 10px;
  font-size: 14px;
}

/* Soft section background */
.section-soft { background: var(--bg-soft); padding: 50px 24px; border-radius: 16px; margin: 24px auto; }

/* ===== Footer ===== */
.site-footer {
  background: var(--navy);
  color: #c3d1e8;
  padding: 36px 24px;
  margin-top: 40px;
}
.footer-widgets {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  font-size: 14px;
}
.footer-widgets h4 { color: #fff; }
.footer-widgets a { color: #9fb3d1; }
.footer-bottom {
  text-align: center;
  font-size: 13px;
  color: #7e93b8;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .main-nav ul { gap: 14px; }
  .hero h1 { font-size: 24px; }
  .section-title { font-size: 22px; }
}

/* ===== 右下角悬浮咨询按钮 ===== */
.float-contact {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  text-align: center;
}
.float-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 22px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11,31,58,.25);
  transition: background .2s ease;
}
.float-btn:hover { background: var(--accent-dark); }

.float-qr {
  display: none;
  position: absolute;
  bottom: 70px;
  right: 0;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  width: 180px;
}
.float-qr.show { display: block; }
.float-qr img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
}
.float-qr p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 480px) {
  .float-contact { right: 14px; bottom: 14px; }
  .float-qr { width: 150px; }
}