/*
Theme Name: HPI — Indonesian Tour Guide Association
Theme URI: https://indonesiantourguide.org
Author: Indonesian Tour Guide Association
Description: Tema resmi indonesiantourguide.org — direktori pemandu wisata, data anggota, data provinsi, regulasi, dan verifikasi sertifikat. Pakem desain: maroon-cream-gold dengan tipografi Source Serif 4 + Plus Jakarta Sans.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: hpi
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --maroon: #7A1F2B;
  --maroon-deep: #5A1620;
  --cream: #F4EFE6;
  --cream-soft: #FBF8F2;
  --ink: #211D1A;
  --forest: #2F4A3E;
  --gold: #B68A3C;
  --line: rgba(33,29,26,0.12);
  --line-soft: rgba(33,29,26,0.08);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream-soft);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  line-height:1.5;
}
h1,h2,h3,.display{
  font-family:'Source Serif 4', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.mono{font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--maroon); outline-offset:3px;}

/* ---- top bar ---- */
.topbar{
  background:var(--maroon-deep); color:var(--cream);
  font-size:0.78rem; padding:7px 48px;
  display:flex; justify-content:space-between;
}
.topbar a{opacity:0.85;}
.topbar a:hover{opacity:1;}

/* ---- nav ---- */
nav{
  background:var(--cream-soft);
  border-bottom:1px solid var(--line);
  padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
}
body.admin-bar nav{top:32px;}
@media screen and (max-width:782px){ body.admin-bar nav{top:46px;} }
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:'Source Serif 4', serif; font-weight:600; font-size:1.15rem;
}
.logo .mark{
  width:38px; height:38px; border-radius:50%;
  background:var(--maroon); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono'; font-size:0.7rem; font-weight:600;
  flex-shrink:0;
}
.logo .sub{display:block; font-family:'Plus Jakarta Sans'; font-weight:400; font-size:0.68rem; color:var(--maroon); letter-spacing:0.08em; text-transform:uppercase;}
.nav-links{display:flex; gap:22px; font-size:0.88rem; font-weight:500; align-items:center; list-style:none;}
.nav-links li{display:flex;}
.nav-links a{position:relative; padding:6px 0; color:var(--ink); opacity:0.75;}
.nav-links a.active, .nav-links a:hover,
.nav-links li.current-menu-item > a,
.nav-links li.current-page-ancestor > a{opacity:1; color:var(--maroon);}
.nav-links a.active::after,
.nav-links li.current-menu-item > a::after,
.nav-links li.current-page-ancestor > a::after{
  content:''; position:absolute; left:0; right:0; bottom:-19px; height:3px; background:var(--maroon);
}
.nav-cta{
  background:var(--maroon); color:var(--cream); padding:11px 22px; border-radius:3px;
  font-size:0.85rem; font-weight:600; transition:background .25s; white-space:nowrap;
}
.nav-cta:hover{background:var(--maroon-deep);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); padding:8px 12px; border-radius:3px; font-size:1.1rem; cursor:pointer; color:var(--ink); font-family:inherit; line-height:1;}

@media (max-width:1240px){
  .nav-links{gap:14px; font-size:0.8rem;}
  nav{padding:18px 28px;}
}
@media (max-width:1120px){
  .nav-links{gap:16px; font-size:0.84rem;}
}
@media (max-width:960px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--cream-soft); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 16px;
    box-shadow:0 18px 30px rgba(33,29,26,0.10);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:11px 4px; opacity:0.85;}
  .nav-links a.active::after,
  .nav-links li.current-menu-item > a::after{bottom:6px; right:auto; width:34px;}
  .nav-toggle{display:block;}
  nav{position:sticky;}
}

/* ---- signature motif divider (kawung-inspired sebaran provinsi) ---- */
.motif-divider{
  height:14px;
  background-image: radial-gradient(circle at 7px 7px, var(--gold) 0 2.4px, transparent 2.6px),
                     radial-gradient(circle at 21px 7px, var(--maroon) 0 1.6px, transparent 1.8px);
  background-size:28px 14px;
  background-repeat:repeat-x;
  background-color:var(--cream-soft);
  border-bottom:1px solid var(--line);
}

