/* ============================================
   SalesCoach.id — Custom Style Overrides
   Based on Asia Spirit Brand Guideline
   ============================================ */

/* --- Hero Heading (Navy on dark overlay) --- */
.hero-banner .heading {
  color: #0A2540 !important;
}
.hero-banner .subheading-bg {
  color: #0A2540 !important;
}
.hero-banner .subheading-bg .icon {
  color: #0A2540 !important;
}
.hero-banner .content .text {
  color: #1E293B;
}
.hero-banner .decorated-text span {
  color: #C9A961;
}

/* --- Testimonial section text (dark on dark bg) --- */
.testimonial-2 {
  --color-foreground: #0A2540 !important;
  --color-foreground-heading: #0A2540 !important;
}
.testimonial-2 .heading {
  color: #0A2540 !important;
}
.testimonial-2 .text {
  color: #0A2540 !important;
}
.testimonial-2 .user-desig {
  color: #1E293B !important;
}

.faq {
  --color-foreground: #1E293B !important;
  --color-background: #FFFFFF !important;
}
.faq .accordion-block {
  border: 1px solid #E8EAED;
}
.faq .accordion-content-inner {
  color: #1E293B !important;
}
.faq .accordion-content-inner p {
  color: #1E293B !important;
}
.faq .accordion-opener {
  color: #0A2540 !important;
}
.faq .accordion-opener .icon {
  color: #C9A961;
}
.faq .accordion-block.active .accordion-opener {
  background-color: #0A2540 !important;
  --color-foreground-heading: #FFFFFF !important;
}

/* --- Our Services accordion: Gold background, dark text --- */
.our-services .service-list {
  --color-background: #C9A961 !important;
  background: #C9A961 !important;
  color: #0A2540 !important;
}
.our-services .service-list .heading {
  color: #0A2540;
}
.our-services .service-list .text {
  color: #1E293B;
}
.our-services .service-list .accordion-title-icon h2 {
  color: #FFFFFF;
}
.our-services .service-list .icon-plus-circle,
.our-services .service-list .icon-minus-circle {
  color: #0A2540;
}
.our-services .service-list .button--primary {
  background: #0A2540;
  border-color: #0A2540;
  color: #FFFFFF;
}
.our-services .service-list .button--primary:hover {
  background: #0A2540;
  border-color: #0A2540;
  color: #C9A961;
}
.our-services .service-content-inner p {
  color: #1E293B;
}

/* --- Subheading badges: Gold pill style --- */
.subheading-bg {
  background-color: #C9A961 !important;
  border: 1px solid #C9A961 !important;
  color: #0A2540 !important;
}
.subheading-bg .icon {
  color: #0A2540 !important;
}

/* --- ALL text headings: Navy on light backgrounds --- */
.heading {
  color: #0A2540 !important;
}
/* White/Gold headings inside dark/gold backgrounds */
.our-services .section-headings .heading {
  color: #FFFFFF !important;
}
.project-slider .card-project-content .heading,
.card-project .heading {
  color: #C9A961 !important;
}

/* --- Hero heading: Navy, reduced size --- */
.hero-banner .content .heading {
  color: #0A2540 !important;
  font-size: 56px !important;
  line-height: 1.17;
}
.hero-banner .content .heading .decorated-text {
  outline-color: #0A2540 !important;
}
.hero-banner .content .heading .decorated-text::before,
.hero-banner .content .heading .decorated-text::after {
  background: #0A2540 !important;
}
.hero-banner .decorated-text span {
  color: #C9A961 !important;
}
.hero-banner .content .text {
  color: #1E293B !important;
}

