/* ═══════════════════════════════════════════════════════════════════
   DWR Mega Menu — สไตล์เมนูหลักของหน้าเว็บ (ตาม Figma)
   ──────────────────────────────────────────────────────────────────
   ⚠️ ทุก selector ในไฟล์นี้ต้องอยู่ใต้ .dwr-meganav เสมอ
      หน้าเว็บมี .wp-block-navigation หลายตัว (header 1 + footer 3)
      ถ้า selector หลุด scope เมนู footer จะโดนสไตล์นี้ไปด้วย

   ต้องใช้คู่กับ dwr-menu-manager-v2 >= 2.3.0 ซึ่งเป็นตัวเติม
   class .dwr-meganav ที่ <nav> และ attribute data-dwr-title ที่ <ul>
   ─────────────────────────────────────────────────────────────────── */

.dwr-meganav {
    /* สีจาก Figma — ตั้งตรง ไม่ chain ไป theme.json เพราะ palette ไม่ตรงกัน */
    --dwr-mnav-bg:            #054687;
    --dwr-mnav-active-bg:     #ffffff;
    --dwr-mnav-active-text:   #054687;
    --dwr-mnav-title:         #0152A2;
    --dwr-mnav-link:          #0152A2;
    --dwr-mnav-link-hover-bg: linear-gradient(90deg, #0357A8 18.27%, #007BEE 82.69%);
    --dwr-mnav-divider:       #61ABFD;

    --dwr-mnav-panel-bg:      #FFFFFFF0;   /* ขาว 94% ตาม Figma — ไม่มี blur */
    --dwr-mnav-panel-shadow:  0 0 25px 0 #00000024;
    --dwr-mnav-panel-line:    linear-gradient(90deg, #054687 0%, #017CEF 100%);

    --dwr-mnav-radius: 16px;   /* Radius/radius-xl */
    --dwr-mnav-pad-y:  6px;    /* Spacing/spacing-sm */
    --dwr-mnav-font:   'Prompt', var(--dwr-fe-font, sans-serif);

    /* เมนูหลัก 9 หัวข้อภาษาไทยต้องการ ~1492px แต่กรอบ design กว้าง 1392px
       ถ้าตรึง gap 32 / padding 18 ตาย ๆ มันจะตกบรรทัดกลายเป็นแถบ 2 ชั้น
       จึงให้ยืดได้: จอกว้างพอ = ตรงตาม Figma, จอแคบลง = บีบเข้าหากันแทนตกบรรทัด */
    --dwr-mnav-pad-x:  clamp(8px, 1.2vw, 24px);
    --dwr-mnav-gap:    clamp(6px, .9vw, 32px);
    --dwr-mnav-link-pad: clamp(6px, .6vw, 18px);
}

/* ═══════════════════════════════════════════════════════════════════
   แถบ nav

   ⚠️ โครงสร้างจริงของ core Navigation block ไม่ได้เอา <ul> ไว้ใต้ <nav> ตรง ๆ:
      nav > div.__responsive-container > div.__responsive-close
          > div.__responsive-dialog > div.__responsive-container-content
          > ul.__container
      ห้ามใช้ `.dwr-meganav > .wp-block-navigation__container` เด็ดขาด — ไม่ match
      ใช้ descendant แล้วกันหลุดไป submenu ด้วย `.__container >` แทน
      (submenu ใช้ class `.__submenu-container` คนละตัว)
   ─────────────────────────────────────────────────────────────────── */
nav.dwr-meganav {
    box-sizing: border-box;                      /* กัน padding บวกเพิ่มจาก 100% แล้วล้นจอ */
    position: relative;                          /* จุดอ้างอิงของ panel */
    max-width: 1392px;
    margin-inline: auto;
    background: var(--dwr-mnav-bg) !important;   /* สู้ inline style ของ block */
    border-radius: var(--dwr-mnav-radius);
    /* padding ซ้าย/ขวาไปอยู่ที่ <ul> แทน เพื่อให้ padding box ของ <nav> = ความกว้างเต็ม
       panel จะได้กาง left:0/right:0 แล้วชนขอบแถบพอดี ไม่ต้องคำนวณ offset ติดลบ */
    padding: var(--dwr-mnav-pad-y) 0;
    min-height: 52px;
    font-family: var(--dwr-mnav-font);
}

nav.dwr-meganav * {
    box-sizing: border-box;
}

/* บนจอใหญ่ ยุบ wrapper ทั้งหมดให้เป็น static เพื่อให้ panel อ้างอิง <nav>
   (บนมือถือปล่อยไว้ เพราะ core ใช้ทำ overlay เต็มจอ) */
@media (min-width: 600px) {
    .dwr-meganav .wp-block-navigation__responsive-container,
    .dwr-meganav .wp-block-navigation__responsive-close,
    .dwr-meganav .wp-block-navigation__responsive-dialog,
    .dwr-meganav .wp-block-navigation__responsive-container-content,
    .dwr-meganav .wp-block-navigation__container,
    .dwr-meganav .wp-block-navigation__container > .wp-block-navigation-item {
        position: static;
    }

    /* __responsive-container ทาพื้นหลังสีเดียวกับแถบ แต่มุมเป็น 0px และกินพื้นที่
       เท่า <nav> พอดี → เหลี่ยมของมันโผล่พ้นมุมโค้งของ <nav> ออกมาเป็น "ติ่ง"
       สั่ง background:transparent ไม่ได้ผลแม้ใส่ !important (สีไม่ได้มาจาก
       background-color ตรง ๆ) จึงให้มันโค้งเท่า <nav> แทน — ได้ผลชัวร์กว่า
       (ห้ามทำบนมือถือ — ที่นั่น container ตัวนี้คือ overlay เต็มจอ ต้องเป็นสี่เหลี่ยม) */
    .dwr-meganav .wp-block-navigation__responsive-container {
        border-radius: var(--dwr-mnav-radius);
    }
}

.dwr-meganav .wp-block-navigation__container {
    gap: var(--dwr-mnav-gap);
    align-items: center;
    /* ต้องเป็น wrap ไม่ใช่ nowrap!
       nowrap ทำให้เมนูที่กว้างเกินแถบทะลุออกไปทางขวา → ดันความกว้างเอกสาร → scrollbar ทั้งหน้า
       wrap จะขึ้นบรรทัดใหม่แทน ซึ่งยังอ่านได้ครบและไม่ทำให้หน้าเว็บล้น
       ปกติจะอยู่บรรทัดเดียวอยู่แล้วเพราะ gap/padding ด้านบนบีบพอให้เหลือที่ */
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    padding-inline: var(--dwr-mnav-pad-x);
    background: transparent !important;           /* <ul> มี inline bg #1c163b ติดมา */
}

.dwr-meganav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: inline-flex;
    align-items: center;
    height: 40px;                                /* 52 − 6×2 */
    padding: 0 var(--dwr-mnav-link-pad);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;                             /* WD-102: default ตาม Figma (เดิม 17px) */
    font-weight: 400;
    white-space: nowrap;                         /* ห้ามตัดคำกลางชื่อเมนู */
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

/* เมนูแม่ไม่มี href เพราะใช้เปิด submenu เท่านั้น จึงต้องกำหนด pointer เอง */
.dwr-meganav .dwr-meganav__parent-label {
    cursor: pointer;
}

/* pill ขาวของเมนูที่ active / กำลังเปิดอยู่ */
.dwr-meganav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.dwr-meganav .wp-block-navigation__container > .current_page_item > .wp-block-navigation-item__content,
.dwr-meganav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content,
.dwr-meganav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.dwr-meganav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
    background: var(--dwr-mnav-active-bg);
    color: var(--dwr-mnav-active-text);
}

/* ลูกศร dropdown ให้สีตามตัวอักษร */
.dwr-meganav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
    color: currentColor;
    padding: 0 0 0 6px;
    background: transparent;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   mega panel
   ─────────────────────────────────────────────────────────────────── */
.dwr-meganav .wp-block-navigation__submenu-container {
    position: absolute;
    /* ต้องอยู่เหนือ content/footer ทุกตัวที่สร้าง stacking layer ของตัวเอง
       เช่น .dwr-related-organizations-frame (position:relative; z-index:2)
       ไม่เช่นนั้นแถบหน่วยงานที่เกี่ยวข้องจะวาดทับ mega panel ที่เปิดอยู่ */
    /* !important จำเป็นเพื่อชนะกฎ core:
       .wp-block-navigation .has-child .wp-block-navigation__submenu-container { z-index:2 } */
    z-index: 10 !important;
    left: 0;
    right: 0;
    /* กล่องอ้างอิงจริงคือ .wp-block-navigation__responsive-container ซึ่ง core ตั้ง
       position:relative ไว้ และสูงเท่าเนื้อหา (40px) ไม่ใช่ <nav> (52px)
       ต้อง !important เพราะ core มี `.wp-block-navigation .has-child .__submenu-container`
       (specificity 0,3,0) สูงกว่าของเรา (0,2,0) — เหมือนกรณี background

       ⚠️ ห้ามเว้นระยะด้วย top: calc(100% + Npx) เด็ดขาด!
       จะเกิดช่องว่างที่ไม่ใช่ทั้ง <li> และ panel พอเมาส์ลากผ่านลงมา pointerleave
       ของ core จะยิงแล้วปิด panel ทิ้ง = เลื่อนไปกดเมนูย่อยไม่ได้เลย
       ใช้ border บนใส ๆ แทน — กล่องชนกับ <li> พอดี (เมาส์ไม่หลุด)
       แต่พื้นหลังเริ่มต่ำลง 6px เท่าเดิมเพราะ background-clip: padding-box */
    top: 100% !important;
    width: auto;
    min-width: 0;
    max-height: none;
    margin: 0;
    /* padding-top เผื่อที่ให้ชื่อหมวดที่วางแบบ absolute: 40 + 36(ตัวอักษร) + 28(ระยะห่าง) */
    padding: 104px 56px 44px;
    border: 0;
    /* border ใสด้านบน = สะพานให้เมาส์เดินจากปุ่มลงมาถึง panel โดยไม่หลุด (ดูหมายเหตุ top) */
    border-top: var(--dwr-mnav-pad-y) solid transparent;
    border-radius: 0;                            /* ตาม design: กล่องมุมตรง ไม่มีมุมโค้ง */
    /* core มี `.wp-block-navigation .has-child .__submenu-container{background:inherit}`
       specificity สูงกว่า จึงต้อง !important ไม่งั้น panel จะพื้นใส */
    background: var(--dwr-mnav-panel-bg) !important;
    /* ต้องอยู่ "หลัง" background เสมอ — shorthand background จะรีเซ็ต background-clip
       กลับเป็น border-box ทำให้พื้นหลังทาทับ border ใสจนสะพานกลายเป็นสีขาว */
    background-clip: padding-box !important;
    box-shadow: var(--dwr-mnav-panel-shadow);
    /* core ตั้ง display:flex ให้ submenu — ต้องทับเป็น block
       เพราะ multi-column ไม่มีผลเลยบน flex container */
    display: block !important;
    columns: 2;
    column-gap: 72px;
    column-rule: 1px solid var(--dwr-mnav-divider);
}

/* ชื่อหมวด — วาดจาก attribute ที่ menu plugin เติมให้
   วางแบบ absolute ไม่ใช้ column-span เพราะ pseudo-element + column-span
   ใน multicol ไม่กินพื้นที่ในเลย์เอาต์จริง (ชื่อจะลอยไปทับแถบเมนูด้านบน)
   line-height ต้องมากกว่า 100% ไม่งั้นสระบน/วรรณยุกต์ไทยโดนตัดหัว */
.dwr-meganav .wp-block-navigation__submenu-container::before {
    content: attr(data-dwr-title);
    position: absolute;
    top: 40px;
    left: 56px;
    right: 56px;
    color: var(--dwr-mnav-title);
    font-family: var(--dwr-mnav-font);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;
}

/* เส้น gradient 5px = ขอบบนของกล่อง
   ใช้ pseudo แทน border-image เพราะ border-image ทำให้ border-radius ไม่โค้ง */
.dwr-meganav .wp-block-navigation__submenu-container::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--dwr-mnav-panel-line);
}