/* ---- archipelago hero illustration ---- */
.archipelago{
  position:absolute; right:0; bottom:0; width:46%; height:100%;
  opacity:0.9; pointer-events:none;
}
@media (max-width:920px){ .archipelago{display:none;} }

/* ---- page header band ---- */
.page-head{
  background:var(--maroon); color:var(--cream-soft);
  padding:64px 48px 50px;
  position:relative; overflow:hidden;
}
.page-head .eyebrow{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.18em; color:var(--gold); margin-bottom:14px;}
.page-head h1{font-size:clamp(2rem,4vw,3rem); max-width:18ch; color:var(--cream-soft);}
.page-head p{margin-top:16px; max-width:56ch; color:rgba(244,239,230,0.82); font-size:1.02rem;}

section{padding:70px 48px; max-width:1280px; margin:0 auto;}
.section-head{max-width:680px; margin-bottom:42px;}
.section-head .eyebrow{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--maroon); margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.section-head .eyebrow::before{
  content:''; width:18px; height:6px; flex-shrink:0;
  background-image: radial-gradient(circle at 3px 3px, var(--gold) 0 2px, transparent 2.2px),
                     radial-gradient(circle at 11px 3px, var(--maroon) 0 1.4px, transparent 1.6px);
  background-size:9px 6px; background-repeat:repeat-x;
}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
.section-head p{margin-top:14px; color:rgba(33,29,26,0.68); font-size:1rem; line-height:1.6;}

