/* =========================================================
   Penghong Auto — global styles (complements Tailwind CDN)
   Mobile-first. Utilities live in Tailwind; this file holds
   tokens, base resets and a few reusable components.
   ========================================================= */

:root {
  --ink-900: #0B1424;
  --ink-800: #162033;
  --brand-500: #F95B0F;
  --brand-600: #EA4405;
  --header-h: 60px;
  --tabbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 1024px) {
  :root { --header-h: 76px; --tabbar-h: 0px; }
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: #fff;
  color: #162033;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* leave room for the mobile bottom tab bar */
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}
html[lang="zh-CN"] body { font-family: "Noto Sans SC", Inter, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
img { max-width: 100%; }
[x-cloak], .is-hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container-x { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .container-x { padding-inline: 24px; } }
@media (min-width: 1280px) { .container-x { padding-inline: 32px; } }

.scroll-x { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* ---------- Header ---------- */
.site-header { height: var(--header-h); transition: background-color .25s, box-shadow .25s, border-color .25s; }
.site-header.is-solid { background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 1px 0 rgba(11,20,36,.08); }
.site-header.is-transparent { background: transparent; }
.site-header.is-transparent .hdr-link,
.site-header.is-transparent .hdr-icon { color: #fff; }
.site-header.is-transparent .logo-text { color: #fff; }
.site-header.is-transparent .logo-sub { color: rgba(255,255,255,.7); }

.nav-link { position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--brand-500); transform: scaleX(0); transition: transform .2s; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

/* `translate` (not `transform`) so Tailwind's -translate-x-1/2 centering is kept */
.mega { opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .2s ease, visibility .2s ease, translate .2s ease; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; translate: 0 0; }

/* Language pill */
.lang-group { border-color: rgba(11,20,36,.14); }
.site-header.is-transparent .lang-group { border-color: rgba(255,255,255,.35); }
.lang-opt { transition: background-color .15s, color .15s; }
.lang-opt.is-active { background: var(--brand-500); color: #fff; }

/* Off-canvas drawer */
.drawer { transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.drawer.is-open { transform: translateX(0); }
.backdrop { opacity: 0; pointer-events: none; transition: opacity .25s; }
.backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Bottom sheet (mobile) / centered modal (desktop)
   Closed state must be invisible AND non-interactive — an opacity-0 modal would
   otherwise sit over the page and swallow clicks (e.g. on the header nav). */
.sheet { transform: translateY(100%); visibility: hidden; pointer-events: none;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s; }
.sheet.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (min-width: 768px) {
  .sheet { transform: translate(-50%, -46%) scale(.98); opacity: 0;
    transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s; }
  .sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; transition-delay: 0s; }
}

/* ---------- Mobile tab bar ---------- */
.tabbar { height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); }
.tabbar a.is-active { color: var(--brand-500); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; border-radius: .75rem; transition: all .18s ease; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--brand-500); color: #fff; box-shadow: 0 8px 24px -8px rgba(249,91,15,.6); }
.btn-primary:hover { background: var(--brand-600); }
.btn-dark { background: var(--ink-900); color: #fff; }
.btn-dark:hover { background: #1d2a42; }
.btn-ghost { border: 1px solid rgba(11,20,36,.14); color: var(--ink-900); background: #fff; }
.btn-ghost:hover { border-color: var(--ink-900); }
.btn-outline-light { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1ebe5b; }

/* Footer links: clearly tappable */
.footer-link { display: inline-flex; align-items: center; gap: .55rem; min-height: 36px; color: #C9D1E0; transition: color .15s; }
.footer-link i { font-size: 9px; color: var(--brand-500); transition: transform .15s; }
.footer-link:hover { color: #fff; }
.footer-link:hover i { transform: translateX(2px); }

/* ---------- Chips / pills ---------- */
.chip { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; border: 1px solid #E6EAF2; background: #fff; color: #344159; transition: all .15s; white-space: nowrap; }
.chip:hover { border-color: #9AA7BF; }
.chip.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.tag { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .625rem; border-radius: .5rem; font-size: .75rem; font-weight: 500; background: #F4F6FA; color: #4A5873; }
.tag:hover { background: #FFE7D4; color: var(--brand-600); }

/* ---------- Cards ---------- */
.card-media { position: relative; overflow: hidden; background: #E6EAF2; }
.card-media img { transition: transform .5s ease; }
.group:hover .card-media img { transform: scale(1.05); }

/* Section title accent */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-500); }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }

/* Hero — the yellow truck is the hero: keep it bright and uncovered */
.hero-img { object-position: 50% 74%; }
.hero-fade { background: linear-gradient(180deg, rgba(6,12,23,.6) 0%, rgba(6,12,23,0) 26%, rgba(6,12,23,0) 70%, #060C17 100%); }
@media (min-width: 1024px) {
  .hero-img { object-position: 50% 72%; }
  .hero-overlay { background: linear-gradient(90deg, #060C17 0%, #060C17 33%, rgba(6,12,23,.7) 42%, rgba(6,12,23,0) 58%), linear-gradient(180deg, rgba(6,12,23,.5) 0%, rgba(6,12,23,0) 18%, rgba(6,12,23,0) 85%, rgba(6,12,23,.5) 100%); }
}
.diagonal-stripes { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px); }

/* ---------- Article typography (detail page + editor) ---------- */
.prose-article { color: #232F45; font-size: 1.0625rem; line-height: 1.8; }
.prose-article > * + * { margin-top: 1.15em; }
.prose-article h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 800; color: #0B1424; margin-top: 2em; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose-article h3 { font-size: 1.2rem; font-weight: 700; color: #0B1424; margin-top: 1.6em; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose-article a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.prose-article ul { list-style: disc; padding-left: 1.4em; }
.prose-article ol { list-style: decimal; padding-left: 1.4em; }
.prose-article li + li { margin-top: .4em; }
.prose-article blockquote { border-left: 4px solid var(--brand-500); background: #FFF5ED; padding: 1em 1.25em; border-radius: 0 .75rem .75rem 0; color: #344159; font-style: normal; }
.prose-article img { border-radius: 1rem; width: 100%; }
.prose-article figure figcaption { font-size: .85rem; color: #6B7A96; text-align: center; margin-top: .5em; }
.prose-article table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.prose-article th, .prose-article td { border: 1px solid #E6EAF2; padding: .65em .9em; text-align: left; white-space: normal; min-width: 8.5rem; vertical-align: top; }
.prose-article th { background: #F4F6FA; font-weight: 700; color: #0B1424; }
.prose-article code { background: #F4F6FA; padding: .15em .4em; border-radius: .35em; font-size: .9em; }
@media (min-width: 768px) { .prose-article { font-size: 1.125rem; } .prose-article h2 { font-size: 1.75rem; } }

/* Spec table */
.spec-table tr:nth-child(odd) { background: #F8FAFC; }
.spec-table td { padding: .75rem 1rem; border-bottom: 1px solid #EEF1F6; font-size: .9rem; }
.spec-table td:first-child { color: #6B7A96; width: 42%; }
.spec-table td:last-child { color: #0B1424; font-weight: 600; }

/* Form controls */
.field { width: 100%; border: 1px solid #DCE2EC; background: #fff; border-radius: .75rem; padding: .8rem 1rem; font-size: 1rem; /* 16px avoids iOS zoom */ color: #0B1424; transition: border-color .15s, box-shadow .15s; }
.field:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(249,91,15,.12); }
.field::placeholder { color: #9AA7BF; }
.label { display: block; font-size: .8125rem; font-weight: 600; color: #344159; margin-bottom: .4rem; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Toast */
.toast { transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: all .25s; }
.toast.is-show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

/* Skeleton shimmer for lazy images */
.img-skel { background: linear-gradient(90deg, #EEF1F6 0%, #F7F9FC 50%, #EEF1F6 100%); background-size: 200% 100%; animation: skel 1.4s infinite; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* WhatsApp pulse */
.pulse-ring { position: absolute; inset: 0; border-radius: 999px; background: #25D366; animation: pulse 2s infinite; z-index: -1; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }