/*
 * PK-Legal header navigation, Option D (inc/pk-nav.php, assets/js/pk-nav.js).
 * Desktop from 1180 px: two rows (logo, search, phone, WhatsApp, Book; then
 * the tabs) with drop-down panels. Below: logo, call, menu button and a
 * full-screen drawer. Buttons and inputs reset the parent theme's styles.
 */

.pkn {
  --pkn-red: #8a0104; --pkn-red-d: #6b0003; --pkn-ink: #1f1e21; --pkn-grey: #4b4a4d;
  --pkn-mist: #f6f5f4; --pkn-line: #e4e1de; --pkn-wa: #1f6b43; --pkn-tint: #fbf7f7;
  --pkn-serif: "Noto Serif Lao", Georgia, "Times New Roman", serif;
  --pkn-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: relative; z-index: 50; background: #fff; font-family: var(--pkn-sans); color: var(--pkn-ink);
}
#pkn *, #pkn *::before, #pkn *::after { box-sizing: border-box; }
#pkn a { color: var(--pkn-ink); text-decoration: none; }
#pkn a:hover { color: var(--pkn-red); text-decoration: underline; }
/* The parent theme paints buttons white unless hovered (button:not(:hover):not(:active):not(.has-background),
   specificity 0,3,1) and draws a dotted outline on click: the id selector outranks both.
   Hover and active only clear the theme's colours, so a tab keeps its own font and padding. */
#pkn button {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  box-shadow: none; text-transform: none; letter-spacing: normal; cursor: pointer; line-height: inherit;
}
#pkn button:hover, #pkn button:active { border-color: transparent; box-shadow: none; text-decoration: none; }
#pkn button:focus { outline: none; }
#pkn a:focus-visible, #pkn button:focus-visible, #pkn input:focus-visible {
  outline: 2px solid var(--pkn-red); outline-offset: 2px; box-shadow: none;
}
#pkn .pkn-ico { display: block; flex: none; }

/* ---------- top row ---------- */
/* Both rows sit above the page shade (z-index -1 inside the header) so they stay white. */
.pkn-top { position: relative; z-index: 1; background: #fff; display: flex; align-items: center; gap: 20px; min-height: 80px; padding: 0 clamp(16px, 3.3vw, 48px); }
.pkn-logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.pkn-logo img, .pkn-logo .custom-logo { display: block; width: 300px; max-width: 100%; height: auto; }
.pkn-phone { flex: none; display: flex; flex-direction: column; line-height: 1.2; margin-left: auto; }
.pkn-phone-h { font-size: 12px; color: var(--pkn-grey); }
.pkn-phone-n { font-size: 16px; font-weight: 700; }
.pkn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; text-align: center; }
#pkn a.pkn-btn:hover { text-decoration: none; }
#pkn a.pkn-btn--wa { background: var(--pkn-wa); color: #fff; }
#pkn a.pkn-btn--wa:hover { background: #18573a; color: #fff; }
#pkn a.pkn-btn--book { background: var(--pkn-red); color: #fff; }
#pkn a.pkn-btn--book:hover { background: var(--pkn-red-d); color: #fff; }
#pkn a.pkn-btn--ghost { border: 1px solid var(--pkn-red); color: var(--pkn-red); background: #fff; }
#pkn a.pkn-btn--ghost:hover { background: var(--pkn-tint); color: var(--pkn-red-d); }
.pkn-icon-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 6px; color: var(--pkn-ink); flex: none; }
#pkn a.pkn-m-call, #pkn .pkn-m-search { color: var(--pkn-red); }
#pkn .pkn-m-open, #pkn .pkn-m-close { background: var(--pkn-mist); }

