/* =====================================================================
   gk-kerangka-storefront.css — header dan footer CV Auditor + Career Map
   disamakan dengan storefront getkarier.com. Ditulis 16 Sep 2026.

   Semua angka DIUKUR dari theme 107 lewat CDP (getComputedStyle), bukan
   disalin dari catatan:
     header    latar rgba(251,247,240,.94), garis bawah 1px #e7dfd1
     menu      DM Sans 500 14.5px #3b342d; aktif #1a1712 600 + garis bawah
               teal #235852 2px (di storefront span::after bottom -6px)
     wordmark  Space Grotesk 700 19px ls -0.01em #1a1712, HP 15px
     akun      lingkaran 38px #fbf3e2 border 1px #e0d8cb, ikon 20px #75695c
     burger    garis 20px ink, garis ketiga 14px emas
     footer    judul merek DM Sans 600 22px (HP 20px) + garis 1px krem 40%,
               deskripsi 13.5px krem 60% (HP 12.5px), judul kolom 12px 600
               uppercase ls .1em krem 70%, tautan 13.5px krem 70%

   Dimuat PALING AKHIR di body kedua halaman dan tiap selektor diawali
   `:is(body.gk-v2, body)`, jadi menang atas <style> halaman yang tersebar tanpa
   !important. :is() mengambil spesifisitas pilihan terberatnya (0,1,1), dan itu
   perlu: Career Map punya `.gk-v2 header` (0,1,1) yang mengalahkan `body header`
   biasa, sehingga latarnya tetap putih kebiruan di atas peta.

   ⚠ Kalau header atau footer storefront berubah, berkas ini ikut diubah.
   Sumber isi menu tetap lib/nav.ts; berkas ini cuma tampilan.
   ===================================================================== */

/* ---------------- header ---------------- */
:is(body.gk-v2, body) header {
  /* Storefront memakai krem 94% di atas halaman krem. Di Career Map header
     duduk di atas peta biru, jadi transparansi 6% sudah cukup bikin kebiruan;
     di sini dibuat pekat supaya warnanya sama persis di kedua halaman. */
  background: #fbf7f0;
  border-bottom: 1px solid #e7dfd1;
}
:is(body.gk-v2, body) .h-nav a {
  color: #3b342d;
  font-weight: 500;
}
:is(body.gk-v2, body) .h-nav a:hover {
  color: #1a1712;
}
:is(body.gk-v2, body) .h-nav a[aria-current="page"] {
  color: #1a1712;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #235852;
  text-decoration-thickness: 2px;
  text-underline-offset: 9px;
}
:is(body.gk-v2, body) .h-wordmark {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #1a1712;
  white-space: nowrap;
}
:is(body.gk-v2, body) .h-inner > a,
:is(body.gk-v2, body) .h-logo-link,
:is(body.gk-v2, body) .h-logo-link:visited {
  color: #1a1712;
  text-decoration: none;
}
@media (max-width: 989px) {
  :is(body.gk-v2, body) .h-wordmark {
    font-size: 15px;
  }
}

/* ikon akun jadi lingkaran krem-emas seperti .gk-account-avatar storefront */
:is(body.gk-v2, body) .gk-am-btn > svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 8px;
  border-radius: 999px;
  background: #fbf3e2;
  border: 1px solid #e0d8cb;
  color: #75695c;
}
:is(body.gk-v2, body) .gk-am-btn:hover {
  background: transparent;
}

/* hamburger: garis ketiga lebih pendek dan emas (gk-burger storefront) */
:is(body.gk-v2, body) .h-burger svg {
  width: 22px;
  height: 22px;
}
:is(body.gk-v2, body) .h-burger svg path {
  stroke: #1a1712;
  stroke-width: 2;
}
:is(body.gk-v2, body) .h-burger svg path:nth-child(3) {
  stroke: #b8862b;
  stroke-dasharray: 12 40;
}

/* ---------------- footer ---------------- */
:is(body.gk-v2, body) .gk-ftr {
  background: #1a1712;
  color: #fbf7f0;
}
:is(body.gk-v2, body) .gk-ftr-in {
  max-width: 1440px;
  padding-left: 48px;
  padding-right: 48px;
}
:is(body.gk-v2, body) .gk-ftr-atas {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(251, 247, 240, 0.4);
}
:is(body.gk-v2, body) .gk-ftr-merek {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fbf7f0;
  text-decoration: none;
}
:is(body.gk-v2, body) .gk-ftr-deskripsi {
  margin: 0;
  max-width: 260px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(251, 247, 240, 0.6);
}
:is(body.gk-v2, body) .gk-ftr-grid {
  gap: 32px;
}
/* Kolom tetap 259/185px baru dari 1200px. Di 768-1199px jumlahnya (910px)
   melebihi lebar isi, jadi di sana memakai pecahan dengan proporsi yang sama. */
@media (min-width: 768px) {
  :is(body.gk-v2, body) .gk-ftr-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  :is(body.gk-v2, body) .gk-ftr-grid {
    grid-template-columns: 259px 185px 185px 185px;
  }
}
:is(body.gk-v2, body) .gk-ftr h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(251, 247, 240, 0.7);
}
:is(body.gk-v2, body) .gk-ftr ul {
  margin-top: 4px;
  gap: 0;
}
:is(body.gk-v2, body) .gk-ftr ul a {
  display: inline-block;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(251, 247, 240, 0.7);
}
:is(body.gk-v2, body) .gk-ftr ul a:hover {
  color: #fbf7f0;
}
:is(body.gk-v2, body) .gk-ftr-bawah {
  margin-top: 40px;
  border-top: 1px solid rgba(251, 247, 240, 0.4);
}
:is(body.gk-v2, body) .gk-ftr-bawah ul {
  gap: 8px 20px;
}
:is(body.gk-v2, body) .gk-ftr-bawah ul a {
  padding: 0;
  line-height: 1.6;
}
:is(body.gk-v2, body) .gk-ftr-bawah ul a,
:is(body.gk-v2, body) .gk-ftr-cr {
  font-size: 13px;
  color: rgba(251, 247, 240, 0.6);
}

@media (max-width: 767px) {
  :is(body.gk-v2, body) .gk-ftr-in {
    padding-left: 15px;
    padding-right: 15px;
  }
  :is(body.gk-v2, body) .gk-ftr-atas {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
  :is(body.gk-v2, body) .gk-ftr-merek {
    font-size: 20px;
  }
  :is(body.gk-v2, body) .gk-ftr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 16px;
  }
  :is(body.gk-v2, body) .gk-ftr-grid > :first-child {
    grid-column: 1 / -1;
  }
  :is(body.gk-v2, body) .gk-ftr-deskripsi {
    max-width: none;
    font-size: 12.5px;
  }
  :is(body.gk-v2, body) .gk-ftr ul a {
    font-size: 12.5px;
    padding: 4px 0;
  }
  /* HP: bar bawah rata tengah seperti storefront */
  :is(body.gk-v2, body) .gk-ftr-bawah {
    align-items: center;
    text-align: center;
  }
  :is(body.gk-v2, body) .gk-ftr-bawah ul {
    justify-content: center;
  }
}