/* ============================================================
   Guangyi site - theme / font-size framework v1
   - classic (original) is always the default; other themes are optional front-end overlays
   - choice is stored in localStorage and auto-restored on next visit
   - future skins (e.g. apple) extend here, or as separate skin-*.css files
   NOTE: ASCII ONLY. These pages are GB2312 and .css is served without a charset,
   so raw non-ASCII bytes would render as mojibake. Keep comments in English.
   ============================================================ */

/* ---------- font-size steps (data-gy-fs: 0=standard 1=large 2=xlarge) ----------
   baseline = live site 16px: step 0 overrides nothing, pixel-identical to the live site
   step 1 / step 2 scale everything up (+2px / +4px), never down
   two layers are covered: (1) stylesheet-driven body text (body/p/li/td...)
   (2) inline style px values
   order matters: element rules first, then [style*] rules
   (same specificity -> the later one wins, so the inline mapping takes effect) */

/* === step 1 (fs=1): +2px overall (baseline = live 16px) === */
html[data-gy-fs="1"] body { font-size: 18px !important; }
html[data-gy-fs="1"] p, html[data-gy-fs="1"] li, html[data-gy-fs="1"] td,
html[data-gy-fs="1"] dd, html[data-gy-fs="1"] dt, html[data-gy-fs="1"] font { font-size: 18px !important; }
html[data-gy-fs="1"] [style*="font-size:10px"] { font-size: 12px !important; }
html[data-gy-fs="1"] [style*="font-size:11px"] { font-size: 13px !important; }
html[data-gy-fs="1"] [style*="font-size:12px"] { font-size: 14px !important; }
html[data-gy-fs="1"] [style*="font-size:13px"] { font-size: 15px !important; }
html[data-gy-fs="1"] [style*="font-size:14px"] { font-size: 16px !important; }
html[data-gy-fs="1"] [style*="font-size:15px"] { font-size: 17px !important; }
html[data-gy-fs="1"] [style*="font-size:16px"] { font-size: 18px !important; }
html[data-gy-fs="1"] [style*="font-size:18px"] { font-size: 20px !important; }
html[data-gy-fs="1"] [style*="font-size:20px"] { font-size: 22px !important; }

/* === step 2 (fs=2): +4px overall === */
html[data-gy-fs="2"] body { font-size: 20px !important; }
html[data-gy-fs="2"] p, html[data-gy-fs="2"] li, html[data-gy-fs="2"] td,
html[data-gy-fs="2"] dd, html[data-gy-fs="2"] dt, html[data-gy-fs="2"] font { font-size: 20px !important; }
html[data-gy-fs="2"] [style*="font-size:10px"] { font-size: 14px !important; }
html[data-gy-fs="2"] [style*="font-size:11px"] { font-size: 15px !important; }
html[data-gy-fs="2"] [style*="font-size:12px"] { font-size: 16px !important; }
html[data-gy-fs="2"] [style*="font-size:13px"] { font-size: 17px !important; }
html[data-gy-fs="2"] [style*="font-size:14px"] { font-size: 18px !important; }
html[data-gy-fs="2"] [style*="font-size:15px"] { font-size: 19px !important; }
html[data-gy-fs="2"] [style*="font-size:16px"] { font-size: 20px !important; }
html[data-gy-fs="2"] [style*="font-size:18px"] { font-size: 22px !important; }
html[data-gy-fs="2"] [style*="font-size:20px"] { font-size: 24px !important; }

/* loosen line-height together with the size steps, so bigger text is not cramped
   (the old site has many fixed height / line-height boxes) */
html[data-gy-fs="1"] div[style*="line-height:20px"],
html[data-gy-fs="2"] div[style*="line-height:20px"] { line-height: 1.7 !important; height: auto !important; }
html[data-gy-fs="1"] div[style*="line-height:35px"],
html[data-gy-fs="2"] div[style*="line-height:35px"] { line-height: 1.6 !important; height: auto !important; }
html[data-gy-fs="1"] div[style*="height:40px"][style*="line-height:40px"],
html[data-gy-fs="2"] div[style*="height:40px"][style*="line-height:40px"] { height: auto !important; line-height: 1.8 !important; }
html[data-gy-fs="1"] li[style*="height:35px"],
html[data-gy-fs="2"] li[style*="height:35px"] { height: auto !important; line-height: 1.6 !important; }