/* --- Override all old dark color rgba(32,40,45) → Navy #1C2539 --- */
.our-services,
.promotion,
.why-choose-us,
.pricing-plan,
.testimonial-2,
.faq,
.featured-blog,
.hero-banner {
  --color-background: #1C2539;
  --color-foreground: #FFFFFF;
  --color-foreground-heading: #FFFFFF;
  --color-primary: #1C2539;
  --color-primary-button-text: #FFFFFF;
  --color-primary-button-background: #1C2539;
  --color-primary-button-border: #1C2539;
  --color-primary-button-hover-background: #C9A961;
  --color-primary-button-hover-border: #C9A961;
  --color-primary-button-hover-text: #1C2539;
  --color-border: rgba(201, 169, 97, 0.25);
}

/* --- Logo --- */
.logo-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 700;
  color: #0A2540;
  text-decoration: none;
  letter-spacing: -0.5px;
}
.logo-dot {
  color: #C9A961;
}
.logo-text-white {
  color: #FFFFFF;
}

/* --- Section Padding --- */
.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 767px) {
  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* --- Decorated Text (Gold Accent) --- */
.decorated-text span {
  position: relative;
  display: inline-block;
}
.decorated-text span::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #C9A961;
  border-radius: 2px;
}

/* --- Gold Accent Line --- */
.gold-divider {
  width: 60px;
  height: 3px;
  background-color: #C9A961;
  margin: 16px 0;
}

/* --- Section Navy (Dark) --- */
.section-navy {
  background-color: #0A2540;
  color: #FFFFFF;
}
.section-navy .heading {
  color: #FFFFFF;
}
.section-navy .text {
  color: rgba(255,255,255,0.85);
}

/* --- Stat Card --- */
.stat-card {
  text-align: center;
  padding: 40px 20px;
}
.stat-number {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 48px;
  font-weight: 700;
  color: #C9A961;
}
.stat-label {
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #94A3B8;
  margin-top: 8px;
}

/* --- Program Card --- */
.program-card {
  background: #FFFFFF;
  border: 1px solid #E8EAED;
  border-radius: 12px;
  padding: 40px 30px;
  transition: all 0.3s ease;
}
.program-card:hover {
  border-color: #C9A961;
  box-shadow: 0 8px 30px rgba(10,37,64,0.08);
}
.program-card .card-icon {
  width: 60px;
  height: 60px;
  background: #0A2540;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #C9A961;
}
.program-card h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 700;
  color: #0A2540;
  margin-bottom: 12px;
}
.program-card p {
  font-size: 15px;
  color: #94A3B8;
  line-height: 1.6;
}

/* --- CTA Section --- */
.cta-section {
  background: linear-gradient(135deg, #0A2540 0%, #1B3A5C 100%);
  color: #FFFFFF;
  text-align: center;
  padding: 80px 0;
}
.cta-section .heading {
  color: #FFFFFF;
}
.cta-section .text {
  color: rgba(255,255,255,0.85);
}

/* --- WhatsApp Float --- */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(37,211,102,0.4);
  z-index: 9999;
  transition: transform 0.3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
}

/* --- Testimonial Card --- */
.testimonial-card {
  background: #F8F6F0;
  border-left: 3px solid #C9A961;
  padding: 30px;
  border-radius: 0 8px 8px 0;
}

/* --- Footer Overrides --- */
.footer-main {
  background-color: #0A2540;
}
.footer-widget .widget-heading {
  color: #FFFFFF;
}
.footer-menu .link {
  color: rgba(255,255,255,0.65);
  transition: color 0.3s;
}
.footer-menu .link:hover {
  color: #C9A961;
}
.footer-logo img {
  filter: brightness(0) invert(1);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-copyright {
  color: rgba(255,255,255,0.5);
}
.footer-policies .link {
  color: rgba(255,255,255,0.5);
}
.social-icons li svg {
  color: rgba(255,255,255,0.6);
}
.social-icons li svg:hover {
  color: #C9A961;
}

/* --- Header Logo fix --- */
.header-logo .logo-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  text-decoration: none;
}

