/*
Theme Name: ALEK-TECH Theme
Theme URI: https://alektech.com
Author: ALEK-TECH Engineering
Author URI: https://alektech.com
Description: ธีมกำหนดเองของ ALEK-TECH ENGINEERING สร้างขึ้นใหม่ทั้งหมด ไม่ได้อิงจากธีมอื่น (ไม่ใช่ Child Theme)
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: alektech
*/

/* ============ Design tokens ============ */
:root{
  --red:        #D81E24; /* แดงหลัก */
  --red-hover:  #A2151A; /* แดงเข้ม (hover) */
  --red-tint:   #FBECED; /* แดงอ่อน (ป้าย) */
  --red-tint-border: #F3D9DB;
  --ink:        #14100F; /* ดำหมึก */
  --warm-white: #F7F4F3; /* ขาวอมอุ่น */
  --white:      #FFFFFF;
  --border:     #EDE8E5;
  --text-muted: #6B6560;
  --text-faint: #8B8480;
  --max-width:  1280px;
}

/* ============ Reset / base ============ */
*, *::before, *::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--warm-white);
  color:var(--ink);
  font-family:'IBM Plex Sans Thai', sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Noto Serif Thai', serif;
  margin:0;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a.link-red{ color:var(--red); }
a.link-red:hover{ color:var(--red-hover); }

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 40px;
}
@media (max-width:600px){
  .container{ padding:0 20px; }
}

/* ============ Buttons ============ */
.btn-primary{
  background:var(--red); color:#fff; border:none;
  padding:14px 28px; border-radius:4px; font-size:15px; font-weight:600;
  cursor:pointer; display:inline-block; text-decoration:none;
}
.btn-primary:hover{ background:var(--red-hover); }

.btn-secondary{
  background:transparent; color:var(--ink); border:1.5px solid var(--ink);
  padding:13px 27px; border-radius:4px; font-size:15px; font-weight:600;
  cursor:pointer; display:inline-block; text-decoration:none;
}
.btn-secondary:hover{ border-color:var(--red); color:var(--red); }

/* ============ Typography helpers ============ */
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:2px;
  color:var(--red); text-transform:uppercase;
}

/* ============ Placeholder image box (ใช้ระหว่างยังไม่มีรูปจริง) ============ */
.ph{
  background-image:repeating-linear-gradient(45deg,#E2DCD8 0,#E2DCD8 1px,#F2EEEC 1px,#F2EEEC 14px);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); font-size:13px; text-align:center;
  border:1px solid #E2DCD8; padding:16px; border-radius:8px;
}

/* ============ Header ============ */
.site-topbar{ background:var(--ink); color:#EDE8E5; font-size:13px; }
.site-topbar .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding-top:8px; padding-bottom:8px; }

.site-header{ background:var(--white); border-bottom:1px solid var(--border); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding-top:18px; padding-bottom:18px; }
.site-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-logo .mark{ width:38px; height:38px; background:var(--red); border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Noto Serif Thai',serif; font-weight:700; font-size:18px; }
.site-logo .name{ font-family:'Noto Serif Thai',serif; font-weight:700; font-size:19px; }

.primary-nav ul{
	list-style:none; display:flex; align-items:center; flex-wrap:wrap;
	row-gap:8px; column-gap:20px; margin:0; padding:0;
	font-size:14px; font-weight:500;
}
.primary-nav a{ white-space:nowrap; }
.primary-nav a:hover{ color:var(--red); }
.primary-nav li{ position:relative; }

/* Dropdown: เมนูที่มีเมนูลูก (สร้างโดยเลื่อนย่อหน้าใน Appearance > Menus) จะกางลงมาตอน hover */
.primary-nav .sub-menu{
	display:none;
	position:absolute; top:100%; left:0;
	background:#fff; border:1px solid var(--border); border-radius:6px;
	box-shadow:0 8px 24px rgba(0,0,0,0.08);
	min-width:200px; padding:8px 0; margin:0; list-style:none;
	z-index:50;
}
.primary-nav li:hover > .sub-menu{ display:block; }
.primary-nav .sub-menu li{ width:100%; }
.primary-nav .sub-menu a{ display:block; padding:10px 18px; white-space:nowrap; }
.primary-nav .sub-menu a:hover{ background:var(--red-tint); }
.primary-nav li.menu-item-has-children > a::after{ content:" ▾"; font-size:10px; }

/* กันไม่ให้เมนูยาวดันหน้าล้นแนวนอน ระหว่างที่ยังไม่ได้ทำ Mega Menu จริง */
.site-header .container{ flex-wrap:wrap; row-gap:12px; }
body{ overflow-x:hidden; }

/* ============ Footer ============ */
.site-footer{ background:var(--white); padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--border); }
.footer-grid h4{ font-family:'IBM Plex Sans Thai',sans-serif; font-size:14px; font-weight:700; margin:0 0 14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--text-muted); }
.footer-grid a:hover{ color:var(--red); }
.footer-bottom{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-faint); flex-wrap:wrap; gap:8px; padding:20px 0; }