/* ═══════════════════════════════════════════════════════════════════
   รายการใน panel
   ─────────────────────────────────────────────────────────────────── */
.dwr-meganav .wp-block-navigation__submenu-container .wp-block-navigation-item {
    display: block;
    break-inside: avoid;
    /* core ให้ <li> รับพื้นหลังเดียวกับ panel มา (background-color: inherit)
       พอ panel เป็นขาว 94% แถวที่มีข้อความจะกลายเป็นขาวซ้อนขาว ~99.6% = ทึบกว่าช่องว่าง
       เห็นเป็นแถบพื้นหลังใต้เมนูย่อยแต่ละอัน — ต้องล้างให้โปร่งใส */
    background: transparent !important;
}

.dwr-meganav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    width: fit-content;
    max-width: 100%;
    /* !important เพราะ core/ธีมใส่ padding แนวตั้ง 12px มาจากกฎที่ specificity สูงกว่า
       ทำให้แต่ละรายการสูง 74px แทน 50px ตามสเปก (ห่างเกินไป) */
    padding: 0 24px !important;
    border-radius: 999px;
    background: none;
    color: var(--dwr-mnav-link);
    font-family: var(--dwr-mnav-font);
    font-size: 14px;                             /* WD-102: default ตาม Figma (เดิม 24px) */
    font-weight: 400;                            /* Figma Regular (เดิม 300) */
    line-height: 50px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.dwr-meganav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.dwr-meganav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.dwr-meganav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
    background: var(--dwr-mnav-link-hover-bg);
    color: #fff;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════
   มือถือ — ใช้ overlay ของ core block เดิม
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    nav.dwr-meganav {
        border-radius: 0;
        padding: var(--dwr-mnav-pad-y) 12px;
    }

    .dwr-meganav .wp-block-navigation__submenu-container {
        position: static;
        left: auto;
        right: auto;
        border-top: 0;                            /* ไม่ต้องมีสะพาน hover บนมือถือ */
        padding: 40px 0 20px;                     /* เผื่อที่ให้ชื่อหมวด */
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
        overflow: visible;
        columns: 1;
        column-rule: none;
    }

    .dwr-meganav .wp-block-navigation__submenu-container::after {
        display: none;                            /* ซ่อนเส้น gradient บนมือถือ */
    }

    .dwr-meganav .wp-block-navigation__submenu-container::before {
        top: 8px;
        left: 16px;
        right: 16px;
        font-size: 24px;
    }

    .dwr-meganav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        font-size: 18px;
        line-height: 40px;
        padding: 0 16px;
    }
}