/*!
 * ROCKSOLID — bugfixes.css
 *
 * Perbaikan UI hand-maintained. File ini TIDAK digenerate oleh build tool,
 * jadi aman diedit langsung. Di-enqueue setelah shell.css agar spesifisitasnya
 * selalu menang atas design-system.css dan shell.css.
 *
 * Daftar perbaikan:
 *  1. Grid "Brands we have built for" — alignment tengah untuk semua sel
 *  2. FAQ Accordion — hapus hover background #cc3366 dari base theme
 *  3. CTA Footer — jarak checklist ke tombol CTA
 *  4a. "Why Clients Bring Us In" — teks putih di section rs-band--graphite
 *  4b. Closing CTA di /process/ — h2 & p di rs-band--graphite
 *  4c. /contact/ kolom kanan — h3 di rs-card terang
 *  5. /contact/ "Follow Us" — ikon sosial media di kartu terang
 */

/* ==========================================================================
   1. Grid Brand — "Brands we have built for"
   Kartu Yang's Braised Chicken (dan lainnya) tidak center karena teks
   nama brand bisa 2 baris. Paksa setiap .rs-brand menjadi flex column center.
   ========================================================================== */

.rs-brand {
  display: flex;
  flex-direction: column;
  align-items: center;      /* center horizontal semua child */
  justify-content: center;  /* center vertikal dalam sel */
  text-align: center;
  gap: .3rem;
}

