/* =======================================================
   1. GLOBAL STYLE & VARIABLES
======================================================= */
:root {
  --primary-orange: #d9531e;
  --primary-hover: #b84114;
  --dark-bg: #181a1b;
  --light-bg: #f8f9fa;
  --paper: #ffffff;
  --ink: #333333;
  --text-muted: #6c757d;
  --border-light: #dee2e6;
}

body {
  font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
  background-color: var(--light-bg);
  color: var(--ink);
}

body.about-page {
  background: var(--paper);
  color: var(--ink);
}

/* =======================================================
   BUTTONS
======================================================= */
.btn-orange,
.btn-toolsmith {
  background-color: var(--primary-orange);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px;
}

.btn-orange:hover,
.btn-toolsmith:hover {
  background-color: var(--primary-hover);
  color: white;
}
/* =======================================================
   SECTION HEADER
======================================================= */

.section-header{
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}

.section-label{
  display:inline-block;
  color:var(--primary-orange);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.section-header h2{
  font-size:2rem;
  font-weight:700;
  margin-bottom:15px;
  color:#222;
}

.section-header p{
  color:#666;
  line-height:1.8;
  margin-bottom:0;
}
/* =======================================================
   FOOTER ENHANCEMENT
======================================================= */

.site-footer {
  background: #0d1117; /* โทนดำเข้มที่เข้าได้ทั้ง Dark & Light Page */
  color: #e6edf3;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  color: #ffffff;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a, 
.footer-social {
  color: #8b949e;
  text-decoration: none;
  font-size: 0.93rem;
  transition: all 0.25s ease;
  display: inline-block;
}

.footer-links a:hover, 
.footer-social:hover {
  color: var(--primary-orange);
  transform: translateX(4px); /* เพิ่มเอฟเฟกต์ขยับเล็กน้อยเวลาม้วนเมาส์โดน */
}

.footer-divider {
  border-color: rgba(255, 255, 255, 0.1);
}

.footer-quote {
  color: #a3adc2;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

.text-primary-orange {
  color: var(--primary-orange);
}

/* ปุ่ม Facebook ใน Footer ให้สมดุลขึ้น */
.site-footer .btn-toolsmith {
  background-color: var(--primary-orange);
  color: #ffffff;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(217, 83, 30, 0.2);
}

.site-footer .btn-toolsmith:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(217, 83, 30, 0.35);
}
/* บังคับให้มีแถบ Scrollbar สำรองไว้เสมอ จะได้ไม่เกิดอาการ Layout Shift สลับไปมา */
html {
  overflow-y: scroll;
}
/* =======================================================
   FOOTER STATUS
======================================================= */

.footer-status {
  font-size: 0.68rem;
  margin-left: 5px;
  vertical-align: middle;
}

.status-construction {
  color: #f59e0b;
}

.status-coming {
  color: #9ca3af;
}

.footer-disabled {
  cursor: not-allowed;
}

.footer-disabled:hover {
  opacity: 0.85;
}