/* ---------- tab bar ---------- */
.pkn-bar { position: relative; z-index: 1; background: #fff; border-top: 1px solid var(--pkn-line); border-bottom: 1px solid var(--pkn-line); }
.pkn-tabs { list-style: none; margin: 0 auto; padding: 0 clamp(8px, 2.5vw, 36px); display: flex; justify-content: space-between; align-items: stretch; min-height: 52px; }
.pkn-tab { position: static; display: flex; }
#pkn .pkn-tab-a, #pkn .pkn-tab-b { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--pkn-ink); border-bottom: 3px solid transparent; white-space: nowrap; }
#pkn .pkn-tab-a:hover, #pkn .pkn-tab-b:hover { color: var(--pkn-red); text-decoration: none; }
#pkn .pkn-tab-b .pkn-ico { transition: transform 0.15s; }
#pkn .pkn-tab-b[aria-expanded="true"] { color: var(--pkn-red); border-bottom-color: var(--pkn-red); background: var(--pkn-tint); }
#pkn .pkn-tab-b[aria-expanded="true"] .pkn-ico { transform: rotate(180deg); }
#pkn .is-current > .pkn-tab-a, #pkn .is-current > .pkn-tab-b { color: var(--pkn-red); border-bottom-color: var(--pkn-red); }

/* ---------- drop-down panel ---------- */
.pkn-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--pkn-line); box-shadow: 0 24px 48px rgba(31, 30, 33, 0.18); }
.pkn-panel[hidden] { display: none; }
.pkn-panel-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; max-width: 1440px; margin: 0 auto; padding: 32px clamp(16px, 3.3vw, 48px) 24px; }
.pkn-col { display: flex; flex-direction: column; min-width: 0; }
.pkn-col ul { list-style: none; margin: 0 0 14px; padding: 0; }
.pkn-col li { margin: 0; }
.pkn-col li a { display: block; padding: 7px 0; font-size: 15px; line-height: 1.4; }
.pkn-col li a.pkn-lead { font-size: 16px; font-weight: 600; }
.pkn-col-h { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pkn-grey); }
#pkn a.pkn-tool { display: flex; gap: 12px; align-items: center; padding: 12px; margin: 0 0 10px; border: 1px solid var(--pkn-line); border-radius: 6px; }
#pkn a.pkn-tool:hover { border-color: var(--pkn-red); text-decoration: none; }
.pkn-tool-i { width: 40px; height: 40px; border-radius: 6px; background: var(--pkn-mist); color: var(--pkn-red); display: flex; align-items: center; justify-content: center; flex: none; }
.pkn-tool-t { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; }
.pkn-tool-n { display: block; font-size: 13px; color: var(--pkn-grey); }
#pkn a.pkn-brief { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--pkn-line); }
.pkn-brief-d { font-size: 13px; color: var(--pkn-grey); }
.pkn-brief-t { font-weight: 600; font-size: 15px; line-height: 1.4; }
.pkn-card { align-self: start; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 8px; background: var(--pkn-mist); }
.pkn-card-h { margin: 0; font-family: var(--pkn-serif); font-size: 20px; font-weight: 500; line-height: 1.3; }
.pkn-card-t { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pkn-grey); }
.pkn-hours { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--pkn-grey); text-align: center; }
.pkn-panel-foot { max-width: 1440px; margin: 0 auto; padding: 14px clamp(16px, 3.3vw, 48px); border-top: 1px solid var(--pkn-line); font-size: 14px; }
.pkn-panel-foot a { font-weight: 600; color: var(--pkn-red); }
.pkn-shade { position: fixed; inset: 0; z-index: -1; background: rgba(31, 30, 33, 0.35); }
.pkn-shade[hidden] { display: none; }

