/* LabaPas child theme components. Requires tokens.css. Loads after GeneratePress main.min.css. */

/* 1. Base */
body{font-family:var(--lp-font);font-size:var(--lp-fs-base);line-height:var(--lp-lh);color:var(--lp-text);background:var(--lp-bg);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
a{color:var(--lp-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{color:var(--lp-primary-strong);text-decoration-thickness:2px}
:focus-visible{outline:var(--lp-focus);outline-offset:2px}
::selection{background:var(--lp-primary-soft);color:var(--lp-text)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--lp-font);color:var(--lp-text);line-height:var(--lp-lh-tight);font-weight:var(--lp-fw-bold);letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--lp-fs-h1);margin:0 0 var(--lp-s-4)}
h2{font-size:var(--lp-fs-h2);margin:var(--lp-s-7) 0 var(--lp-s-3)}
h3{font-size:var(--lp-fs-h3);margin:var(--lp-s-5) 0 var(--lp-s-2)}
h4{font-size:var(--lp-fs-h4);margin:var(--lp-s-4) 0 var(--lp-s-2)}
p,ul,ol{margin:0 0 var(--lp-s-4)}
ul,ol{padding-left:1.25em}
li{margin:0 0 var(--lp-s-1)}
small,.lp-meta{font-size:var(--lp-fs-xs);color:var(--lp-text-subtle)}
.lp-lead{font-size:var(--lp-fs-md);color:var(--lp-text-muted)}
.lp-num{font-variant-numeric:tabular-nums}
hr,.wp-block-separator{border:0;border-top:var(--lp-bw) solid var(--lp-border);margin:var(--lp-s-6) 0}
code,kbd{font-family:var(--lp-font-mono);font-size:.9em;background:var(--lp-surface);border-radius:4px;padding:.1em .3em}

/* 2. Layout (GeneratePress "one container", no sidebar) */
/* Classic themes wrap group blocks in an inner container; let our grid/flex components see the real children. */
:is(.lp-hero,.lp-cards,.lp-cats,.lp-card,.lp-section__head)>.wp-block-group__inner-container{display:contents}
.grid-container{max-width:var(--lp-wide)}
.one-container .site-content{padding:var(--lp-s-5) var(--lp-s-4) var(--lp-s-7)}
.site-main .inside-article>.entry-header,.site-main .entry-content>*:not(.alignwide):not(.alignfull),.lp-breadcrumb,.rank-math-breadcrumb{max-width:var(--lp-measure);margin-left:auto;margin-right:auto}
.site-main .entry-content>.alignwide{width:auto;max-width:var(--lp-wide);margin-left:auto;margin-right:auto}
.site-main .wp-block-group__inner-container{padding:0}
.entry-content:not(:first-child){margin-top:0}
.entry-content>:first-child{margin-top:0}
.entry-header{margin-bottom:var(--lp-s-4)}
@media (min-width:768px){.one-container .site-content{padding:var(--lp-s-6) var(--lp-s-5) var(--lp-s-8)}}

/* 3. Header + nav */
.lp-header{background:var(--lp-bg);border-bottom:var(--lp-bw) solid var(--lp-border)}
.lp-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--lp-s-2) var(--lp-s-5);padding:var(--lp-s-3) var(--lp-s-4);margin:0 auto}
.lp-brand{display:inline-flex;align-items:center;min-height:var(--lp-tap);text-decoration:none}
.lp-brand svg{display:block;height:28px;width:auto}
.lp-nav__list{display:flex;flex-wrap:wrap;gap:var(--lp-s-1);list-style:none;margin:0;padding:0}
.lp-nav__list li{margin:0}
.lp-nav a{display:flex;align-items:center;min-height:var(--lp-tap);padding:0 var(--lp-s-3);border-radius:var(--lp-r);color:var(--lp-text);font-weight:var(--lp-fw-semibold);font-size:.9375rem;text-decoration:none}
.lp-nav a:hover{background:var(--lp-surface);color:var(--lp-text)}
.lp-nav a[aria-current],.lp-nav .current-menu-item>a,.lp-nav .is-active>a{color:var(--lp-primary);background:var(--lp-primary-soft)}
.lp-nav-toggle{display:none;align-items:center;gap:var(--lp-s-2);min-height:var(--lp-tap);padding:0 var(--lp-s-3);margin:0;border:var(--lp-bw) solid var(--lp-border-input);border-radius:var(--lp-r);background:var(--lp-bg);color:var(--lp-text);font:var(--lp-fw-semibold) .9375rem/1 var(--lp-font);cursor:pointer}
.lp-nav-toggle:hover,.lp-nav-toggle:focus{background:var(--lp-surface);color:var(--lp-text)}
.lp-nav-toggle svg{width:20px;height:20px}
.lp-nav-toggle[aria-expanded=true] .lp-i-open,.lp-nav-toggle[aria-expanded=false] .lp-i-close{display:none}
@media (max-width:959px){
  .lp-nav{flex-basis:100%}
  .lp-js .lp-nav-toggle{display:inline-flex}
  .lp-js .lp-nav{display:none}
  .lp-js .lp-header.is-open .lp-nav{display:block}
  .lp-js .lp-nav__list{flex-direction:column;padding:var(--lp-s-2) 0 var(--lp-s-1);border-top:var(--lp-bw) solid var(--lp-border)}
  .lp-js .lp-nav a{min-height:48px;font-size:var(--lp-fs-base)}
}

