/* =========================================================
   HEADER CSS
   Thailand-Japan Student ICT Fair 2026
   ใช้สำหรับ topbar, main header, navbar, dropdown, login button
========================================================= */

/* =========================================================
   ROOT VARIABLES
========================================================= */
:root {
  --tjsif-navy: #0b2a52;
  --tjsif-navy-2: #123c73;
  --tjsif-blue: #2f6fbe;
  --tjsif-sky: #5ea8ff;
  --tjsif-soft: #f5f9ff;
  --tjsif-red: #c62839;
  --tjsif-red-dark: #a51f2e;
  --tjsif-gold: #f0b44c;
  --tjsif-text: #1e293b;
  --tjsif-muted: #64748b;
  --tjsif-line: rgba(12, 42, 82, .10);
  --tjsif-line-soft: rgba(12, 42, 82, .06);
  --tjsif-shadow-lg: 0 24px 60px rgba(11, 42, 82, .12);

  --header-h: 90px;
  --topbar-h: 42px;
  --all-header-h: 132px;
  --brand-max-w: 420px;
}

/* =========================================================
   GLOBAL
========================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Prompt", sans-serif;
  color: var(--tjsif-text);
  background: #fff;
}

section[id] {
  scroll-margin-top: 120px;
}

/* =========================================================
   HEADER WRAP
========================================================= */
.site-header-wrap {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
}

#headerSpacer {
  height: var(--all-header-h);
  transition: none;
}

/* =========================================================
   TOPBAR
========================================================= */
.topbar {
  height: var(--topbar-h);
  max-height: var(--topbar-h);
  overflow: hidden;
  opacity: 1;
  color: rgba(255, 255, 255, .88);
  background: linear-gradient(90deg, rgba(11, 42, 82, .98), rgba(18, 60, 115, .96));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: max-height .22s ease, opacity .18s ease;
  will-change: max-height, opacity;
}

.site-header-wrap.is-topbar-hidden .topbar {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.topbar .container-fluid {
  height: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.topbar-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  padding: .38rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.topbar-badge .badge-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--tjsif-gold);
  box-shadow: 0 0 0 5px rgba(240, 180, 76, .16);
}

.topbar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  font-size: .8rem;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.topbar-social {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  line-height: 1;
  font-size: 0;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.topbar-social i {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  transform: translateY(1px);
}

.topbar-social .bi-youtube,
.topbar-social .bi-line {
  transform: translateY(1.2px);
}

.topbar-social .bi-facebook,
.topbar-social .bi-instagram {
  transform: translate(.6px, 1px);
}

.topbar-social:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  transform: translateY(-1px);
}

/* =========================================================
   MAIN HEADER
========================================================= */
.main-header {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tjsif-line-soft);
  box-shadow: 0 10px 30px rgba(11, 42, 82, .05);
}

#mainNavbar {
  min-height: var(--header-h);
  padding: 0;
  background: transparent;
}

#mainNavbar .container-fluid {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.header-shell {
  width: 100%;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}

/* =========================================================
   BRAND
========================================================= */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  max-width: var(--brand-max-w);
  min-width: 0;
  margin: 0;
  padding: 0;
  flex: 0 1 var(--brand-max-w);
  text-decoration: none;
  overflow: visible;
}

.brand-logo-wrap {
  position: relative;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55)),
    linear-gradient(145deg, rgba(47, 111, 190, .12), rgba(11, 42, 82, .08));
  border: 1px solid rgba(47, 111, 190, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 10px 26px rgba(17, 55, 104, .10);
  overflow: hidden;
}

.brand-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.brand-logo-wrap img {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.brand-text {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.05;
}

.brand-title {
  position: relative;
  margin: 0;
  padding-left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tjsif-navy);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.brand-title .dot {
  position: absolute;
  left: 5px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tjsif-red);
  box-shadow: 0 0 0 6px rgba(198, 40, 57, .14);
  transform: translateY(-48%);
}

.brand-subtitle {
  margin-top: .34rem;
  color: var(--tjsif-muted);
  font-size: .8rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* =========================================================
   NAVIGATION
========================================================= */
.navbar-collapse {
  min-width: 0;
  flex: 1 1 auto;
}

.navbar-nav {
  align-items: center;
  gap: .1rem;
  min-width: 0;
}

.navbar .nav-item {
  position: relative;
}

.navbar .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .9rem .78rem;
  color: var(--tjsif-text);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  background: transparent !important;
  border: none;
  box-shadow: none !important;
  transition: color .18s ease, opacity .18s ease;
}

