/* แผงนำทาง "หัวข้อในหน้า" ของ navbar — markup ใน includes/navbar.php ($nav_sections), สคริปต์ใน assets/js/nav-dropdown.js */
.nav-dd { position: relative; }
.nav-dd-head { display: flex; align-items: center; }
/* ปุ่มกางหัวข้อ: ใช้เฉพาะจอเล็ก (เครื่องหมาย + / −) — จอใหญ่เปิดด้วยการชี้/โฟกัสชื่อเมนู จึงซ่อนไว้ (nav-dropdown.js เอาออกจากลำดับ Tab) */
.nav-dd-toggle { display: none; position: relative; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, .75); cursor: pointer; }
.nav-dd-toggle::before, .nav-dd-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.nav-dd-toggle::after { transform: rotate(90deg); }
.nav-dd.open .nav-dd-toggle { color: #ffd700; }
.nav-dd.open .nav-dd-toggle::after { transform: rotate(0deg); }
.nav-dd-toggle:focus-visible { outline: 2px solid #ffd700; outline-offset: -4px; border-radius: 10px; }

.nav-dd-panel { --dd-ease: cubic-bezier(.2, .8, .2, 1); }
.nav-dd-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.nav-dd-top-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #ffe082, #ffb300); color: #001f4d; font-size: .9rem; box-shadow: 0 6px 18px rgba(255, 179, 0, .3); }
.nav-dd-top b { display: block; font-family: 'Prompt', sans-serif; font-weight: 600; font-size: .98rem; color: #fff; line-height: 1.2; }
.nav-dd-top a { font-size: .78rem; color: rgba(255, 215, 0, .85); text-decoration: none; }
.nav-dd-top a:hover { color: #ffd700; text-decoration: underline; }

.nav-dd-menu { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.nav-dd-menu.cols-2 { grid-template-columns: 1fr 1fr; }
.nav-dd-menu a { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; color: #fff; text-decoration: none; position: relative; transition: background .22s, transform .22s var(--dd-ease); }
.nav-dd-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .82rem; color: #ffd54a; background: rgba(255, 213, 74, .08); border: 1px solid rgba(255, 213, 74, .22); transition: background .22s, color .22s, transform .3s var(--dd-ease), box-shadow .22s; }
.nav-dd-menu b { display: block; font-weight: 600; font-size: .88rem; line-height: 1.3; white-space: nowrap; }
.nav-dd-menu small { display: block; font-size: .74rem; color: rgba(232, 238, 255, .6); line-height: 1.35; margin-top: 1px; white-space: nowrap; }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: linear-gradient(90deg, rgba(255, 213, 74, .12), rgba(255, 213, 74, .02)); transform: translateX(3px); outline: none; }
.nav-dd-menu a:hover .nav-dd-ic, .nav-dd-menu a:focus-visible .nav-dd-ic { background: #ffd54a; color: #001f4d; border-color: #ffd54a; transform: scale(1.06) rotate(-4deg); box-shadow: 0 6px 16px rgba(255, 213, 74, .35); }
.nav-dd-menu a:hover b, .nav-dd-menu a:focus-visible b { color: #ffd700; }
.nav-dd-menu a:focus-visible { box-shadow: inset 0 0 0 2px #ffd700; }

/* รายการโผล่ทีละอันเมื่อแผงเปิด (--i = ลำดับ) */
.nav-dd-menu li { opacity: 0; transform: translateY(6px); transition: opacity .28s var(--dd-ease), transform .28s var(--dd-ease); }
.nav-dd.open .nav-dd-menu li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i) * 40ms); }

@media (min-width: 992px) {
    /* ยกเมนูที่กางอยู่ให้อยู่เหนือโลโก้/ชื่อกลาง (.navbar-brand-center z-index 10) */
    .nav-dd:hover, .nav-dd.open, .nav-dd:focus-within { position: relative; z-index: 30; }
    .nav-dd:hover .nav-dd-menu li, .nav-dd:focus-within .nav-dd-menu li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i) * 40ms); }
    .nav-dd-panel { position: absolute; top: calc(100% - 4px); width: max-content; min-width: 280px; z-index: 1040;
        background: linear-gradient(#091128, #060c1e) padding-box,
                    linear-gradient(135deg, rgba(255, 215, 0, .55), rgba(79, 195, 247, .35) 55%, rgba(255, 255, 255, .06)) border-box;
        border: 1px solid transparent; border-radius: 18px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .2), 0 0 40px rgba(255, 215, 0, .06);
        opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); transform-origin: var(--caret-x, 50%) 0;
        transition: opacity .22s var(--dd-ease), transform .32s var(--dd-ease), visibility 0s linear .32s; }
    .nav-left .nav-dd-panel { left: -8px; }
    .nav-right .nav-dd-panel { right: -8px; }
    /* หัวลูกศรชี้ขึ้นไปที่เมนู + สะพานกันเมาส์หลุด */
    .nav-dd-panel::before { content: ''; position: absolute; top: -7px; left: var(--caret-x, 40px); width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
        background: #0a1430; border-left: 1px solid rgba(255, 215, 0, .5); border-top: 1px solid rgba(255, 215, 0, .5); border-radius: 3px 0 0 0; }
    .nav-dd-panel::after { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
    .nav-dd:hover > .nav-dd-panel, .nav-dd.open > .nav-dd-panel, .nav-dd:focus-within > .nav-dd-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .nav-dd.dd-closed > .nav-dd-panel, .nav-dd.dd-closed:hover > .nav-dd-panel, .nav-dd.dd-closed:focus-within > .nav-dd-panel { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); }   /* กด Esc แล้วปิดแม้โฟกัสยังอยู่ */
    /* ตำแหน่งที่เปิดอยู่: ชื่อเมนูเป็นสีทอง + ขีดใต้ (หัวลูกศรของแผงชี้มาที่ชื่อนี้) */
    .nav-dd:hover > .nav-dd-head .nav-link, .nav-dd.open > .nav-dd-head .nav-link, .nav-dd:focus-within:not(.dd-closed) > .nav-dd-head .nav-link { color: #ffd700 !important; }
    .nav-dd:hover > .nav-dd-head .nav-link::after, .nav-dd.open > .nav-dd-head .nav-link::after, .nav-dd:focus-within:not(.dd-closed) > .nav-dd-head .nav-link::after { width: 80%; }
}

@media (max-width: 991px) {
    .navbar-nav .nav-dd { align-self: stretch; width: 100%; }
    .nav-dd-head { position: relative; justify-content: center; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .nav-dd-head .nav-link { border-bottom: 0 !important; }
    .nav-dd-toggle { display: block; position: absolute; right: 0; top: 50%; width: 44px; height: 44px; margin: 0; transform: translateY(-50%); }
    /* กางแบบนุ่มด้วย grid-template-rows 0fr → 1fr */
    .nav-dd-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--dd-ease); }
    .nav-dd-panel > .nav-dd-inner { overflow: hidden; }
    .nav-dd.open > .nav-dd-panel { grid-template-rows: 1fr; }
    .nav-dd-top { display: none; }
    .nav-dd-menu { margin: 6px 0 10px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 215, 0, .12); }
    .nav-dd-menu.cols-2 { grid-template-columns: 1fr; }
    .nav-dd-menu small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-dd-panel, .nav-dd-menu li, .nav-dd-menu a, .nav-dd-ic, .nav-dd-toggle::before, .nav-dd-toggle::after { transition: none !important; }
}

/* กระโดดไปหัวข้อจากเมนู: เว้นที่ให้ navbar ที่ติดหัวจอ ไม่บังหัวข้อ */
html { scroll-padding-top: 110px; }