/* 4. Breadcrumbs (theme fallback + Rank Math) */
.lp-breadcrumb,.rank-math-breadcrumb{font-size:var(--lp-fs-sm);color:var(--lp-text-muted);margin-bottom:var(--lp-s-3)}
.lp-breadcrumb ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.lp-breadcrumb li{margin:0}
.lp-breadcrumb li+li::before{content:"›";margin:0 .45em;color:var(--lp-text-subtle)}
.lp-breadcrumb a,.rank-math-breadcrumb a{color:var(--lp-text-muted)}
.rank-math-breadcrumb p{margin:0}
.rank-math-breadcrumb .separator{margin:0 .3em;color:var(--lp-text-subtle)}

/* 5. Buttons */
.lp-btn,.wp-block-button__link,input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:var(--lp-s-2);min-height:var(--lp-tap);padding:10px 18px;border:var(--lp-bw) solid var(--lp-primary);border-radius:var(--lp-r);background:var(--lp-primary);color:#fff;font:var(--lp-fw-semibold) var(--lp-fs-base)/1.2 var(--lp-font);text-decoration:none;cursor:pointer}
.lp-btn:hover,.wp-block-button__link:hover,input[type=submit]:hover{background:var(--lp-primary-strong);border-color:var(--lp-primary-strong);color:#fff}
.lp-btn--secondary,.is-style-outline>.wp-block-button__link{background:var(--lp-bg);color:var(--lp-primary)}
.lp-btn--secondary:hover,.is-style-outline>.wp-block-button__link:hover{background:var(--lp-primary-soft);color:var(--lp-primary-strong)}

/* 6. Form fields (contact form, search) */
input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],select,textarea{width:100%;min-height:var(--lp-tap);padding:8px 12px;border:var(--lp-bw) solid var(--lp-border-input);border-radius:var(--lp-r);background:var(--lp-bg);color:var(--lp-text);font:inherit;font-size:var(--lp-fs-base)}
textarea{min-height:140px}
input:focus,select:focus,textarea:focus{outline:var(--lp-focus);outline-offset:1px;border-color:var(--lp-primary);background:var(--lp-bg);color:var(--lp-text)}
.wpcf7-form label,.lp-form label{font-weight:var(--lp-fw-semibold)}
.lp-field-error{color:var(--lp-error);font-size:var(--lp-fs-sm)}

