/*
Theme Name: WTH-HK Corporate V10
Theme URI: https://wthhk.org/
Author: WTH-HK
Description: Lightweight corporate WordPress theme for WTH-HK with a polished responsive header, mobile navigation, shortcode-ready language area, and institutional footer.
110.0.9
Text Domain: wthhk
*/

:root{
  --wth-navy:#0b2a4d;
  --wth-navy-deep:#071e38;
  --wth-gold:#cda45f;
  --wth-gold-hover:#b98f4c;
  --wth-text:#21364d;
  --wth-muted:#718092;
  --wth-line:#e8edf2;
  --wth-white:#fff;
  --wth-max:1480px;
  --wth-serif:Georgia,"Times New Roman",serif;
  --wth-sans:Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--wth-text);
  font-family:var(--wth-sans);
  -webkit-font-smoothing:antialiased;
}
body.wth-menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.wth-shell{width:min(calc(100% - 72px),var(--wth-max));margin:0 auto}
.site-main{min-height:40vh}

/* ================= HEADER ================= */

.wth-site-header{
  position:relative;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid #eef1f4;
}
.wth-header-inner{
  min-height:82px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:42px;
}

.wth-logo-link{
  display:inline-flex;
  align-items:center;
  min-width:max-content;
}
.wth-logo-link .custom-logo{
  width:auto;
  max-width:205px;
  max-height:54px;
}
.wth-wordmark{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--wth-navy);
}
.wth-wordmark-bars{
  display:flex;
  gap:3px;
  align-items:flex-end;
  height:31px;
}
.wth-wordmark-bars i{
  display:block;
  width:4px;
  background:var(--wth-navy);
}
.wth-wordmark-bars i:nth-child(1){height:14px}
.wth-wordmark-bars i:nth-child(2){height:22px}
.wth-wordmark-bars i:nth-child(3){height:31px}
.wth-wordmark-bars i:nth-child(4){height:19px}
.wth-wordmark-text strong{
  display:block;
  font:400 28px/1 var(--wth-serif);
  letter-spacing:.01em;
}
.wth-wordmark-text small{
  display:block;
  margin-top:5px;
  color:#8a96a3;
  font:600 7px/1 var(--wth-sans);
  letter-spacing:.13em;
}

.wth-primary-nav{
  display:flex;
  justify-content:center;
  min-width:0;
}
.wth-primary-nav ul{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(19px,2vw,34px);
  margin:0;
  padding:0;
  list-style:none;
}
.wth-primary-nav a{
  position:relative;
  display:block;
  padding:31px 0 29px;
  color:#26384c;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  transition:color .2s ease;
}
.wth-primary-nav a:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:21px;
  height:1px;
  background:var(--wth-gold);
  transition:right .2s ease;
}
.wth-primary-nav a:hover,
.wth-primary-nav .current-menu-item>a,
.wth-primary-nav .current_page_item>a{color:var(--wth-navy)}
.wth-primary-nav a:hover:after,
.wth-primary-nav .current-menu-item>a:after,
.wth-primary-nav .current_page_item>a:after{right:0}

.wth-header-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  min-width:max-content;
}
.wth-language-slot{
  width:78px;
  min-width:78px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:#21364d;
  font-size:11px;
  overflow:visible;
  position:relative;
  z-index:1200;
}
.wth-language-slot>*{margin:0!important}
.wth-language-fallback{
  width:78px;
  min-height:42px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:1px solid #dfe5ea;
  background:#fff;
}
.wth-language-fallback:after{
  content:"⌄";
  position:relative;
  top:-2px;
  color:#9a7942;
}

