/* header.mobile.css — Global Mobile Header (MOBILE ONLY)
   เป้า:
   1) Header มือถือเหมือนกันทุกหน้า
   2) แสดงเฉพาะ "ชื่อจริง + นามสกุล" (ซ่อนชั้นปี/รุ่น/คณะ/สาขา ฯลฯ)
   3) ความสูง header = เดิม (54px) แม้โลโก้สูง 70px
   วิธีใช้: โหลดไฟล์นี้ "หลังสุด" ภายใต้ media="(max-width:1024.98px)"
*/

@media (max-width:1024.98px){

  :root{
    --mh-gap: 8px;
    --mh-height: 54px;        /* ความสูงกรอบ header (เดิม) */
    --mh-brand-max: 62vw;
    --mh-profile-max: 38vw;
    --mh-logo-height: 76px;   /* ความสูงโลโก้ (ขยับขึ้น) แต่จะไม่ดันกรอบ */
  }

  /* ===== Header wrapper ===== */
  .site-header{
    position: sticky; top: 0; z-index: 60;
    background: var(--bg-2, #fff);
    border-bottom: 1px solid var(--ring, #e5e7eb);
    backdrop-filter: saturate(140%) blur(6px);
    overflow: visible; /* ให้โลโก้เกินกรอบได้ */
  }
  .site-header .header-inner{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    gap:var(--mh-gap) !important;
    min-height: var(--mh-height) !important;
    padding: 0 !important;          /* กันสูงขึ้นเพราะ padding เดิม */
    overflow: visible;
  }

  /* ปิดเมนู/แถบนำทางบนมือถือให้คงที่ */
  .site-header .menu-btn, .site-header .nav{ display:none !important; }

  /* ===== ฝั่งซ้าย: แบรนด์/โลโก้ ===== */
  .site-header .brand{
    display:inline-flex !important; align-items:center !important; gap:10px !important;
    min-width:0 !important; max-width:var(--mh-brand-max) !important;
    overflow:visible !important; line-height:1;
  }
  .site-header .brand *{ min-width:0 !important; max-width:100% !important; }

  /* โลโก้ 70px แต่ "ไม่ดันกรอบ 54px" ด้วย margin ชดเชย */
  .site-header .brand-logo{
    display:block; flex:0 0 auto;
    height:var(--mh-logo-height) !important;
    margin-top:    calc((var(--mh-height) - var(--mh-logo-height))/2) !important;
    margin-bottom: calc((var(--mh-height) - var(--mh-logo-height))/2) !important;
  }
  .site-header .brand-logo img, .site-header .brand-logo svg{ display:block; height:100%; width:auto; }

  /* ไม่กำหนด font-size เพื่อคงขนาดชื่อโลโก้เดิมของแต่ละหน้า */
  .site-header .brand :is(.brand-text,.brand-name,.label,.title,span,strong){
    max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }

  /* ===== ฝั่งขวา: โปรไฟล์/ชื่อผู้ใช้ ===== */
  .site-header .auth{ display:inline-flex !important; align-items:center; gap:8px; min-width:0; }
  .site-header .profile-chip,
  .site-header .user-pill{
    display:inline-flex !important; align-items:center; gap:8px;
    min-width:0; max-width:var(--mh-profile-max) !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
    padding:8px 12px; border:1px solid var(--ring, #e5e7eb); border-radius:999px;
    background:#fff; box-shadow:0 1px 0 rgba(2,6,23,.02); font-weight:800; line-height:1.1;
  }

  /* ซ่อนทุกอย่างที่ไม่ใช่ "ชื่อจริง + นามสกุล" */
  .site-header .profile-chip :is(img, svg, .avatar, .icon, .badge, .chip, .dot, .sep, .divider,
                                 .meta, .sub, .subtext, .desc, .email, .mail, .role, .position,
                                 .username, .user-id, .id, .extra, .chevron, .caret, .arrow){
    display:none !important;
  }
  .site-header .user-pill :is(img, svg, .avatar, .icon, .badge, .chip, .dot, .sep, .divider,
                              .meta, .sub, .subtext, .desc, .email, .mail, .role, .position,
                              .username, .user-id, .id, .extra, .chevron, .caret, .arrow){
    display:none !important;
  }

  /* ซ่อน “ชั้นปี/ระดับ/คณะ/สาขา/รุ่น/ห้อง/เทอม” ที่อาจปะปนอยู่ (ทั้งนอกและใน .name) */
  .site-header .profile-chip :is(.year, .class-year, .classYear, .grade, .level, .semester, .term,
                                 .batch, .cohort, .section, .room, .major, .faculty, .department,
                                 .dept, .program, .degree, .school, .education, .edu, .class, [data-year], [data-grade]){
    display:none !important;
  }
  .site-header .user-pill :is(.year, .class-year, .classYear, .grade, .level, .semester, .term,
                              .batch, .cohort, .section, .room, .major, .faculty, .department,
                              .dept, .program, .degree, .school, .education, .edu, .class, [data-year], [data-grade]){
    display:none !important;
  }
  .site-header .profile-chip .name :is(.year, .class-year, .classYear, .grade, .level, .semester, .term,
                                       .batch, .cohort, .section, .room, .major, .faculty, .department,
                                       .dept, .program, .degree, .school, .education, .edu, .class){
    display:none !important;
  }
  .site-header .user-pill .name :is(.year, .class-year, .classYear, .grade, .level, .semester, .term,
                                    .batch, .cohort, .section, .room, .major, .faculty, .department,
                                    .dept, .program, .degree, .school, .education, .edu, .class){
    display:none !important;
  }

  /* อนุญาต/บังคับให้ "ชื่อ" แสดงได้ ไม่ว่าคลาสชื่ออะไร */
  .site-header .profile-chip :is(.name, .fullname, .full-name, .display-name, .user-name,
                                 .first, .last, .first-name, .last-name, strong, b, span:not([class])){
    display:inline !important; min-width:0; max-width:100%;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:800;
  }
  .site-header .user-pill :is(.name, .fullname, .full-name, .display-name, .user-name,
                              .first, .last, .first-name, .last-name, strong, b, span:not([class])){
    display:inline !important; min-width:0; max-width:100%;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:800;
  }

  /* จอเล็กมาก: ยืดฝั่งชื่อเพิ่ม */
  @media (max-width:360px){
    .site-header .brand{ max-width:58vw !important; }
    .site-header .profile-chip, .site-header .user-pill{ max-width:42vw !important; }
  }

  /* ปรับขนาด: โลโก้และชื่อบนมือถือ (ไม่ดันกรอบ 54px) */
  /* โลโก้ปรับด้วยตัวแปร --mh-logo-height ด้านบนได้ทันที */
  .site-header .brand :is(.brand-text,.brand-name,.label,.title,span,strong){
    font-size: 17px; line-height: 1; /* ขยับขึ้นเล็กน้อย ไม่ดันกรอบ */
  }
  .site-header .profile-chip,
  .site-header .user-pill{
    font-size: 16px; line-height: 1.1; /* ขยับขึ้นเล็กน้อย ยังอยู่ในกรอบ 54px */
  }
}