/* ===========================================================================
   month.css — Kalender Bulanan template
   Loaded only on /kalender/{year}/{month}/ pages via $page_args['extra_css'].
   Uses the existing design tokens from style.css. All classes prefixed .mp-
   so nothing here can collide with existing styles.
   =========================================================================== */

.mp-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s-5)}
.mp-band{padding:var(--s-7) 0}
.mp-band.alt{background:var(--c-bg-alt)}

/* ---------- hero ---------- */
.mp-hero{background:var(--c-bg-alt);padding:var(--s-5) 0 var(--s-6);text-align:center}
.mp-eyebrow{display:inline-block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-primary);font-weight:700;background:#f2e4d2;padding:6px 15px;border-radius:20px}
.mp-hero h1{font-family:var(--f-display);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700;
  letter-spacing:-.5px;margin:var(--s-3) 0 var(--s-3)}
.mp-lead{font-size:1.02rem;line-height:1.75;color:var(--c-text-soft);max-width:760px;margin:0 auto var(--s-4)}
.mp-trust{display:flex;gap:var(--s-5);justify-content:center;flex-wrap:wrap;font-size:.82rem;color:var(--c-text-soft)}
.mp-trust span{display:inline-flex;align-items:center;gap:6px}
.mp-trust .ic{color:var(--c-primary);flex-shrink:0}

/* ---------- glance band ---------- */
.mp-glance{background:var(--c-primary-dark);border-radius:14px;padding:var(--s-5) var(--s-6);margin:var(--s-6) 0 var(--s-5);text-align:left}
.mp-glance-t{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c-primary-light);
  font-weight:700;margin-bottom:var(--s-4)}
.mp-glance-g{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.mp-gi{text-align:center;border-right:1px solid rgba(255,255,255,.13);padding:2px 4px}
.mp-gi:last-child{border-right:none}
.mp-gi .ic{color:var(--c-primary-light)}
.mp-gv{display:block;font-family:var(--f-display);font-size:1.6rem;font-weight:700;color:#fff;line-height:1.2;margin-top:6px}
.mp-gv.tbd{font-size:.82rem;font-family:var(--f-body);font-weight:600;color:#f0dcc2;line-height:1.35;padding:8px 0}
.mp-gl{display:block;font-size:.66rem;color:var(--c-primary-light);margin-top:3px}
.mp-status{display:flex;align-items:flex-start;gap:9px;margin:0 0 var(--s-5);padding:12px 16px;border-radius:10px;
  background:#fdf6e9;border:1px solid #f0dcc2;font-size:.84rem;line-height:1.65;color:#7a5a22}
.mp-status .ic{color:var(--c-accent);flex-shrink:0;margin-top:2px}
.mp-status strong{color:var(--c-primary-dark)}

.mp-cta{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}
.mp-btn{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;padding:11px 20px;
  border-radius:9px;background:var(--c-surface);color:var(--c-primary-dark);border:1px solid var(--c-border);
  cursor:pointer;font-family:inherit;transition:border-color .15s,transform .15s}
.mp-btn:hover{border-color:var(--c-primary-light);transform:translateY(-1px)}
.mp-btn-primary{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.mp-btn-primary:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark)}

/* ---------- layout: toc + calendar ---------- */
.mp-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--s-6)}
.mp-toc{border-right:1px solid var(--c-border);padding-right:var(--s-4);align-self:start;position:sticky;top:90px}
.mp-toc-t{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-muted);
  margin-bottom:var(--s-3);font-weight:700}
.mp-toc a{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--c-text-soft);
  padding:8px 0 8px 12px;border-left:2px solid transparent;transition:color .15s,border-color .15s}
.mp-toc a:hover{color:var(--c-primary);border-left-color:var(--c-primary-light)}
.mp-toc a .ic{color:var(--c-text-muted);flex-shrink:0}
.mp-toc a:hover .ic{color:var(--c-primary)}
.mp-toc-toggle{display:none}

/* ---------- calendar ---------- */
.mp-calhead{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.mp-mn{font-family:var(--f-display);font-size:1.35rem;font-weight:700}
.mp-nav{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--c-text-soft);
  border:1px solid var(--c-border);background:var(--c-surface);padding:8px 14px;border-radius:8px;transition:border-color .15s}
