/* SAR Mission Coordinator — สไตล์ชีตของระบบที่เขียนขึ้นเอง (ไม่ใช้ WordPress/News Portal Pro)
   จำลองโทนสี/โครงหน้าจากเว็บเดิม: กรอบกว้าง 1200px, สีหลัก navy, ฟอนต์ Sarabun */

:root{
  --theme-color: #14395c;
  --theme-color-dark: #0d2740;
  --text-color: #333;
  --border-color: #e5e5e5;
  --bg-light: #f7f8fa;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "sarabun", "Segoe UI", sans-serif;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.65;
  background: #fff;
}
a{ color: var(--theme-color); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4{ font-family: "sarabun", sans-serif; line-height: 1.3; color: var(--theme-color-dark); }

/* ฟอร์มคอนโทรล (button/input/select/textarea) ไม่รับ font-family จาก body มาเองตามค่าเริ่มต้นของเบราว์เซอร์ ต้องสั่งตรง ๆ */
button, input, select, textarea{ font-family: inherit; }

.wrap{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header (มีรูปพื้นหลัง เช่นเดียวกับต้นฉบับที่ตั้งค่าผ่าน Customizer) ---------- */
.site-header{
  padding: 14px 0 9px; background-size: cover; background-position: center top; background-repeat: no-repeat;
}
.site-header.has-bg-image{ min-height: 170px; }
.topbar-inner{ display:flex; justify-content:flex-end; padding: 4px 16px 10px; font-size:13px; }
.topbar-lang a{ color: var(--theme-color-dark); padding: 2px 8px; }
.topbar-lang a.is-active{ background: var(--bg-light); color: var(--theme-color); font-weight:600; border-radius:3px; }
.site-header.has-bg-image .topbar-lang a{ color:#fff; }
.site-header.has-bg-image .topbar-lang a.is-active{ background:#fff; color: var(--theme-color); }
.header-inner{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.site-logo img{ max-height:115px; width:auto; }

/* ---------- Nav ---------- */
.main-nav{ background: var(--theme-color); }
.main-nav .wrap{ position:relative; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:22px; padding:12px 0; cursor:pointer; }
.main-menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; }
.main-menu > li{ position:relative; }
.main-menu > li > a{
  display:flex; align-items:center; height:100%; color:#fff; padding:14px 18px; font-size:15px; white-space:nowrap;
}
.main-menu > li > a:hover, .main-menu > li.is-open > a{ background: var(--theme-color-dark); text-decoration:none; }
.main-menu > li.is-current > a{ background: var(--theme-color-dark); }
.menu-home > a{
  min-width:64px; padding:0 18px; background: var(--theme-color-dark); justify-content:center;
}
.menu-home svg{ display:block; }
.menu-home > a:hover{ background: var(--theme-color); }
.main-menu .sub-menu{
  list-style:none; margin:0; padding:6px 0; position:absolute; left:0; top:100%;
  background: var(--theme-color-dark); min-width:260px; box-shadow:0 8px 20px rgba(0,0,0,.3); z-index:20; display:none;
}
.main-menu li:hover > .sub-menu,
.main-menu li:focus-within > .sub-menu{ display:block; }
.main-menu .sub-menu li{ position:relative; }
.main-menu .sub-menu a{ display:block; color:#fff; padding:9px 16px; font-size:14px; }
.main-menu .sub-menu a:hover{ background: rgba(255,255,255,.12); text-decoration:none; }
.main-menu .sub-menu li.is-current > a{ background: rgba(255,255,255,.18); font-weight:600; }
.main-menu .sub-menu .sub-menu{ left:100%; top:0; background: var(--theme-color-dark); }

/* ---------- Home banner ---------- */
.home-banner{ position:relative; margin-bottom: 30px; }
.home-banner img{ width:100%; }

/* ---------- Home middle: main + aside ---------- */
.home-middle{ display:flex; gap:30px; align-items:flex-start; padding: 20px 0 30px; }
.home-main{ flex: 1 1 68%; min-width:0; }
.home-aside{ flex: 1 1 30%; min-width:260px; }
.empty-note{ color:#888; }

/* ---------- Post list: การ์ดใหญ่ (hero) + แถวแนวนอนที่เหลือ (จำลอง layout3 ของต้นฉบับ) ---------- */
.post-hero{ position:relative; margin-bottom:20px; border-radius:4px; overflow:hidden; }
.post-hero-thumb{ position:relative; display:block; }
.post-hero-thumb img{ width:100%; aspect-ratio: 16/9; object-fit:cover; }
.post-hero-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 40px 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  color:#fff;
}
.post-hero-caption h2{ color:#fff; font-size:19px; margin:0 0 6px; line-height:1.4; }
.post-hero-caption .post-meta{ color:#e2e8f0; }

.post-row{ display:flex; gap:16px; padding: 16px 0; border-bottom:1px solid var(--border-color); }
.post-row:first-of-type{ border-top:1px solid var(--border-color); }
.post-row-thumb{ flex:0 0 150px; }
.post-row-thumb img{ width:150px; height:105px; object-fit:cover; border-radius:3px; }
.post-row-body{ flex:1; min-width:0; }
.post-row-body h3{ margin:0 0 6px; font-size:16px; line-height:1.4; }
.post-meta{ color:#888; font-size:13px; margin: 0 0 6px; }
.post-excerpt{ color:#555; font-size:14px; margin:0; }

/* ---------- Widgets (aside) — ตัวหนังสือล้วน มีเส้นใต้หัวข้อ ไม่มีกล่อง (ตามต้นฉบับ) ---------- */
.widget-plain{ margin-bottom:26px; }
.widget-plain .widget-title{
  margin:0 0 14px; font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  color: var(--theme-color-dark); border-bottom:2px solid var(--theme-color); padding-bottom:10px;
}
.widget-plain ul{ list-style:none; margin:0; padding:0; }
.widget-plain > ul > li{ padding:8px 0; border-bottom:1px dashed var(--border-color); font-size:14px; }
.widget-plain > ul > li:last-child{ border-bottom:0; }
.widget-quicklinks .widget-content ul{ list-style:disc; margin:0; padding-left:18px; }
.widget-quicklinks .widget-content li{ padding:5px 0; font-size:14px; border-bottom:0; }
.widget-quicklinks img{ margin-top:8px; }
.widget-recent li{ display:flex; align-items:center; gap:10px; }
.widget-recent-thumb{ flex:0 0 56px; }
.widget-recent-thumb img{ width:56px; height:42px; object-fit:cover; border-radius:3px; }
.widget-recent-title{ font-size:13px; line-height:1.4; color: var(--text-color); }

/* ---------- Home bottom (video) ---------- */
.home-bottom{ padding-bottom:30px; }
.video-embed{ position:relative; padding-top:56.25%; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Single page/post ---------- */
.single-post, .single-page{ padding: 30px 0; }
.entry-title{ font-size:26px; margin: 0 0 12px; }
.entry-thumb{ margin-bottom: 20px; }
.entry-content{ font-size:16px; line-height:1.8; }
.entry-content p{ text-align: justify; text-align-last: left; }
.entry-content img{ margin: 12px auto; }
.entry-content table{ width:100%; border-collapse: collapse; }
.entry-content td, .entry-content th{ border:1px solid var(--border-color); padding:8px; }

/* ---------- แกลเลอรีในเนื้อหาข่าว: รูปใหญ่ + แถบ thumbnail ให้คลิกเปลี่ยนรูป (แปลงจาก shortcode [gallery] เดิมของ WordPress) ---------- */
.post-carousel{ margin:20px 0; }
.carousel-main{ position:relative; background:#000; border-radius:6px; overflow:hidden; }
.carousel-main-link{ display:block; }
.carousel-main-img{
  width:100%; height:440px; object-fit:contain; background:#000; margin:0; display:block;
}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(0,0,0,.45); color:#fff; border:0; width:40px; height:40px; border-radius:50%;
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.carousel-arrow:hover{ background:rgba(0,0,0,.7); }
.carousel-prev{ left:12px; }
.carousel-next{ right:12px; }

.carousel-thumbs{
  display:flex; gap:8px; margin-top:8px; overflow-x:auto; padding-bottom:4px;
}
.carousel-thumb{
  flex:0 0 auto; width:84px; height:64px; padding:0; border-radius:4px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; opacity:.6; background:#000; transition:opacity .15s, border-color .15s;
}
.carousel-thumb img{ width:100%; height:100%; object-fit:cover; margin:0; display:block; }
.carousel-thumb:hover{ opacity:.9; }
.carousel-thumb.is-active{ opacity:1; border-color: var(--theme-color); }

@media (max-width: 700px){
  .carousel-main-img{ height:260px; }
  .carousel-thumb{ width:64px; height:48px; }
}

.archive-title{ padding: 24px 0 10px; }
.not-found{ text-align:center; padding: 80px 0; }
.not-found h1{ font-size:64px; color: var(--theme-color); margin:0; }

.pagination{ display:flex; gap:8px; padding: 20px 0 40px; }
.pagination a{ border:1px solid var(--border-color); padding:6px 12px; border-radius:4px; }
.pagination a.is-active{ background: var(--theme-color); color:#fff; border-color: var(--theme-color); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--theme-color-dark); color:#cfd8e3; padding: 20px 0; margin-top: 20px; text-align:center; font-size:14px; }
.site-footer a{ color:#fff; }

/* ---------- แถบแจ้งเตือนคุกกี้ (PDPA) ---------- */
.cookie-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:#fff; border-top:1px solid var(--border-color); box-shadow:0 -4px 16px rgba(0,0,0,.12);
}
.cookie-consent-inner{
  max-width:1200px; margin:0 auto; padding:16px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cookie-consent-text{ flex:1; min-width:260px; margin:0; font-size:14px; color:#444; line-height:1.6; }
.cookie-consent-text a{ color: var(--theme-color); text-decoration:underline; }
.cookie-consent-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.cookie-consent-x{
  background:none; border:0; font-size:22px; line-height:1; color:#888; cursor:pointer; padding:0 4px;
}
.cookie-consent-x:hover{ color:#333; }
@media (max-width: 600px){
  .cookie-consent-inner{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-consent-actions{ justify-content:center; }
}

/* ---------- ปุ่มกลับขึ้นด้านบน ---------- */
.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:150;
  width:44px; height:44px; border-radius:50%; border:0;
  background: var(--theme-color); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s, background .2s;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--theme-color-dark); }
@media (max-width: 700px){
  .back-to-top{ right:14px; bottom:14px; width:40px; height:40px; }
}

/* ---------- ป๊อปอัพหน้าแรก ---------- */
.home-popup-backdrop{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.home-popup-box{
  position:relative; background:#fff; border-radius:6px; padding:5px;
  width:auto; min-width:300px; max-width:92vw; /* min-width คือค่าสำรองกรณีไม่มีรูป, ถ้ามีรูป JS จะบังคับความกว้างให้เท่ารูปจริง */
  max-height:90vh; overflow-y:auto; overflow-x:hidden; box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.home-popup-close{
  position:absolute; top:10px; right:10px; z-index:2; width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.65); color:#fff; border:0; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.home-popup-close:hover{ background:rgba(0,0,0,.85); }
.home-popup-image{ max-width:100%; line-height:0; }
.home-popup-image img{
  display:block; width:auto; max-width:100%; max-height:80vh; margin:0 auto;
  border-radius:3px;
}
.home-popup-image a{ display:block; }
.home-popup-body{ padding:6px 4px 10px; text-align:center; }
.home-popup-title, .home-popup-text{ overflow-wrap: anywhere; }
.home-popup-title{ margin:0 0 6px; font-size:18px; color: var(--theme-color-dark); }
.home-popup-text{ margin:0; font-size:14px; line-height:1.6; color:#444; }
.home-popup-text p{ margin:0 0 6px; }
.home-popup-text p:last-child{ margin-bottom:0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .home-middle{ flex-direction:column; }
}
/* เมนูหลักแน่นเกินจะพอดีแถวเดียวตั้งแต่แท็บเล็ตลงมา (768px) เลยขยับ breakpoint ปุ่มแฮมเบอร์เกอร์ให้ครอบคลุมกว้างขึ้น
   แยกออกจาก media query ด้านล่างที่จัดการเรื่องอื่น (ยังคงพอดีที่ 700px) */
@media (max-width: 960px){
  .nav-toggle{ display:block; }
  .main-menu{ display:none; flex-direction:column; width:100%; }
  .main-menu.is-open{ display:flex; }
  .main-menu .sub-menu{ position:static; box-shadow:none; display:block; }
}
@media (max-width: 700px){
  .header-inner{ flex-direction:column; text-align:center; }
  .post-row{ flex-direction:column; }
  .post-row-thumb, .post-row-thumb img{ width:100%; }
}