/* wp-extra.css — สไตล์เฉพาะฝั่ง WordPress (ไม่มีใน preview) */

/* ── หน้าที่สร้างด้วย Elementor: ปล่อยเต็มความกว้าง ──
   ธีมบีบเนื้อหาไว้ 760px แต่ Elementor จัด layout เอง (posts grid หลายคอลัมน์)
   ถ้าโดนบีบ การ์ดจะแคบจนตัวอักษรตกทีละตัว → เอา max-width/side-padding ออกเฉพาะหน้า Elementor */
body.elementor-page #article-outer {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* หน้า Elementor ไม่ต้องแสดงหัวข้อ/typography ของธีมซ้อน (Elementor มีของตัวเอง) */
body.elementor-page #article-outer > .art-title { display: none; }

/* ปุ่มที่เปลี่ยนจาก <button> เป็น <a> — คงหน้าตาเดิม */
a.price-cta,
a.product-btn {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

/* badge หมวดหมู่: slug จริงบนเว็บคือ microsoft-onedrive */
.cat-microsoft-onedrive { background: rgba(97,206,112,0.15); color: #27ae60; }

/* ── หน้ารายการบทความ (blog / หมวดหมู่ / ค้นหา) ── */
#archive-outer {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) 24px 100px;
}
#archive-outer .post-list {
  background: rgba(8, 8, 12, 0.72);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius);
  overflow: hidden;
}
#archive-outer .post-list-head {
  background: rgba(255,255,255,0.04);
  border-color: var(--hero-border);
}
#archive-outer .post-list-head span { color: var(--hero-muted); }
#archive-outer .post-row { background: transparent; border-color: rgba(110,193,228,0.1); }
#archive-outer .post-row:hover { background: rgba(255,255,255,0.04); }
#archive-outer .post-title { color: var(--hero-muted); }
#archive-outer .post-row:hover .post-title { color: var(--hero-text); }
#archive-outer .post-date { color: rgba(110,193,228,0.35); }
#archive-outer .posts-header { padding: 0 0 18px; }
#archive-outer .posts-header-label { color: var(--hero-text); font-size: 1.15rem; font-weight: 700; }

/* Pagination */
.ms-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.ms-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1.5px solid var(--hero-border);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hero-muted);
  text-decoration: none;
  transition: 0.15s;
}
.ms-pagination a.page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.ms-pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #111; }

.ms-empty {
  color: var(--hero-muted);
  padding: 24px 0;
}

/* ── เนื้อหาที่ฝัง style ตัวเอง (การ์ดขาว) — อย่าให้ typography ธีมมืดไปทับ ── */
.art-body > div[style] { color: initial; }
.art-body img { max-width: 100%; height: auto; }

/* ── รูปพื้นขาว (ไม่ใช่ PNG โปร่ง) บนธีมมืด: ใส่กรอบขาวให้ทุกรูป ดูเป็นเฟรมตั้งใจ ── */
.art-body img {
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
/* รูปที่อยู่ในการ์ดขาวฝังในเนื้อหาอยู่แล้ว ไม่ต้องซ้อนกรอบอีก */
.art-body div[style] img {
  background: transparent;
  padding: 0;
  border-radius: 8px;
  box-shadow: none;
}

/* Gutenberg / classic alignment */
.art-body .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.art-body .alignleft { float: left; margin: 0 18px 12px 0; }
.art-body .alignright { float: right; margin: 0 0 12px 18px; }
.art-body .wp-caption { max-width: 100%; }
.art-body .wp-caption-text { font-size: 0.82rem; color: var(--hero-muted); text-align: center; }

/* ── WooCommerce: เอาแค่อ่านออกบนธีมมืด (หน้าเก่าที่ยังติด SEO) ── */
.woocommerce-page .art-body,
.art-body .woocommerce {
  color: var(--hero-muted);
}
.art-body .woocommerce h1,
.art-body .woocommerce h2,
.art-body .woocommerce h3 { color: var(--hero-text); }
.art-body .woocommerce a { color: var(--primary); }
.art-body input[type="text"],
.art-body input[type="email"],
.art-body input[type="tel"],
.art-body input[type="password"],
.art-body input[type="search"],
.art-body input[type="number"],
.art-body select,
.art-body textarea {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-sm);
  color: var(--hero-text);
  padding: 10px 14px;
  font-family: var(--font);
  max-width: 100%;
}
.art-body button,
.art-body input[type="submit"],
.art-body .button {
  background: var(--primary);
  color: #111;
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.art-body .woocommerce-message,
.art-body .woocommerce-info,
.art-body .woocommerce-error {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hero-border);
  border-radius: var(--radius-sm);
  color: var(--hero-muted);
  padding: 14px 18px;
}