/* =====================================================
 * csp.edupro.hk — Full CJK Visual Redesign
 *
 * Round 3 addition. Brings Chinese-inspired visual language
 * on top of the existing Jobi template:
 *   - CJK color tokens (jade, seal red, paper cream, ink black)
 *   - Refined CJK typography (letter-spacing, line-length)
 *   - Decorative utility classes (seal stamps, cloud dividers)
 *   - Cultural iconography accents
 *
 * Loaded after style.css + zh-overrides.css.
 * ===================================================== */

:root {
  /* CJK-inspired color additions */
  --csp-red:        #C8102E;   /* 中國紅 / Chinese red — seal stamp */
  --csp-red-deep:   #8B0000;   /* 印泥 / cinnabar — deep accent */
  --csp-jade:       #00A878;   /* 翡翠綠 / jade green — secondary accent */
  --csp-ink:        #1A1A1A;   /* 墨黑 / ink black — emphasis */
  --csp-paper:      #F5E6D3;   /* 米色 / paper cream — section bg */
  --csp-paper-soft: #FAF3E7;   /* 淺米 / lighter paper */

  /* Existing brand tokens (kept) */
  --csp-green:      #244034;
  --csp-lime:       #D2F34C;
  --csp-cta:        #00BF58;
}

/* 1. CJK typography refinements — heavier weight for serif headings
 *    (Chinese fonts look thinner than Latin), tighter letter-spacing
 *    on display type, more breathing room on body text. */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: "Noto Serif TC", "Kaiti TC", "STKaiti", "Noto Sans TC", serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

h1, .h1 {
  letter-spacing: 0.02em;
}

/* CJK-friendly line length — max 38em so paragraphs don't run too wide. */
.blog-content p,
.text-feature-one p,
.list-style-one li,
.cta-section p {
  max-width: 38em;
}

/* Optical compensation for CJK + Latin mix */
h1, h2, h3, .btn-one, .btn-two {
  font-feature-settings: "palt" on;
}

/* 2. Full-width CJK punctuation — slightly tighter spacing around 。 ， etc. */
.zh-text {
  font-feature-settings: "halt" on;
}

/* 3. CJK-friendly display headings — preserve line break intent */
.display-zh {
  font-family: "Noto Serif TC", "Kaiti TC", serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

/* 4. Vertical separator between columns (more CJK-friendly than hr) */
.divider-vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--csp-green) 20%,
    var(--csp-green) 80%,
    transparent 100%);
  align-self: stretch;
  margin: 0 24px;
}

/* 5. Decorative cloud pattern divider (auspicious cloud 祥雲) */
.section-divider {
  height: 80px;
  background: url('../images/cjk-motifs/cloud-pattern.svg') center/contain no-repeat;
  margin: 60px 0;
  opacity: 0.3;
}

/* 6. Brush stroke accent under hero headings */
.brush-underline {
  position: relative;
  display: inline-block;
}
.brush-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 12px;
  background: url('../images/cjk-motifs/brush-stroke.svg') center/contain no-repeat;
  pointer-events: none;
}

/* 7. Red seal stamp overlay on primary CTAs */
.btn-cjk {
  position: relative;
  padding-right: 56px !important;
}
.btn-cjk::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -4px;
  bottom: -4px;
  width: 44px;
  background: url('../images/cjk-motifs/seal-stamp-round.svg') center/contain no-repeat;
  pointer-events: none;
  transform: rotate(-6deg);
}

/* 8. Mei border (回紋) wrapping for premium sections */
.mei-border {
  position: relative;
  padding: 30px;
}
.mei-border::before,
.mei-border::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  background: url('../images/cjk-motifs/mei-border.svg') repeat-x center/auto 24px;
}
.mei-border::before { top: 0; }
.mei-border::after { bottom: 0; }

/* 9. Paper cream section variant — used for service detail blocks,
 *    case studies, sources page (a softer alternative to pure white). */
.section-paper {
  background: var(--csp-paper-soft);
}

/* 10. Seal stamp badge — small red round badge for tags/badges */
.seal-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--csp-red);
  color: white;
  font-weight: 600;
  font-size: 12px;
  border-radius: 2px;
  letter-spacing: 0.1em;
  position: relative;
  border: 2px solid var(--csp-red-deep);
}

/* 11. Jade accent strip — green strip used as section accent */
.jade-strip {
  height: 4px;
  background: linear-gradient(90deg,
    var(--csp-jade) 0%,
    var(--csp-cta) 50%,
    var(--csp-jade) 100%);
  border-radius: 2px;
  margin: 16px 0;
}

/* 12. Ink-stroke divider (horizontal) — replaces plain <hr> */
.ink-divider {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--csp-ink) 20%,
    var(--csp-ink) 80%,
    transparent 100%);
  margin: 24px 0;
  border: 0;
}

/* 13. Sticky WhatsApp button — fixed bottom-right corner */
.whatsapp-sticky {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28px;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-sticky:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  color: white;
}
.whatsapp-sticky i {
  margin: 0;
}

/* 14. Newsletter signup form styling */
.newsletter-form {
  background: var(--csp-paper-soft);
  padding: 24px;
  border-radius: 8px;
}
.newsletter-form input[type="email"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(36, 64, 52, 0.2);
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 12px;
}

/* 15. Lang toggle styling — small lime-colored switcher */
.lang-toggle {
  display: inline-block;
  padding: 6px 12px;
  color: var(--csp-lime) !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  border: 1px solid rgba(210, 243, 76, 0.3);
  border-radius: 4px;
  transition: all 0.2s;
}
.lang-toggle:hover {
  background: rgba(210, 243, 76, 0.1);
  color: var(--csp-lime) !important;
}

/* 16. Partner logo strip — 8 placeholders in a grid */
.partner-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
  padding: 30px 0;
}
.partner-logo-placeholder {
  background: var(--csp-paper-soft);
  border: 1px dashed rgba(36, 64, 52, 0.3);
  border-radius: 4px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(36, 64, 52, 0.5);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 8px;
}

@media (max-width: 575px) {
  .partner-logos { grid-template-columns: repeat(2, 1fr); }
  .section-divider { height: 50px; margin: 30px 0; }
  .btn-cjk { padding-right: 16px !important; }
  .btn-cjk::after { display: none; }
}

/* 17. Testimonial card */
.testimonial-card {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(36, 64, 52, 0.08);
  border-left: 4px solid var(--csp-jade);
}
.testimonial-card blockquote {
  font-style: italic;
  color: var(--csp-ink);
  line-height: 1.7;
}
.testimonial-author {
  display: flex;
  align-items: center;
  margin-top: 16px;
  font-size: 14px;
  color: rgba(36, 64, 52, 0.7);
}