/*
Theme Name: Sikarin (Twenty Twenty-Four child)
Theme URI: https://sikarinyoo-kong.com/
Description: ธีมลูกของ Twenty Twenty-Four สำหรับ sikarinyoo-kong.com — โทนน้ำเงินเข้มวิชาการ สีเน้นแดงเข้ม เน้นตัวบุคคล งานวิจัย งานสอน และการเผยแพร่ความรู้
Author: Sikarin Yoo-Kong
Template: twentytwentyfour
Version: 2.6.0
Requires at least: 6.4
Tested up to: 6.7
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: sikarin-child
*/

/* =========================================================
   สีและฟอนต์หลักตั้งไว้ใน theme.json แล้ว (Site Editor แก้ได้)
   ไฟล์นี้เก็บเฉพาะคอมโพเนนต์ที่ theme.json ทำไม่ได้
   ========================================================= */

:root {
  --syk-navy-900: #181C62;   /* แถบบน + footer */
  --syk-navy-700: #262E8C;   /* ปุ่มหลัก โลโก้ */
  --syk-navy-500: #3F4ABE;   /* ลิงก์ */
  --syk-heading:  #1B2158;   /* หัวข้อและพาดหัว */
  --syk-crimson:  #C4362F;
  --syk-crimson-soft: #FBE6E2;
  --syk-line: #DFDFEA;
  --syk-muted: #565C7D;
  --syk-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* ---------- eyebrow (ป้ายเล็กเหนือหัวเรื่อง) ---------- */
.syk-eyebrow {
  font-family: var(--syk-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--syk-crimson);
  margin: 0 0 .4em;
}

/* ---------- quote ที่มีเส้นคาดสีแดง ---------- */
.syk-quote {
  padding-left: 18px;
  border-left: 2px solid var(--syk-crimson);
  font-style: italic;
  font-size: 1.08rem;
}

/* ---------- การ์ด (งานวิจัย / รายวิชา / วิดีโอ) ---------- */
.syk-card {
  border: 1px solid var(--syk-line);
  border-radius: 10px;
  padding: 24px;
  background: var(--wp--preset--color--base);
  transition: border-color .15s ease, transform .15s ease;
}
.syk-card:hover { border-color: var(--syk-navy-500); transform: translateY(-2px); }
.syk-card .syk-eyebrow { margin-bottom: .6em; }
.syk-card h3 { margin-top: 0; }

/* ---------- รายการแบบมีปี / ป้ายซ้าย (publications, talks, books) ---------- */
.syk-entry-list { border-top: 1px solid var(--syk-line); }
.syk-entry {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 4px 22px;
  padding-block: 18px;
  border-bottom: 1px solid var(--syk-line);
}
.syk-entry > * { margin: 0; }
.syk-entry .syk-key {
  font-family: var(--syk-mono);
  font-size: .82rem;
  color: var(--syk-crimson);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.syk-entry .syk-what { display: block; font-weight: 500; }
.syk-entry .syk-where { display: block; font-size: .92rem; color: var(--syk-muted); }
@media (max-width: 560px) { .syk-entry { grid-template-columns: 1fr; } }

/* ---------- กล่องข่าว / ลิงก์ติดต่อ ---------- */
.syk-panel {
  border: 1px solid var(--syk-line);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
}
.syk-tag {
  display: inline-block;
  font-family: var(--syk-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--syk-crimson-soft);
  color: var(--syk-crimson);
  border: 1px solid rgba(151, 35, 31, .35);
  white-space: nowrap;
}

/* ---------- รูปโปรไฟล์ ---------- */
.syk-portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid var(--syk-line);
  border-radius: 14px;
}

/* ---------- เมนูหลัก: ขีดแดงใต้หน้าปัจจุบัน ---------- */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a {
  color: var(--syk-crimson);
  box-shadow: inset 0 -2px 0 var(--syk-crimson);
}

/* ---------- โหมดมืด ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --syk-line: #2B3162;
    --syk-muted: #A3A8C6;
    --syk-crimson: #F09088;
    --syk-crimson-soft: #3B1C23;
    --syk-heading: #E9EAF4;
  }
}


/* ---------- หัวข้อ: น้ำเงินเข้ม ---------- */
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-heading { color: var(--syk-heading); }

/* ---------- แถบน้ำเงินด้านบน (ใช้คู่กับแพตเทิร์น sikarin-child/topbar) ---------- */
.syk-topbar {
  background: var(--syk-navy-900);
  color: #C9CBDF;
}
.syk-topbar a { color: #FFFFFF; text-decoration: none; font-size: .82rem; font-weight: 500; }
.syk-topbar a:hover { color: var(--syk-crimson); text-decoration: underline; text-underline-offset: 3px; }

/* เส้นขลิบแดงเหนือแถบเมนูหลัก — ใส่คลาส syk-header-rule ให้กลุ่มของ header ใน Site Editor */
.syk-header-rule { border-top: 3px solid var(--syk-crimson); }

/* ---------- footer ---------- */
.wp-block-template-part footer,
.syk-footer {
  background: var(--syk-navy-900);
  color: #C9CBDF;
}
.syk-footer a { color: #C7CBFF; }
.syk-footer a:hover { color: var(--syk-crimson); }
.syk-footer .syk-quote-big {
  font-family: Georgia, "Source Serif 4", serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  color: #EDEEFA;
  border: 0; padding: 0;
}
.syk-footer .syk-meta { color: #AEB2D4; font-size: .88rem; }


/* ---------- แถบแบรนด์ใน header ---------- */
.syk-brand-role {
  font-family: var(--syk-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--syk-muted);
  margin: 2px 0 0;
}
.wp-block-site-title a { text-decoration: none; color: var(--syk-heading); }
.wp-block-site-logo img { border-radius: 8px; }

/* โพสต์ล่าสุดหน้าแรก: ชื่อเรื่องกับสรุปไม่ให้ห่างเกิน */
.syk-entry .wp-block-post-title { margin: 0; font-size: 1.05rem; }
.syk-entry .wp-block-post-title a { text-decoration: none; }
.syk-entry .wp-block-post-excerpt { margin: 2px 0 0; color: var(--syk-muted); }
.syk-entry .wp-block-post-excerpt__more-text { display: none; }