/* ---- buttons ---- */
.btn{
  display:inline-block; padding:13px 26px; border-radius:3px; font-size:0.9rem; font-weight:600;
  border:1px solid var(--maroon); transition:all .25s; cursor:pointer; font-family:inherit;
}
.btn-solid{background:var(--maroon); color:var(--cream);}
.btn-solid:hover{background:var(--maroon-deep);}
.btn-ghost{color:var(--maroon); background:transparent;}
.btn-ghost:hover{background:rgba(122,31,43,0.06);}
.btn-sm{padding:9px 18px; font-size:0.82rem;}
.btn-gold{border-color:var(--gold); background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:#a37b32;}
.btn:disabled{opacity:0.55; cursor:not-allowed;}

/* ---- cards ---- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:28px;
  transition:transform .25s ease, box-shadow .25s ease;
}
a.card:hover, .card.hoverable:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(33,29,26,0.08);}
.card p{color:rgba(33,29,26,0.65); font-size:0.92rem;}

/* ---- table ---- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:#fff;}
table{width:100%; border-collapse:collapse; font-size:0.92rem; background:#fff;}
thead th{
  text-align:left; padding:14px 18px; background:var(--cream); border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono'; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--maroon-deep);
  white-space:nowrap;
}
tbody td{padding:14px 18px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(122,31,43,0.03);}
td strong{font-weight:600;}
.table-empty{padding:44px 20px; text-align:center; color:rgba(33,29,26,0.55);}
.table-empty .big{font-family:'Source Serif 4'; font-size:1.2rem; color:var(--ink); margin-bottom:8px;}
.badge{
  display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.74rem; font-weight:600;
}
.badge-active{background:rgba(47,74,62,0.12); color:var(--forest);}
.badge-pending{background:rgba(182,138,60,0.16); color:var(--gold);}
.badge-new{background:rgba(122,31,43,0.1); color:var(--maroon);}
.badge-expired{background:rgba(33,29,26,0.08); color:rgba(33,29,26,0.65);}

/* ---- pagination ---- */
.pagination{display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; align-items:center;}
.pagination a, .pagination span{
  border:1px solid var(--line); background:#fff; border-radius:3px; padding:7px 13px;
  font-size:0.85rem; font-family:'JetBrains Mono'; color:var(--ink);
}
.pagination .current{background:var(--maroon); border-color:var(--maroon); color:var(--cream);}
.pagination a:hover{border-color:var(--maroon); color:var(--maroon);}
.pagination .dots{border:none; background:none;}

/* ---- form ---- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:6px; padding:34px;}
.field{margin-bottom:20px;}
.field label{display:block; font-size:0.82rem; font-weight:600; margin-bottom:8px; color:var(--ink);}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:4px; padding:11px 13px;
  font-family:'Plus Jakarta Sans'; font-size:0.95rem; background:var(--cream-soft); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--maroon); outline:none;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:700px){.field-row{grid-template-columns:1fr;}}
.submit-btn{
  background:var(--maroon); color:var(--cream); border:none; padding:14px 28px; border-radius:4px;
  font-size:0.92rem; font-weight:600; cursor:pointer; transition:background .25s; font-family:inherit;
}
.submit-btn:hover{background:var(--maroon-deep);}
.submit-btn:disabled{opacity:0.55; cursor:wait;}
.note{font-size:0.82rem; color:rgba(33,29,26,0.55); margin-top:10px;}
.confirm-msg{display:none; margin-top:16px; padding:12px 16px; background:rgba(47,74,62,0.1); color:var(--forest); border-radius:4px; font-size:0.88rem;}
.confirm-msg.show{display:block;}
.error-msg{display:none; margin-top:16px; padding:12px 16px; background:rgba(122,31,43,0.08); color:var(--maroon-deep); border-radius:4px; font-size:0.88rem;}
.error-msg.show{display:block;}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}

/* ---- search/filter bar ---- */
.filter-bar{
  display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; align-items:center;
}
.filter-bar input, .filter-bar select{
  border:1px solid var(--line); border-radius:4px; padding:11px 14px; font-size:0.9rem;
  font-family:'Plus Jakarta Sans'; background:#fff; color:var(--ink);
}
.filter-bar input{flex:1; min-width:220px;}
.filter-bar button{cursor:pointer;}

/* ---- stat strip ---- */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.stat{background:#fff; padding:26px; text-align:center;}
.stat .num{font-family:'Source Serif 4'; font-size:2.1rem; color:var(--maroon); font-weight:600;}
.stat .label{font-size:0.78rem; color:rgba(33,29,26,0.6); margin-top:6px; text-transform:uppercase; letter-spacing:0.06em;}
@media (max-width:700px){.stat-strip{grid-template-columns:1fr 1fr;}}

/* ---- guide grid (direktori) ---- */
.guide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:980px){.guide-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.guide-grid{grid-template-columns:1fr;}}
.guide-card .avatar{
  width:54px; height:54px; border-radius:50%; background:var(--forest); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Source Serif 4'; font-weight:600; font-size:1.1rem;
  margin-bottom:16px;
}
.guide-card h3{font-size:1.1rem; margin-bottom:4px;}
.guide-card .prov{font-size:0.84rem; color:var(--maroon); margin-bottom:12px;}
.guide-card .tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.guide-card .tags span{font-size:0.72rem; background:var(--cream); padding:3px 9px; border-radius:20px; color:var(--ink);}
.guide-card .meta{font-size:0.82rem; color:rgba(33,29,26,0.6);}

/* ---- regulasi accordion ---- */
.reg-item{border-bottom:1px solid var(--line);}
.reg-item summary{
  padding:22px 4px; cursor:pointer; font-weight:600; font-size:1.02rem;
  display:flex; justify-content:space-between; align-items:center; list-style:none;
}
.reg-item summary::-webkit-details-marker{display:none;}
.reg-item summary::after{content:'+'; font-size:1.4rem; color:var(--maroon); font-weight:400;}
.reg-item[open] summary::after{content:'–';}
.reg-item .reg-body{padding:0 4px 24px; color:rgba(33,29,26,0.72); font-size:0.95rem; line-height:1.7; max-width:70ch;}
.reg-item .reg-num{font-family:'JetBrains Mono'; font-size:0.74rem; color:var(--gold); display:block; margin-bottom:6px;}

/* ---- verifikasi sertifikat ---- */
.verify-result{display:none; margin-top:26px; border-radius:6px; border:1px solid var(--line); background:#fff; padding:28px;}
.verify-result.show{display:block;}
.verify-result .vr-status{display:inline-block; padding:4px 12px; border-radius:20px; font-size:0.78rem; font-weight:600; margin-bottom:14px;}
.verify-result.ok .vr-status{background:rgba(47,74,62,0.12); color:var(--forest);}
.verify-result.warn .vr-status{background:rgba(182,138,60,0.16); color:var(--gold);}
.verify-result.bad .vr-status{background:rgba(122,31,43,0.1); color:var(--maroon);}
.verify-result h3{font-size:1.2rem; margin-bottom:4px;}
.verify-result .vr-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; margin-top:18px;}
.verify-result .vr-grid .k{font-family:'JetBrains Mono'; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(33,29,26,0.55); display:block; margin-bottom:3px;}
.verify-result .vr-grid .v{font-size:0.95rem;}
@media (max-width:640px){.verify-result .vr-grid{grid-template-columns:1fr;}}

/* ---- berita ---- */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr;}}
.post-card .date{font-family:'JetBrains Mono'; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold); margin-bottom:10px; display:block;}
.post-card h3{font-size:1.15rem; margin-bottom:10px;}
.post-card h3 a:hover{color:var(--maroon);}
.post-card .excerpt{font-size:0.9rem; color:rgba(33,29,26,0.65);}
.post-card .more{display:inline-block; margin-top:14px; font-size:0.84rem; font-weight:600; color:var(--maroon);}
.single-article{max-width:760px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:6px; padding:48px;}
.single-article .date{font-family:'JetBrains Mono'; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold); margin-bottom:12px; display:block;}
.single-article h1{font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:20px;}
.single-article .content p{margin-bottom:1.1em; line-height:1.75; color:rgba(33,29,26,0.82);}
.single-article .content h2, .single-article .content h3{margin:1.4em 0 0.6em;}
.single-article .content ul, .single-article .content ol{margin:0 0 1.1em 1.3em;}
.single-article .content a{color:var(--maroon); text-decoration:underline;}
@media (max-width:700px){.single-article{padding:28px 22px;}}