/* GTranslate — compact header integration, no flags, one border only */
.wth-language-slot .gtranslate_wrapper,
.wth-language-slot .gt_switcher,
.wth-language-slot .gt_float_switcher,
.wth-language-slot .switcher{
  position:relative!important;
  inset:auto!important;
  width:78px!important;
  min-width:78px!important;
  max-width:78px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:var(--wth-sans)!important;
  overflow:visible!important;
}
.wth-language-slot img,
.wth-language-slot .gt_flag,
.wth-language-slot .flag{
  display:none!important;
}
.wth-language-slot .gt_selected,
.wth-language-slot .gt-current-lang,
.wth-language-slot .selected{
  width:78px!important;
  min-width:78px!important;
  max-width:78px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.wth-language-slot .gt_selected>a,
.wth-language-slot .gt-current-lang,
.wth-language-slot .selected>a,
.wth-language-slot>.gtranslate_wrapper>a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:78px!important;
  min-width:78px!important;
  max-width:78px!important;
  min-height:42px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0 22px 0 10px!important;
  border:1px solid #dfe5ea!important;
  border-radius:0!important;
  background:#fff!important;
  color:#21364d!important;
  font:500 10px/1 var(--wth-sans)!important;
  text-decoration:none!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.wth-language-slot select{
  width:78px!important;
  min-width:78px!important;
  max-width:78px!important;
  height:42px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0 22px 0 10px!important;
  border:1px solid #dfe5ea!important;
  outline:0!important;
  border-radius:0!important;
  background-color:#fff!important;
  color:#21364d!important;
  font:500 10px/1 var(--wth-sans)!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.wth-language-slot .gt_option,
.wth-language-slot .option,
.wth-language-slot .gt_options{
  position:absolute!important;
  top:100%!important;
  right:0!important;
  left:auto!important;
  width:164px!important;
  min-width:164px!important;
  max-width:164px!important;
  max-height:280px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:5px 0!important;
  border:1px solid #e3e8ed!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(11,42,77,.10)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  z-index:99999!important;
  scrollbar-width:thin;
  scrollbar-color:#c9a15c #f6f6f6;
}
.wth-language-slot .gt_option::-webkit-scrollbar,
.wth-language-slot .option::-webkit-scrollbar,
.wth-language-slot .gt_options::-webkit-scrollbar{
  width:5px;
  height:0;
}
.wth-language-slot .gt_option::-webkit-scrollbar-thumb,
.wth-language-slot .option::-webkit-scrollbar-thumb,
.wth-language-slot .gt_options::-webkit-scrollbar-thumb{
  background:#c9a15c;
  border-radius:10px;
}
.wth-language-slot .gt_option a,
.wth-language-slot .option a,
.wth-language-slot .gt_options a{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:9px 11px!important;
  border:0!important;
  background:#fff!important;
  color:#334b64!important;
  font:400 11px/1.35 var(--wth-sans)!important;
  text-align:left!important;
  text-decoration:none!important;
  white-space:normal!important;
}
.wth-language-slot .gt_option a:hover,
.wth-language-slot .option a:hover,
.wth-language-slot .gt_options a:hover{
  background:#faf7f0!important;
  color:var(--wth-navy)!important;
}
.wth-mobile-bottom .wth-language-slot{
  width:92px;
  min-width:92px;
  flex:0 0 92px;
}
.wth-mobile-bottom .wth-language-slot .gtranslate_wrapper,
.wth-mobile-bottom .wth-language-slot .gt_switcher,
.wth-mobile-bottom .wth-language-slot .gt_float_switcher,
.wth-mobile-bottom .wth-language-slot .switcher,
.wth-mobile-bottom .wth-language-slot .gt_selected,
.wth-mobile-bottom .wth-language-slot .selected{
  width:92px!important;
  min-width:92px!important;
  max-width:92px!important;
}
.wth-mobile-bottom .wth-language-slot .gt_selected>a,
.wth-mobile-bottom .wth-language-slot .selected>a,
.wth-mobile-bottom .wth-language-slot select{
  width:92px!important;
  min-width:92px!important;
  max-width:92px!important;
  min-height:46px!important;
  height:46px!important;
}
.wth-mobile-bottom .wth-language-slot .gt_option,
.wth-mobile-bottom .wth-language-slot .option,
.wth-mobile-bottom .wth-language-slot .gt_options{
  right:auto!important;
  left:0!important;
  width:164px!important;
  min-width:164px!important;
  max-width:164px!important;
  max-height:240px!important;
}
.wth-join-btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:0 24px;
  background:var(--wth-gold);
  border:1px solid var(--wth-gold);
  color:#172c43;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.wth-join-btn:hover{
  background:var(--wth-gold-hover);
  border-color:var(--wth-gold-hover);
  transform:translateY(-1px);
}
.wth-join-arrow{font-size:16px;font-weight:400}

.wth-menu-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.wth-menu-toggle span{
  display:block;
  width:24px;
  height:1.5px;
  margin:6px auto;
  background:var(--wth-navy);
  transition:.25s ease;
}
body.wth-menu-open .wth-menu-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.wth-menu-open .wth-menu-toggle span:nth-child(2){opacity:0}
body.wth-menu-open .wth-menu-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.wth-mobile-panel{
  display:none;
  position:fixed;
  z-index:999;
  inset:82px 0 0;
  background:rgba(255,255,255,.985);
  overflow:auto;
}
.wth-mobile-panel-inner{
  width:min(calc(100% - 44px),680px);
  margin:0 auto;
  padding:38px 0 52px;
}
.wth-mobile-nav ul{margin:0;padding:0;list-style:none}
.wth-mobile-nav li{border-bottom:1px solid var(--wth-line)}
.wth-mobile-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 2px;
  color:var(--wth-navy);
  font:400 25px/1.15 var(--wth-serif);
}
.wth-mobile-nav a:after{
  content:"→";
  color:var(--wth-gold);
  font:400 18px/1 var(--wth-sans);
}
.wth-mobile-bottom{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:32px;
}
.wth-mobile-bottom .wth-language-slot{height:46px}
.wth-mobile-bottom .wth-join-btn{height:46px;flex:1}

