/* Header V2-2 - 雙層簡潔直覺版 */
:root{
  --syh22-orange:#ff8a00;
  --syh22-orange2:#ff6b00;
  --syh22-ink:#0b2d55;
  --syh22-muted:#657085;
  --syh22-cream:#fff8ee;
  --syh22-line:#f3d8b8;
}
.header{background:transparent!important;min-height:0!important;}
.syh-v22{position:sticky;top:0;z-index:900;background:linear-gradient(90deg,#fff 0%,#fff8ee 56%,#ffe8c7 100%);border-bottom:1px solid rgba(255,138,0,.18);box-shadow:0 10px 26px rgba(26,28,35,.06);font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;color:var(--syh22-ink);}
.syh-v22 *{box-sizing:border-box;}
.syh-v22 a{text-decoration:none;}
.syh-v22-top-inner{max-width:1560px;margin:0 auto;min-height:82px;padding:14px 28px;display:grid;grid-template-columns:auto minmax(360px,620px) auto auto auto;gap:22px;align-items:center;}
.syh-v22-brand{margin:0;min-width:250px;}
.syh-v22-brand a{display:flex;align-items:center;gap:12px;color:var(--syh22-ink);}
.syh-v22-logo-mark{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--syh22-orange),#ff9f23);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 26px rgba(255,138,0,.22);font-size:24px;flex:0 0 auto;}
.syh-v22-title{display:block;font-size:25px;font-weight:850;letter-spacing:.02em;line-height:1.1;white-space:nowrap;}
.syh-v22-subtitle{display:block;font-size:15px;font-weight:500;color:#30435d;margin-top:4px;white-space:nowrap;}
.syh-v22-search{height:52px;border:1px solid var(--syh22-line);border-radius:999px;background:rgba(255,255,255,.92);display:flex;align-items:center;padding-left:18px;box-shadow:0 10px 20px rgba(255,138,0,.08);min-width:0;}
.syh-v22-search-input{border:0!important;outline:none!important;background:transparent!important;flex:1;min-width:0;font-size:16px;color:#27364f;padding:0 8px!important;box-shadow:none!important;}
.syh-v22-search-input::placeholder{color:#aaa0a0;}
.syh-v22-search-btn{width:44px;height:44px;border:0;border-radius:50%;margin-right:4px;background:#fff;color:var(--syh22-ink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.syh-v22-search-btn:hover{background:var(--syh22-orange);color:#fff;}
.syh-v22-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;white-space:nowrap;}
.syh-v22-lite-link{font-size:15px;font-weight:800;color:#34435b;padding:8px 6px;}
.syh-v22-lite-link:hover{color:var(--syh22-orange2);}
.syh-v22-cta{height:52px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,var(--syh22-orange),#ff7b00);color:#fff!important;font-weight:900;display:inline-flex;align-items:center;gap:8px;box-shadow:0 16px 30px rgba(255,138,0,.24);}
.syh-v22-cta:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(255,138,0,.30);}
.syh-v22-member{position:relative;}
.syh-v22-member-toggle{height:44px;border:0;background:transparent;color:#27364f;font-weight:850;display:flex;align-items:center;gap:7px;cursor:pointer;border-radius:999px;padding:0 10px;font-size:15px;}
.syh-v22-member-toggle:hover{background:#fff3e4;color:var(--syh22-orange2);}
.syh-v22-member-panel{display:none;position:absolute;right:0;top:calc(100% + 12px);width:240px;background:#fff;border:1px solid #f1d7b8;border-radius:22px;box-shadow:0 22px 54px rgba(16,35,70,.14);padding:12px;z-index:1000;}
.syh-v22-member.is-open .syh-v22-member-panel{display:block;}
.syh-v22-member-panel:before{content:"";position:absolute;right:28px;top:-8px;width:16px;height:16px;background:#fff;border-left:1px solid #f1d7b8;border-top:1px solid #f1d7b8;transform:rotate(45deg);}
.syh-v22-member-panel a,.syh-v22-member-panel input,.syh-v22-member-panel span{display:block;color:#26364d;font-size:15px;font-weight:750;padding:10px 12px;border-radius:14px;}
.syh-v22-member-panel a:hover{background:#fff3e4;color:var(--syh22-orange2);}
.syh-v22-member-panel hr{border:0;border-top:1px solid #f2e3d1;margin:8px 0;}
.syh-v22-member-name{padding:10px 12px;color:#8a5a20;font-size:14px;font-weight:850;line-height:1.4;white-space:normal;}
.syh-v22-lang{display:flex;gap:8px;align-items:center;padding:4px 6px;}
.syh-v22-lang a{padding:6px!important;}
.syh-v22-lang span{padding:0!important;color:#bbb;}
.syh-v22-nav-row{border-top:1px solid rgba(255,138,0,.10);background:rgba(255,255,255,.50);}
.syh-v22-nav{max-width:1560px;margin:0 auto;padding:0 28px;height:52px;display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;}
.syh-v22-nav a{position:relative;color:#17243a;font-weight:800;font-size:16px;padding:11px 18px;border-radius:999px;transition:.18s ease;}
.syh-v22-nav a:hover,.syh-v22-nav a.is-active{color:var(--syh22-orange2);background:#fff3e4;}
.syh-v22-nav a.is-active:after{content:"";position:absolute;left:20px;right:20px;bottom:5px;height:3px;border-radius:999px;background:var(--syh22-orange);}
.syh-v22-search-toggle,.syh-v22-menu-toggle{display:none;border:0;background:transparent;color:var(--syh22-ink);cursor:pointer;}
.syh-v22-menu-toggle{width:44px;height:44px;flex-direction:column;gap:6px;align-items:center;justify-content:center;}
.syh-v22-menu-toggle span{width:24px;height:2px;border-radius:99px;background:var(--syh22-ink);display:block;}
.syh-v22-search-toggle{width:44px;height:44px;font-size:22px;}
.syh-v22-mobile-panel{display:none;background:#fff;border-top:1px solid rgba(255,138,0,.16);padding:10px 20px 18px;}
.syh-v22-mobile-panel a{display:block;color:#24344b;font-weight:850;padding:14px 8px;border-bottom:1px solid #f3e5d5;}
.syh-v22-mobile-panel a:hover{color:var(--syh22-orange2);}
.syh-v22-legacy-data{display:none!important;}
.syh-v22-accesskey{position:absolute;left:4px;top:4px;color:#f3d7b8!important;font-size:12px;}
@media(max-width:1320px){
  .syh-v22-top-inner{grid-template-columns:auto minmax(280px,1fr) auto auto;gap:14px;padding-left:20px;padding-right:20px;}
  .syh-v22-title{font-size:21px}.syh-v22-subtitle{font-size:13px}.syh-v22-logo-mark{width:50px;height:50px}.syh-v22-brand{min-width:210px}.syh-v22-lite-link{display:none}.syh-v22-cta{padding:0 18px}.syh-v22-nav a{font-size:15px;padding-left:14px;padding-right:14px;}
}
@media(max-width:1100px){
  .syh-v22-top-inner{grid-template-columns:auto 1fr auto auto;min-height:72px;}
  .syh-v22-actions,.syh-v22-nav-row{display:none;}
  .syh-v22-search{grid-column:1/-1;display:none;max-width:none;}
  .syh-v22.is-search-open .syh-v22-search{display:flex;}
  .syh-v22-search-toggle,.syh-v22-menu-toggle{display:flex;}
  .syh-v22.is-open .syh-v22-mobile-panel{display:block;}
}
@media(max-width:640px){
  .syh-v22-top-inner{padding:12px 14px;gap:10px;}
  .syh-v22-logo-mark{width:44px;height:44px;border-radius:15px;font-size:20px;}
  .syh-v22-title{font-size:19px;max-width:170px;overflow:hidden;text-overflow:ellipsis;}
  .syh-v22-subtitle{display:none;}
  .syh-v22-brand{min-width:0;}
  .syh-v22-search{height:48px;}
}


/* V2-6 導覽對應與雙層版面穩定修正 */
.syh-v22-top-inner{
  grid-template-columns:minmax(230px,auto) minmax(420px,680px) minmax(260px,auto) auto auto;
}
.syh-v22-nav-row{
  clear:both;
  width:100%;
}
.syh-v22-nav a[data-active="course"],
.syh-v22-nav a[data-active="drama"]{white-space:nowrap;}
@media(max-width:1320px){
  .syh-v22-top-inner{grid-template-columns:auto minmax(320px,1fr) auto auto;}
}
@media(max-width:1100px){
  .syh-v22-top-inner{grid-template-columns:auto 1fr auto auto;}
}


/* =========================================================
   SunnyAudios Header V2.10：手機主選單一致化＋登入狀態
   修正：手機選單不得變成右側窄欄；改為全寬下拉選單。
   ========================================================= */

@media(max-width:1100px){
  .syh-v22{
    position:sticky;
    top:0;
    z-index:950;
  }

  .syh-v22-top-inner{
    position:relative;
  }

  .syh-v22-mobile-panel{
    display:none !important;
    width:100% !important;
    max-width:none !important;
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    margin:0 !important;
    padding:14px 18px 18px !important;
    background:linear-gradient(180deg,#fffaf3 0%,#ffffff 100%) !important;
    border-top:1px solid rgba(255,138,0,.18) !important;
    border-bottom:1px solid rgba(255,138,0,.18) !important;
    box-shadow:0 18px 36px rgba(16,35,70,.08) !important;
    overflow:visible !important;
  }

  .syh-v22.is-open .syh-v22-mobile-panel{
    display:block !important;
  }

  .syh-v22-mobile-status{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    max-width:960px !important;
    margin:0 auto 10px !important;
    padding:12px 14px !important;
    border:1px solid rgba(255,138,0,.22) !important;
    border-radius:18px !important;
    background:#fff !important;
  }

  .syh-v22-mobile-status-title{
    display:block !important;
    color:#073763 !important;
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.4 !important;
  }

  .syh-v22-mobile-login{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:36px !important;
    padding:0 14px !important;
    border-radius:999px !important;
    background:#ff8500 !important;
    color:#fff !important;
    font-weight:900 !important;
    border-bottom:0 !important;
    white-space:nowrap !important;
  }

  .syh-v22-mobile-nav,
  .syh-v22-mobile-member-links{
    max-width:960px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .syh-v22-mobile-member-links{
    margin-top:10px !important;
    padding-top:10px !important;
    border-top:1px dashed rgba(255,138,0,.25) !important;
  }

  .syh-v22-mobile-panel a,
  .syh-v22-mobile-panel .syh-v22-mobile-logout{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:46px !important;
    width:100% !important;
    padding:10px 12px !important;
    border:1px solid #f3dcc1 !important;
    border-radius:16px !important;
    background:#fff !important;
    color:#0b2d55 !important;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1.3 !important;
    text-align:center !important;
    box-shadow:0 8px 18px rgba(16,35,70,.04) !important;
  }

  .syh-v22-mobile-panel a:hover,
  .syh-v22-mobile-panel a:focus,
  .syh-v22-mobile-panel .syh-v22-mobile-logout:hover,
  .syh-v22-mobile-panel .syh-v22-mobile-logout:focus{
    border-color:#ffb56b !important;
    background:#fff3e4 !important;
    color:#ff6b00 !important;
    outline:2px solid rgba(255,138,0,.18) !important;
    outline-offset:2px !important;
  }

  .syh-v22-menu-toggle[aria-expanded="true"]{
    background:#fff3e4 !important;
    border-radius:14px !important;
  }
}

@media(max-width:640px){
  .syh-v22-top-inner{
    grid-template-columns:auto 1fr auto auto !important;
    min-height:76px !important;
    padding:12px 14px !important;
  }

  .syh-v22-brand a{
    gap:10px !important;
  }

  .syh-v22-title{
    max-width:190px !important;
    font-size:20px !important;
  }

  .syh-v22-logo-mark{
    width:46px !important;
    height:46px !important;
  }

  .syh-v22-mobile-panel{
    padding:12px 14px 16px !important;
  }

  .syh-v22-mobile-nav,
  .syh-v22-mobile-member-links{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .syh-v22-mobile-panel a,
  .syh-v22-mobile-panel .syh-v22-mobile-logout{
    min-height:44px !important;
    justify-content:flex-start !important;
    text-align:left !important;
    padding-left:16px !important;
  }

  .syh-v22-mobile-status{
    display:grid !important;
    grid-template-columns:1fr auto !important;
  }
}