/* =====================================================
   TAAL13A SHARED HEADER
   公共顶部导航 / 响应式菜单
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Inter:wght@400;500;600;700;800;900&family=Noto+Serif+SC:wght@500;700;800;900&display=swap');

:root{
  --header-display:"Noto Serif SC","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  --header-number:"Electrolize","Helvetica Neue",Arial,sans-serif;
  --header-body:"Inter","Noto Sans SC","Helvetica Neue",Arial,sans-serif;

  --header-black:#17130f;
  --header-gray:#8f8f8a;
  --header-blue:#0F5E8C;
  --header-blue-dark:#0B486D;
  --header-cream:#FFFDF8;
  --header-line:#E6DED2;
}

body.menu-open{
  overflow:hidden;
}


/* =====================================================
   1. Header base
===================================================== */

.tb{
  width:100%;
  height:68px;
  padding:0 24px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  position:sticky;
  top:0;
  z-index:9999;

  background:var(--header-cream);
  border-bottom:1px solid var(--header-black);

  box-shadow:none;
}

.header-logo-link{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  text-decoration:none;
}

.logo-main{
  display:block;
  height:42px;
  width:auto;
  max-width:190px;
  flex:0 0 auto;
}


/* =====================================================
   2. Desktop navigation
   中文大字 + 灰色荷兰语
===================================================== */

.nc{
  flex:1 1 auto;
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;

  overflow:hidden;
}

.nl{
  padding:0;
  margin:0;

  display:inline-flex;
  align-items:baseline;
  gap:14px;

  border:none;
  background:transparent;

  color:var(--header-black);
  text-decoration:none;

  font-family:var(--header-body);
  font-size:0;
  font-weight:900;

  white-space:nowrap;
}

.nl::before{
  display:inline-block;

  font-family:var(--header-display);
  font-size:22px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;

  color:var(--header-black);
}

.nl::after{
  display:inline-block;

  position:static;
  width:auto;
  height:auto;

  font-family:var(--header-number);
  font-size:14px;
  line-height:1;
  font-weight:400;
  letter-spacing:.34em;

  color:var(--header-gray);

  text-transform:uppercase;

  background:none;
}


/* 主页 */

.nl[data-zh="主页 / Home"]::before{
  content:"主页";
}

.nl[data-zh="主页 / Home"]::after{
  content:"HOME";
}


/* 课程 */

.nl[data-zh="课程 / Cursussen"]::before{
  content:"课程";
}

.nl[data-zh="课程 / Cursussen"]::after{
  content:"CURSUSSEN";
}


/* 书店 */

.nl[data-zh="书店 / Winkel"]::before{
  content:"书店";
}

.nl[data-zh="书店 / Winkel"]::after{
  content:"WINKEL";
}


/* 关于 */

.nl[data-zh="关于 / Over ons"]::before{
  content:"关于";
}

.nl[data-zh="关于 / Over ons"]::after{
  content:"OVER ONS";
}


/* 联系 */

.nl[data-zh="联系 / Contact"]::before{
  content:"联系";
}

.nl[data-zh="联系 / Contact"]::after{
  content:"CONTACT";
}


/* hover / 当前页面 */

.nl:hover::before,
.nl.on::before{
  color:var(--header-black);
}

.nl:hover::after,
.nl.on::after{
  color:var(--header-gray);
}


/* =====================================================
   3. Right tools / Auth
===================================================== */

.nr{
  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:12px;
}

.auth-actions{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.is-hidden,
#auth-btns[hidden],
#user-btns[hidden],
#auth-btns.hidden,
#user-btns.hidden{
  display:none !important;
}


/* 登录 */

.login-link{
  height:42px;
  padding:0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:none;
  background:transparent;

  color:var(--header-black);
  text-decoration:none;

  font-family:var(--header-body);
  font-size:14px;
  line-height:1;
  font-weight:900;

  white-space:nowrap;
  cursor:pointer;
}

.login-link:hover{
  color:var(--header-blue);
}


/* 注册 */

.register-btn{
  height:42px;
  padding:0 18px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:2px solid var(--header-blue);
  border-radius:0;

  background:var(--header-blue);
  color:#fff;

  text-decoration:none;

  font-family:var(--header-body);
  font-size:14px;
  line-height:1;
  font-weight:900;

  white-space:nowrap;
  cursor:pointer;

  box-shadow:none;
}

.register-btn:hover{
  background:var(--header-blue-dark);
  border-color:var(--header-blue-dark);
}


/* 用户中心 icon */

.account-icon-btn{
  width:30px;
  height:30px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0;
  border:none;

  background:transparent;
  color:var(--header-black);

  text-decoration:none;
}

.account-icon-btn svg{
  width:25px;
  height:25px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* 当前首页最终版没有语言切换，暂时统一隐藏 */

.lang-icon-btn,
.language-tool,
.lang-text{
  display:none !important;
}


/* =====================================================
   4. Menu button
===================================================== */

.menu-toggle-btn{
  display:none;

  width:42px;
  height:42px;

  padding:0;

  border:none;
  background:transparent;
  color:var(--header-black);

  align-items:center;
  justify-content:center;

  cursor:pointer;
  flex-shrink:0;
}

.menu-lines{
  width:28px;
  height:20px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.menu-lines i{
  display:block;

  width:100%;
  height:2px;

  background:var(--header-black);

  border-radius:0;
}

.menu-word{
  display:none;
}


/* =====================================================
   5. Drawer backdrop
===================================================== */

.site-menu-backdrop{
  display:none;

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.28);

  z-index:99998;
}

.site-menu-backdrop.open{
  display:block;
}


/* =====================================================
   6. Drawer panel
===================================================== */

.site-menu-panel{
  position:fixed;

  top:0;
  right:0;

  width:min(380px,86vw);
  height:100vh;

  padding:26px 28px 32px;

  display:flex;
  flex-direction:column;

  background:var(--header-cream);

  border-left:1px solid var(--header-line);

  z-index:99999;

  transform:translateX(105%);
  transition:transform .22s ease;
}

.site-menu-panel.open{
  transform:translateX(0);
}


/* Drawer header */

.site-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding-bottom:24px;

  border-bottom:1px solid var(--header-line);
}

.site-menu-title{
  font-family:var(--header-body);
  font-size:27px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.055em;

  color:var(--header-black);
}

.site-menu-close{
  padding:0;

  border:none;
  background:transparent;

  color:var(--header-black);

  font-size:34px;
  line-height:1;

  cursor:pointer;
}


/* =====================================================
   7. Drawer navigation
===================================================== */

.site-menu-links{
  display:flex;
  flex-direction:column;
  gap:0;
  padding-top:22px;
}

.site-menu-links a{
  padding:18px 0;

  display:flex;
  align-items:baseline;
  gap:14px;

  border-bottom:1px solid rgba(230,222,210,.72);

  color:var(--header-black);
  text-decoration:none;

  cursor:pointer;
}

.site-menu-links a span{
  font-family:var(--header-display);

  font-size:30px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.06em;

  color:var(--header-black);

  transition:color .18s ease;
}

.site-menu-links a em{
  font-family:var(--header-number);

  font-style:normal;

  font-size:14px;
  line-height:1;
  font-weight:400;
  letter-spacing:.28em;

  color:var(--header-gray);

  text-transform:uppercase;
}

.site-menu-links a:hover span{
  color:var(--header-blue);
}


/* Drawer bottom actions */

