/* =====================================================
 * csp.edupro.hk — Traditional Chinese Typography Overrides
 * Applied on top of Jobi template's style.css to render
 * Hong Kong Traditional Chinese correctly.
 *
 * Fonts:
 *   Noto Sans TC  — body / UI (Google Fonts)
 *   Noto Serif TC — display headings (Google Fonts)
 *
 * Loaded after style.css via <link rel="stylesheet">.
 * ===================================================== */

/* 1. Body & primary UI: Chinese-first font stack. !important
 *    wins over style.css's "gordita" / Noto Serif TC rules. */
body,
button,
input,
select,
textarea {
  font-family: "Noto Sans TC", "gordita", -apple-system, BlinkMacSystemFont,
    "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif !important;
  letter-spacing: 0.02em;
}

/* 2. Display headings — keep serif feel but render CJK correctly. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Noto Serif TC", "Noto Sans TC", "EB Garamond", serif !important;
  line-height: 1.4;
}

/* 3. Hero h1 needs slightly more breathing room + smaller size on mobile
 *    (template default is 85px which is unreadable in CJK). */
h1, .h1 {
  line-height: 1.3;
}

/* 4. CJK cards render ~1.5× taller than Latin. Keep grid alignment
 *    by enforcing min-heights on the listing-card titles. */
.card-title,
.job-title,
.blog-title,
.candidate-name,
.service-name {
  min-height: 3.6em;
  line-height: 1.4;
}

.blog-title,
.job-title {
  min-height: 4.2em;
}

/* 5. Body content paragraphs: improve CJK readability. */
p, li {
  line-height: 1.85;
}

/* 6. Form controls: prevent CJK IME clipping at small heights. */
input,
select,
textarea {
  line-height: 1.6;
}

/* 7. CJK heading sizes — desktop + mobile.
 *    Jobi's defaults (h1: 85px, h2: 65px, h3: 45px) are unreadable for CJK.
 *    Apply CJK-appropriate sizes at all breakpoints, with mobile override. */
h1, .h1 {
  font-size: 48px !important;
  line-height: 1.3;
}
h2, .h2 {
  font-size: 32px !important;
  line-height: 1.4;
}
h3, .h3 {
  font-size: 22px !important;
  line-height: 1.4;
}

@media (max-width: 991px) {
  h1, .h1 { font-size: 36px !important; }
  h2, .h2 { font-size: 26px !important; }
  h3, .h3 { font-size: 20px !important; }
}

@media (max-width: 575px) {
  h1, .h1 { font-size: 30px !important; line-height: 1.3; }
  h2, .h2 { font-size: 22px !important; }
  h3, .h3 { font-size: 18px !important; }
}

/* 7a. Featured blog card: tighter h2 size so title doesn't overflow image column.
 *     Jobi's 65px h2 + 24-char Chinese title = ~1500px wide, way past container. */
.blog-feature-card h2,
.blog-feature-card .title {
  font-size: 24px !important;
  line-height: 1.35 !important;
}

@media (max-width: 767px) {
  .blog-feature-card h2 { font-size: 20px !important; }
}

/* 8. Demo content banner — visible on every page so this build is never
 *    mistaken for production. */