/* ---------- phone and tablet: drawer ---------- */
.pkn-drawer[hidden] { display: none; }
@media (max-width: 1179px) {
  .pkn-top { min-height: 64px; gap: 4px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--pkn-line); }
  .pkn-top .pkn-logo { flex: 1 1 auto; min-width: 0; }
  .pkn-logo img, .pkn-logo .custom-logo { width: 214px; }
  .pkn-phone, .pkn-top-wa, .pkn-top-book, .pkn-bar { display: none; }
  .pkn-icon-btn { display: inline-flex; }
  .pkn-drawer { position: fixed; inset: 0; z-index: 1000; background: #fff; display: flex; flex-direction: column; }
  .pkn-d-head { display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--pkn-line); flex: none; }
  .pkn-d-head .pkn-logo { flex: 1 1 auto; min-width: 0; }
  .pkn-d-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 8px; }
  .pkn-d-list { list-style: none; margin: 0; padding: 0; }
  .pkn-d-list > li { margin: 0; border-bottom: 1px solid var(--pkn-line); }
  .pkn-d-list > li:last-child { border-bottom: 0; }
  #pkn .pkn-d-b, #pkn .pkn-d-a { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 48px; font-size: 16px; font-weight: 600; text-align: left; color: var(--pkn-ink); }
  #pkn .pkn-d-b[aria-expanded="true"] { color: var(--pkn-red); font-weight: 700; }
  #pkn .pkn-d-b[aria-expanded="true"] .pkn-ico { transform: rotate(180deg); }
  .pkn-d-sub { display: flex; flex-direction: column; margin: 0 0 10px; padding: 2px 0 4px 12px; border-left: 3px solid var(--pkn-red); }
  .pkn-d-sub[hidden] { display: none; }
  .pkn-d-sub a { display: flex; align-items: center; min-height: 40px; font-size: 15px; }
  .pkn-d-h { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pkn-grey); }
  #pkn .pkn-d-tool, #pkn .pkn-d-all { color: var(--pkn-red); font-weight: 600; }
  .pkn-d-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--pkn-line); background: var(--pkn-mist); }
  .pkn-d-row { display: flex; gap: 8px; }
  .pkn-d-row .pkn-btn { flex: 1; }
  .pkn-shade { display: none; }
  body.pkn-locked { overflow: hidden; }
}
@media (min-width: 1180px) {
  .pkn-drawer, .pkn-m-call, .pkn-m-open, .pkn-m-search, .pkn-m-searchbar { display: none !important; }
}
@media (min-width: 1180px) and (max-width: 1320px) {
  .pkn-logo img, .pkn-logo .custom-logo { width: 240px; }
  #pkn .pkn-tab-a, #pkn .pkn-tab-b { padding: 0 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #pkn .pkn-tab-b .pkn-ico { transition: none; }
}

/* ---------- 3 Nov 2026 (owner): two-column briefs, Judgments panel. Tabs and panels stay full width (owner asked to undo the centring). ---------- */
/* Weekly Legal Insights: the latest briefs in two columns. */
.pkn-col--wide { grid-column: span 2; }
.pkn-briefs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
/* Judgments: topic and court links with their counts. */
#pkn a.pkn-count { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pkn-n { flex: none; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--pkn-mist); color: var(--pkn-grey); font-size: 12px; font-weight: 600; text-align: center; }
#pkn a.pkn-count:hover .pkn-n { background: var(--pkn-tint); color: var(--pkn-red); }

/* Search on phones (owner, 4 Nov 2026): the icon left of Call opens this bar under the logo row. */
#pkn .pkn-m-search { background: none; border: 0; padding: 0; cursor: pointer; }
.pkn-m-searchbar { padding: 10px 12px 10px 16px; background: #fff; border-bottom: 1px solid var(--pkn-line); }
.pkn-m-searchbar[hidden] { display: none; }
.pkn-m-searchbar form { display: flex; gap: 8px; margin: 0; }
#pkn .pkn-m-searchbar input { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 12px; font: 16px var(--pkn-sans); color: var(--pkn-ink); background: #fff; border: 1px solid var(--pkn-line); border-radius: 6px; }
#pkn .pkn-m-searchbar button { flex: 0 0 auto; height: 44px; margin: 0; padding: 0 16px; font: 600 15px var(--pkn-sans); color: #fff; background: var(--pkn-red); border: 0; border-radius: 6px; cursor: pointer; }