/* 7. Tool search (homepage hero) */
.lp-search{position:relative;max-width:560px;margin:var(--lp-s-5) 0 var(--lp-s-4)}
.lp-search label{display:block;margin-bottom:var(--lp-s-2)}
.lp-search__row{display:flex;gap:var(--lp-s-2)}
.lp-search__row input{flex:1;min-width:0;min-height:48px}
.lp-search__row .lp-btn{min-height:48px}
.lp-search__results{list-style:none;margin:var(--lp-s-2) 0 0;padding:var(--lp-s-1);background:var(--lp-bg);border:var(--lp-bw) solid var(--lp-border);border-radius:var(--lp-r);box-shadow:0 8px 24px rgba(23,33,43,.08)}
.lp-search__results li{margin:0}
.lp-search__results a{display:block;padding:10px 12px;border-radius:var(--lp-r-sm);color:var(--lp-text);text-decoration:none}
.lp-search__results a:hover,.lp-search__results a:focus{background:var(--lp-primary-soft);outline-offset:0}
.lp-search__results small{display:block}
.lp-chips{display:flex;flex-wrap:wrap;gap:var(--lp-s-2);list-style:none;margin:0;padding:0}
.lp-chips li{margin:0}
.lp-chips a{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--lp-s-3);border:var(--lp-bw) solid var(--lp-border);border-radius:var(--lp-r-pill);background:var(--lp-bg);color:var(--lp-text);font-size:var(--lp-fs-sm);text-decoration:none}
.lp-chips a:hover{border-color:var(--lp-primary);color:var(--lp-primary)}

/* 8. Hero + sections */
.lp-hero{padding:var(--lp-s-5) 0 var(--lp-s-6);border-bottom:var(--lp-bw) solid var(--lp-border);margin-bottom:var(--lp-s-6)}
.lp-hero h1{max-width:24ch;margin-bottom:var(--lp-s-3)}
.lp-hero .lp-lead{max-width:60ch}
.lp-trust{display:flex;flex-wrap:wrap;gap:var(--lp-s-2) var(--lp-s-5);list-style:none;padding:0;margin:var(--lp-s-5) 0 0;color:var(--lp-text-muted);font-size:var(--lp-fs-sm)}
.lp-trust li{margin:0;padding-left:22px;position:relative}
.lp-trust li::before{content:"";position:absolute;left:2px;top:.4em;width:10px;height:6px;border:solid var(--lp-primary);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.lp-section{margin:0 0 var(--lp-s-7)}
.lp-section h2:first-child,.lp-section__head h2{margin-top:0}
.lp-section__head p{margin:0}
.lp-section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--lp-s-2);margin-bottom:var(--lp-s-4)}
.lp-hero__aside{margin-top:var(--lp-s-5);padding:var(--lp-s-5);border:var(--lp-bw) solid var(--lp-border);border-radius:var(--lp-r-lg);background:var(--lp-surface)}
.lp-hero__aside h2{font-size:var(--lp-fs-h3);margin:0 0 var(--lp-s-2)}
.lp-hero__aside .lp-btn{margin-top:var(--lp-s-1)}
@media (min-width:768px){.lp-hero{padding:var(--lp-s-7) 0}}
@media (min-width:960px){.lp-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--lp-s-7);align-items:center}.lp-hero__aside{margin:0}}

/* 9. Cards (tool grid) */
.lp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--lp-s-4)}
.lp-card{position:relative;display:flex;flex-direction:column;background:var(--lp-bg);border:var(--lp-bw) solid var(--lp-border);border-radius:var(--lp-r-lg);padding:var(--lp-s-4) var(--lp-s-5) var(--lp-s-4)}
.lp-card:hover{border-color:var(--lp-primary);box-shadow:var(--lp-shadow)}
.lp-card h3,.lp-card .lp-card__title{font-size:var(--lp-fs-md);margin:0 0 var(--lp-s-2)}
.lp-card h3 a{color:var(--lp-text);text-decoration:none}
.lp-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.lp-card h3 a:hover{color:var(--lp-primary)}
.lp-card:focus-within{outline:var(--lp-focus);outline-offset:2px}
.lp-card h3 a:focus-visible{outline:0}
.lp-card p{margin:0 0 var(--lp-s-3);color:var(--lp-text-muted);font-size:.9375rem}
.lp-card p:last-child{margin-bottom:0}
.lp-card .lp-meta{margin-top:auto;padding-top:var(--lp-s-1)}
.lp-cards--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.lp-cards--list{grid-template-columns:1fr}
.lp-point{padding:var(--lp-s-4) var(--lp-s-5);border-radius:var(--lp-r-lg);background:var(--lp-surface)}
.lp-point h3{font-size:var(--lp-fs-h4);margin:0 0 var(--lp-s-1)}
.lp-point p{margin:0;color:var(--lp-text-muted);font-size:.9375rem}
.lp-tag{display:inline-block;margin:0 0 var(--lp-s-2);font-size:var(--lp-fs-xs);font-weight:var(--lp-fw-semibold);color:var(--lp-primary);letter-spacing:.02em}