.navbar .nav-link::before,
.navbar .nav-link::after {
  display: none !important;
  content: none !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--tjsif-navy-2);
}

.navbar .nav-link.active {
  color: var(--tjsif-navy-2);
  font-weight: 700;
}

@media (min-width: 1200px) {
  .navbar .nav-link.active {
    border-bottom: 2px solid var(--tjsif-red);
  }
}

/* =========================================================
   TOGGLER
========================================================= */
.navbar-toggler {
  border: none;
  padding: .45rem .55rem;
  border-radius: 10px;
  margin-left: auto;
  margin-right: .35rem;
  flex: 0 0 auto;
  background: transparent;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.navbar-toggler:hover {
  background: transparent;
}

/* =========================================================
   DROPDOWN CARET
========================================================= */
.nav-link.dropdown-toggle {
  padding-right: .8rem;
}

.navbar .dropdown-toggle::after {
  display: none !important;
}

.nav-caret {
  position: relative;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  margin-left: .1rem;
}

.nav-caret::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .2s ease, top .2s ease;
  border-radius: 1px;
}

.dropdown.show > .nav-link .nav-caret::before,
.dropdown .nav-link[aria-expanded="true"] .nav-caret::before {
  transform: rotate(-135deg);
  top: 4px;
}

/* =========================================================
   DROPDOWN MENU
========================================================= */
#mainNavbar .dropdown-menu {
  margin-top: .45rem;
  min-width: 180px;
  border: none;
  border-radius: 18px;
  padding: .42rem;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(11, 42, 82, .12);
  border: 1px solid rgba(12, 42, 82, .08);
  overflow: hidden;
}

#mainNavbar .dropdown-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tjsif-red), #ff5b6b);
}

#mainNavbar .dropdown-item {
  position: relative;
  padding: .58rem .82rem;
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--tjsif-text);
  transition: all .16s ease;
  white-space: normal;
}

#mainNavbar .dropdown-item:hover,
#mainNavbar .dropdown-item:focus {
  color: var(--tjsif-navy-2);
  background: var(--tjsif-soft);
  transform: translateX(2px);
}

/* =========================================================
   LOGIN BUTTON
========================================================= */
.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 96px;
  padding: .72rem 1.25rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--tjsif-red) 0%, #e3475a 100%);
  box-shadow:
    0 10px 22px rgba(198, 40, 57, .25),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.btn-login i {
  font-size: .95rem;
  transform: translateY(1px);
}

.btn-login:hover,
.btn-login:focus {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(198, 40, 57, .35),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  filter: saturate(1.1);
}

.btn-login:active {
  transform: translateY(0);
}

/* =========================================================
   LARGE DESKTOP
========================================================= */
@media (min-width: 1200px) {
  .navbar-collapse {
    justify-content: flex-end;
  }

  .navbar .dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
  }
}

/* =========================================================
   RESPONSIVE 1499
========================================================= */
@media (max-width: 1499.98px) {
  :root {
    --brand-max-w: 380px;
  }

  .topbar-text {
    max-width: 420px;
  }
}

/* =========================================================
   RESPONSIVE 1399
========================================================= */
@media (max-width: 1399.98px) {
  :root {
    --brand-max-w: 345px;
  }

  .navbar .nav-link {
    padding: .88rem .66rem;
    font-size: .92rem;
  }

  .brand-title {
    font-size: 1.2rem;
  }

  .brand-subtitle {
    font-size: .8rem;
  }

  .topbar-text {
    max-width: 340px;
  }
}

/* =========================================================
   RESPONSIVE 1299
========================================================= */
@media (max-width: 1299.98px) {
  :root {
    --brand-max-w: 320px;
  }

  .topbar-text {
    max-width: 280px;
  }
}