.demo-banner {
  background: linear-gradient(90deg, #D2F34C 0%, #00BF58 100%);
  color: #244034;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* 9. Demo contact info marker — small "(示範)" suffix styling. */
.demo-marker {
  font-size: 0.75em;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 6px;
  font-weight: normal;
}
.footer-one:not(.bg-two) .demo-marker,
section:not(.bg-color) .demo-marker {
  color: rgba(0, 0, 0, 0.5);
}

/* 10. Section sub-title spacing — CJK often needs more margin between
 *     sub-heading and body copy. */
.section-subtitle {
  margin-bottom: 24px;
}

/* =====================================================
 * Round 2 — Optimization Pass
 * Fixes for issues flagged after viewing the demo:
 *   - Issue 1: 44 font-family: "gordita" rules in style.css
 *               bypass the body cascade. Broadening override.
 *   - Issue 2: white-on-white footer (template's .footer-one
 *               has no bg rule); orphan bg-color sections;
 *               low-contrast paragraphs in how-it-works cards.
 * ===================================================== */

/* 11. Footer — use template's bg-two + white-version classes.
 *     Legacy footer-list/footer-contact markup on other pages
 *     gets the same styling via fallback rules below. */
.footer-one.bg-two.white-version .footer-intro p,
.footer-one.bg-two.white-version .footer-intro .email,
.footer-one.bg-two.white-version > .container p {
  color: rgba(255, 255, 255, 0.85);
}
.footer-one.bg-two.white-version .footer-title {
  color: #fff;
}
.footer-one.bg-two.white-version .bottom-footer p {
  color: rgba(255, 255, 255, 0.85);
}

/* Legacy footer markup (footer-list / footer-contact) on sub-pages */
.footer-one:not(.bg-two) {
  background: #244034;
  padding-top: 100px;
}
.footer-one:not(.bg-two) .bottom-footer {
  padding: 40px 0 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-one .footer-list h5,
.footer-one .footer-contact h5 {
  font-family: "Noto Sans TC", "gordita", sans-serif !important;
  font-size: 22px;
  margin-bottom: 30px;
  color: #fff;
}
.footer-one .footer-list ul li a,
.footer-one .footer-contact p,
.footer-one .footer-intro p {
  color: rgba(255, 255, 255, 0.7);
}
.footer-one .footer-list ul li a {
  display: inline-block;
  margin-bottom: 18px;
  transition: all 0.1s ease-in-out 0s;
}
.footer-one .footer-list ul li a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer-one .footer-intro .social-icon a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  margin-right: 18px;
  transition: all 0.2s ease-in-out 0s;
}
.footer-one .footer-intro .social-icon a:hover {
  color: #D2F34C;
}

/* 11b. Category cards — CJK titles need tighter spacing than Latin.
 *      Original template: 18px title, 40px/50px margins (designed for
 *      short English labels like "UI/UX Design"). Chinese 4-char labels
 *      + English subtitle need smaller margins to avoid overflow. */
.category-section-one.bg-color .card-style-one .wrapper .title {
  font-size: 16px;
  line-height: 1.4;
  margin: 28px 0 16px;
  min-height: 2.8em;
  color: #254035 !important; /* override stray .text-white on light cards */
}
.category-section-one.bg-color .card-style-one .wrapper .total-job {
  font-size: 13px;
  line-height: 1.3;
  min-height: 2.6em;
}
.category-section-one.bg-color .title-one h2 {
  color: #254035;
}
.category-section-one.bg-color .text-md {
  color: rgba(37, 64, 53, 0.85);
}

@media (max-width: 1399px) {
  .category-section-one.bg-color .card-style-one .wrapper .title {
    font-size: 15px;
    margin: 24px 0 12px;
  }
}

/* 12. Typography class cascade — these classes have explicit
 *     font-family: "gordita" in style.css (higher specificity
 *     than body's element selector). Override them here so
 *     Chinese text renders in Noto Sans TC. */
.title, .footer-title, .name, .post, .total-job,
.card-style-two .title, .card-style-three .name,
.card-style-four .title, .card-style-three .post,
.card-style-one .title, .blog-title, .job-title,
.candidate-name, .service-name, .pricing-section .title,
.btn-one, .btn-two,
.accordion-button, .nice-select, .filter-sidebar h5,
.recent-post a, .job-search-one .label, .tag-list a {
  font-family: "Noto Sans TC", "gordita", -apple-system,
    BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei",
    "Heiti TC", sans-serif !important;
}

/* 13. Contrast fix — .card-style-two p on how-it-works.bg-color
 *     defaults to #81B197 which is 2.6:1 on #244034 (fails AA).
 *     Bump to 92% white for AA pass. */
.how-it-works.bg-color .card-style-two p,
.bg-color .card-style-two p {
  color: rgba(255, 255, 255, 0.92);
}

/* 14. Opacity floor — inline opacity 0.7 on white text on
 *     #244034 is 3.5:1 (fails AA). Force any inline opacity
 *     on dark-green sections to ≥0.85 (5.1:1, passes AA). */
.bg-color [style*="opacity: 0.7"],
.bg-color [style*="opacity: 0.75"],
.bg-color [style*="opacity:0.7"],
.bg-color [style*="opacity:0.75"] {
  opacity: 0.85 !important;
}

/* 15. bg-color utility class — used alone (without parent class
 *     like how-it-works / category-section-one) has no rule
 *     in style.css. Add a safe default so any orphan usage
 *     renders dark green instead of being invisible. */
section.bg-color:not(.how-it-works):not(.category-section-one):not(.category-section-two):not(.partner-logos):not(.card-style-four):not(.pricing-section) {
  background: #244034;
  color: rgba(255, 255, 255, 0.92);
}