/* --- Pricing card active: gold gradient --- */
.card-pricing.active .card-pricing-headings {
  background: linear-gradient(135deg, #E5C77F 0%, #C9A961 50%, #9C8042 100%) !important;
}
.card-pricing.active .card-pricing-headings .heading,
.card-pricing.active .card-pricing-headings .text {
  color: #0A2540 !important;
}
.card-pricing.active .card-pricing-headings .subheading {
  color: #0A2540 !important;
}

/* === OVERRIDE LAST: FAQ active heading === */
.faq .accordion-block.active .accordion-opener .heading {
  color: #FFFFFF !important;
}
.faq .accordion-block.active .accordion-opener {
  background-color: #0A2540 !important;
}
.faq .accordion-block.active .accordion-opener,
.faq .accordion-block.active .accordion-opener .heading,
.faq .accordion-block.active .accordion-opener .text {
  color: #FFFFFF !important;
}

/* ================================================
   RESPONSIVE — Tablet (≤991px)
   ================================================ */
@media (max-width: 991px) {
  .hero-banner .content .heading {
    font-size: 42px !important;
  }
  .section-headings .heading,
  .choose-us-content .heading {
    font-size: 32px !important;
  }
}

/* ================================================
   RESPONSIVE — Mobile (≤767px)
   ================================================ */
@media (max-width: 767px) {

  /* --- Hero heading: fit 375px --- */
  .hero-banner .content .heading {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* --- Section headings (text-50 class) --- */
  .section-headings .heading,
  .choose-us-content .heading {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

  /* --- Subheading badge on mobile --- */
  .section-headings .subheading {
    font-size: 14px !important;
  }

  /* --- FAQ accordion heading --- */
  .faq .accordion-opener .heading {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  /* --- Service accordion --- */
  .our-services .accordion-title-icon h2 {
    font-size: 16px !important;
  }

  /* --- Pricing card headings --- */
  .card-pricing .heading {
    font-size: 20px !important;
  }

  /* --- Why Choose Us card headings --- */
  .card-icon-text .heading {
    font-size: 16px !important;
  }
  .card-icon-text .text {
    font-size: 14px !important;
  }

  /* --- Reduce section padding on mobile --- */
  .mt-100 {
    margin-top: 60px !important;
  }
  .section-padding {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* ================================================
   RESPONSIVE — Small Mobile (≤480px)
   ================================================ */
@media (max-width: 480px) {
  .hero-banner .content .heading {
    font-size: 24px !important;
  }
  .section-headings .heading {
    font-size: 20px !important;
  }
  .faq .accordion-opener .heading {
    font-size: 15px !important;
  }
}

/* ================================================
   VERTICAL RHYTHM — Paragraph & Content Spacing
   Harmonisasi dengan index.php (referensi).
   Menambah napas antara paragraf, list, dan heading.
   ================================================ */

/* --- Jarak antar paragraf berurutan (paragraf ke-2 dst.) ---
   Tanpa rule ini, paragraf berturut-turut tampak "mepet"
   karena user-agent margin direset oleh preflight template. */
main p + p,
main .text + p,
main p + .text,
main .text + .text {
  margin-block-start: 1.5rem !important;
}

/* --- Subtext di bawah heading section: beri napas lebih --- */
.section-headings .heading + .text,
.section-headings .heading + p,
.section-headings .heading + .text-lists,
.section-headings .heading + .list-block {
  margin-block-start: 28px !important;
}

/* --- Subheading badge ke heading: beri jarak konsisten --- */
.section-headings .subheading + .heading {
  margin-block-start: 26px !important;
}

/* --- Paragraf di dalam kartu icon-text: jangan mepet icon/title --- */
.card-icon-text .heading + .text {
  margin-block-start: 14px !important;
}
.card-icon-text .text + .text,
.card-icon-text p + p {
  margin-block-start: 12px !important;
}

/* --- Paragraf di dalam accordion content: beri napas --- */
.accordion-content-inner p + p,
.accordion-content-inner .text + .text {
  margin-block-start: 1.25rem !important;
}

/* --- Paragraf di dalam kartu program/pricing --- */
.card-pricing p + p,
.card-pricing .text + .text,
.program-card p + p {
  margin-block-start: 0.875rem !important;
}

/* --- List item: tambah padding vertikal supaya tidak mepet --- */
.section-headings .text-lists li + li,
.section-headings .promotion-lists li + li {
  margin-block-start: 12px !important;
}

/* --- Mobile: kurangi sedikit supaya tidak terlalu jomplang --- */
@media (max-width: 767px) {
  main p + p,
  main .text + p,
  main p + .text,
  main .text + .text {
    margin-block-start: 1.125rem !important;
  }
  .section-headings .heading + .text,
  .section-headings .heading + p {
    margin-block-start: 20px !important;
  }
  .section-headings .subheading + .heading {
    margin-block-start: 20px !important;
  }
}

/* ================================================
   VERTICAL RHYTHM — Custom Components (page-local)
   Selaraskan judul/subjudul kecil di dalam kartu &
   daftar bernomor dengan referensi index.php.
   ================================================ */

/* --- Judul item (h3/h4) ke paragraf di bawahnya --- */
.pillar-list h3 + p,
.pillar-list h3 + .text,
.flow-list h3 + p,
.flow-list h3 + .text,
.case-list h3 + p,
.case-list h3 + .text,
.res-card h3 + p,
.res-card h3 + .text,
.cluster h3 + p,
.cluster h3 + .text,
.stat-card .stat-label + p,
.program-card h3 + p {
  margin-block-start: 0.625rem !important;
}

/* --- Baris meta (tanggal/klaster) ke deskripsi --- */
.case-list .case-meta + p,
.flow-list .flow-meta + p,
.flow-list .flow-meta + .text,
.res-card .res-tag + h3 {
  margin-block-start: 0.75rem !important;
}

/* --- Paragraf berturut di dalam kartu daftar --- */
.pillar-list p + p,
.flow-list p + p,
.case-list p + p,
.res-card p + p,
.cluster p + p {
  margin-block-start: 0.875rem !important;
}

/* --- Item daftar: sedikit lebih lapang --- */
.pillar-list > li,
.flow-list > li,
.step-list > li,
.case-list > li {
  padding-block: 1.875rem !important;
}
.cluster {
  padding-block: 1.5rem !important;
}

/* --- Kartu: lebih lapang --- */
.res-card {
  padding: 2rem 1.625rem !important;
}
.program-card {
  padding: 2.25rem 1.75rem !important;
}
.stat-card {
  padding: 2.25rem 1.25rem !important;
}

/* --- Judul kartu ke deskripsi --- */
.res-card h3,
.program-card h3 {
  margin-block-end: 0.75rem !important;
}
.card-icon-text .heading {
  margin-block-end: 0.375rem !important;
}

@media (max-width: 767px) {
  .pillar-list > li,
  .flow-list > li,
  .step-list > li,
  .case-list > li {
    padding-block: 1.375rem !important;
  }
  .cluster { padding-block: 1.125rem !important; }
  .res-card { padding: 1.625rem 1.25rem !important; }
  .program-card { padding: 1.75rem 1.375rem !important; }
  .stat-card { padding: 1.75rem 1rem !important; }
}

/* ================================================
   SPACING — Jarak section QNA/FAQ ke footer
   Beri ruang di bawah section FAQ agar tidak mepet
   ke footer, dan margin di atas footer site-wide.
   ================================================ */

/* Ruang di bawah section FAQ (semua halaman) */
section.faq {
  padding-bottom: 100px;
}
section.faq.mt-100 {
  padding-bottom: 100px;
}

/* Margin di atas footer */
.footer-main {
  margin-top: 80px;
}

@media (max-width: 991px) {
  section.faq,
  section.faq.mt-100 {
    padding-bottom: 70px;
  }
  .footer-main {
    margin-top: 60px;
  }
}

@media (max-width: 767px) {
  section.faq,
  section.faq.mt-100 {
    padding-bottom: 56px;
  }
  .footer-main {
    margin-top: 48px;
  }
}