/* ===============================================
   SEJARAH PAGE SPECIFIC STYLES
   =============================================== */

/* 1. Palet Warna Khas Sejarah */
:root {
  --sejarah-bg: #FDF8F0; /* Krem lembut seperti kertas tua */
  --sejarah-surface: #FFFFFF;
  --sejarah-text: #4E443A; /* Coklat tua untuk teks */
  --sejarah-heading: #8B4513; /* SaddleBrown untuk judul */
  --sejarah-accent: #CD853F; /* Peru (coklat muda) untuk aksen */
  --sejarah-border: rgba(139, 69, 19, .15);
  --sejarah-shadow: 0 10px 30px rgba(78, 68, 58, .12);
}

html[data-theme="dark"] {
  --sejarah-bg: #28231E;
  --sejarah-surface: #332C25;
  --sejarah-text: #EAE0D5;
  --sejarah-heading: #D2B48C; /* Tan */
  --sejarah-accent: #CD853F;
  --sejarah-border: rgba(205, 133, 63, .2);
  --sejarah-shadow: 0 15px 40px rgba(0, 0, 0, .25);
}

body {
  background: var(--sejarah-bg);
  color: var(--sejarah-text);
}

/* 2. Hero Section Kustom */
#sejarah-hero {
  background-image:
    linear-gradient(to top, var(--sejarah-bg) 5%, transparent 50%),
    url('../images/background_title_profil.jpg');
  background-color: var(--sejarah-bg);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  min-height: 55vh;
}

#sejarah-hero h1,
#sejarah-hero p,
#sejarah-hero .breadcrumb a,
#sejarah-hero .breadcrumb span {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Penambahan properti untuk memperbaiki bug rendering saat scroll */
#detail-sejarah {
  isolation: isolate;
  transform: translateZ(0); /* Memaksa hardware acceleration pada layer terpisah */
}

/* 3. Layout Konten Sejarah yang Kreatif */
.sejarah-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 992px) {
  .sejarah-content {
    grid-template-columns: 1fr 320px;
  }
}

.sejarah-text {
  line-height: 1.8;
  font-size: 1.05rem;
  min-width: 0; /* Tambahan untuk mengatasi masalah rendering grid */
  overflow-wrap: break-word; /* Tambahan untuk memastikan teks tidak meluap */
}

.sejarah-text h3 {
  font-family: "Playfair Display", serif;
  color: var(--sejarah-heading);
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.sejarah-text .highlight {
    font-weight: 600;
    color: var(--sejarah-heading);
}

.sejarah-media {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.photo-placeholder {
  width: 100%;
  height: 250px;
  background-color: rgba(0,0,0,0.05);
  border: 2px dashed var(--sejarah-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-style: italic;
  color: var(--muted);
  background-size: cover;
  background-position: center;
  box-shadow: var(--sejarah-shadow);
}

html[data-theme="dark"] .photo-placeholder {
    background-color: rgba(255,255,255,0.03);
}

.photo-placeholder p {
    background-color: rgba(255, 255, 255, 0.8);
    padding: .5rem 1rem;
    border-radius: 8px;
    color: var(--sejarah-text);
}

html[data-theme="dark"] .photo-placeholder p {
     background-color: rgba(0, 0, 0, 0.5);
     color: var(--sejarah-text);
}


/* 4. Tabel Daftar Kepala Desa */
.table-wrapper {
    overflow-x: auto;
    margin-top: 2rem;
    background: var(--sejarah-surface);
    border: 1px solid var(--sejarah-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--sejarah-shadow);
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.styled-table thead tr {
    background-color: var(--sejarah-heading);
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid var(--sejarah-border);
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: rgba(0,0,0,0.02);
}
html[data-theme="dark"] .styled-table tbody tr:nth-of-type(even) {
    background-color: rgba(255,255,255,0.02);
}

.styled-table tbody tr:last-of-type {
    border-bottom: none;
}

/* Tambahkan kode ini di akhir file css/sejarah-styles.css */

/* 5. Override Tombol SmartHub di Halaman Sejarah */
.navbar .nav a.btn--smarthub {
    background: var(--sejarah-heading); /* Menggunakan warna coklat utama */
    box-shadow: 0 4px 15px rgba(139, 69, 19, .3);
    color: #fff; /* Pastikan teks tetap putih */
}

.navbar .nav a.btn--smarthub:hover {
    background: var(--sejarah-accent); /* Warna coklat lebih terang saat disentuh */
}

/* 6. Menyesuaikan layout navigasi agar tombol ke kanan */
.navbar .nav {
    flex-grow: 1; /* Membuat area navigasi mengisi ruang kosong */
    justify-content: center; /* Mendorong isinya (tombol) ke tengah */
}

/* Gaya untuk tombol unduh PDF */
.download-button .btn--primary {
    background-color: var(--sejarah-accent);
    color: #fff;
    box-shadow: 0 6px 20px rgba(205, 133, 63, 0.4);
    transition: background-color 0.3s ease;
}

.download-button .btn--primary:hover {
    background-color: var(--sejarah-heading);
}

.download-button .btn--primary i {
    margin-right: 0.5rem;
}

/* ===============================================
   7. Penyesuaian Warna Footer Halaman Sejarah
   =============================================== */
footer {
    background: linear-gradient(180deg, rgba(139, 69, 19, .05), transparent), var(--sejarah-bg);
    color: var(--sejarah-text);
}

footer b {
    color: var(--sejarah-heading);
}

footer a:hover {
    color: var(--sejarah-accent) !important; /* Menjamin perubahan warna saat disentuh */
}

footer .social a:hover .icon {
    color: var(--sejarah-accent);
}

/* ===============================================
   8. Perbaikan Bug Tampilan Mobile
   =============================================== */

/* Nonaktifkan animasi 'reveal' pada tampilan mobile (lebar layar di bawah 768px) 
   untuk memastikan teks sejarah langsung terlihat dan menghindari bug rendering. */
@media (max-width: 768px) {
  .sejarah-text.reveal {
    opacity: 1;
    transform: none;
  }
}