/* nav text: step 0 keeps the original look (no override); only larger steps scale it */
html[data-gy-fs="1"] #nav-menu a span { font-size: 18px !important; }
html[data-gy-fs="2"] #nav-menu a span { font-size: 20px !important; }

/* ---------- theme placeholder: modern minimal (apple-style skeleton, to be polished) ---------- */
html[data-gy-theme="modern"] body {
  background: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-gy-theme="modern"] #header div[style*="background:#e80000"] { background: #1d1d1f !important; }
html[data-gy-theme="modern"] div[style*="background:#e80000"][style*="height:5px"],
html[data-gy-theme="modern"] div[style*="background:#bc0001"] { background: #1d1d1f !important; }
html[data-gy-theme="modern"] a { color: #0066cc; }
html[data-gy-theme="modern"] #nav-menu > li > a span { transition: color .2s, font-weight .2s; }
html[data-gy-theme="modern"] #nav-menu > li > a:hover span { color: #0066cc; font-weight: 700; }
/* hover bold on the top nav must not shift layout: li is fixed 80px (4 chars * 16px = 64px);
   the dropdown panel width was measured to stay unchanged. ASCII ONLY - see header note. */
html[data-gy-theme="modern"] #nav-menu li a:hover { font-weight: 700; }
html[data-gy-theme="modern"] #nav-menu > li > div { background: rgba(255,255,255,.92) !important; backdrop-filter: blur(16px); border-top: 1px solid #e8e8ed !important; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
html[data-gy-theme="modern"] h1 { font-weight: 600; letter-spacing: .01em; }
html[data-gy-theme="modern"] #footer_ul li { color: #6e6e73; }
html[data-gy-theme="modern"] div[style*="height:307px"] { background: #f5f5f7; }

/* gap between the top red nav and the hero banner below it (homepage).
   The legacy markup has NO spacing between #menu_shichang and #banner, so
   the two blocks are flush on both the real desktop and the zoomed mobile
   view. Add a small cushion everywhere. The zoomed view gets a larger value
   (see the media query below) so it still reads clearly after scaling. */
#banner { margin-top: 12px !important; }

/* ============================================================
   FIX 2026-09-24 - zoomed full-site view white gutter
   ------------------------------------------------------------
   Why: viewport=width=1080 renders the desktop layout scaled into
   a phone, but legacy 1024px containers start at the left edge and
   overflow on the right. We want a small white gutter on both sides.
   Fix: constrain body to the content width (1024px), centre it, and
   cap body direct children so negative-margin full-bleed stripes do
   not overflow. The extra space around the body becomes the white edge.
   Scoped to 769..1100 so real desktop and responsive mobile are not
   affected.
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  html { background: #fff !important; }
  body {
    width: 1024px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  body > div {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* cap any nested legacy fixed-width elements that still overflow (e.g. #hongxian, 1280px wrappers) */
  html body * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* exclude sliders and their internal wide track - they rely on overflow:hidden and transform */
  html body .flexslider,
  html body .flex-viewport,
  html body #banner,
  html body .swiper,
  html body .owl-carousel,
  html body .owl-stage,
  html body .slides,
  html body .slides > li {
    max-width: none !important;
  }
  /* bigger gap in the zoomed view so it reads clearly on a phone
     (24px at 1024 scales to ~9px on a 375px screen) */
  html body #banner { margin-top: 24px !important; }
}

/* ---------- switcher control: bottom-right floating stack (never touches the nav bar) ----------
   vertical stack: theme on top, font-size below.
   right: 26px  -> nudged left a bit, away from the screen edge / scrollbar.
   bottom: 96px -> lifted up so the Windows IME candidate bar cannot cover it
                   (the old 18px sat right inside the IME window area). */
#gy-fab {
  position: fixed; right: 26px; bottom: 96px; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#gy-fab button {
  border: 0; border-radius: 50%; width: 38px; height: 38px;
  background: rgba(29,29,31,.8); color: #fff; font-size: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer;
  line-height: 38px; padding: 0;
}
/* small screens: keep it above the on-screen keyboard, still reachable */
@media (max-height: 640px) {
  #gy-fab { bottom: 64px; }
}