/* Mobile menu for calmpublika.id: the desktop links are hidden below 860px (see each page's own CSS) and nothing replaced them. */
.cp-burger{display:none; flex-shrink:0; align-items:center; justify-content:center; flex-direction:column; gap:5px; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer;}
.cp-burger span{display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
.cp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.cp-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.cp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.cp-burger:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.cp-mnav{position:absolute; left:0; right:0; top:100%; max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow-y:auto; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:10px 18px 20px;}
.cp-mnav[hidden]{display:none;}
.cp-mnav a{display:block; padding:13px 6px; font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
.cp-mnav a:active,.cp-mnav a:hover{color:var(--blue);}
.cp-mnav a[aria-current="page"],.cp-mnav a.cp-here{color:var(--blue);}
.cp-mgroup{border-bottom:1px solid var(--line); padding-bottom:6px;}
.cp-mlabel{padding:13px 6px 4px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.cp-mnav .cp-msub{padding-left:18px; border-bottom:none; font-weight:500; padding-top:9px; padding-bottom:9px;}
.cp-mnav .cp-mcta{display:block; margin-top:16px; padding:13px 18px; text-align:center; border:none; border-radius:999px; background:var(--blue); color:var(--on-blue,#f4f7ff); font-weight:700; box-shadow:var(--shadow);}
/* the desktop links need ~1200px once the language and theme buttons are in the bar; below that the menu lives behind the burger */
@media (max-width:1200px){ .topbar .nav-links{display:none !important;} .cp-burger{display:inline-flex;} }
@media (min-width:1201px){ .cp-mnav{display:none !important;} }
/* with the links folded away, keep the right-hand buttons together instead of spreading them across the bar */
@media (max-width:1200px){ .topbar-inner .nav-cta{margin-left:auto;} .topbar-inner > .lang-toggle{margin-left:auto;} .topbar-inner .lang-toggle ~ .nav-cta{margin-left:0;} .topbar-inner > .cp-right{margin-left:auto;} }
@media (prefers-reduced-motion: reduce){ .cp-burger span{transition:none;} }