/* Company Profile flipbook thumbnail (หน้าเกี่ยวกับเรา) */
.company-profile-thumb{ text-align:center; }
.company-profile-thumb ._df_thumb,
.company-profile-thumb .df-book-wrapper,
.company-profile-thumb .df-book-cover{
	width:350px !important;
	height:auto !important;
	margin:0 auto !important;
}
.company-profile-thumb .df-book-cover img{
	width:100% !important;
	height:auto !important;
}

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .primary-nav{ display:none; } /* มือถือ: สลับไปใช้เมนูแบบ accordion ภายหลัง */
}

/* ============ เนื้อหาบทความ / รายละเอียดสินค้า ============ */
.entry-content{ font-size:17px; line-height:1.8; }
.entry-content h2{ font-size:24px; margin:44px 0 14px; }
.entry-content h3{ font-size:19px; margin:28px 0 10px; }
.entry-content p{ margin:0 0 16px; }
.entry-content ul, .entry-content ol{ padding-left:24px; margin:0 0 22px; }
.entry-content li{ margin-bottom:8px; }
.entry-content table{ border-collapse:collapse; margin:0 0 28px; font-size:15px; }
.entry-content a{ color:var(--red); }
.entry-content a:hover{ color:var(--red-hover); }
.entry-content img{ border-radius:6px; }

/* ============ หน้าสินค้า ============ */
.breadcrumb{ font-size:13px; color:var(--text-faint); margin-bottom:28px; }
.breadcrumb a:hover{ color:var(--red); }
.breadcrumb span{ color:var(--ink); }

.product-layout{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:start; }
.pg-main{ display:flex; align-items:center; justify-content:center; height:520px; background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.pg-main img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pg-thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.pg-thumb{ width:72px; height:72px; border:2px solid var(--border); border-radius:6px; overflow:hidden; background:#fff; }
.pg-thumb img{ width:100%; height:100%; object-fit:cover; }
.pg-thumb.is-active{ border-color:var(--red); }
.product-cta{ margin-top:28px; padding:22px; background:var(--red-tint); border:1px solid var(--red-tint-border); border-radius:8px; }

/* การ์ดสินค้า / การ์ดกลุ่มสินค้า */
.card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.product-card{ display:block; background:#fff; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.product-card:hover, .group-card:hover{ border-color:var(--red); }
.product-card-img{ aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
.product-card-img img{ width:100%; height:100%; object-fit:contain; }
.product-card-body{ padding:18px 20px 22px; }
.product-card-body h3{ font-size:17px; line-height:1.4; margin-top:6px; }
.group-card{ display:block; background:#fff; border:1px solid var(--border); border-radius:8px; padding:28px; }

/* ปุ่มกรองหมวดย่อย */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.chip{ padding:8px 16px; border:1px solid var(--border); border-radius:999px; font-size:14px; background:#fff; }
a.chip:hover{ border-color:var(--red); color:var(--red); }
.chip.is-active{ background:var(--red); border-color:var(--red); color:#fff; }

/* แบ่งหน้า */
.screen-reader-text{ position:absolute; left:-9999px; }
.nav-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:44px; }
.page-numbers{ padding:8px 14px; border:1px solid var(--border); border-radius:4px; background:#fff; font-size:14px; }
.page-numbers.current{ background:var(--red); border-color:var(--red); color:#fff; }
a.page-numbers:hover{ border-color:var(--red); color:var(--red); }

@media (max-width:900px){
	.product-layout{ grid-template-columns:1fr; gap:32px; }
	.pg-main{ height:420px; }
	.card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
	.card-grid{ grid-template-columns:1fr; }
	.pg-main{ height:340px; }
	.entry-content td, .entry-content th{ padding:6px !important; font-size:13px; }
}

/* รูปที่แทรกในเนื้อหา: .content-img = ภาพแนวนอน, .content-img-portrait = ภาพแนวตั้ง */
.entry-content .content-img{ display:block; max-width:720px; width:100%; height:auto; margin:20px auto 28px; border:1px solid var(--border); border-radius:6px; }
.entry-content .content-img-portrait{ display:block; max-width:480px; width:100%; height:auto; margin:20px auto 28px; border:1px solid var(--border); border-radius:6px; }