/* sinowin-core.css
   Purpose: de-duplicate cross-page header/nav + bilingual CTA helpers and keep typography consistent.
*/

/* Body typography baseline (do not override page background/colors) */
body{
  font-family: 'Noto Sans TC', system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Simple bilingual label helper (no i18n dependency) */
html[lang="en"] .sinowin-cta-zh{ display:none !important; }
html[lang="zh-Hant"] .sinowin-cta-en{ display:none !important; }

/* Header/nav alignment: <a> and <button> baseline normalization */
.sinowin-site-header nav button{
  font: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
.sinowin-site-header nav a,
.sinowin-site-header nav button{
  display:inline-flex;
  align-items:center;
  line-height:1;
  vertical-align:middle;
}

/* SaaS header micro-interactions */
.nav-link{ position: relative; }
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:2px;
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 180ms ease, opacity 180ms ease;
  opacity:0;
  background: currentColor;
}
.nav-link:hover::after{ transform:scaleX(1); opacity:.18; }

.btn-cta{
  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.btn-cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 25px rgba(2,6,23,.08); }
.btn-cta:active{ transform: translateY(0); }

/* Home bottom button used by ESG/about pages */
.sinowin-home-bottom-wrap{
  position:relative;
  padding:28px 0 14px;
  display:flex;
  justify-content:center;
}
.sinowin-home-bottom{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(15,23,42,0.72);
  backdrop-filter:blur(8px);
  font-weight:800;
  font-size:.8rem;
  color:#e2e8f0;
  box-shadow:0 18px 45px rgba(0,0,0,0.45);
  transition: transform 140ms ease;
}
.sinowin-home-bottom:hover{ transform:translateY(-1px); }
.sinowin-home-bottom:active{ transform:translateY(0); }

/* Safe-area helper (already used across pages) */
.safe-area-top{ padding-top: env(safe-area-inset-top); }
.safe-area-bottom{ padding-bottom: env(safe-area-inset-bottom); }

/* Global (EN/ZH): enlarge header/nav typography for readability */
.sinowin-site-header nav a,
.sinowin-site-header nav button,
.sinowin-site-header button[data-mobile-menu-btn],
.sinowin-site-header button[aria-label="Back"],
.sinowin-site-header [data-set-lang],
.sinowin-site-header [data-mobile-menu] a{
  font-size: 0.875rem !important; /* ~14px */
}
@media (min-width: 768px){
  .sinowin-site-header nav a,
  .sinowin-site-header nav button,
  .sinowin-site-header button[data-mobile-menu-btn],
  .sinowin-site-header button[aria-label="Back"],
  .sinowin-site-header [data-set-lang],
  .sinowin-site-header [data-mobile-menu] a{
    font-size: 0.9375rem !important; /* ~15px */
  }
}

/* Chinese UI: avoid forced uppercase in header */
html[lang="zh-Hant"] .sinowin-site-header,
html[lang="zh-Hant"] .sinowin-site-header *{
  font-family: 'Noto Sans TC', sans-serif;
}
html[lang="zh-Hant"] .sinowin-site-header nav a,
html[lang="zh-Hant"] .sinowin-site-header nav button,
html[lang="zh-Hant"] .sinowin-site-header button[data-mobile-menu-btn],
html[lang="zh-Hant"] .sinowin-site-header button[aria-label="Back"],
html[lang="zh-Hant"] .sinowin-site-header [data-set-lang],
html[lang="zh-Hant"] .sinowin-site-header [data-mobile-menu] a{
  letter-spacing: 0.06em !important;
  text-transform: none !important;
}

/* Brand wordmark consistency */
html[lang="en"] .sinowin-site-header a[href="index.html"] > span.font-black.text-xl,
html[lang="zh-Hant"] .sinowin-site-header a[href="index.html"] > span.font-black.text-xl{
  font-family: 'Noto Sans TC', sans-serif !important;
}


/* Mobile SEO/UX safety: prevent accidental horizontal scroll */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, video, canvas{ max-width:100%; height:auto; }

/* Ensure header and its controls are always above page-specific overlays and remain tappable */
#sinowinHeaderMount .sinowin-site-header{
  z-index: 9999 !important;
  pointer-events: auto;
}
#sinowinHeaderMount .sinowin-site-header *{
  pointer-events: auto;
}

