/* ============================================================
   NAP — site header (govbar + brand bar + sticky menu bar) + footer
   Place at: static/css/nap-header-footer.css
   Loaded globally by base.html. From the Claude Design
   "Header & Footer - ໃໝ່" handoff, adapted to the real layout.
   ============================================================ */
:root{
  --green-950:#072518; --green-900:#0c3d28; --green-800:#11543a;
  --green-700:#177a52; --green-600:#1f8f60; --green-500:#2aa873; --green-400:#5fe0a3;
  --green-100:#d7ede1; --green-50:#eef7f1;
  --ink:#0e1a14; --ink-soft:#46554d; --ink-faint:#8a9790;
  --line:#e7ede9; --paper:#fff; --bg:#f1f5f2;
  --hf-sans:'Noto Sans Lao',system-ui,sans-serif;
  --maxw:1240px;
  --shadow:0 4px 22px rgba(12,61,40,.07);
  --shadow-lg:0 18px 48px rgba(12,61,40,.16);
}
.govbar,.govbar *,.brandbar,.brandbar *,.menubar,.menubar *,.foot,.foot *{box-sizing:border-box}
/* no underline on links in the global chrome (header bars, menu, footer) */
.govbar a,.brandbar a,.menubar a,.menubar .mlink,.foot a{text-decoration:none}

/* The real .header is fixed (style.css). display:contents drops its box so the
   three bars become body-level rows — the menu bar can then stick to the
   viewport, and every .header-height-measuring script reads 0 (auto no-op). */
header.header{display:contents}