.rs-brand__name {
  text-align: center;
  /* Pastikan line-height konsisten agar 2-baris tidak mempengaruhi posisi vertikal */
  line-height: 1.25;
  min-height: 2.5em;        /* tinggi tetap 2 baris sehingga semua label di bawahnya sejajar */
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs-brand__type,
.rs-brand__count {
  text-align: center;
}


/* ==========================================================================
   2. FAQ Accordion — Hapus efek hover warna merah/pink dari base theme
   Hello Elementor (parent theme) mendefinisikan:
     button:hover { background-color: #cc3366; color: #fff; }
   yang mempengaruhi .rs-acc__btn saat di-hover atau di-focus.
   ========================================================================== */

/* Gunakan kombinasi selector & !important untuk mengalahkan specificity parent theme */
.rs-acc__btn,
.rs-acc__btn:hover,
.rs-acc__btn:focus,
.rs-acc__btn:focus-visible,
.rs-acc__btn:active {
  background-color: transparent !important;
  background: transparent !important;
}

/* Teks tombol: pertahankan warna gelap saat hover (hanya warna merah brand yang allowed) */
.rs-acc__btn {
  color: var(--graphite) !important;
  /* Padding inline agar teks tidak terlalu mepet ke tepi — perbaikan #2 */
  padding-inline: .25rem;
}

/* Saat hover: hanya warna teks yang berubah ke merah, background tetap transparan */
.rs-acc__btn:hover {
  color: var(--red) !important;
}

/* Lingkaran ikon + : pastikan kontras tetap jelas */
.rs-acc__ic {
  flex: none;
  /* border, color, dll sudah di-handle design-system.css; hanya pastikan tidak ikut-ikutan
     background yang datang dari parent theme */
  background-color: transparent;
}

/* Jika parent theme juga mengubah warna outline focus, reset dengan token kita */
.rs-acc__btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ==========================================================================
   3. CTA Footer — Jarak checklist ke tombol "Start Your Project"
   .rs-reassure (ul) terlalu dekat dengan .rs-cluster (div tombol).
   Tambahkan margin-bottom pada ul checklist agar ada ruang napas.
   ========================================================================== */

.rs-contact .rs-reassure {
  margin-bottom: 2rem; /* 32px — sesuai permintaan */
}


/* ==========================================================================
   4a. "Why Clients Bring Us In" — Section rs-band--graphite di halaman service
   Template page-service.php menggunakan class rs-band--graphite, tapi class
   ini tidak didefinisikan di design-system.css (hanya rs-contact yang dark).
   Akibatnya background defaultnya beige/putih sedangkan teksnya berwarna putih.

   Solusi: definisikan .rs-band--graphite sebagai section gelap, ATAU (jika
   ternyata background sudah gelap dari class lain) perbaiki warna teksnya.
   Berdasarkan temuan visual: background terang, teks putih — artinya class
   rs-band--graphite belum didefinisikan, jadi background tidak gelap.
   Kita definisikan sekarang dengan background graphite + teks terang.
   ========================================================================== */

.rs-band--graphite {
  background: var(--graphite);
  color: var(--off-white);
}

/* Heading di dalam section gelap harus putih */
.rs-band--graphite h1,
.rs-band--graphite h2,
.rs-band--graphite h3,
.rs-band--graphite h4 {
  color: #fff;
}

/* Lead/muted text di section gelap */
.rs-band--graphite .rs-lead,
.rs-band--graphite .muted,
.rs-band--graphite p {
  color: rgba(250, 250, 248, .72);
}

/* Eyebrow di section gelap — gunakan varian light */
.rs-band--graphite .rs-eyebrow {
  color: rgba(255, 255, 255, .72);
}
.rs-band--graphite .rs-eyebrow::before {
  background: rgba(255, 255, 255, .42);
}

/* Checklist items di section gelap */
.rs-band--graphite .rs-checklist .rs-checkitem span {
  color: rgba(250, 250, 248, .82);
}
.rs-band--graphite .rs-checklist svg {
  color: var(--red);
}


/* ==========================================================================
   4b. Closing CTA di /process/ — rs-band--graphite
   Template page-process.php: section closing dengan class rs-band--graphite.
   h2 sudah punya inline style color:#fafaf8, dan p sudah punya inline style.
   Dengan rule 4a di atas sudah tercover, tapi tambahkan khusus untuk
   .rs-process-page kalau ada konflik lain.
   ========================================================================== */

.rs-process-page .rs-band--graphite h2,
.rs-process-page .rs-band--graphite .rs-display-lg {
  color: #fafaf8;
}

.rs-process-page .rs-band--graphite .rs-lead {
  color: rgba(250, 250, 248, .72);
}


/* ==========================================================================
   4c. /contact/ Kolom Kanan — h3 "Prefer to talk directly?" & "Follow Us"
   di dalam .rs-card yang background-nya rgba(255,255,255,.05) = hampir putih
   Saat ini .rs-card h3 { color: #fff } tapi .rs-contact-page memakai
   rs-band--white (background terang), bukan rs-contact (background gelap).
   ========================================================================== */

/* Di halaman contact, rs-card ada di background terang → h3 harus gelap */
.rs-contact-page .rs-card {
  background: #fff;
  border: 1px solid var(--beige-deep);
}

.rs-contact-page .rs-card h3 {
  color: #111111;
}

.rs-contact-page .rs-card p {
  color: var(--concrete);
}

/* Info items di halaman contact (di background terang) */
.rs-contact-page .rs-card .rs-infoitem h4 {
  color: var(--graphite);
}

.rs-contact-page .rs-card .rs-infoitem p,
.rs-contact-page .rs-card .rs-infoitem a {
  color: var(--concrete);
}

.rs-contact-page .rs-card .rs-infoitem a:hover {
  color: var(--red);
}

/* Icon background di halaman contact */
.rs-contact-page .rs-card .rs-infoitem__ic {
  background: var(--red-soft);
  color: var(--red);
}


/* ==========================================================================
   5. /contact/ "Follow Us" — Ikon sosial media di kartu terang
   .rs-footer__social dipakai ulang di halaman contact, tapi di sana ia
   berada di atas background kartu terang, bukan footer gelap.
   Perbaiki: normal = background terang / ikon gelap; hover = merah.
   ========================================================================== */

/* Target khusus: hanya di halaman contact page */
.rs-contact-page .rs-footer__social a {
  background: var(--warm);               /* #f2f0ec — latar terang */
  border: 1px solid var(--stone);        /* border tegas, bukan transparansi */
  color: var(--graphite);                /* ikon gelap */
  /* transition sudah ada di shell.css, cukup override property warna */
}

.rs-contact-page .rs-footer__social a:hover {
  background: var(--red);               /* merah brand saat hover */
  border-color: var(--red);
  color: #ffffff;                        /* ikon putih saat hover */
  transform: translateY(-2px);           /* efek lift konsisten dengan footer */
}

/* Pastikan SVG di dalam anchor ikut warna dari 'color' */
.rs-contact-page .rs-footer__social a svg {
  fill: currentColor;
  stroke: currentColor;
}

/* ==========================================================================
   6. Tipografia y espaciado armonioso (Refinamiento editorial)
   Ajuste de line-height y letter-spacing para lograr una lectura natural y fluida,
   eliminando la rigidez tipografica caracteristica de plantillas default.
   Se mantienen intactos todos los contenedores, columnas y distribuciones de layout.
   ========================================================================== */

/* Titulares con respiracion natural y espaciado de letras equilibrado */
h1,
.display-xl,
.rs-display-xl {
  line-height: 1.15;
  letter-spacing: -0.022em;
}

h2,
.display-lg,
.rs-display-lg {
  line-height: 1.2;
  letter-spacing: -0.018em;
}

h3,
.rs-card h3 {
  line-height: 1.28;
  letter-spacing: -0.012em;
}

h4, h5 {
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Cuerpo de texto y parrafos con lectura comoda */
body {
  line-height: 1.7;
  letter-spacing: -0.005em;
}

p,
.rs-body {
  line-height: 1.7;
  letter-spacing: -0.005em;
}

.lead,
.rs-lead,
.rs-hero__body {
  line-height: 1.62;
  letter-spacing: -0.008em;
}

/* Eyebrow refinado: espaciado de caracteres sutil y legible en lugar de rigido */
.rs-eyebrow {
  letter-spacing: 0.09em;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.95rem;
}

/* Espaciado vertical armonioso y predecible entre encabezados y parrafos */
.rs-eyebrow + h1,
.rs-eyebrow + h2,
.rs-eyebrow + h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

h1 + p,
h2 + p,
h3 + p,
h1 + .lead,
h2 + .lead,
h1 + .rs-hero__body {
  margin-top: 0;
  margin-bottom: 1.35rem;
}

/* Ajuste de lectura en tarjetas y cajas de contenido */
.rs-card p,
.rs-step p,
.rs-benefit p,
.rs-pill p {
  line-height: 1.65;
}