/* ===== KU Archives – สไตล์ร่วมทั้งเว็บ ===== */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
:focus-visible { outline: 3px solid #c5a059; outline-offset: 2px; border-radius: 4px; }

/* ภาพพื้นหลังส่วนหัว */
.hero-bg {
  background-image: linear-gradient(rgba(0,50,40,.72), rgba(0,50,40,.6)), url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=1920&auto=format&fit=crop');
  background-size: cover; background-position: center;
}
@media (min-width: 1024px) and (hover: hover) { .hero-bg { background-attachment: fixed; } }
.page-header-bg {
  background-image: linear-gradient(rgba(0,50,40,.85), rgba(0,50,40,.78)), url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=1920&auto=format&fit=crop');
  background-size: cover; background-position: center;
}

/* การ์ด */
.card-hovering { transition: transform .3s ease, box-shadow .3s ease; }
.card-hovering:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(0,0,0,.1); }

/* ---- เมนูบนเดสก์ท็อป ---- */
.nav-link {
  position: relative; display: flex; align-items: center; gap: 4px; height: 100%;
  color: #4A5568; font-weight: 500; transition: color .25s; white-space: nowrap;
}
.nav-link:hover, .nav-link.is-active, .nav-dd:focus-within > .nav-link { color: #006b54; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px;
  background: #c5a059; transform: scaleX(0); transition: transform .25s; transform-origin: center;
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-dd-panel {
  position: absolute; top: 100%; min-width: 16rem; background: #fff; border-top: 4px solid #006b54;
  border-radius: 0 0 .75rem .75rem; box-shadow: 0 20px 40px -12px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .18s ease;
}
.nav-dd:hover > .nav-dd-panel, .nav-dd:focus-within > .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd:hover .nav-caret, .nav-dd:focus-within .nav-caret { transform: rotate(180deg); }
.nav-dd-panel a { display: block; padding: .6rem 1.25rem; color: #4b5563; transition: background .15s, color .15s; }
.nav-dd-panel a:hover, .nav-dd-panel a.is-active { background: #ecfdf5; color: #006b54; }

/* ---- เมนูมือถือ ---- */
#mobile-menu { transition: opacity .2s ease, transform .2s ease; }
#mobile-menu.is-closed { opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; }
.mobile-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.mobile-sub > div { overflow: hidden; }
.mobile-sub.open { grid-template-rows: 1fr; }
body.menu-open { overflow: hidden; }

/* เนื้อหาบทความจากฐานข้อมูล */
.rich-text { line-height: 1.9; word-break: break-word; overflow-wrap: anywhere; }
.rich-text p { margin-bottom: 1em; }
.rich-text img { border-radius: .75rem; margin: 1rem auto; }
.rich-text a { color: #006b54; text-decoration: underline; }

/* ตารางเลื่อนแนวนอนบนจอเล็ก */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { min-width: 640px; }

/* วิดีโอ 16:9 */
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: .75rem; overflow: hidden; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ปุ่มกลับขึ้นด้านบน */
#back-to-top { opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .25s; }
#back-to-top.show { opacity: 1; visibility: visible; transform: none; }

/* Scrollbar ซ่อน (แถบเลื่อนแนวนอน) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Fade-in เมื่อเลื่อน */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  nav, footer, #back-to-top, .no-print { display: none !important; }
  body { background: #fff !important; }
}