/* 10. Category blocks + tool lists */
.lp-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:var(--lp-s-4) var(--lp-s-5)}
.lp-cat{padding:var(--lp-s-4) 0 0;border-top:2px solid var(--lp-text)}
.lp-cat h3{margin:0 0 var(--lp-s-2);font-size:var(--lp-fs-md)}
.lp-cat h3 a{color:var(--lp-text);text-decoration:none}
.lp-toollist{list-style:none;padding:0;margin:0}
.lp-toollist li{margin:0;border-bottom:var(--lp-bw) solid var(--lp-border)}
.lp-toollist a{display:flex;align-items:center;min-height:var(--lp-tap);padding:var(--lp-s-1) 0;text-decoration:none}
.lp-toollist a:hover{text-decoration:underline}

/* 11. Dated update list */
.lp-updates{list-style:none;padding:0;margin:0;border-top:var(--lp-bw) solid var(--lp-border)}
.lp-updates li{display:grid;grid-template-columns:1fr;gap:var(--lp-s-1);margin:0;padding:var(--lp-s-3) 0;border-bottom:var(--lp-bw) solid var(--lp-border)}
.lp-updates time{font-size:var(--lp-fs-sm);font-weight:var(--lp-fw-semibold);color:var(--lp-text-muted);font-variant-numeric:tabular-nums}
@media (min-width:640px){.lp-updates li{grid-template-columns:150px 1fr;gap:var(--lp-s-4)}}

/* 12. Tables (mobile: scroll inside the figure, never the page) */
.wp-block-table,.lp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--lp-s-5);max-width:100%}
.wp-block-table table,.lp-table-wrap table{width:100%;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums;border:0;margin:0}
.wp-block-table :is(th,td),.lp-table-wrap :is(th,td){padding:10px 12px;border:0;border-bottom:var(--lp-bw) solid var(--lp-border);text-align:left;vertical-align:top}
.wp-block-table thead th,.lp-table-wrap thead th{background:var(--lp-surface);font-weight:var(--lp-fw-semibold);border-bottom-color:var(--lp-border-input);white-space:nowrap}
.lp-r,.has-text-align-right{text-align:right}
.wp-block-table figcaption{font-size:var(--lp-fs-xs);color:var(--lp-text-subtle);margin-top:var(--lp-s-2)}
@media (max-width:599px){.wp-block-table :is(th,td),.lp-table-wrap :is(th,td){padding:8px}}

/* 13. Alerts / notes */
.lp-alert{padding:var(--lp-s-3) var(--lp-s-4);margin:0 0 var(--lp-s-5);border-radius:var(--lp-r);border-left:4px solid var(--lp-info);background:var(--lp-info-bg);color:var(--lp-info);font-size:.9375rem}
.lp-alert>:last-child{margin-bottom:0}
.lp-alert a{color:inherit}
.lp-alert--success{border-color:var(--lp-success);background:var(--lp-success-bg);color:var(--lp-success)}
.lp-alert--warning{border-color:var(--lp-warning);background:var(--lp-warning-bg);color:var(--lp-warning)}
.lp-alert--error{border-color:var(--lp-error);background:var(--lp-error-bg);color:var(--lp-error)}

