/* ==================== CIRCUITHUB ENTERPRISE LIMITED — Custom Styles ==================== */

html{
  scroll-behavior: smooth;
}

section[id]{
  scroll-margin-top: 8rem;
}

/*---------- Text Logo (no image logo) ----------*/
.text-logo{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1.15;
  z-index: 100000;
  color: var(--white);
  text-transform: uppercase;
  margin-top: 25px;
}

.text-logo .brand{
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--white);
}

.text-logo .brand-sub{
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  color: var(--main-color);
  margin-top: 0.3rem;
}

.header.active .text-logo .brand{
  font-size: 2rem;
}

.footer .text-logo{
  color: var(--white);
}

.footer .text-logo .brand{
  color: var(--white);
}

.footer .text-logo .brand-sub{
  color: var(--main-color);
}

/*---------- Language Toggle ----------*/
.lang-toggle{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem;
}

.lang-toggle button{
  background: none;
  border: 0.1rem solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 600;
  padding: 0.5rem 1.3rem;
  border-radius: 50rem;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.lang-toggle button:hover{
  background: var(--main-color);
  border-color: var(--main-color);
}

.lang-toggle button.active{
  background: var(--main-color);
  border-color: var(--main-color);
}

/*---------- Chinese Typography ----------*/
html[lang="zh-Hant"] body,
html[lang="zh-Hant"] body *{
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Heiti TC", sans-serif;
}

/* Keep Font Awesome icons working when Chinese font is applied */
html[lang="zh-Hant"] body .fa,
html[lang="zh-Hant"] body .fas,
html[lang="zh-Hant"] body .far,
html[lang="zh-Hant"] body .fab,
html[lang="zh-Hant"] body .fa-solid,
html[lang="zh-Hant"] body .fa-regular,
html[lang="zh-Hant"] body .fa-brands,
html[lang="zh-Hant"] body .fa-classic{
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
}

/*---------- Mobile menu language toggle ----------*/
.mobile-lang{
  padding: 1.5rem 0;
  border-bottom: 0.1rem solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
}

.mobile-lang .lang-toggle button{
  border-color: rgba(255, 255, 255, 0.3);
}

/*---------- Header-2 language toggle (visible after scroll) ----------*/
.header-lang-toggle button{
  border-color: rgba(255, 255, 255, 0.5);
  padding: 0.6rem 1.4rem;
}

@media (max-width: 991px){
  .header-lang-toggle{
    display: none;
  }
}

/*---------- Hero slide info box ----------*/
.home .content .text .donate-box{
  margin-top: 2rem;
}

/*---------- Contact mailto note ----------*/
.contact form .note{
  font-size: 1.4rem;
  color: var(--light-grey);
  margin-top: 1rem;
  display: block;
}

/*---------- Footer bottom ----------*/
.footer .content p a{
  color: var(--main-color);
}

/*---------- Button override ----------*/
.btn{
  display: inline-block;
  font-size: 1rem;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  background-image: -webkit-linear-gradient(306deg, var(--main-color), var(--accent-color), var(--main-color));
  background-image: linear-gradient(144deg, var(--main-color), var(--accent-color), var(--main-color));
  background-size: 300% 100%;
  border-radius: var(--border-radius-2);
  cursor: pointer;
}