/* ---- timeline (tentang) ---- */
.timeline{border-left:2px solid var(--line); padding-left:28px; display:grid; gap:30px; max-width:720px;}
.timeline .item{position:relative;}
.timeline .item::before{content:''; position:absolute; left:-34px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--maroon); box-shadow:0 0 0 3px var(--cream-soft), 0 0 0 4px var(--line);}
.timeline .year{font-family:'JetBrains Mono'; font-size:0.78rem; color:var(--gold); letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:6px;}
.timeline h3{font-size:1.08rem; margin-bottom:6px;}
.timeline p{font-size:0.92rem; color:rgba(33,29,26,0.7);}
.info-label{font-family:'JetBrains Mono'; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--maroon); margin-bottom:10px; display:block;}

/* ---- footer ---- */
footer{
  background:var(--ink); color:rgba(244,239,230,0.75);
  padding:56px 48px 30px; margin-top:60px;
}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; max-width:1280px; margin:0 auto; padding-bottom:36px; border-bottom:1px solid rgba(244,239,230,0.12);}
.footer-grid h4{color:var(--cream-soft); font-size:0.85rem; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.08em;}
.footer-grid a{display:block; font-size:0.88rem; margin-bottom:10px; opacity:0.8;}
.footer-grid a:hover{opacity:1;}
.footer-grid p{font-size:0.88rem; max-width:34ch; opacity:0.75;}
.footer-bottom{max-width:1280px; margin:24px auto 0; display:flex; justify-content:space-between; font-size:0.78rem; flex-wrap:wrap; gap:10px;}

@media (max-width:880px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  section, .page-head, nav, .topbar{padding-left:24px; padding-right:24px;}
}