/* QGuide V5.4 visual polish: typography fidelity, mobile navigation, controls, and image presentation. */
/* --ql-font-ui/--ql-font-display 是全站唯一定義（2026-08-19 CSS token 收斂），
   一定要放在 :root，不能綁 body.ql-visual-lock 這類選擇器：custom property
   只會往子孫元素繼承，:root（html）是 body 的祖先，绑在 body 上的
   token 對 :root 自己的 var() 查找是看不到的——content-typography-v55.css
   的 --font-sans/--font-serif 就是在 :root 引用這兩個 token，曾經因為這裡
   綁在 body 上而整個查不到值。這兩種鎖定狀態原本就是同一份值，不需要分開定義。 */
:root{
  --ql-font-display:"Noto Serif TC","Noto Serif CJK TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  --ql-font-ui:"Noto Sans CJK TC","Noto Sans TC","Source Han Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
/* /explore（首頁）與 /discover（真實資料瀏覽）不會拿到 ql-visual-lock class
   （見 web/src/visual-lock.js 的 isLockedRoute()，只有 destination 分頁才會
   加這個 class）。這裡補一份不綁 class 的 font-family 指定，讓全站字體基準
   一致，不用去動 isLockedRoute 的頁面殼邏輯。 */
body:not(.ql-visual-lock),
body:not(.ql-visual-lock) button,
body:not(.ql-visual-lock) input,
body:not(.ql-visual-lock) select,
body:not(.ql-visual-lock) textarea{
  font-family:var(--ql-font-ui);
}
body.ql-visual-lock h1,
body.ql-visual-lock h2,
body.ql-visual-lock h3,
body.ql-visual-lock .section-title,
body.ql-visual-lock .panel-title{
  text-wrap:balance;
}
body.ql-visual-lock .ql-desktop-brand img{
  width:196px!important;
  max-height:50px!important;
  object-fit:contain;
  object-position:left center;
}
body.ql-visual-lock .ql-desktop-nav a{
  font-size:16px!important;
  font-weight:600!important;
  letter-spacing:.095em!important;
  color:#262a2b!important;
}
body.ql-visual-lock .ql-desktop-nav a.is-active,
body.ql-visual-lock .ql-desktop-nav a[aria-current="page"]{
  color:#c94413!important;
}
body.ql-visual-lock .ql-desktop-hero h1{
  font-size:42px!important;
  line-height:1.22!important;
  letter-spacing:.06em!important;
  color:#063f64!important;
}
body.ql-visual-lock .ql-desktop-hero p{
  color:#383b3b!important;
  font-size:18px!important;
  letter-spacing:.09em!important;
}
body.ql-visual-lock .ql-scope-select{
  min-height:48px;
  padding:0 23px!important;
  border-color:rgba(148,113,58,.42)!important;
  background:rgba(255,253,248,.93)!important;
  box-shadow:0 7px 20px rgba(82,52,12,.04)!important;
}
body.ql-visual-lock .ql-place-card>img,
body.ql-visual-lock .ql-mini-grid img,
body.ql-visual-lock .ql-theme-grid img,
body.ql-visual-lock .ql-nearby-grid img,
body.ql-visual-lock .ql-mobile-feature>img{
  background:#eee7da;
  object-fit:cover!important;
  transform:translateZ(0);
}
body.ql-visual-lock .ql-place-card>div:last-child button,
body.ql-visual-lock .ql-map-link,
body.ql-visual-lock .ql-filter-reset,
body.ql-visual-lock .ql-primary,
body.ql-visual-lock .button-primary,
body.ql-visual-lock .ql-header-cta,
body.ql-visual-lock .ql-cocreate-primary{
  min-height:38px;
}
body.ql-visual-lock .ql-primary,
body.ql-visual-lock .button-primary,
body.ql-visual-lock .ql-cocreate-primary{
  font-family:var(--ql-font-display)!important;
  font-weight:700!important;
  letter-spacing:.07em!important;
}
body.ql-visual-lock .ql-quick-strip button{
  min-height:54px;
  border-radius:15px!important;
  font-family:var(--ql-font-display)!important;
  font-size:16px!important;
  color:#3e4437!important;
  border:1px solid rgba(150,123,78,.30)!important;
  background:rgba(255,253,248,.92)!important;
}
body.ql-visual-lock .ql-footer-inner nav button{
  font-family:var(--ql-font-display)!important;
  font-size:14px!important;
  letter-spacing:.08em!important;
}

@media (max-width:900px){
  body.ql-visual-lock .ql-mobile-brand img{
    width:150px!important;
    max-height:48px!important;
    object-fit:contain;
    object-position:left center;
  }
  body.ql-visual-lock .ql-mobile-header,
  body.ql-visual-lock .ql-v52-mobile-header{
    min-height:78px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.ql-visual-lock .ql-home-scope-row{
    margin-top:2px!important;
  }
  body.ql-visual-lock .ql-home-scope-row button{
    min-height:48px;
    padding:0 17px!important;
    border-radius:999px!important;
    font-family:var(--ql-font-display)!important;
    font-size:15px!important;
    letter-spacing:.03em;
  }
  body.ql-visual-lock .ql-home-mobile .ql-mobile-hero h1{
    font-size:31px!important;
    line-height:1.32!important;
    letter-spacing:.035em!important;
    color:#063f64!important;
  }
  body.ql-visual-lock .ql-home-mobile .ql-mobile-hero p{
    font-size:14px!important;
    color:#5c5a55!important;
  }
  body.ql-visual-lock .ql-mobile-search{
    height:58px!important;
    font-family:var(--ql-font-display)!important;
    font-size:14.5px!important;
    border:1px solid rgba(150,123,78,.36)!important;
    background:#fffdf9!important;
  }
  body.ql-visual-lock .ql-mobile-categories button{
    font-family:var(--ql-font-display)!important;
    font-size:14px!important;
    color:#193e5e!important;
  }
  body.ql-visual-lock .ql-mobile-section h2,
  body.ql-visual-lock .ql-past-trips h2{
    color:#063f64!important;
    font-size:25px!important;
  }
  body.ql-visual-lock .ql-mobile-section header button,
  body.ql-visual-lock .ql-past-trips header button{
    color:#c54818!important;
    font-family:var(--ql-font-display)!important;
    font-size:13px!important;
  }
  body.ql-visual-lock .ql-mobile-feature h3{
    font-size:19px!important;
    line-height:1.45!important;
    color:#063f64!important;
  }
  body.ql-visual-lock .ql-mobile-feature .ql-primary{
    min-height:48px!important;
    font-family:var(--ql-font-display)!important;
    font-size:15px!important;
  }
  body.ql-visual-lock .ql-theme-grid strong,
  body.ql-visual-lock .ql-nearby-grid h3{
    font-family:var(--ql-font-display)!important;
  }
  body.ql-visual-lock .ql-nearby-grid h3{font-size:18px!important;color:#123f61!important}

  /* Bottom navigation: reference-like outlined icons, serif labels, orange active state. */
  body.ql-visual-lock .mobile-bottom-nav{
    height:88px!important;
    border-radius:27px 27px 0 0!important;
    padding:7px 8px max(8px,env(safe-area-inset-bottom))!important;
    background:rgba(255,253,249,.985)!important;
    border-top:1px solid rgba(147,121,78,.28)!important;
    box-shadow:0 -9px 28px rgba(67,45,15,.10)!important;
  }
  body.ql-visual-lock .mobile-bottom-nav a{
    gap:1px!important;
    color:#5e605e!important;
    font-family:var(--ql-font-display)!important;
    font-size:15px!important;
    font-weight:600!important;
    letter-spacing:.055em!important;
    line-height:1.18!important;
  }
  body.ql-visual-lock .mobile-bottom-nav a svg{
    width:31px!important;
    height:31px!important;
    padding:2px!important;
    border-radius:0!important;
    background:none!important;
    stroke-width:1.8;
  }
  body.ql-visual-lock .mobile-bottom-nav a.is-active,
  body.ql-visual-lock .mobile-bottom-nav a[aria-current="page"]{
    color:#c94713!important;
  }
  body.ql-visual-lock .mobile-bottom-nav a.is-active svg,
  body.ql-visual-lock .mobile-bottom-nav a[aria-current="page"] svg{
    background:none!important;
    color:#c94713!important;
    transform:translateY(-1px)!important;
  }
  body.ql-visual-lock .ql-foot-cta a,
  body.ql-visual-lock .ql-cocreate-primary,
  body.ql-visual-lock .ql-v52-route-mobile-actions .ql-primary,
  body.ql-visual-lock .ql-v52-guide-mobile-featured .ql-primary{
    font-family:var(--ql-font-display)!important;
    font-size:16px!important;
    letter-spacing:.07em!important;
  }
  body.ql-visual-lock .ql-foot-card,
  body.ql-visual-lock .ql-cocreate-card,
  body.ql-visual-lock .ql-ai-draft,
  body.ql-visual-lock .ql-v52-mobile-featured,
  body.ql-visual-lock .ql-v52-builder-card{
    border-color:rgba(156,127,80,.24)!important;
    box-shadow:0 10px 27px rgba(65,44,14,.065)!important;
  }
  body.ql-visual-lock #main-content{
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }
  body.ql-visual-lock.v3-bottom-nav-hidden #main-content,
  body.ql-visual-lock body.v3-bottom-nav-hidden #main-content{
    padding-bottom:24px;
  }
}

@media(max-width:420px){
  body.ql-visual-lock .ql-mobile-brand img{width:142px!important}
  body.ql-visual-lock .ql-home-mobile .ql-mobile-hero h1{font-size:29px!important}
  body.ql-visual-lock .mobile-bottom-nav a{font-size:14px!important}
}
/* Approved B1-B logo usage scale (sized to match the qtravel-rhythm-v56 compact header) */
@media (min-width:901px){
  body.ql-visual-lock .ql-desktop-brand{min-width:0!important}
  body.ql-visual-lock .ql-desktop-brand .ql-brand-image-horizontal{width:174px!important;max-height:40px!important}
}
@media (max-width:900px){
  body.ql-visual-lock .ql-mobile-brand .ql-brand-image-horizontal{width:166px!important;max-height:48px!important}
  body.ql-visual-lock .ql-v52-detail-brand .ql-brand-image-horizontal{width:160px!important}
}
@media(max-width:900px){
  body.ql-visual-lock .mobile-bottom-nav a span{color:inherit!important}
}