/* 14. Result box (content examples; tools use .kj-result, same tokens) */
.lp-result{padding:var(--lp-s-4);margin:0 0 var(--lp-s-5);border-radius:var(--lp-r-lg);background:var(--lp-surface-result);border:var(--lp-bw) solid #D5E6DE}
.lp-result__label{margin:0;font-size:var(--lp-fs-sm);color:var(--lp-text-muted)}
.lp-result__value{margin:2px 0 var(--lp-s-2);font-size:1.5rem;font-weight:var(--lp-fw-bold);line-height:var(--lp-lh-tight);color:var(--lp-primary-strong);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* 15. "Terakhir diperbarui" badge + "Catatan & sumber" block */
.lp-updated{display:flex;align-items:center;gap:var(--lp-s-2);margin:0 0 var(--lp-s-5);color:var(--lp-text-muted);font-size:var(--lp-fs-sm)}
.lp-updated::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lp-primary);flex:none}
.lp-updated strong{color:var(--lp-text)}
.lp-sources{margin:var(--lp-s-7) auto var(--lp-s-6);padding:var(--lp-s-4) var(--lp-s-5);border:var(--lp-bw) solid var(--lp-border);border-radius:var(--lp-r-lg);background:var(--lp-surface);font-size:.9375rem}
.lp-sources h2{font-size:var(--lp-fs-h3);margin:0 0 var(--lp-s-3)}
.lp-sources__dates{display:flex;flex-wrap:wrap;gap:var(--lp-s-1) var(--lp-s-5);margin:0 0 var(--lp-s-3);padding-bottom:var(--lp-s-3);border-bottom:var(--lp-bw) solid var(--lp-border);font-size:var(--lp-fs-sm)}
.lp-sources ol,.lp-sources ul{margin-bottom:var(--lp-s-3)}
.lp-sources li{overflow-wrap:anywhere}
.lp-sources__note{margin:0;font-size:var(--lp-fs-sm);color:var(--lp-text-muted)}

/* 16. FAQ + related */
.lp-faq p{max-width:70ch}
.lp-faq h3{font-size:var(--lp-fs-h4);margin:var(--lp-s-5) 0 var(--lp-s-1)}
.lp-related{margin-top:var(--lp-s-7)}

/* 17. Footer */
.lp-footer{margin-top:0;background:var(--lp-surface);border-top:var(--lp-bw) solid var(--lp-border);font-size:var(--lp-fs-sm);color:var(--lp-text-muted)}
.lp-footer__inner{display:grid;grid-template-columns:1fr;gap:var(--lp-s-5);padding:var(--lp-s-6) var(--lp-s-4) var(--lp-s-5);margin:0 auto}
.lp-footer__brand svg{height:26px;width:auto;display:block;margin-bottom:var(--lp-s-2)}
.lp-footer__brand p{margin:0;max-width:34ch}
.lp-footer__title{margin:0 0 var(--lp-s-2);font-weight:var(--lp-fw-bold);color:var(--lp-text)}
.lp-footer ul{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--lp-s-4)}
.lp-footer li{margin:0;break-inside:avoid}
.lp-footer li a{display:inline-flex;align-items:center;min-height:36px;color:var(--lp-text-muted);text-decoration:none}
.lp-footer li a:hover{color:var(--lp-primary);text-decoration:underline}
.lp-footer__bottom{padding:var(--lp-s-4);margin:0 auto;border-top:var(--lp-bw) solid var(--lp-border)}
.lp-footer__bottom p{margin:0 0 var(--lp-s-1)}
@media (min-width:768px){.lp-footer__inner{grid-template-columns:1.2fr 1fr 1fr}.lp-footer ul{columns:1}}

/* 18. kj-tools bridge: tools keep their own CSS; the theme only re-points their variables. */
body [data-kj-tool]{--kj-accent:var(--lp-primary);--kj-muted:var(--lp-text-muted);--kj-border:var(--lp-border);--kj-soft:var(--lp-surface-result);--kj-warn:var(--lp-warning);--kj-warnbg:var(--lp-warning-bg);font-family:var(--lp-font);color:var(--lp-text)}
body [data-kj-tool] input[type=text],body [data-kj-tool] select{border-color:var(--lp-border-input)}
body [data-kj-tool] :is(input,select,button):focus{outline:var(--lp-focus);outline-offset:1px}
body [data-kj-tool] .kj-big{color:var(--lp-primary-strong)}

/* 19. Editor palette classes (see functions.php) */
.has-lp-primary-color{color:var(--lp-primary)}.has-lp-primary-background-color{background:var(--lp-primary)}
.has-lp-text-color{color:var(--lp-text)}.has-lp-muted-color{color:var(--lp-text-muted)}
.has-lp-surface-background-color{background:var(--lp-surface)}.has-lp-primary-soft-background-color{background:var(--lp-primary-soft)}

/* 20. Utilities + print */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.lp-header nav,.lp-nav-toggle,.lp-footer nav,.lp-search{display:none!important}a{color:inherit}}