/*
 Theme Name:  GP Child – Arief Style
 Theme URI:   https://example.com/gp-child-arief-style
 Description: GeneratePress child theme styled to mimic arieframadhan.com (list blog, right sidebar, category badge, breadcrumbs, numeric pagination, related posts).
 Author:      Rayan
 Version:     1.0.0
 Template:    generatepress
 License:     GPL-2.0-or-later
 Tags:        blog, right-sidebar, lightweight
 Text Domain: gp-child-arief-style
*/

/* =Variables & base
--------------------------------------------- */
:root{
  --container-w: 1240px;
  --accent: #0ea5e9;
  --badge-bg: #111827;
  --badge-fg: #fff;
  --border: #e5e7eb;
  --muted: #6b7280;
}

body{line-height:1.7;}
a{ text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Container width */
.site-content .container,
.grid-container{ max-width: var(--container-w); }

/* Header/menu spacing (simple) */
.main-navigation .inside-navigation{ gap:.5rem; }

/* Archive cards */
.blog .site-main article,
.archive .site-main article{
  border-bottom:1px solid var(--border);
  padding-bottom:1.25rem; margin-bottom:1.25rem;
}
.entry-title{ margin:.15rem 0 .25rem; }
.entry-meta{ font-size:.86rem; color:var(--muted); }

/* Category badge above title on archives */
.cat-badge{
  display:inline-block; font-size:.78rem; font-weight:600;
  padding:.22rem .5rem; border-radius:.35rem;
  background:var(--badge-bg); color:var(--badge-fg); margin-bottom:.35rem;
}

/* Sidebar widgets */
.inside-right-sidebar .widget{
  background:#fff; border:1px solid var(--border); border-radius:.5rem;
  padding:1rem; margin-bottom:1rem;
}
.inside-right-sidebar .widget-title{
  margin-top:0; margin-bottom:.75rem; font-size:1.05rem;
}

/* Breadcrumbs */
.breadcrumbs{
  font-size:.9rem; margin-bottom:.75rem; color:var(--muted);
}
.breadcrumbs a{ color:inherit; }
.breadcrumbs a:hover{ color:#111; text-decoration:underline; }

/* Pagination numeric */
.navigation.pagination .nav-links a,
.navigation.pagination .nav-links span{
  display:inline-block; min-width:2.25rem; text-align:center;
  padding:.4rem .6rem; border:1px solid var(--border); margin-right:.4rem;
  border-radius:.375rem;
}
.navigation.pagination .current{ background:#111827; color:#fff; border-color:#111827; }

/* Related posts grid */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:1rem; }
.related-grid a{ display:block; border:1px solid var(--border); border-radius:.5rem; padding:.75rem; }
.related-grid a strong{ display:block; line-height:1.4; }

/* Footer credit */
.site-info{ opacity:.8; }
:root{
  --container-w:1240px; --border:#e5e7eb; --muted:#6b7280;
  --badge-bg:#111827; --badge-fg:#fff;
}
.site-content .container, .grid-container{ max-width: var(--container-w); }
body{ line-height:1.7; }
.entry-title{ margin:.15rem 0 .25rem; }
.entry-meta{ font-size:.86rem; color:var(--muted); }
.blog .site-main article,
.archive .site-main article{
  border-bottom:1px solid var(--border);
  padding-bottom:1.25rem; margin-bottom:1.25rem;
}
.main-navigation .inside-navigation{ gap:.5rem; }
.main-navigation .main-nav ul li a{ text-transform:none; font-weight:600; }

.cat-badge{
  display:inline-block; font-size:.78rem; font-weight:600;
  padding:.22rem .5rem; border-radius:.35rem;
  background:var(--badge-bg); color:var(--badge-fg); margin-bottom:.35rem;
}
.breadcrumbs{ font-size:.9rem; margin-bottom:.75rem; color:var(--muted); }
.breadcrumbs a{ color:inherit; }
.inside-right-sidebar .widget{
  background:#fff; border:1px solid var(--border); border-radius:.5rem;
  padding:1rem; margin-bottom:1rem;
}
.inside-right-sidebar .widget-title{ margin:0 0 .75rem; font-size:1.05rem; }

:root{
  --body:16px;            /* atur 15–16px kalau mau lebih kecil */
  --title:1.35rem;        /* judul post di daftar */
  --meta:.86rem;
  --excerpt:.95rem;
  --border:#e5e7eb;
}

/* Basis */
body{ font-size:var(--body); line-height:1.7; }

/* Daftar posting (home/archive) */
.blog .site-main article,
.archive .site-main article{
  border-bottom:1px solid var(--border);
  padding-bottom:1.1rem; margin-bottom:1.1rem;
}
.blog .entry-title, .archive .entry-title{
  font-size:var(--title); line-height:1.4; margin:.2rem 0 .35rem;
}
.blog .entry-meta, .archive .entry-meta{ font-size:var(--meta); opacity:.8; }
.blog .entry-summary p, .archive .entry-summary p{ font-size:var(--excerpt); margin:.4rem 0; }

/* Badge kategori di atas judul (jika dipakai) */
.cat-badge{
  display:inline-block; font-size:.78rem; font-weight:600;
  padding:.22rem .5rem; border-radius:.35rem;
  background:#111827; color:#fff; margin-bottom:.35rem;
}

/* Pagination lebih kecil & rapi */
.navigation.pagination .nav-links a,
.navigation.pagination .nav-links span{
  font-size:.9rem; min-width:2.1rem; padding:.35rem .5rem;
}
/* Sembunyikan meta (kategori, tags, komentar) di HOME & ARSIP */
.blog .entry-meta,
.archive .entry-meta,
.blog .cat-links, .archive .cat-links,
.blog .tags-links, .archive .tags-links,
.blog .comments-link, .archive .comments-link {
  display: none !important;
}

/* Rapikan spasi yang tersisa setelah meta disembunyikan */
.blog .site-main article,
.archive .site-main article{
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
}
.blog .posted-on, .archive .posted-on,
.blog .byline,    .archive .byline { display:none !important; }
.entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child) {
    margin-top: 1em;
}
h2 {
    font-size: 22px;
}

.inside-header {
    padding: 1px;
}

:root {
    --container-w: 960px;
}

h1 {
    font-size: 25px;
    margin: 0;
    word-wrap: break-word;
    font-weight: 700;
}

:root{
  --thumb-w: 300px;  /* atur lebar kolom thumbnail di kiri (px) */
  --border: #e5e7eb;
  --muted:  #6b7280;
  --title:  1.25rem; /* kecilkan judul di list */
  --excerpt: .95rem;
  --meta:   .86rem;
}

/* Susun kartu posting jadi 2 kolom: [thumb | text] */
.blog .inside-article,
.archive .inside-article{
  display: grid;
  grid-template-columns: var(--thumb-w) 1fr;
  grid-template-areas:
    "thumb header"
    "thumb summary";
  column-gap: 16px;
  align-items: start;

}

/* Letakkan elemen ke area grid */
.blog .archive-thumb-link,
.archive .archive-thumb-link{ grid-area: thumb; display:block; }

.blog .entry-header,
.archive .entry-header{ grid-area: header; margin: 0; }

.blog .entry-summary,
.archive .entry-summary{ grid-area: summary; margin-top: .35rem; }

/* Styling thumbnail kecil di kiri */
.archive-thumb{
  display:block; width:100%; height:auto; border-radius:8px;
  /* Jika mau rasio seragam, aktifkan 2 baris di bawah:
  aspect-ratio: 16/9; object-fit: cover;
  */
}

/* Kecilkan typografi daftar posting */
.blog .entry-title, .archive .entry-title{
  font-size: var(--title);
  line-height: 1.35;
  margin: .2rem 0 .3rem;
}
.blog .entry-summary p, .archive .entry-summary p{ font-size: var(--excerpt); }
.blog .entry-meta,    .archive .entry-meta   { font-size: var(--meta); color: var(--muted); }

/* Sembunyikan meta (kategori/tags/komentar) bawah judul jika tak diinginkan */
.blog .entry-meta, .archive .entry-meta,
.blog .cat-links,  .archive .cat-links,
.blog .tags-links, .archive .tags-links,
.blog .comments-link, .archive .comments-link { display:none !important; }

/* Jika thumbnail default GP ikut muncul (dobel), sembunyikan: */
.blog .post-image, .archive .post-image{ display:none; }

/* Responsif: stack ke atas-bawah di layar kecil */
@media (max-width: 768px){
  .blog .inside-article, .archive .inside-article{
    display:block;
  }
  .archive-thumb{ margin: 0 0 .6rem; }
}
:root{
  --thumb-w: 140px;          /* lebar kolom thumbnail (bisa 120–140px) */
  --card-radius: 9px;
  --card-pad: 9px;
  --card-border:#e5e7eb;
  --text-muted:#64748b;
  --title-size:1.125rem;     /* ~18px, samain seperti contoh */
  --excerpt-size:.95rem;     /* ~15px */
}

/* Kartu list post: thumbnail kiri, teks kanan */
.blog .inside-article,
.archive .inside-article{
  display:grid;
  grid-template-columns: var(--thumb-w) 1fr;
  grid-template-areas:
    "thumb header"
    "thumb summary";
  column-gap:16px; align-items:start;

  background:#fff;
  border:1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin: 0 0 14px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

/* Hover lembut */
.blog .inside-article:hover,
.archive .inside-article:hover{
  box-shadow: 0 6px 12px rgba(15,23,42,.06);
  border-color:#dfe3e8;
  transform: translateY(-1px);
}

/* Penempatan area grid */
.blog .archive-thumb-link, .archive .archive-thumb-link{ grid-area: thumb; display:block; }
.blog .entry-header,       .archive .entry-header      { grid-area: header; margin:0; }
.blog .entry-summary,      .archive .entry-summary     { grid-area: summary; margin:.1rem 0 0; }

/* Thumbnail kecil rounded */
.archive-thumb{
  display:block; width:100%; height:auto; border-radius:12px;
  aspect-ratio: 1 / 1;        /* jadi kotak rapi */
  object-fit: cover;
}

/* Kategori tipis (bukan badge hitam) */
.cat-badge{
  display:block;
  background:transparent !important;
  color: var(--text-muted);
  font-size:.9rem; font-weight:600; letter-spacing:.02em;
  padding:0; margin-bottom:.25rem;
}

/* Judul & excerpt kecil rapi */
.blog .entry-title, .archive .entry-title{
  font-size: var(--title-size);
  line-height:1.35; font-weight:700;
  margin:.1rem 0 .25rem;
}
.blog .entry-summary p, .archive .entry-summary p{
  font-size: var(--excerpt-size);
  color: var(--text-muted);
  margin:.2rem 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; /* 2 baris */
}

/* Sembunyikan meta yang nggak perlu di daftar */
.blog .entry-meta, .archive .entry-meta,
.blog .cat-links,  .archive .cat-links,
.blog .tags-links, .archive .tags-links,
.blog .comments-link, .archive .comments-link{ display:none !important; }

/* Hindari featured image default GP muncul dobel */
.blog .post-image, .archive .post-image{ display:none; }

/* Responsif: tumpuk atas-bawah di layar kecil */
@media (max-width: 768px){
  .blog .inside-article, .archive .inside-article{ display:block; }
  .archive-thumb{ margin:0 0 .6rem; }
}
.one-container.archive .post:not(:last-child):not(.is-loop-template-item), .one-container.blog .post:not(:last-child):not(.is-loop-template-item) {
    padding-bottom: 0;
}

.blog .site-main article, .archive .site-main article {
    border-bottom: 0px solid var(--border);
}

.one-container .site-content {
    padding: 10px;
}

/* ===== Sidebar sederhana ===== */
.inside-right-sidebar .widget{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  margin:0 0 14px;
  box-shadow:none;           /* tanpa bayangan */
}
.inside-right-sidebar .widget-title{
  margin:0 0 .6rem;
  font-size:1rem;
  font-weight:700;
}
.inside-right-sidebar .widget ul{ list-style:none; margin:0; padding:0; }
.inside-right-sidebar .widget ul li{ margin:.35rem 0; }
.inside-right-sidebar .widget a{ text-decoration:none; }
.inside-right-sidebar .widget a:hover{ text-decoration:underline; }

/* Search box sederhana */
.widget_search .search-form{ display:flex; gap:8px; }
.widget_search .search-field{
  flex:1; height:40px; padding:0 10px;
  border:1px solid #e5e7eb; border-radius:8px; outline:0;
}
.widget_search .search-submit{
  height:40px; padding:0 12px;
  border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc;
}

/* ===== Pagination sederhana ===== */
.navigation.pagination{ text-align:center; margin-top:16px; }
.navigation.pagination .nav-links{
  display:inline-flex; gap:8px; align-items:center;
}
.navigation.pagination .nav-links a.page-numbers,
.navigation.pagination .nav-links span.page-numbers{
  min-width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff; color:#0f172a;
  font-weight:600;
  box-shadow:none;            /* tanpa bayangan */
}
.navigation.pagination .nav-links .page-numbers.current{
  background:#0f172a; color:#fff; border-color:#0f172a;
}
.navigation.pagination .nav-links a.page-numbers:hover{
  background:#f8fafc;
}
.gp-icon svg {
    fill: rgb(95 95 95);
}

/* Spasi breadcrumbs di single */
.single .breadcrumbs{
  font-size:.9rem;
  opacity:.9;
  margin: .25rem 0 .6rem; /* atas kecil, bawah sedikit lebih lega */
}
.single .post-image{ margin-bottom: .25rem; } /* opsional, biar rapat dengan breadcrumbs */
.single .breadcrumbs{
  font-size:.9rem;
  opacity:.9;
  margin:.25rem 0 .6rem;
}
.post-image-above-header .inside-article .featured-image, .post-image-above-header .inside-article .post-image {
    margin-top: 0;
    margin-bottom: 1em;
}
/* ===== SHARE BOX (sederhana) ===== */
.share-box{
  margin: 14px 0 18px;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
}
.share-box .share-head{
  font-weight:700; text-align:center;
  padding:10px 12px;
  background:#0f172a; color:#fff; border-radius:12px 12px 0 0;
  letter-spacing:.02em;
}
.share-box .share-actions{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:12px;
}
.btn-share{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:8px; font-weight:700;
  color:#fff; text-decoration:none;
}
.btn-share.fb{ background:#1877F2; }
.btn-share.tw{ background:#1DA1F2; }
.btn-share.wa{ background:#25D366; }
.btn-share:hover{ filter:brightness(.95); }

/* ===== PREV / NEXT ===== */
.post-nav{ margin: 10px 0 18px; }
.post-nav-row{
  display:flex; justify-content:space-between; gap:12px;
  border-top:1px solid #e5e7eb; padding-top:10px;
}
.post-nav a{ text-decoration:none; font-weight:600; }
.post-nav .nav-prev a::before{ content:""; }
.post-nav .nav-next a::after{ content:""; }

/* ===== ARTIKEL TERKAIT (3 kartu kecil, thumbnail kiri) ===== */
.related-wrap{ margin: 6px 0 22px; }
.related-wrap h3{
  margin: 0 0 10px; font-size:1.15rem;
}
.related-wrap h3 span{
  font-weight:700;
}

.related-list{ display:grid; gap:5px; }
.rel-card{
  display:grid;
  grid-template-columns: 108px 1fr;
  gap:12px; align-items:start;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  padding:10px; text-decoration:none;
}
.rel-thumb-wrap{ border-radius:10px; overflow:hidden; background:#f1f5f9; }
.rel-thumb{ display:block; width:100%; height:100%; aspect-ratio: 1/1; object-fit:cover; }

.rel-body{ min-width:0; }
.rel-cat{
  display:block; font-size:.8rem; color:#64748b; font-weight:700; margin-bottom:2px;
}
.rel-title{
  display:block; font-size:1rem; line-height:1.35; color:#111827; margin:2px 0 4px;
}
.rel-excerpt{
  display:block; font-size:.95rem; color:#64748b;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rel-card:hover{ background:#fafafa; }

/* Responsif */
@media (max-width:768px){
  .post-nav-row{ flex-direction:column; }
  .rel-card{ grid-template-columns: 88px 1fr; }
}
/* === Prev / Next rapi dengan judul di bawah label === */
.post-nav{ margin: 12px 0 16px; }
.post-nav-row{
  display:flex; justify-content:space-between; gap:12px;
  border-top:1px solid #e5e7eb; padding-top:10px;
}
.post-nav .nav-prev a, .post-nav .nav-next a{
  text-decoration:none; display:block;
}
.post-nav .nav-label{
  display:block; font-weight:700; color:#0ea5e9; margin-bottom:2px;
}
.post-nav .nav-title{
  display:block; color:#898989; line-height:1.35;
}

/* Singkirkan meta/list yang suka nongol di bawah nav */
.single .cat-links, .single .tags-links,
.single .entry-meta, .single .post-categories, .single .post-tags{
  display:none !important;
}
/* === Kotak komentar simpel dan rapi === */
#respond{
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  padding:14px; margin: 14px 0 24px;
}
#respond h3, #reply-title{ margin:0 0 10px; font-size:1.05rem; }

/* Grid 2 kolom untuk Name/Email, sisanya full */
.comment-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.comment-form-author, .comment-form-email{ grid-column:span 1; }
.comment-form-url, .comment-form-cookies-consent,
.comment-form-comment, .form-submit{ grid-column: 1 / -1; }

/* Input & textarea */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%; height:44px; padding:0 12px;
  border:1px solid #e5e7eb; border-radius:10px; outline:0;
  background:#fff;
}
.comment-form textarea{ min-height:160px; padding:10px 12px; }
.comment-form input:focus, .comment-form textarea:focus{
  border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(14,165,233,.15);
}

/* Checkbox dan label */
.comment-form-cookies-consent input[type="checkbox"]{
  width:18px; height:18px; vertical-align:middle; margin-right:6px;
}

/* Tombol kirim (kuning) */
.form-submit input[type="submit"]{
  background:#f59e0b; color:#111; border:1px solid #f59e0b;
  padding:10px 16px; border-radius:10px; font-weight:700; cursor:pointer;
}
.form-submit input[type="submit"]:hover{ filter:brightness(.95); }
/* ========= Hilangkan underline saat hover di SEMUA link ========= */
/* Basis */
a{ text-decoration:none; }
a:hover{ text-decoration:none; }

/* Pastikan di area konten, widget, dan navigasi juga non-underline saat hover */
.entry-content a:hover,
.inside-right-sidebar .widget a:hover,
.main-navigation a:hover,
.footer-widgets a:hover{ text-decoration:none; }

/* ========== MOBILE FIX PACK (<= 768px) ========== */
@media (max-width: 768px){

  /* 1) Kartu daftar post: tetap 2 kolom di mobile */
  .blog .inside-article,
  .archive .inside-article{
    display:grid !important;
    grid-template-columns: 80px 1fr;   /* thumb kiri, teks kanan */
    grid-template-areas:
      "thumb header"
      "thumb summary";
    column-gap:12px; align-items:start;
    padding:12px; margin:0 0 6px;
    border-radius:12px;
  }

  .blog .archive-thumb-link,
  .archive .archive-thumb-link{ grid-area:thumb; display:block; border-radius:10px; overflow:hidden; }

  .archive-thumb{
    width:100%; height:100%;
    aspect-ratio: 1/1; object-fit:cover; display:block;
    border-radius:10px;
  }

  .blog .entry-header, .archive .entry-header{ grid-area:header; margin:0; }
  .blog .entry-summary, .archive .entry-summary{ grid-area:summary; margin:.15rem 0 0; }

  /* judul & teks diperkecil sedikit biar pas */
  .blog .entry-title, .archive .entry-title{ font-size:1.05rem; line-height:1.35; margin:.05rem 0 .2rem; }
  .blog .entry-summary p, .archive .entry-summary p{
    font-size:.95rem; color:#64748b;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .cat-badge{ font-size:.82rem; margin-bottom:.15rem; color:#64748b; background:transparent !important; }

  /* 2) Header mobile lebih rapi (title kiri, hamburger kanan) */
  .site-branding a, .site-branding .main-title{
    color:#304358 !important; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  }
  .menu-toggle{ color:#fff; border-color:rgba(255,255,255,.25); }

  /* 3) Sidebar: biar tidak “nabrak”, taruh di bawah konten dan full width */
  .site-content .content-area{ width:100% !important; }
  .is-right-sidebar{ width:100% !important; margin-top:10px; }
  .inside-right-sidebar .widget{ border-radius:10px; padding:12px; }

  /* 4) Pagination mobile: tombol lebih kecil & rata tengah */
  .blog .navigation.pagination, .archive .navigation.pagination{ text-align:center; margin:14px 0; }
  .blog .navigation.pagination .nav-links,
  .archive .navigation.pagination .nav-links{ gap:8px; }
  .blog .navigation.pagination .nav-links a.page-numbers,
  .blog .navigation.pagination .nav-links span.page-numbers,
  .archive .navigation.pagination .nav-links a.page-numbers,
  .archive .navigation.pagination .nav-links span.page-numbers{
    min-width:34px; height:34px; border-radius:10px; background:#f3f4f6; border:1px solid #e5e7eb;
    display:inline-flex; align-items:center; justify-content:center; font-weight:700;
  }
  .blog .navigation.pagination .page-numbers.current,
  .archive .navigation.pagination .page-numbers.current{ background:#0f172a; color:#fff; border-color:#0f172a; }

  /* 5) Spasi elemen single agar padat & rapi */
  .single .post-image{ margin-bottom:.25rem; }
  .single .breadcrumbs{ font-size:.9rem; margin:.2rem 0 .5rem; }
  .share-box{ margin:10px 0 12px; }
  .post-nav-row{ flex-direction:column; gap:8px; }
  .related-list .rel-card{ grid-template-columns:84px 1fr; gap:10px; padding:10px; }
  #respond{ padding:12px; border-radius:10px; }
  .comment-form{ grid-template-columns:1fr; } /* form komentar 1 kolom di mobile */
}

/* Global kecil: rapikan container & link */
body{ word-wrap:break-word; overflow-wrap:break-word; }
a, a:hover{ text-decoration:none; }  /* tetap tanpa underline saat hover */

img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 140px 140px;
}
blockquote {
    font-size: 0.9em;
}

h3 {
    font-size: 18px;
}