/* barni.fun main menu, one for every page */
.bn{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;display:flex;align-items:center;gap:28px;padding:0 28px;background:rgba(255,251,245,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(26,26,46,.07);font-family:'Heebo',sans-serif}
.bn-brand{display:flex;align-items:center;gap:8px;font-family:'Rubik',sans-serif;font-weight:800;font-size:1.3rem;color:#1A1A2E;text-decoration:none;white-space:nowrap}
.bn-logo{font-size:1.4rem}
.bn-links{display:flex;align-items:center;gap:6px;flex:1}
.bn-links > a,.bn-dd-btn{background:none;border:0;font:inherit;font-size:1rem;font-weight:500;color:#1A1A2E;text-decoration:none;padding:10px 12px;border-radius:10px;cursor:pointer;white-space:nowrap}
.bn-links > a:hover,.bn-dd-btn:hover,.bn-dd.open .bn-dd-btn{background:#FFF0E4;color:#E85A2A}
.bn-caret{font-size:.7rem;opacity:.6;margin-right:2px}
.bn-dd{position:relative}
.bn-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(26,26,46,.14);padding:8px;display:none;flex-direction:column}
.bn-dd.open .bn-menu,.bn-dd:focus-within .bn-menu{display:flex}
@media (hover:hover) and (min-width:901px){.bn-dd:hover .bn-menu{display:flex}}
.bn-menu a{display:flex;flex-direction:column;padding:10px 14px;border-radius:10px;color:#1A1A2E;text-decoration:none;font-weight:600;font-size:.98rem}
.bn-menu a small{font-weight:400;font-size:.8rem;color:#8a8a9c;margin-top:1px}
.bn-menu a:hover{background:#FFF4EA;color:#E85A2A}
.bn-menu-ages{display:none;grid-template-columns:repeat(4,1fr);min-width:300px;gap:2px}
.bn-dd.open .bn-menu-ages,.bn-dd:focus-within .bn-menu-ages{display:grid}
@media (hover:hover) and (min-width:901px){.bn-dd:hover .bn-menu-ages{display:grid}}
.bn-menu-ages a{align-items:center;padding:10px 6px}
.bn-cta{margin-right:auto;background:#25D366;color:#fff!important;font-weight:800;text-decoration:none;padding:11px 20px;border-radius:12px;white-space:nowrap;box-shadow:0 6px 16px rgba(37,211,102,.28)}
.bn-cta:hover{transform:translateY(-1px)}
.bn-burger{display:none;margin-right:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.bn-burger span{display:block;width:22px;height:2px;background:#1A1A2E;border-radius:2px;transition:transform .25s,opacity .2s}
.bn.menu-open .bn-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bn.menu-open .bn-burger span:nth-child(2){opacity:0}
.bn.menu-open .bn-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .bn{height:58px;padding:0 16px;gap:10px}
  .bn-brand{font-size:1.15rem}
  .bn-cta{display:none}
  .bn-burger{display:flex}
  .bn-links{position:absolute;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#FFFBF5;box-shadow:0 14px 30px rgba(26,26,46,.12);padding:6px 12px 14px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .3s,opacity .2s}
  .bn.menu-open .bn-links{max-height:calc(100vh - 58px);overflow:auto;opacity:1;pointer-events:auto}
  .bn-links > a,.bn-dd-btn{width:100%;text-align:right;padding:14px 10px;font-size:1.05rem;border-bottom:1px solid #f3e7dc;border-radius:0}
  .bn-dd-btn{display:flex;justify-content:space-between}
  .bn-menu{position:static;box-shadow:none;background:transparent;padding:0 8px 8px;min-width:0}
  .bn-menu a{padding:10px 8px}
  .bn-menu-ages{grid-template-columns:repeat(4,1fr)}
}
/* sub-pages had their own bar in the flow; the new one is fixed, so push the page down */
body.has-bn{padding-top:64px}
@media (max-width:900px){body.has-bn{padding-top:58px}}
/* the blog styles every bare <nav>; keep them off the menu */
.bn nav.bn-links{background:none!important;box-shadow:none!important;padding:0!important;justify-content:flex-start!important;position:static}
@media (max-width:900px){.bn nav.bn-links{position:absolute!important;background:#FFFBF5!important;box-shadow:0 14px 30px rgba(26,26,46,.12)!important;padding:6px 12px 14px!important;display:flex!important}}
.bn nav.bn-links a{color:#1A1A2E}