/* =========================================================
   RESPONSIVE 1199
========================================================= */
@media (max-width: 1199.98px) {
  :root {
    --header-h: 84px;
    --topbar-h: 40px;
    --all-header-h: 124px;
    --brand-max-w: 100%;
  }

  #mainNavbar .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header-shell {
    gap: .85rem;
  }

  .navbar-brand {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .brand-text {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand-subtitle {
    font-size: .8rem;
  }

  .navbar-collapse {
    position: absolute;
    top: calc(100% + 10px);
    left: 1rem;
    right: 1rem;
    padding: .65rem;
    border: 1px solid rgba(12, 42, 82, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--tjsif-shadow-lg);
  }

  .navbar-nav {
    align-items: stretch;
    gap: .05rem;
  }

  .navbar .nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: .88rem .9rem;
    border-radius: 14px;
  }

  .navbar .nav-link:hover,
  .navbar .nav-link:focus {
    background: rgba(47, 111, 190, .05) !important;
  }

  .navbar .nav-link.active {
    border-bottom: none;
    background: rgba(47, 111, 190, .08) !important;
  }

  .btn-login {
    width: 100%;
    margin-top: .5rem;
  }

  .topbar-right {
    gap: .45rem;
  }

  .topbar-text {
    max-width: none;
  }

  #mainNavbar .dropdown-menu {
    position: static !important;
    transform: none !important;
    min-width: 100%;
    margin: .18rem 0 .35rem;
    border-radius: 16px;
    box-shadow: none;
    background: var(--tjsif-soft);
    border: 1px solid rgba(47, 111, 190, .08);
    padding: .28rem;
  }

  #mainNavbar .dropdown-menu::before {
    display: none;
  }

  #mainNavbar .dropdown-item {
    padding: .56rem .78rem;
    border-radius: 10px;
    font-size: .9rem;
  }

  #mainNavbar .dropdown-item:hover,
  #mainNavbar .dropdown-item:focus {
    transform: none;
  }

  .navbar .nav-link {
    justify-content: space-between;
  }
}

/* =========================================================
   RESPONSIVE 991
========================================================= */
@media (max-width: 991.98px) {
  .topbar-text {
    display: none;
  }

  .brand-subtitle {
    font-size: .8rem;
  }
}

/* =========================================================
   RESPONSIVE 767
========================================================= */
@media (max-width: 767.98px) {
  :root {
    --header-h: 80px;
    --topbar-h: 38px;
    --all-header-h: 118px;
  }

  .topbar .container-fluid,
  #mainNavbar .container-fluid {
    padding-left: .9rem;
    padding-right: .9rem;
  }

  .topbar-right {
    gap: .4rem;
  }

  .topbar-social {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .topbar-social i {
    font-size: .84rem;
  }

  .navbar-brand {
    gap: .58rem;
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .brand-text {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand-logo-wrap {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 18px;
  }

  .brand-logo-wrap img {
    width: 38px;
    height: 38px;
  }

  .brand-title {
    padding-left: 16px;
    font-size: 1.05rem;
  }

  .brand-title .dot {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 5px rgba(198, 40, 57, .14);
  }

  .brand-subtitle {
    margin-top: .28rem;
    font-size: .8rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    display: block;
  }

  .navbar-toggler {
    padding: .35rem .42rem;
    margin-left: .45rem;
    margin-right: .2rem;
  }

  .navbar-collapse {
    left: .9rem;
    right: .9rem;
  }
}

/* =========================================================
   RESPONSIVE 575
========================================================= */
@media (max-width: 575.98px) {
  .topbar-badge {
    padding: .34rem .7rem;
    font-size: .72rem;
  }

  .navbar-brand {
    max-width: none;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-subtitle {
    max-width: none;
    font-size: .8rem;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  .navbar-toggler {
    margin-right: .1rem;
  }

  .navbar-collapse {
    left: .75rem;
    right: .75rem;
  }
}

/* =========================================================
   RESPONSIVE 420
========================================================= */
@media (max-width: 420px) {
  .brand-subtitle {
    font-size: .58rem;
  }

  .brand-title {
    font-size: 1rem;
  }
}

/* =========================================================
   ACTIVE STATE : DROPDOWN SECTION
========================================================= */
.navbar .dropdown-toggle.active {
  color: var(--tjsif-navy-2);
  font-weight: 700;
}

@media (min-width: 1200px) {
  .navbar .dropdown-toggle.active {
    border-bottom: 2px solid var(--tjsif-red);
  }
}

@media (max-width: 1199.98px) {
  .navbar .dropdown-toggle.active {
    border-bottom: none;
    background: rgba(47, 111, 190, .08) !important;
  }
}

/* ลูกใน dropdown ที่ active */
#mainNavbar .dropdown-item.active {
  color: var(--tjsif-navy-2);
  background: var(--tjsif-soft);
  font-weight: 700;
}