/* ================= FOOTER ================= */

.wth-site-footer{
  background:#fff;
  border-top:1px solid var(--wth-line);
  padding:54px 0 28px;
}

.wth-footer-top{
  display:grid;
  grid-template-columns:minmax(220px,.9fr) minmax(460px,1.9fr) minmax(260px,1fr);
  gap:52px;
  align-items:start;
}

.wth-footer-brand{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.wth-footer-brand-copy{
  max-width:285px;
  color:#8994a0;
  font-size:12px;
  line-height:1.65;
  letter-spacing:.02em;
}

.wth-footer-nav ul{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px 34px;
  margin:7px 0 0;
  padding:0;
  list-style:none;
}
.wth-footer-nav a{
  display:inline-block;
  color:#405267;
  font-size:12px;
  line-height:1.45;
  transition:color .2s ease;
}
.wth-footer-nav a:hover{color:var(--wth-navy)}

.wth-footer-contact{
  padding-left:38px;
  border-left:1px solid var(--wth-line);
}
.wth-footer-heading{
  margin:0 0 16px;
  color:var(--wth-navy);
  font-size:11px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.wth-footer-location{
  margin:0 0 14px;
  color:#6f7d8c;
  font-size:12px;
  line-height:1.6;
}
.wth-footer-contact a{
  color:#334b64;
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere;
  transition:color .2s ease;
}
.wth-footer-contact a:hover{color:var(--wth-gold-hover)}

.wth-footer-secondary{
  margin-top:7px;
}
.wth-footer-secondary:empty{display:none}

/* Social icons inside contact column */
.wth-footer-social-icons{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:18px;
}
.wth-footer-social-icon{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dfe5eb;
  background:#fff;
  color:var(--wth-navy);
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease;
}
.wth-footer-social-icon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
a.wth-footer-social-icon:hover{
  border-color:var(--wth-gold);
  color:var(--wth-gold-hover);
  background:#faf8f4;
  transform:translateY(-1px);
}
.wth-footer-social-icon.is-empty{
  color:#9aa4af;
  background:#fff;
  cursor:default;
}
.screen-reader-text{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.wth-footer-bottom{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:34px;
  margin-top:40px;
  padding-top:21px;
  border-top:1px solid var(--wth-line);
}
.wth-footer-copyright{
  color:#8b96a2;
  font-size:11px;
  line-height:1.5;
}
.wth-footer-legal{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:24px;
}
.wth-footer-legal a{
  color:#7b8794;
  font-size:11px;
  line-height:1.45;
  transition:color .2s ease;
}
.wth-footer-legal a:hover{color:var(--wth-navy)}


.wth-site-footer .wth-logo-link .custom-logo{
  max-width:225px;
  max-height:60px;
}
.wth-site-footer .wth-wordmark-text strong{
  font-size:30px;
}
.wth-site-footer .wth-wordmark-text small{
  font-size:7px;
}

/* Elementor compatibility */
body.elementor-page .site-main{overflow:hidden}
body.elementor-page .elementor-section-wrap,
body.elementor-page .elementor{min-width:0}

/* ================= RESPONSIVE ================= */

@media(max-width:1180px){
  .wth-header-inner{gap:26px}
  .wth-primary-nav ul{gap:18px}
  .wth-primary-nav a{font-size:11px}
  .wth-join-btn{padding:0 18px}

  .wth-footer-top{
    grid-template-columns:190px 1.6fr 1fr;
    gap:34px;
  }
  .wth-footer-nav ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:1020px){
  .wth-shell{width:min(calc(100% - 46px),var(--wth-max))}
  .wth-header-inner{
    min-height:76px;
    grid-template-columns:auto 1fr auto;
    gap:18px;
  }
  .wth-primary-nav{display:none}
  .wth-header-tools{margin-left:auto}
  .wth-menu-toggle{display:block}
  .wth-mobile-panel{
    display:block;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:.2s ease;
  }
  body.wth-menu-open .wth-mobile-panel{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  .wth-footer-top{
    grid-template-columns:1fr 1.6fr;
  }
  .wth-footer-contact{
    grid-column:1/-1;
    padding:26px 0 0;
    border-left:0;
    border-top:1px solid var(--wth-line);
  }
}

@media(max-width:720px){
  .wth-site-footer{padding:42px 0 24px}
  .wth-footer-top{
    grid-template-columns:1fr;
    gap:30px;
  }
  .wth-footer-nav ul{
    grid-template-columns:1fr 1fr;
    gap:14px 20px;
  }
  .wth-footer-contact{
    grid-column:auto;
    padding-top:24px;
  }
  .wth-footer-bottom{
    flex-direction:column;
    gap:16px;
    margin-top:30px;
  }
  .wth-footer-legal{
    justify-content:flex-start;
    gap:12px 18px;
  }
}

@media(max-width:640px){
  .wth-shell{width:min(calc(100% - 30px),var(--wth-max))}
  .wth-header-inner{min-height:68px;gap:10px}
  .wth-logo-link .custom-logo{max-width:150px;max-height:42px}
  .wth-wordmark-bars{height:27px}
  .wth-wordmark-bars i{width:3px}
  .wth-wordmark-bars i:nth-child(1){height:12px}
  .wth-wordmark-bars i:nth-child(2){height:19px}
  .wth-wordmark-bars i:nth-child(3){height:27px}
  .wth-wordmark-bars i:nth-child(4){height:16px}
  .wth-wordmark-text strong{font-size:22px}
  .wth-wordmark-text small{font-size:5.5px}
  .wth-header-tools>.wth-language-slot{display:none}
  .wth-header-tools>.wth-join-btn{display:none}
  .wth-menu-toggle{margin-left:auto}
  .wth-mobile-panel{inset:68px 0 0}
  .wth-mobile-panel-inner{width:calc(100% - 34px);padding-top:26px}
  .wth-mobile-nav a{font-size:22px;padding:18px 2px}

  .wth-footer-nav ul{grid-template-columns:1fr}
  .wth-footer-brand-copy{max-width:100%}
}


@media(max-width:720px){
  .wth-footer-nav a{font-size:13px}
  .wth-footer-brand-copy{font-size:12px;line-height:1.6}
  .wth-footer-heading{font-size:11px}
  .wth-footer-location{font-size:12px}
  .wth-footer-contact a{font-size:13px}
  .wth-footer-copyright,
  .wth-footer-legal a{font-size:10.5px}
}

@media(max-width:420px){
  .wth-site-footer .wth-logo-link .custom-logo{max-width:185px}
  .wth-footer-nav a{font-size:12.5px}
  .wth-footer-contact a{font-size:12.5px}
}

/* ================= FOOTER DISCLAIMERS ================= */
.wth-footer-disclaimers{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:34px;
    margin-top:40px;
    padding-top:22px;
    border-top:1px solid var(--wth-line);
}
.wth-footer-disclaimers p{
    margin:0;
    color:#8b96a2;
    font-size:10.5px;
    line-height:1.7;
    letter-spacing:.01em;
}
.wth-footer-disclaimers strong{
    display:block;
    margin-bottom:5px;
    color:#5f6f80;
    font-size:9.5px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.wth-footer-disclaimers + .wth-footer-bottom{ margin-top:24px; }

@media(max-width:1020px){
    .wth-footer-disclaimers{ grid-template-columns:1fr; gap:14px; }
}
@media(max-width:720px){
    .wth-footer-disclaimers{ margin-top:30px; padding-top:20px; }
    .wth-footer-disclaimers + .wth-footer-bottom{ margin-top:20px; }
}

/* ================= FOOTER SOCIAL — BRAND ICONS ================= */
.wth-footer-social-icon svg.wth-brand-icon{
    width:15px;
    height:15px;
    fill:currentColor;
    stroke:none;
}


/* ===== WII: 8-item primary menu (2026-10-21) ===== */
@media(min-width:1301px){
  .wth-header-inner{gap:30px}
  .wth-primary-nav ul{gap:clamp(14px,1.35vw,26px)}
  .wth-primary-nav a{
    white-space:normal;
    max-width:132px;
    padding:24px 0 22px;
    line-height:1.3;
    text-align:center;
    text-wrap:balance;
  }
  .wth-primary-nav a:after{bottom:15px}
}
@media(max-width:1300px){
  .wth-header-inner{min-height:76px;gap:18px}
  .wth-primary-nav{display:none}
  .wth-header-tools{margin-left:auto}
  .wth-menu-toggle{display:block}
  .wth-mobile-panel{
    display:block;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:.2s ease;
  }
  body.wth-menu-open .wth-mobile-panel{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
}

/* ===== WII: footer nav 2 cols (2026-10-21) ===== */
.wth-footer-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}