/* ============================================================
   COMPONENT — Site header (Premium Light style)
   ============================================================ */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 249, 246, 0.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 116, 75, 0.08);
}

.site-header .container {
  display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
}
.site-header .container > * { flex-shrink: 0; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 15pt;
  color: var(--primary-dark);
  text-decoration: none;
  white-space: nowrap;
}
.brand .logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--gradient-primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800; font-size: 13pt;
  box-shadow: 0 4px 12px rgba(0, 116, 75, 0.25);
  flex-shrink: 0;   /* [2026-07-31] โลโก้ไม่ย่อ */
}
/* [2026-07-31] กัน brand ยาวดันแถว header ล้น (latent): ยอมให้ brand ย่อ + ตัดชื่อด้วย …
   nav/search/actions ยังคง flex-shrink:0 จาก `.container > *` เดิม */
.site-header .container > .brand { flex-shrink: 1; min-width: 0; }
.brand span:not(.logo) { overflow: hidden; text-overflow: ellipsis; }
/* [IPAD-OVERFLOW 07/08/2569] brand ย่อได้ แต่ "รูปโลโก้" ห้ามถูกบีบ (เคยเหลือ 17px จาก 44px
   เพราะ reset ตั้ง img{max-width:100%} + เป็น flex item ที่ย่อได้) — ให้ย่อเฉพาะตัวหนังสือ */
.brand .logo-img { flex-shrink: 0; }

.main-nav {
  display: flex; gap: 2px; margin-left: 4px;
  flex-wrap: nowrap;
}
.main-nav a {
  padding: 7px 10px; border-radius: 8px;
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 500; font-size: 13pt;
  transition: var(--trans-fast);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a.active { background: var(--primary-50); color: var(--primary); }

/* Header search (compact, shrinks to fit) */
.header-search {
  flex: 1;
  min-width: 140px;
  max-width: 240px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 116, 75, 0.18);
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 8px;
  transition: background .2s, border-color .2s, box-shadow .2s;
  box-shadow: var(--shadow-sm);
}
.header-search:focus-within {
  background: #fff; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.header-search .icon { color: var(--primary); display: inline-flex; }
.header-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 13pt;
  color: var(--text);
}
.header-search input::placeholder { color: #8aa29a; }

/* Header actions (signin, signup, avatar) */
.header-actions {
  display: flex; align-items: center; gap: 6px;
}
.btn-signin {
  color: var(--primary-dark);
  font-family: var(--font-heading);
  font-weight: 600; font-size: 13pt;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn-signin:hover { color: var(--primary); }

.btn-join {
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 13pt;
  box-shadow: 0 4px 12px rgba(0, 116, 75, 0.25);
  cursor: pointer;
  transition: var(--trans-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn-join:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  color: #fff;
}

/* Avatar (logged in) */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 13pt;
}

/* === Responsive === */
/* Tablet: ซ่อนช่องค้นหา, nav ยังโชว์ */
@media (max-width: 1280px) {
  .header-search { display: none; }
  .brand span:not(.logo) { display: none; }   /* ซ่อนคำว่า BMA LearningHub เหลือแค่ logo */
}
/* Tablet เล็ก: ลด nav font ลง */
@media (max-width: 1100px) {
  .main-nav a { padding: 6px 8px; font-size: 13pt; }
  .main-nav { gap: 1px; }
}
/* Hamburger + mobile panel — ซ่อนบน desktop */
.nav-toggle { display: none; }
.mobile-nav { display: none; }

/* Mobile/แท็บเล็ต: ซ่อน nav บนแถบ → เปิดผ่าน hamburger
   [IPAD-OVERFLOW 07/08/2569] 1000 → 1060px: วัดจริงแล้ว nav เต็มชุด (ครู+BMA) กว้าง ~798px
   รวมโลโก้ 44 + แว่นขยาย 34 + กระดิ่ง 46 + avatar 48 + gap/padding = ต้องการ ~1060px
   ช่วง 1001–1060px เดิมจึงล้นขอบจอ (โลโก้ถูกบีบเหลือ 17px + avatar หลุดขอบ) */
@media (max-width: 1060px) {
  .main-nav { display: none; }
  .brand span:not(.logo) { display: inline; }   /* แสดงชื่อกลับ */

  /* ปุ่ม login/register บนแถบ → ย้ายเข้า panel */
  .header-actions .btn-signin,
  .header-actions .btn-join { display: none; }

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 42px; height: 42px; padding: 9px;
    border: 0; background: transparent; cursor: pointer; border-radius: 10px;
  }
  .nav-toggle:hover { background: var(--primary-50); }
  .nav-toggle span {
    display: block; height: 2.5px; width: 100%;
    background: var(--primary-dark); border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Panel เลื่อนลง */
  .mobile-nav {
    display: flex; flex-direction: column;
    max-height: 0; overflow: hidden;
    background: #fff; border-top: 1px solid rgba(0, 116, 75, .10);
    transition: max-height .32s ease;
  }
  .site-header.nav-open .mobile-nav { max-height: 85vh; overflow-y: auto; }
  .mobile-nav a {
    padding: 15px 22px;
    font-family: var(--font-heading); font-size: 14pt; font-weight: 500;
    color: var(--text); text-decoration: none;
    border-bottom: 1px solid var(--surface-alt, #f0f4f1);
  }
  .mobile-nav a:hover,
  .mobile-nav a.active { background: var(--primary-50); color: var(--primary); }
  .mobile-auth { display: flex; gap: 10px; padding: 16px 22px; }
  .mobile-auth .btn-signin,
  .mobile-auth .btn-join {
    display: inline-block; flex: 1; text-align: center; padding: 12px; font-size: 13pt;
    border-radius: var(--radius-sm);
  }
  /* login = outline เขียว · register = ปุ่มเขียวทึบ + hover เข้ม (ตรงกับ desktop) */
  .mobile-auth .btn-signin {
    border: 1px solid var(--primary); color: var(--primary); background: transparent;
  }
  .mobile-auth .btn-signin:hover { background: var(--primary-50); color: var(--primary-dark); }
  .mobile-auth .btn-join {
    background: var(--primary); color: #fff; border: 1px solid var(--primary);
    box-shadow: 0 4px 12px rgba(0, 116, 75, 0.25);
  }
  .mobile-auth .btn-join:hover {
    background: var(--primary-dark); border-color: var(--primary-dark);
    color: #fff; transform: translateY(-1px);
  }
}

/* ตอน login แล้วบนมือถือ: avatar สะอาด (ตัดลูกศร) + เปิดที่ให้ hamburger ไม่หลุดขอบ */
@media (max-width: 1060px) {
  .user-chevron { display: none; }
}
@media (max-width: 560px) {
  .brand span:not(.logo) { display: none; }   /* เหลือโลโก้ → avatar + hamburger พอดีจอ */
}

/* จัดกึ่งกลางแนวตั้งของแถบ header บนมือถือให้เป๊ะ (logo/แว่นขยาย/hamburger ตรงกลางเท่ากัน) */
@media (max-width: 1060px) {
  .site-header .container { align-items: center; }
  .brand { align-items: center; }
  .brand .logo-img {
    display: block;                                            /* กัน baseline gap */
    width: 38px !important; height: 38px !important;           /* ย่อให้ใกล้เคียงไอคอนขวา ดูสมดุล (override inline 44px) */
  }
  .header-search-wrap { display: flex; align-items: center; }  /* แว่นขยายอยู่กึ่งกลาง ไม่ลอยขึ้น */
  .header-search-toggle,
  .nav-toggle { align-self: center; }
}