/* Off-canvas mobile menu: fixed panel so it never gets squeezed off-screen */
#sinowinHeaderMount [data-mobile-menu]{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(92vw, 360px);
  transform: translate3d(110%,0,0);
  transition: transform 220ms ease;
  z-index: 9999;
  box-shadow: -20px 0 40px rgba(0,0,0,.45);
  padding-top: max(env(safe-area-inset-top), 12px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html.sinowin-mobile-menu-open #sinowinHeaderMount [data-mobile-menu]{
  transform: translate3d(0,0,0);
}

/* Ensure overlay sits behind the panel but above the page */
#mobileMenuOverlay{ z-index: 9998; }

/* Allow menu labels to wrap instead of forcing the panel wider than the viewport */
#sinowinHeaderMount [data-mobile-menu] a{ white-space: normal; word-break: break-word; }


/* Header row helpers */
.sinowin-nav{
  width:100%;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.sinowin-nav .sinowin-lang{ margin-left:auto; }
.sinowin-nav .sinowin-brand{ font-size:18px; }


/* Mobile header fixes: prevent brand and controls from overflowing on small screens */
@media (max-width: 420px){
  /* Allow the header row to wrap on very small screens so MENU never gets pushed off-canvas */
  #sinowinHeaderMount .sinowin-header-row{ flex-wrap: wrap !important; height: auto !important; padding-top: 12px; padding-bottom: 12px; row-gap: 8px; }
  #sinowinHeaderMount .sinowin-site-header .text-xl{ font-size:1rem !important; line-height:1.2 !important; }
  /* Keep header controls visible on narrow screens (esp. EN brand text) */
  #sinowinHeaderMount .sinowin-lang-switch [data-set-lang]{ padding-left:10px !important; padding-right:10px !important; }
  #sinowinHeaderMount .sinowin-brand-sub{ display:none !important; }
  #sinowinHeaderMount a[href$="index.html"]{ min-width: 0; }
  #sinowinHeaderMount .truncate{ max-width: 42vw; }

  /* Make BACK button compact to free horizontal space */
  #sinowinHeaderMount button[aria-label="Back"]{ padding-left: 12px !important; padding-right: 12px !important; }
  #sinowinHeaderMount button[aria-label="Back"] [data-i18n="nav_back"]{ display:none !important; }

  /* Make MENU button compact on tiny screens */
  #sinowinHeaderMount [data-mobile-menu-btn]{ padding-left: 12px !important; padding-right: 12px !important; }
}


/* Mobile menu overlay: fully covers page so content never visually overlaps */
#mobileMenuOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.90);
  touch-action: none;
}

/* When menu is open, prevent background interaction (belt + suspenders) */
html.sinowin-mobile-menu-open body{
  overflow: hidden;
}
html.sinowin-mobile-menu-open main,
html.sinowin-mobile-menu-open .page,
html.sinowin-mobile-menu-open .content{
  pointer-events: none;
}



/* Ensure mobile menu panel is opaque (avoid background content bleeding through) */
#sinowinHeaderMount [data-mobile-menu]{ background: rgba(2,6,23,.98); }


/* Mobile UX hardening: prevent accidental horizontal scroll and ensure 44px tap targets */
html, body{ overflow-x: hidden; }
@media (max-width: 767px){
  #sinowinHeaderMount .sinowin-site-header nav a,
  #sinowinHeaderMount .sinowin-site-header nav button,
  #sinowinHeaderMount .sinowin-site-header .btn-cta{
    min-height: 44px;
  }
  /* Keep brand from forcing horizontal overflow; allow it to shrink */
  #sinowinHeaderMount .sinowin-brand{ max-width: 58vw; }
  #sinowinHeaderMount .sinowin-brand, 
  #sinowinHeaderMount .sinowin-brand *{ min-width: 0; }
}