/* ============ GOVBAR (utility) ============ */
.govbar{background:var(--green-950);color:#aacdba;font-family:var(--hf-sans)}
.govbar-inner{max-width:var(--maxw);margin:0 auto;padding:7px 32px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.govbar .gnat{display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden}
.govbar .gnat>span:nth-child(2){flex:0 0 auto}
.govbar .gnat .seal{width:15px;height:15px;border-radius:50%;border:1.5px solid #4f7d66;
  display:grid;place-items:center;color:#7fb89a;font-size:8px}
.govbar .gmotto{color:#6fa386;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.govbar-tools{display:flex;align-items:center;gap:6px}
.gov-link{display:inline-flex;align-items:center;gap:6px;color:#aacdba;padding:4px 10px;border-radius:999px;
  font-weight:700;transition:background .15s,color .15s}
.gov-link:hover{background:rgba(255,255,255,.08);color:#fff}
.gov-link svg{width:12px;height:12px}
.gov-sep{width:1px;height:13px;background:rgba(255,255,255,.16)}

/* ============ BRAND BAR ============ */
/* z-index above the sticky menu bar (9000) so the profile dropdown isn't covered */
.brandbar{background:var(--paper);border-bottom:1px solid var(--line);font-family:var(--hf-sans);position:relative;z-index:9001}
.brandbar-inner{max-width:var(--maxw);margin:0 auto;padding:5px 32px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand-mark{width:52px;height:52px;flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 1px var(--green-100);object-fit:cover}
.brand-txt b{display:block;color:var(--green-900);font-size:19px;font-weight:900;letter-spacing:-.3px;line-height:1.12}
.brand-txt i{display:block;color:var(--ink-soft);font-size:20px;font-style:normal;font-weight:600;margin-top:2px;max-width:46ch}
.brand-spacer{flex:1 1 auto}
.brand-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* user / login */
.hf-user-btn{display:flex;align-items:center;gap:9px;background:var(--green-700);color:#fff;border:none;cursor:pointer;
  font-family:var(--hf-sans);font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:999px;transition:background .15s}
.hf-user-btn:hover{background:var(--green-800)}
.hf-user-btn .ava{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px;overflow:hidden}
.hf-user-btn .ava img{width:100%;height:100%;object-fit:cover}
.hf-user-btn svg{width:13px;height:13px}
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);
  color:var(--green-800);font-family:var(--hf-sans);font-size:12.5px;font-weight:800;padding:9px 14px;border-radius:999px;cursor:pointer;transition:border-color .15s,background .15s}
.lang-btn:hover{border-color:var(--green-400);background:var(--green-50)}
.lang-btn .fl{width:18px;height:13px;border-radius:2px;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* profile menu (logged-in forum user) — restyle the legacy .user-dropdown
   to match the brand bar (the old style.css made it white-on-white here) */
.brandbar .user-menu-container{margin:0}
.brandbar .user-dropdown-btn{background:var(--green-700);color:#fff;padding:9px 15px;border-radius:999px;
  gap:9px;font-family:var(--hf-sans);font-size:13.5px;font-weight:700;transition:background .15s}
.brandbar .user-dropdown-btn:hover{background:var(--green-800)}
.brandbar .user-dropdown-btn .username-text{color:#fff;max-width:140px}
.brandbar .user-dropdown-btn .fa-user-circle{font-size:20px;color:#fff}
.brandbar .user-dropdown-btn .fa-angle-down{font-size:12px;color:#fff;opacity:.9}
.brandbar .user-avatar-container{display:inline-flex;align-items:center;position:relative}
.brandbar .user-avatar-small{width:24px;height:24px;border:1px solid rgba(255,255,255,.5)}
.brandbar .user-dropdown-content{right:0;top:calc(100% + 8px);min-width:226px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;overflow:visible}
/* transparent bridge over the 8px gap so the hover doesn't break when the
   mouse travels from the button down into the dropdown */
.brandbar .user-dropdown-content::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px}
.brandbar .user-dropdown-content a{color:var(--ink);font-family:var(--hf-sans);font-size:13.5px;font-weight:600;
  padding:10px 12px;border-radius:9px;gap:11px}
.brandbar .user-dropdown-content a:hover{background:var(--green-50);color:var(--green-800)}
.brandbar .user-dropdown-content a i{width:18px;text-align:center;color:var(--green-700)}
.brandbar .user-dropdown-content a:hover i{color:var(--green-800)}

/* ============ MENU BAR ============ */
.menubar{position:sticky;top:0;z-index:9000;background:var(--green-900);font-family:var(--hf-sans);
  box-shadow:0 1px 0 rgba(255,255,255,.06),var(--shadow)}
/* single row on desktop — never wrap (CTA must not drop a line) and never use
   overflow (overflow-x:auto forces overflow-y:auto, which clips the dropdowns).
   Sized tight to fit one row; wraps on mobile. */
.menubar-inner{max-width:var(--maxw);margin:0 auto;padding:0 14px;display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
.mlink{position:relative;display:flex;align-items:center;gap:5px;color:#cfe6da;font-size:12.5px;font-weight:700;
  padding:13px 10px;white-space:nowrap;cursor:pointer;transition:color .15s,background .15s}
.mlink:hover{color:#fff;background:rgba(255,255,255,.07)}
.mlink.active,.mlink.menu-active{color:#fff}
.mlink.active::after,.mlink.menu-active::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--green-400)}
.mlink .caret{width:11px;height:11px;opacity:.75;transition:transform .2s}
.has-drop:hover .caret{transform:rotate(180deg)}
/* dropdown */
.menubar .drop{position:absolute;top:100%;left:8px;min-width:248px;background:var(--paper);border-radius:14px;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:80}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.menubar .drop a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--ink);
  font-size:13.5px;font-weight:600;transition:background .14s,color .14s}
.menubar .drop a:hover{background:var(--green-50);color:var(--green-800)}
.menubar .drop a .di{width:30px;height:30px;border-radius:8px;background:var(--green-50);color:var(--green-700);
  display:grid;place-items:center;flex:0 0 auto}
.menubar .drop a .di svg{width:16px;height:16px}
.menu-cta{display:flex;align-items:center;gap:8px;align-self:center;margin-left:auto;color:#0c3d28;white-space:nowrap;flex:0 0 auto;
  background:var(--green-400);font-size:13px;font-weight:800;padding:9px 16px;border-radius:999px}
.menu-cta:hover{background:var(--green-500)}
.menu-cta svg{width:15px;height:15px}

/* ============ FOOTER ============ */
.foot{background:linear-gradient(180deg,var(--green-900),var(--green-950));color:#aacdba;font-family:var(--hf-sans)}
.foot-top{max-width:var(--maxw);margin:0 auto;padding:52px 32px 38px;
  display:grid;grid-template-columns:1.6fr 2.25fr 1.05fr;gap:40px;align-items:start}
.foot h4{color:#fff;font-size:13px;font-weight:800;letter-spacing:.4px;margin:0 0 16px;text-transform:uppercase}
/* brand col */
.foot-brand{display:flex;align-items:flex-start;gap:15px}
.foot-mark{width:100px;height:100px;flex:0 0 auto;object-fit:contain}
.fb-name{color:#fff;font-weight:800;font-size:15.5px;line-height:1.35}
.fb-sub{color:#7ba892;font-size:12.5px;font-weight:600;margin-top:6px;line-height:1.5;max-width:40ch}
.foot-contact{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.foot-contact a{display:inline-flex;align-items:center;gap:10px;color:#bfe0cd;font-size:13.5px;font-weight:600;transition:color .15s}
.foot-contact a:hover{color:#fff}
.foot-contact a .ci{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:0 0 auto}
.foot-contact a .ci svg{width:15px;height:15px}
/* link cols */
.foot-links{display:flex;flex-direction:column;gap:12px}
.foot-links a{color:#a9d6bd;font-size:13.5px;font-weight:600;transition:color .15s,padding .15s}
.foot-links a:hover{color:#fff;padding-left:4px}
/* documents / downloads col */
.foot-docs{min-width:0}
.docs-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.docs-title{display:flex;align-items:center;gap:9px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.docs-title svg{width:15px;height:15px;color:var(--green-400)}
.docs-all{display:inline-flex;align-items:center;gap:5px;color:#7ba892;font-size:11.5px;font-weight:700;transition:color .15s}
.docs-all:hover{color:#cfe6da}
.docs-all svg{width:12px;height:12px}
.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.doccard{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:13px;padding:13px 14px;transition:border-color .18s,background .18s,transform .18s}
.doccard:hover{border-color:rgba(95,224,163,.32);background:rgba(255,255,255,.08);transform:translateY(-1px)}
.doccard .dfi{width:36px;height:36px;flex:0 0 auto;border-radius:9px;background:rgba(95,224,163,.14);color:var(--green-400);
  display:grid;place-items:center;position:relative}
.doccard .dfi svg{width:18px;height:18px}
.doccard .dfi .ext{position:absolute;bottom:-5px;right:-5px;background:var(--green-500);color:#06281b;font-size:8px;font-weight:900;
  letter-spacing:.3px;padding:2px 4px;border-radius:5px;box-shadow:0 0 0 2px var(--green-900)}
.doccard .dmeta{min-width:0;display:flex;flex-direction:column;gap:3px}
.doccard b{color:#fff;font-size:13px;font-weight:700;line-height:1.32}
.doccard span{color:#7ba892;font-size:11px;font-weight:600;letter-spacing:.2px}
/* admin / seal col */
.foot-admin{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.foot-logo-right{width:100px;height:100px;object-fit:contain;border-radius:50%;align-self:flex-end}
.admin-card{display:inline-flex;align-items:center;gap:11px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:11px 15px;transition:background .15s,border-color .15s}
.admin-card:hover{background:rgba(255,255,255,.1);border-color:rgba(95,224,163,.4)}
.admin-card .lk{width:32px;height:32px;border-radius:9px;background:rgba(95,224,163,.16);color:var(--green-400);display:grid;place-items:center;flex:0 0 auto}
.admin-card .lk svg{width:16px;height:16px}
.admin-card b{display:block;color:#fff;font-size:13px;font-weight:700;line-height:1.2}
.admin-card span{display:block;color:#7ba892;font-size:11px;font-weight:600;margin-top:2px}
.foot-seal{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.12);object-fit:cover}
/* bottom bar */
.foot-bottom{border-top:1px solid rgba(255,255,255,.1)}
.foot-bottom-inner{max-width:var(--maxw);margin:0 auto;padding:20px 32px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-copy{font-size:12.5px;color:#7ba892;font-weight:500}
.foot-meta{display:flex;align-items:center;gap:18px;font-size:12px;color:#7ba892;font-weight:600}
.foot-meta a{color:#7ba892}.foot-meta a:hover{color:#cfe6da}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .foot-top{grid-template-columns:1fr 1fr;gap:32px}
  .foot-docs{grid-column:1/-1;order:3}
  .brand-txt i{display:none}
}
@media (max-width:880px){
  /* wrap to multiple rows on mobile (no overflow → dropdowns stay visible) */
  .menubar-inner{flex-wrap:wrap}
  .menu-cta{margin-left:8px}
}
@media (max-width:680px){
  .govbar .gmotto{display:none}
  .govbar-inner,.brandbar-inner{padding-left:18px;padding-right:18px}
  .foot-top{grid-template-columns:1fr;gap:28px;padding:40px 22px 30px}
  .brand-mark{width:44px;height:44px}
  .brand-txt b{font-size:16px}
}

/* ============ GLOBAL FLASH BANNER ============
   base.html renders flash messages as .forum-alert.forum-alert-<category>.
   Style them to the NAP design system so they look right on pages that do
   NOT load forum-pages.css (auth, profile, public). On forum pages that load
   forum-pages.css, that file is included later in <head> and wins. */
.forum-alert{position:relative;max-width:var(--maxw);margin:0 auto;border-radius:13px;
  padding:13px 18px 13px 44px;font-family:var(--hf-sans);font-size:13.5px;font-weight:600;line-height:1.5;border:1px solid}
.forum-alert::before{content:"";position:absolute;left:16px;top:15px;width:16px;height:16px;background:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");opacity:.85}
.forum-alert-success{background:#eafaf1;border-color:#bce6cf;color:#1d7a48}
.forum-alert-info{background:#eaf3fb;border-color:#bcd8ef;color:#1f6aa6}
.forum-alert-warning{background:#fdf6e3;border-color:#ecdca0;color:#8a6d12}
.forum-alert-danger,.forum-alert-error{background:#fdeceb;border-color:#f3c4c0;color:#b3322a}