/*
Theme Name: Laman Pok Nik Berita
Theme URI: https://lamanpoknik.my/berita/
Author: Biszverse Dot Com Empire
Author URI: https://biszverse.com
Description: News section for lamanpoknik.my. Reuses the live site's fonts and editorial.css from the domain root, so /berita/ looks like the rest of the site. Every comment is held for approval. No email is collected from commenters, no avatars, no emoji CDN.
Version: 1.5
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary, built for Laman Pok Nik
Text Domain: lamanpoknik-berita
*/

/* Loaded after base.css and /css/editorial.css. Blog-only additions. */

/* ---------- list ---------- */
.bgrid{display:grid;gap:clamp(34px,4vw,48px) 28px}
@media(min-width:700px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.bgrid{grid-template-columns:repeat(3,1fr)}}
.bcard-link{display:block;text-decoration:none;color:inherit}
.bcard-img{aspect-ratio:4/3;margin-bottom:16px}
.bcard-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.bcard-noimg{display:grid;place-items:center;background:var(--forest)}
.bcard-noimg img{width:96px!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain}
.bdate{font:600 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.btitle{font-size:clamp(1.35rem,2.2vw,1.7rem)!important;line-height:1.18;margin:0 0 10px}
.bexcerpt{color:var(--ink-soft);font-size:.98rem;margin:0 0 14px}
.bcard-link:hover .btitle{color:var(--accent)}
.bcard-link:focus-visible{outline:2px solid var(--accent-solid);outline-offset:6px}

.pagination{margin-top:48px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600}
.pagination .page-numbers.current{background:var(--accent-solid);color:var(--on-accent);border-color:transparent}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- single ---------- */
.pagehead h1.posttitle{font-size:clamp(2.1rem,5.2vw,3.9rem);max-width:22ch}
.postmeta{font:600 .78rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:6px 0 0}
.entry{max-width:720px;margin-inline:auto}
.entry>*{max-width:100%}
.entry p,.entry li{font-size:1.06rem;line-height:1.8;max-width:none}
.entry h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:1.6em 0 .5em}
.entry h3{margin:1.5em 0 .4em}
.entry a{color:var(--accent);font-weight:600}
.entry img{height:auto;border-radius:var(--r-card)}
.entry figure{margin:1.8em 0}
.entry figure.alignwide,.entry .alignwide{margin-inline:calc(-1 * min(12vw,140px))}
@media(max-width:1000px){.entry figure.alignwide,.entry .alignwide{margin-inline:0}}
.entry figcaption,.entry .wp-element-caption{font-size:.86rem;color:var(--ink-soft);text-align:left}
.entry blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:2px solid var(--accent-solid);
  font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.5}
.entry .wp-block-gallery{gap:10px}
.entry .wp-block-gallery img{border-radius:var(--r-chip)}
.entry iframe,.entry video{max-width:100%;border-radius:var(--r-card)}
.entry-lead{margin:0 0 2em!important;aspect-ratio:auto}
.entry-lead img{width:100%;height:auto;aspect-ratio:auto;object-fit:cover}
.entry-share{max-width:720px;margin:44px auto 0;padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.postnav{max-width:720px;margin:34px auto 0;display:grid;gap:14px}
@media(min-width:700px){.postnav{grid-template-columns:1fr 1fr}}
.postnav a{display:block;padding:18px 20px;background:var(--surface);text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-size:1.12rem;line-height:1.3;border-left:2px solid var(--accent-solid)}
.postnav small{display:block;font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* ---------- comments ---------- */
.komen .measure{max-width:720px;margin-inline:auto}
.lpn-comments{list-style:none;margin:10px 0 44px;padding:0}
.lpn-comment{padding:22px 0;border-top:1px solid var(--line)}
.lpn-comment:last-child{border-bottom:1px solid var(--line)}
.lpn-comment-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 8px;font-size:.92rem;color:var(--ink-soft)}
.lpn-comment-meta b{color:var(--ink);font-size:1rem}
.lpn-badge{font:600 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-accent);
  background:var(--accent-solid);padding:5px 8px;border-radius:999px}
.lpn-comment-text p{margin:0 0 .6em;font-size:1rem}
.lpn-held{font-family:var(--serif);font-style:italic;color:var(--accent);margin:0 0 8px}
.komen-note{font-size:.93rem;color:var(--ink-soft)}
.comment-reply-title{margin:0 0 6px}
.komen-form .field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px}
.komen-form .field .req{font-weight:400;color:var(--ink-soft)}
.komen-form .field input,.komen-form .field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-chip);padding:12px 14px}
.komen-form .field input:focus,.komen-form .field textarea:focus{outline:2px solid var(--accent-solid);outline-offset:1px;border-color:transparent}
.komen-form .field textarea{min-height:130px;resize:vertical}
.komen-form .form-submit{margin:6px 0 0}
.lpn-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- block editor defaults that clash with the editorial layer ---------- */
.entry .wp-block-image{margin:1.8em 0}
.entry .wp-block-image img{width:100%}
.entry .has-text-align-center{text-align:center}
.wp-block-separator{border:0;border-top:1px solid var(--line);margin:2.4em auto}
.komen-ok{margin:10px 0 34px}
.entry-lead img{max-height:80vh;width:auto;max-width:100%;margin-inline:auto}

/* v1.2, 28 September 2026: the page-head badge kept its HTML height (156px) while CSS set the width to 74px,
   so it rendered squeezed. Height follows the width, in the badge's own proportions. */
.pagehead .ph-badge{width:74px;height:auto!important;aspect-ratio:1931/1878}