/* ============================================================
   MODERNIZATION LAYER (appended 2026)
   Purpose: design tokens, layout stability, responsive nav,
   caption contrast, footer polish. Non-destructive overrides
   loaded after the original rules above.
   ============================================================ */
:root {
  --ed-green: #27AE60;
  --ed-green-dark: #1E8449;
  --ed-slate: #2C3E50;
  --ed-accent: #145A32;
  --ed-text: #2C3E50;
  --ed-muted: #6B7B8C;
  --ed-bg-alt: #F4F7F5;
  --ed-border: #E3E8E5;
  --ed-maxw: 1200px;
  --ed-radius: 4px;
  --ed-shadow: 0 2px 10px rgba(44, 62, 80, 0.08);
}

/* Modern font rendering without dropping the Arial fallback */
html body {
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 16px;
  color: var(--ed-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
/* Make table cells inherit the modern stack instead of the legacy Arial rule */
html td, html th { font-family: inherit !important; }

/* Headings use the same stack; keep existing weights via .hN classes */
h1, h2, h3, h4, h5, h6 { line-height: 1.3; }

/* Constrain main content width on large screens */
.container { max-width: var(--ed-maxw); margin-left: auto; margin-right: auto; }

/* Hero / slider layout stability: lock an aspect ratio so page
   height is stable while banner images load; keep them crisp. */
.callbacks img,
.rslides img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 6;
  object-fit: cover;
}

/* Slider caption: stronger scrim + readable text (was rgba 0.6) */
.mid-top4 {
  background-color: rgba(20, 90, 50, 0.82);
  border-radius: var(--ed-radius);
  padding: 18px 20px;
  box-shadow: var(--ed-shadow);
}
.mid-top4 h2 { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }

.banner-bottom-strip { padding: 18px 0; }

/* Footer polish (.foot_social created by the footer HTML repair) */
.footer { background: var(--ed-slate); }
.foot_social {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
}
.foot_social img { display: block; }
.foot_copyright { font-size: 0.8em; color: #B9C4CE; margin-top: 10px; }

/* Partner select: consistent cross-browser styling */
.footjk_Linkst select {
  width: 100%;
  max-width: 280px;
  padding: 6px 8px;
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius);
  font-size: 0.85em;
  background: #fff;
}

/* Responsive navigation: readable on tablets, wraps gracefully. */
@media (max-width: 1024px) {
  .header-nav .nav > li > a { padding: 10px 12px; font-size: 0.95em; }
}
@media (max-width: 768px) {
  .header-nav .nav { text-align: left; }
  .header-nav .nav > li { display: inline-block; }
  .mid-top4 { width: 92% !important; margin-left: 4% !important; }
  .callbacks img, .rslides img { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .mid-top4 { margin-top: 1em; padding: 12px; }
  .mid-top4 h2 { font-size: 1em; }
  .foot_social { flex-wrap: wrap; gap: 12px; }
  .callbacks img, .rslides img { aspect-ratio: 4 / 3; }
}

/* Accessible focus + responsive images */
a:focus, select:focus { outline: 2px solid var(--ed-green); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* Respect reduced-motion preference (rollovers / slider) */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ============================================================
   v10 REFINEMENTS
   A. Color pass: soften body text, unify greens, heading scale
   B. "To Top" button redesign (hide stray "To Top" text)
   C. Banner strip centering enforcement
   ============================================================ */

/* A1. Soften body text: #000 → slate #2C3E50.
   Banner/footer/slider keep their own colors because those selectors
   (.banner-bottom-strip p, .footer p, .mid-top4 h2, etc.) have
   higher specificity than the generic rules below. */
html body p,
html body li,
html body ol,
html body ul,
html body td,
html body th,
html body font {
  color: var(--ed-text);
}
/* Class-scoped #000 overrides need matching specificity */
html body .grid_3 p,
html body .features-right p,
html body .features-right2 p,
html body .features-left p {
  color: var(--ed-text);
}

/* A2. Unify stray greens → brand green #27AE60 */
.progress-bar-success,
.badge-success { background-color: var(--ed-green) !important; }
.moments h3 { color: var(--ed-green) !important; }

/* A3. Heading color scale — slate text with green accent underline.
   Slider headlines (.mid-top4 h2) and footer titles keep their own
   colors via higher specificity; only generic headings shift to slate. */
h1, h2, h3, h4, h5, h6 { color: var(--ed-slate); }
.ftr h3 {
  border-bottom: 2px solid var(--ed-green);
  padding-bottom: 6px;
  display: inline-block;
}

/* B. "To Top" button: reliably hide text + modern rounded look.
   The original text-indent:100% leaks "To Top" in some browsers. */
#toTop {
  width: 44px !important;
  height: 44px !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  background: var(--ed-green) url("../images/to-top1.png") no-repeat center !important;
  background-size: 22px !important;
  border-radius: var(--ed-radius) !important;
  box-shadow: var(--ed-shadow) !important;
  opacity: 0.82;
  transition: opacity 0.2s;
}
#toTop:hover { opacity: 1; }

/* C. Guarantee banner strip text centering on every viewport */
.banner-bottom-strip { text-align: center !important; }
.banner-bottom-strip p { text-align: center !important; }

/* v11: Contact Us footer column — align attr overridden by stylesheet, force center */
.get_in_touch.ftr address,
.get_in_touch.ftr p,
.get_in_touch.ftr > div,
.get_in_touch.ftr h3 { text-align: center !important; }