/* ==========================================================================
   Cangkang bersama Sinauge — header dan footer
   --------------------------------------------------------------------------
   Gaya mandiri untuk potongan header/footer yang dihasilkan
   scripts/site-chrome.mjs. Dimuat oleh beranda, halaman hukum, dan halaman
   contoh. Berkas ini TIDAK bergantung pada Tailwind karena halaman hukum dan
   halaman contoh tidak memuat Tailwind, dan sengaja tanpa gaya sebaris supaya
   CSP satu asal (`style-src 'self'`) tetap utuh.

   Nilai warna mengikuti design token di apps/web/src/main.css. Karena berkas
   ini berada di luar @layer Tailwind, aturannya menang atas utilitas Tailwind.
   ========================================================================== */

:root {
  --sc-primary: #16694e;
  --sc-primary-strong: #0f5039;
  --sc-accent: #f2a03d;
  --sc-accent-strong: #d9862a;
  --sc-ink: #12211c;
  --sc-ink-soft: #3f514a;
  --sc-muted: #667a72;
  --sc-border: #dbe6e0;
  --sc-surface: #ffffff;
  --sc-surface-alt: #f4f8f5;
  /* Sudut kecil dipakai merata, termasuk tombol ajakan, agar seragam dengan
     token di apps/web/src/main.css. */
  --sc-radius-sm: 4px;
  --sc-radius-md: 6px;
  --sc-shadow-md: 0 6px 16px rgba(18, 33, 28, 0.08);
  --sc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.sc-head,
.sc-head *,
.sc-foot,
.sc-foot * {
  box-sizing: border-box;
}

/* --- Kerangka ----------------------------------------------------------- */

.sc-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 900px) {
  .sc-container {
    padding-inline: 2rem;
  }
}

/* --- Header ------------------------------------------------------------- */

.sc-head {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--sc-border);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--sc-font);
}

.sc-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  min-height: 64px;
  padding-block: 0.5rem;
}

.sc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sc-ink);
  text-decoration: none;
}

.sc-brand svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
}

.sc-leaf {
  fill: var(--sc-primary);
}

.sc-stem {
  stroke: var(--sc-accent);
  fill: none;
}

.sc-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-nav__link {
  color: var(--sc-ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.sc-nav__link:hover {
  color: var(--sc-primary-strong);
}

.sc-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sc-login {
  color: var(--sc-ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.sc-login:hover {
  color: var(--sc-primary-strong);
}

.sc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: 1.1rem;
  border-radius: var(--sc-radius-sm);
  background: var(--sc-primary);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.sc-cta:hover {
  background: var(--sc-primary-strong);
}

.sc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.sc-skip:focus {
  left: 1rem;
  top: 0.75rem;
  z-index: 30;
  padding: 0.5rem 1rem;
  border-radius: var(--sc-radius-md);
  background: var(--sc-surface);
  box-shadow: var(--sc-shadow-md);
  color: var(--sc-primary-strong);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

/* --- Footer ------------------------------------------------------------- */

.sc-foot {
  border-top: 1px solid var(--sc-border);
  background: var(--sc-surface-alt);
  padding-block: 2rem;
  font-family: var(--sc-font);
  font-size: 0.9375rem;
  color: var(--sc-muted);
}

.sc-foot__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .sc-foot__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.sc-foot__note {
  margin: 0.75rem 0 0;
  max-width: 34ch;
}

.sc-foot__title {
  margin: 0;
  font-weight: 600;
  color: var(--sc-ink);
}

.sc-foot__list {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.sc-foot__link {
  color: var(--sc-muted);
  text-decoration: none;
}

.sc-foot__link:hover {
  color: var(--sc-primary-strong);
}

.sc-foot__legal {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sc-border);
  font-size: 0.8125rem;
}

.sc-foot__legal p {
  margin: 0;
}

/* --- Fokus keyboard ----------------------------------------------------- */

.sc-head a:focus-visible,
.sc-foot a:focus-visible {
  outline: 2px solid var(--sc-accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}