.site-menu-actions{
  margin-top:auto;
  padding-top:24px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.site-menu-actions a{
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1.5px solid var(--header-black);

  background:transparent;
  color:var(--header-black);

  text-decoration:none;

  font-family:var(--header-body);
  font-size:15px;
  font-weight:900;
}

.site-menu-actions .site-menu-register{
  background:var(--header-blue);
  border-color:var(--header-blue);
  color:#fff;
}
/* =====================================================
   8. Desktop Nav Micro Interaction
===================================================== */

@media(min-width:1181px){

  .nc .nl{
    position:relative !important;
    transform:translateY(0) !important;

    transition:
      transform .22s ease,
      opacity .22s ease !important;
  }

  .nc .nl:hover{
    transform:translateY(-2px) !important;
    opacity:.68 !important;
  }

  .nc .nl:active{
    transform:translateY(1px) scale(.98) !important;
    transition-duration:.08s !important;
  }

 .nc .nl.on:not(:hover){
  opacity:1 !important;
}

  .nc .nl:focus-visible{
    outline:1px solid #171717;
    outline-offset:5px;
  }
}


/* =====================================================
   9. Narrow Desktop
   1181px – 1380px
===================================================== */

@media(min-width:1181px) and (max-width:1380px){

  .tb{
    padding:0 18px !important;
    gap:16px !important;
  }

  .logo-main{
    height:38px !important;
    max-width:170px !important;
  }

  .nc{
    gap:28px !important;
  }

  .nl{
    gap:9px !important;
  }

  .nl::before{
    font-size:18px !important;
  }

  .nl::after{
    font-size:11px !important;
    letter-spacing:.24em !important;
  }

  .login-link,
  .register-btn{
    font-size:13px !important;
  }

  .register-btn{
    height:38px !important;
    padding:0 13px !important;
  }
}


/* =====================================================
   10. Tablet / Narrow Window
   701px – 1180px
===================================================== */

@media(min-width:701px) and (max-width:1180px){

  .tb{
    height:68px !important;
    min-height:68px !important;
    padding:0 18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:16px !important;
  }

  .logo-main{
    height:42px !important;
    width:auto !important;
    flex-shrink:0 !important;
  }

  .nc{
    display:none !important;
  }

  .nr{
    margin-left:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:14px !important;
  }

  #auth-btns,
  #user-btns{
    align-items:center !important;
    gap:12px !important;
  }

  #auth-btns[hidden],
  #user-btns[hidden],
  #auth-btns.hidden,
  #user-btns.hidden,
  #auth-btns.is-hidden,
  #user-btns.is-hidden{
    display:none !important;
  }

  .menu-toggle-btn{
    display:inline-flex !important;

    width:42px !important;
    height:42px !important;

    padding:0 !important;

    align-items:center !important;
    justify-content:center !important;

    border:none !important;
    background:transparent !important;

    color:var(--header-black) !important;

    cursor:pointer !important;
    flex-shrink:0 !important;
  }

  .menu-lines{
    display:flex !important;

    width:28px !important;
    height:20px !important;

    flex-direction:column !important;
    justify-content:space-between !important;
  }

  .menu-lines i{
    display:block !important;

    width:28px !important;
    height:2px !important;

    background:var(--header-black) !important;
  }

  .menu-word{
    display:none !important;
  }
}


/* =====================================================
   11. Mobile
   <= 700px
===================================================== */

@media(max-width:700px){

  body{
    padding-top:104px;
  }

  .tb{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    height:68px !important;
    min-height:68px !important;

    padding:0 18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    background:var(--header-cream) !important;
    border-bottom:1px solid var(--header-black) !important;

    z-index:9999 !important;
  }

  .logo-main{
    height:40px !important;
    width:auto !important;
  }

  .nc,
  #auth-btns,
  #user-btns,
  .lang-icon-btn,
  .language-tool,
  .lang-text{
    display:none !important;
  }

  .nr{
    margin-left:auto !important;
    gap:0 !important;
  }

  .menu-toggle-btn{
    display:inline-flex !important;

    width:42px !important;
    height:42px !important;

    align-items:center !important;
    justify-content:center !important;
  }

  .menu-lines{
    display:flex !important;
  }

  .menu-lines i{
    display:block !important;
  }

  .site-menu-panel{
    width:86vw;
    padding:24px 24px 30px;
  }

  .site-menu-links a span{
    font-size:28px;
  }

  .site-menu-links a em{
    font-size:13px;
    letter-spacing:.24em;
  }
}


/* =====================================================
   12. Reduced Motion
===================================================== */

@media(prefers-reduced-motion:reduce){

  .nc .nl{
    transition:none !important;
  }
}