/* =========================================================
   DANANG2NITE — PHASE 64-3
   PC HEADER + LANGUAGE RAIL / BLUEPRINT CONVERGENCE
   Scope: desktop common header only. No page/body redesign here.
   Loaded after Phase63.
   ========================================================= */

@media (min-width:821px){
  :root{
    --p643-head-shell:min(1480px,calc(100% - clamp(56px,7vw,124px)));
    --p643-gold:#f0d57c;
    --p643-gold-soft:#d8b95e;
    --p643-head-bg:#07080c;
    --p643-head-line:rgba(255,255,255,.075);
  }

  /* Two-tier masthead: brand/navigation above, languages below. */
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    overflow:visible!important;
    border-bottom:1px solid var(--p643-head-line)!important;
    background:
      radial-gradient(circle at 7% 10%,rgba(112,9,76,.18),transparent 25%),
      radial-gradient(circle at 95% 12%,rgba(118,7,85,.15),transparent 25%),
      linear-gradient(90deg,rgba(22,4,18,.34),rgba(5,7,11,.98) 24%,rgba(5,7,11,.98) 76%,rgba(26,4,23,.36)),
      var(--p643-head-bg)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
  }

  .site-header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(230,37,114,.16) 15%,rgba(217,185,110,.12) 50%,rgba(230,37,114,.14) 85%,transparent);
  }

  .site-header__main{
    width:var(--p643-head-shell)!important;
    min-height:76px!important;
    padding:0!important;
    gap:30px!important;
  }

  /* Blueprint-like D2N identity: gold outline, no skewed pink badge. */
  .site-brand{
    gap:14px!important;
    flex:0 0 auto!important;
  }

  .site-brand__mark{
    width:52px!important;
    height:50px!important;
    flex:0 0 52px!important;
    display:grid!important;
    place-items:center!important;
    transform:none!important;
    overflow:hidden!important;
    border:1px solid rgba(240,213,124,.72)!important;
    border-radius:12px!important;
    background:
      radial-gradient(circle at 30% 18%,rgba(240,213,124,.14),transparent 42%),
      linear-gradient(145deg,rgba(255,255,255,.035),rgba(217,185,110,.018)),
      rgba(13,14,17,.94)!important;
    color:var(--p643-gold)!important;
    font-size:15px!important;
    font-style:normal!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.2px!important;
    text-shadow:0 0 14px rgba(217,185,110,.16)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 0 24px rgba(217,185,110,.055)!important;
  }

  .site-brand__mark::after{
    display:none!important;
  }

  .site-brand__text strong{
    color:#efd77f!important;
    font-size:18px!important;
    font-weight:820!important;
    line-height:1!important;
    letter-spacing:3.4px!important;
    white-space:nowrap!important;
  }

  .site-brand__text small{
    margin-top:7px!important;
    color:#817d86!important;
    font-size:7.5px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:2.25px!important;
    white-space:nowrap!important;
  }

  /* Quiet editorial navigation like the supplied PC blueprint. */
  .site-nav{
    margin-inline-start:auto!important;
    gap:12px!important;
    min-height:52px!important;
  }

  .site-nav>a{
    position:relative!important;
    min-height:46px!important;
    padding:0 15px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:0!important;
    background:transparent!important;
    color:#b9b4b2!important;
    font-size:11px!important;
    font-weight:760!important;
    line-height:1!important;
    text-decoration:none!important;
  }

  .site-nav>a:hover{
    color:#f2e7c6!important;
    background:transparent!important;
  }

  .site-nav>a::after{
    content:""!important;
    position:absolute!important;
    left:13px!important;
    right:13px!important;
    bottom:1px!important;
    height:1px!important;
    border-radius:2px!important;
    background:linear-gradient(90deg,transparent,var(--p643-gold-soft) 18%,var(--p643-gold-soft) 82%,transparent)!important;
    box-shadow:0 0 12px rgba(217,185,110,.24)!important;
    opacity:0!important;
    transform:scaleX(.72)!important;
    transform-origin:center!important;
    transition:opacity .18s ease,transform .18s ease!important;
  }

  .site-nav>a:hover::after,
  .site-nav>a.is-active::after,
  .site-nav>a[aria-current="page"]::after{
    opacity:1!important;
    transform:scaleX(1)!important;
  }

  .site-nav>a.is-active,
  .site-nav>a[aria-current="page"]{
    color:var(--p643-gold)!important;
    background:transparent!important;
  }

  /* Keep real side-menu behavior, but visually reduce it to a clean icon control. */
  .d2n-menu-toggle{
    position:relative!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin-inline-start:3px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(255,255,255,.105)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.012)!important;
    color:#ded9d2!important;
    cursor:pointer!important;
    transition:border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
  }

  .d2n-menu-toggle:hover{
    border-color:rgba(217,185,110,.34)!important;
    background:rgba(217,185,110,.035)!important;
    box-shadow:0 0 20px rgba(217,185,110,.06)!important;
  }

  .d2n-menu-toggle__label{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  .d2n-menu-toggle__icon{
    width:18px!important;
    height:14px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:5px!important;
  }

  .d2n-menu-toggle__icon i{
    width:18px!important;
    height:1px!important;
    margin:0!important;
    border:0!important;
    border-radius:1px!important;
    background:#ddd8d0!important;
    box-shadow:none!important;
  }

  /* Direct language rail: removes the empty utility strip seen in the real screenshots. */
  .site-language-wrap{
    min-height:64px!important;
    border-top:1px solid rgba(255,255,255,.052)!important;
    background:
      linear-gradient(90deg,rgba(93,8,63,.075),transparent 28%,transparent 72%,rgba(91,7,69,.06)),
      rgba(4,6,10,.76)!important;
  }

  .site-language-shell{
    width:var(--p643-head-shell)!important;
    min-height:64px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:stretch!important;
  }

  .site-language-desktop{
    width:100%!important;
    min-width:0!important;
    min-height:64px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 215px!important;
    align-items:center!important;
    gap:24px!important;
    direction:ltr!important;
  }

  .site-language-desktop__rail{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:5px!important;
  }

  .site-language-desktop__item{
    position:relative!important;
    min-width:0!important;
    min-height:47px!important;
    padding:8px 9px 7px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:5px!important;
    overflow:hidden!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#85818a!important;
    text-decoration:none!important;
    transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease!important;
  }

  .site-language-desktop__item::before{
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    bottom:5px;
    height:1px;
    background:linear-gradient(90deg,var(--p643-gold-soft),transparent);
    opacity:0;
  }

  .site-language-desktop__item strong{
    color:#a6a1a9!important;
    font-size:9px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.65px!important;
  }

  .site-language-desktop__item span{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    color:#6f6b74!important;
    font-size:8px!important;
    font-weight:680!important;
    line-height:1.15!important;
    letter-spacing:0!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .site-language-desktop__item:hover{
    border-color:rgba(217,185,110,.17)!important;
    background:rgba(217,185,110,.022)!important;
  }

  .site-language-desktop__item:hover strong{
    color:#d8c99f!important;
  }

  .site-language-desktop__item.is-active,
  .site-language-desktop__item[aria-current="page"]{
    border-color:rgba(240,213,124,.76)!important;
    background:
      radial-gradient(circle at 24% 10%,rgba(240,213,124,.15),transparent 56%),
      linear-gradient(145deg,rgba(217,185,110,.055),rgba(255,255,255,.006)),
      rgba(24,20,15,.48)!important;
    box-shadow:
      inset 0 0 0 1px rgba(240,213,124,.055),
      0 0 20px rgba(217,185,110,.105)!important;
  }

  .site-language-desktop__item.is-active::before,
  .site-language-desktop__item[aria-current="page"]::before{
    opacity:.56!important;
  }

  .site-language-desktop__item.is-active strong,
  .site-language-desktop__item[aria-current="page"] strong{
    color:#f2d77c!important;
  }

  .site-language-desktop__item.is-active span,
  .site-language-desktop__item[aria-current="page"] span{
    color:#cfc5a9!important;
  }

  .site-language-desktop__signature{
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    gap:13px!important;
    color:#77737d!important;
  }

  .site-language-desktop__signature i{
    width:31px!important;
    height:1px!important;
    display:block!important;
    background:linear-gradient(90deg,var(--p643-gold-soft),rgba(216,185,94,.15))!important;
  }

  .site-language-desktop__signature span{
    font-size:7px!important;
    font-weight:850!important;
    line-height:1.55!important;
    letter-spacing:2px!important;
    white-space:nowrap!important;
  }

  /* Popup stays as the mobile interaction model; PC uses direct links. */
  .site-language-trigger,
  .site-language-panel{
    display:none!important;
  }

  /* Locale typography stays compact without changing the order of markets. */
  html[lang^="zh"] .site-language-desktop__item span,
  html[lang="ja"] .site-language-desktop__item span,
  html[lang="ko"] .site-language-desktop__item span,
  html[lang="th"] .site-language-desktop__item span,
  html[lang="hi"] .site-language-desktop__item span,
  html[lang="ar"] .site-language-desktop__item span{
    font-size:8px!important;
    letter-spacing:0!important;
  }

  html[lang="ar"] .site-header__main{
    direction:rtl!important;
  }

  html[lang="ar"] .site-language-desktop{
    direction:ltr!important;
  }

  html[lang="ar"] .site-language-desktop__item{
    text-align:left!important;
    direction:ltr!important;
  }

  /* Medium PC: preserve all ten direct options and hide only the decorative signature. */
  @media (max-width:1220px){
    .site-header__main,
    .site-language-shell{
      width:min(1180px,calc(100% - 40px))!important;
    }

    .site-language-desktop{
      grid-template-columns:1fr!important;
      gap:0!important;
    }

    .site-language-desktop__signature{
      display:none!important;
    }

    .site-language-desktop__rail{
      grid-template-columns:repeat(10,minmax(0,1fr))!important;
      gap:4px!important;
    }

    .site-language-desktop__item{
      padding-inline:7px!important;
    }

    .site-brand__text strong{
      font-size:16px!important;
      letter-spacing:2.65px!important;
    }
  }

  @media (max-width:980px){
    .site-header__main{
      min-height:70px!important;
    }

    .site-brand{
      gap:10px!important;
    }

    .site-brand__mark{
      width:46px!important;
      height:44px!important;
      flex-basis:46px!important;
      font-size:13px!important;
    }

    .site-brand__text strong{
      font-size:14px!important;
      letter-spacing:2.1px!important;
    }

    .site-brand__text small{
      font-size:6px!important;
      letter-spacing:1.4px!important;
    }

    .site-nav{
      gap:5px!important;
    }

    .site-nav>a{
      padding-inline:10px!important;
      font-size:10px!important;
    }

    .site-language-wrap,
    .site-language-shell,
    .site-language-desktop{
      min-height:58px!important;
    }

    .site-language-desktop__item{
      min-height:42px!important;
      padding:6px 5px!important;
      gap:4px!important;
    }

    .site-language-desktop__item strong{
      font-size:8px!important;
    }

    .site-language-desktop__item span{
      font-size:7px!important;
    }
  }
}