/*
Theme Name: Jejak Semarang
Description: Tema company profile Jejak Semarang. Saat diaktifkan, otomatis membuat halaman 10 poin dan menu. Teks beranda diubah lewat Appearance > Customize > Jejak Semarang.
Version: 1.0
Author: Tim Jejak Semarang
Text Domain: jejaksemarang
*/
:root{--red:#14365D;--green:#1B7F79;--ink:#1B2430;--paper:#F2F5F8;--sun:#F6C445}
*{box-sizing:border-box}
body{margin:0;font:17px/1.65 "Public Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",sans-serif;line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,6vw,4rem)}h2{font-size:clamp(1.7rem,3.5vw,2.4rem)}h3{font-size:1.25rem}
a{color:var(--green)}img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.awning{height:44px;background:repeating-linear-gradient(90deg,var(--red) 0 48px,#fff 48px 96px)}
.awning::after{content:"";display:block;position:relative;top:44px;height:24px;background:repeating-linear-gradient(90deg,var(--red) 0 48px,#fff 48px 96px);-webkit-mask:radial-gradient(circle at 50% 0,#000 23px,transparent 24px) 0 0/48px 24px repeat-x;mask:radial-gradient(circle at 50% 0,#000 23px,transparent 24px) 0 0/48px 24px repeat-x}
.site-header{position:relative;z-index:2}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:44px 20px 12px;flex-wrap:wrap}
.brand{font:800 1.4rem "Bricolage Grotesque",sans-serif;color:var(--ink);text-decoration:none}
.brand span{color:var(--red)}
.nav ul{list-style:none;display:flex;gap:6px 20px;margin:0;padding:0;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:600}.nav a:hover{color:var(--red)}
.btn{display:inline-block;padding:.75em 1.4em;border-radius:6px;background:var(--red);color:#fff;font-weight:700;text-decoration:none;border:2px solid var(--red)}
.btn:hover{filter:brightness(.92)}.btn.alt{background:#fff;color:var(--ink);border-color:var(--ink)}
.hero{padding:48px 0 72px;background:var(--paper)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero p{font-size:1.15rem;max-width:34em}.hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.board{background:var(--ink);color:#fff;border-radius:10px;padding:22px;border:6px solid var(--sun)}
.board small{color:var(--sun);font-weight:700}.board ul{list-style:none;margin:12px 0 0;padding:0}
.board li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px dashed #5b6a61}
.board li b{display:block}.board li span{color:#b9c6be;font-size:.9rem}
section.s{padding:72px 0}.s.alt{background:var(--paper)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.item{border-top:4px solid var(--green);padding-top:14px}.item:nth-child(2){border-color:var(--red)}.item:nth-child(3){border-color:var(--sun)}
.cta{background:var(--green);color:#fff;text-align:center;padding:72px 0}.cta .btn{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.site-footer{background:var(--ink);color:#d7e0da;padding:32px 0;font-size:.95rem}.site-footer a{color:var(--sun)}
.page-body{padding:48px 20px 72px;max-width:920px}.page-body h2{margin-top:1.6em}.page-body table{display:block;overflow-x:auto;border-collapse:collapse;font-size:.95rem;margin:1em 0}.page-body th,.page-body td{border:1px solid #d3dbe3;padding:8px 10px;text-align:left;vertical-align:top}.page-body th{background:var(--paper)}.page-body li{margin:.3em 0}
.page-body img{border-radius:8px}
@media(max-width:760px){.hero .wrap,.grid3{grid-template-columns:1fr}.hero{padding-top:32px}}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.fcard{background:#fff;border-left:4px solid var(--green);padding:14px 18px;margin:0 0 14px;border-radius:0 8px 8px 0}
.fcard b{font:700 1.1rem "Bricolage Grotesque",sans-serif}.fcard p{margin:.3em 0 0}
.tag{display:inline-block;padding:.2em .9em;border-radius:99px;color:#fff;background:var(--red);font-size:1rem;margin:0 0 16px}.tag.opt{background:var(--green)}
.grid5{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:24px}
.pcard{display:block;text-decoration:none;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:16px;background:#fff}
.pcard:hover{background:var(--sun)}.pcard i{display:block;font:800 2rem "Bricolage Grotesque",sans-serif;font-style:normal;color:var(--red)}
.pcard b{display:block}.pcard span{font-size:.9rem}
@media(max-width:760px){.cols2{grid-template-columns:1fr}}