.mp-nav:hover{border-color:var(--c-primary-light);color:var(--c-primary)}
.mp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.mp-dow span{font-size:.75rem;font-weight:700;text-align:center;color:var(--c-text-muted);padding-bottom:4px}
.mp-dow span.red{color:var(--c-red)}
.mp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mp-cd{position:relative;min-height:92px;border:1px solid var(--c-border);border-radius:9px;padding:7px 8px;
  display:flex;flex-direction:column;background:var(--c-surface);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.mp-cd.out{background:transparent;border-color:transparent;box-shadow:none}
.mp-cd.wknd{background:var(--c-bg-alt)}
.mp-cd.hol{background:#fdecea;border-color:#eab5ad}
.mp-cd.cuti{background:#fdf3e3;border-color:#f0d7a8}
.mp-cd.today{border:2px solid var(--c-primary)}
.mp-hij{font-size:.62rem;color:var(--c-text-muted);text-align:right;line-height:1}
.mp-hij.new{color:#2f7d4f;font-weight:600}
.mp-num{font-size:1.3rem;font-weight:700;line-height:1.15;font-family:var(--f-display);margin-top:2px}
.mp-num.red{color:var(--c-red)}
.mp-pas{font-size:.65rem;color:var(--c-text-soft);margin-top:auto}
.mp-lab{font-size:.6rem;font-weight:700;color:var(--c-red);line-height:1.2;min-height:12px;margin-top:2px}
.mp-lab.cuti{color:#b07d16}
.mp-flag{position:absolute;top:7px;left:7px;color:var(--c-red);display:block;line-height:0}
.mp-flag.cuti{color:#b07d16}

/* tooltip opens ABOVE the cell so it never covers neighbouring days */
.mp-tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  width:200px;background:var(--c-primary-dark);border-radius:10px;padding:11px 13px;z-index:30;
  text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s;
  box-shadow:0 10px 26px rgba(60,40,20,.22)}
.mp-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--c-primary-dark)}
.mp-cd:hover .mp-tip,.mp-cd:focus-within .mp-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mp-cd:first-child .mp-tip,.mp-cd:nth-child(7n+1) .mp-tip{left:0;transform:translateX(0) translateY(4px)}
.mp-cd:nth-child(7n+1):hover .mp-tip{transform:translateX(0) translateY(0)}
.mp-cd:nth-child(7n) .mp-tip{left:auto;right:0;transform:translateX(0) translateY(4px)}
.mp-cd:nth-child(7n):hover .mp-tip{transform:translateX(0) translateY(0)}
.mp-tip-d{font-size:.72rem;color:var(--c-primary-light);display:flex;align-items:center;gap:6px}
.mp-tip-t{font-size:.6rem;font-weight:700;color:#fff;background:var(--c-red);display:inline-block;
  padding:3px 9px;border-radius:20px;margin:7px 0 5px}
.mp-tip-t.cuti{background:#b07d16}
.mp-tip-n{font-size:.88rem;font-weight:700;color:#fff;line-height:1.4}
.mp-tip-w{font-size:.72rem;color:var(--c-primary-light);margin-top:3px}
.mp-legend{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-4);font-size:.78rem;color:var(--c-text-soft);align-items:center}
.mp-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:-1px}

/* ---------- section heads ---------- */
.mp-h2{font-family:var(--f-display);font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:700;
  margin:0 0 var(--s-4);display:flex;align-items:center;gap:10px}
.mp-h2 .ic{color:var(--c-primary);flex-shrink:0}

/* ---------- snapshot ---------- */
.mp-snap{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3)}
.mp-sn{background:var(--c-surface);border:1px solid var(--c-border);border-radius:13px;padding:var(--s-4);
  display:flex;flex-direction:column;gap:2px}
.mp-sn .ic{color:var(--c-primary)}
.mp-sn-l{font-size:.75rem;color:var(--c-text-muted);margin-top:9px}
.mp-sn-v{font-size:1.6rem;font-weight:700;font-family:var(--f-display);color:var(--c-primary-dark);line-height:1.2}
.mp-sn-v.tbd{font-size:.85rem;font-family:var(--f-body);color:#8a6a3a;line-height:1.4;padding:6px 0}
.mp-sn-s{font-size:.72rem;color:var(--c-text-soft)}

/* ---------- holidays ---------- */
.mp-hols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-4)}
.mp-hc{background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;padding:var(--s-4)}
.mp-hc-r{display:flex;gap:var(--s-4)}
.mp-hd{background:#fdecea;border-radius:9px;width:58px;min-width:58px;text-align:center;padding:9px 0}
.mp-hd.cuti{background:#fdf3e3}
.mp-hd b{display:block;font-size:1.4rem;color:var(--c-red);font-family:var(--f-display)}
.mp-hd.cuti b{color:#b07d16}
.mp-hd span{font-size:.68rem;color:var(--c-red)}
.mp-hd.cuti span{color:#b07d16}
.mp-hn{font-size:1rem;font-weight:700}
.mp-hs{font-size:.78rem;color:var(--c-text-soft);margin:3px 0 8px}
.mp-tag{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;background:#fdecea;color:var(--c-red);
  padding:4px 10px;border-radius:20px;font-weight:600}
.mp-tag.cuti{background:#fdf3e3;color:#b07d16}
.mp-hp{font-size:.82rem;line-height:1.65;color:var(--c-text-soft);margin-top:var(--s-3)}
.mp-lw{background:#fdf3e3;border-left:3px solid var(--c-yellow,#f39c12);border-radius:0 12px 12px 0;
  padding:var(--s-4) var(--s-5);margin-top:var(--s-4)}
.mp-lw-t{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;color:#8a5a08}
.mp-lw-d{font-size:.82rem;color:#9a6a12;margin-top:5px;line-height:1.6}
.mp-empty{background:var(--c-surface);border:1px dashed var(--c-border);border-radius:12px;
  padding:var(--s-5);text-align:center;color:var(--c-text-soft);font-size:.88rem}
.mp-src{margin-top:var(--s-4);font-size:.78rem;color:var(--c-text-muted);display:flex;align-items:flex-start;gap:7px}
.mp-src .ic{flex-shrink:0;margin-top:2px}
.mp-src a{color:var(--c-primary);font-weight:600;text-decoration:underline}

/* ---------- jawa / hijriah ---------- */
.mp-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s-4)}
.mp-sc{background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;padding:var(--s-4) var(--s-5)}
.mp-sc-t{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:700;margin-bottom:var(--s-3);color:var(--c-primary-dark)}
.mp-sc table{width:100%;border-collapse:collapse;font-size:.84rem}
.mp-sc td{padding:7px 0;border-bottom:1px solid var(--c-border-soft)}
.mp-sc tr:last-child td{border-bottom:none}
.mp-sc td:first-child{color:var(--c-text-muted)}
.mp-sc td:last-child{text-align:right;font-weight:600}

/* ---------- events ---------- */
.mp-ev{display:flex;gap:var(--s-4);padding:10px 0 10px var(--s-4);border-left:2px solid var(--c-border);font-size:.86rem}
.mp-ev b{color:var(--c-primary);font-weight:700;min-width:66px}
.mp-ev span{color:var(--c-text-soft)}

/* ---------- downloads ---------- */
.mp-dl{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:var(--s-3)}
.mp-dc{background:var(--c-surface);border:1px solid var(--c-border);border-radius:13px;padding:var(--s-5) var(--s-4);
  display:block;transition:border-color .15s,transform .15s}
.mp-dc:hover{border-color:var(--c-primary-light);transform:translateY(-2px)}
.mp-dc .ic{color:var(--c-primary)}
.mp-dc.feat{background:var(--c-primary);border-color:var(--c-primary)}
.mp-dc.feat .ic{color:#fff}
.mp-dc-t{font-size:.95rem;font-weight:700;display:block;margin-top:9px}
.mp-dc-s{font-size:.72rem;color:var(--c-text-muted);display:block;margin-top:3px}
.mp-dc.feat .mp-dc-t{color:#fff}
.mp-dc.feat .mp-dc-s{color:var(--c-primary-light)}
.mp-badge{font-size:.62rem;font-weight:700;background:var(--c-yellow,#f39c12);color:var(--c-primary-dark);
  padding:3px 9px;border-radius:20px;display:inline-block;margin-bottom:10px}

/* ---------- faq ---------- */
.mp-faq details{background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;
  padding:var(--s-4) var(--s-5);margin-bottom:10px}
.mp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  font-size:.92rem;font-weight:600;cursor:pointer;list-style:none}
.mp-faq summary::-webkit-details-marker{display:none}
.mp-faq summary::after{content:"+";color:var(--c-text-muted);font-size:1.15rem;line-height:1;flex-shrink:0}
.mp-faq details[open] summary::after{content:"\2212"}
.mp-faq details[open] summary{color:var(--c-primary)}
.mp-faq p{font-size:.85rem;line-height:1.7;color:var(--c-text-soft);margin-top:10px}

/* ---------- guides / tools / months ---------- */
.mp-guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-3)}
.mp-gd{position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;
  padding:var(--s-4) var(--s-5);display:flex;align-items:center;gap:13px;transition:border-color .15s,transform .15s}
.mp-gd:hover{border-color:var(--c-primary-light);transform:translateY(-2px)}
.mp-gd .ic{color:var(--c-primary);flex-shrink:0}
.mp-gd-badge{position:absolute;top:10px;right:12px;font-size:.58rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-primary);background:#f2e4d2;padding:3px 8px;border-radius:20px}
.mp-gd-t{font-size:.9rem;font-weight:700;display:block}
.mp-gd-s{font-size:.75rem;color:var(--c-text-muted);margin-top:2px;display:block}
.mp-gd-a{margin-left:auto;color:var(--c-primary);display:flex;padding-top:14px;flex-shrink:0}
.mp-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-3)}
.mp-tl{display:flex;align-items:center;gap:9px;background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:10px;padding:13px 16px;font-size:.85rem;font-weight:600;color:var(--c-primary-dark);transition:border-color .15s}
.mp-tl:hover{border-color:var(--c-primary-light)}
.mp-tl .ic{color:var(--c-primary);flex-shrink:0}
.mp-mos{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.mp-mo{background:var(--c-surface);border:1px solid var(--c-border);border-radius:9px;padding:12px 6px;
  text-align:center;font-size:.82rem;font-weight:600;color:var(--c-text-soft);transition:border-color .15s}
.mp-mo:hover{border-color:var(--c-primary-light);color:var(--c-primary)}
.mp-mo.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-size:.9rem;
  padding:15px 6px;box-shadow:0 2px 8px var(--c-shadow-strong)}

/* ---------- sumber data + next ---------- */
.mp-sumber{background:var(--c-surface);border:1px solid var(--c-border);border-left:3px solid var(--c-primary);
  border-radius:0 12px 12px 0;padding:var(--s-5) var(--s-6)}
.mp-sumber-t{display:flex;align-items:center;gap:9px;font-size:1rem;font-weight:700;color:var(--c-primary-dark);margin-bottom:10px}
.mp-sumber p{font-size:.84rem;line-height:1.75;color:var(--c-text-soft)}
.mp-sumber a{color:var(--c-primary);font-weight:600;text-decoration:underline}
.mp-meta{font-size:.75rem;color:var(--c-text-muted);margin-top:var(--s-3);border-top:1px solid var(--c-border-soft);padding-top:11px}
.mp-next{background:var(--c-primary-dark);border-radius:12px;padding:var(--s-5) var(--s-6);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);transition:transform .15s}
.mp-next:hover{transform:translateY(-2px)}
.mp-next-l{font-size:.72rem;color:var(--c-primary-light)}
.mp-next-t{font-size:1.15rem;font-weight:700;color:#fff;font-family:var(--f-display);margin-top:3px}
.mp-next .ic{color:var(--c-primary-light);flex-shrink:0}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .mp-glance-g{grid-template-columns:repeat(4,1fr);gap:10px}
  .mp-gi:nth-child(4n){border-right:none}
  .mp-gi{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:10px}
  .mp-gi:nth-child(n+5){border-bottom:none}
  .mp-snap{grid-template-columns:repeat(2,1fr)}
  .mp-dl{grid-template-columns:1fr}
  .mp-mos{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .mp-layout{grid-template-columns:1fr;gap:var(--s-4)}
  .mp-toc{position:static;border-right:0;border:1px solid var(--c-border);border-radius:10px;
    padding:0;background:var(--c-surface);overflow:hidden}
  .mp-toc-t{display:none}
  .mp-toc-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:13px 16px;font-size:.88rem;font-weight:600;color:var(--c-primary-dark);
    background:none;border:0;font-family:inherit;cursor:pointer}
  .mp-toc-list{display:none;padding:0 16px 12px}
  .mp-toc.open .mp-toc-list{display:block}
  .mp-toc.open .mp-toc-toggle .ic{transform:rotate(180deg)}
  .mp-cd{min-height:64px;padding:5px 5px;border-radius:7px}
  .mp-num{font-size:1rem}
  .mp-pas{font-size:.55rem}
  .mp-lab{font-size:.5rem;min-height:0}
  .mp-hij{font-size:.5rem}
  .mp-flag{display:none}
  .mp-tip{display:none}          /* no hover on touch — the in-cell label carries it */
  .mp-dow span{font-size:.62rem}
  .mp-grid,.mp-dow{gap:3px}
  .mp-glance-g{grid-template-columns:repeat(2,1fr)}
  .mp-gi:nth-child(2n){border-right:none}
  .mp-snap{grid-template-columns:1fr}
  .mp-mos{grid-template-columns:repeat(3,1fr)}
  .mp-calhead{flex-wrap:wrap;justify-content:center}
  .mp-mn{order:-1;width:100%;text-align:center}
}
@media print{
  .mp-toc,.mp-cta,.mp-trust,.mp-next,.mp-tools,.mp-guides,.mp-dl,.mp-tip{display:none!important}
  .mp-layout{grid-template-columns:1fr}
  .mp-band{padding:var(--s-4) 0}
  .mp-cd{box-shadow:none}
}