/* Shared chrome for the resource pages, styled to match the production homepage (design/Main.dc.html, which keeps its own markup): tokens, header, Resurse dropdown, mobile menu, footer (DESIGN.md).
   Markup: site/partials/header.html, footer.html. Behaviour: nav.js. Nav breakpoint 1020px on both surfaces. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;700&display=swap");
:root{--paper:#FAF6EB;--paper-2:#F2ECDA;--card:#FFFFFF;--ink:#000;--ink-2:#3A3A38;--muted:#6B6A63;--line:#E6DFCA;--line-2:#D6CDB2;--accent:#00690A;--lime:#79D900;--lime-soft:#EAF8D6;--on-dark:#D6D3CA;--on-dark-2:#B9B7AF;
--font:Whyte,Roboto,"Helvetica Neue",Arial,sans-serif;--mono:"Roboto Mono",ui-monospace,monospace}
body{margin:0;background:var(--paper);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
/* Nepali fragments on every page (nav link, homepage bubbles, translated pages): Devanagari font, no tracking (it breaks conjuncts), room for matras */
[lang=ne],[lang=ne] *{font-family:"Noto Sans Devanagari",Roboto,"Helvetica Neue",Arial,sans-serif!important;letter-spacing:0!important;line-height:1.75}
html[lang=ne] h1{font-size:min(40px,9vw)!important;line-height:1.4}
/* Vietnamese: Roboto carries the Vietnamese subset (Whyte does not) */
html[lang=vi]{--font:Roboto,"Helvetica Neue",Arial,sans-serif}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* every in-page target (back-links, menu sections, jump links) lands below the sticky header, never under it */
[id]{scroll-margin-top:88px}
::selection{background:#D8F5B0;color:#000}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;background:#000;color:#fff;padding:12px 16px;z-index:60}.skip:focus{left:8px}

/* buttons used by the chrome (pages may reuse them) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:8px;font:inherit;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;box-sizing:border-box;white-space:nowrap}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#1f1f1d;color:#fff}
.btn-lime{background:var(--lime);color:#000}.btn-lime:hover{background:#8BE81A;color:#000}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:var(--card)}.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}

/* header */
.hdr,.foot{font-family:var(--font);font-size:17px;line-height:1.55}
.hdr *,.foot *{box-sizing:border-box}
.hdr .wrap,.foot .wrap,.draft-bar .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.hdr ul,.foot ul{list-style:none;margin:0;padding:0}
.hdr{position:sticky;top:0;z-index:40;background:rgba(250,246,235,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;min-height:68px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-size:21px;letter-spacing:-.03em}
.brand:hover{color:var(--ink)}
.nav{margin-left:8px}
.nav-list{display:flex;align-items:center;gap:4px}
.nav-list>li>a,.nav-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:6px;background:none;font:inherit;font-size:15px;color:var(--ink-2);text-decoration:none;cursor:pointer}
.nav-list>li>a:hover,.nav-btn:hover,.nav-btn[aria-expanded=true]{background:var(--paper-2);color:var(--ink)}
.nav-btn::after{content:"";width:6px;height:6px;margin:0 0 3px 9px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);transition:transform .15s}
.nav-btn[aria-expanded=true]::after{margin-bottom:-3px;transform:rotate(-135deg)}
.nav-dd{position:relative}
.dd{position:absolute;top:100%;left:-160px;padding-top:10px;z-index:41}
.dd[hidden]{display:none}
.dd-in{display:grid;grid-template-columns:repeat(3,max-content);gap:8px 28px;padding:20px 24px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -24px rgba(0,0,0,.35)}
.dd-col+.dd-col{padding-left:28px;border-left:1px solid var(--line)}
.dd-h{margin:0 0 6px;padding:0 10px;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dd a{display:block;padding:8px 10px;border-radius:6px;font-size:15px;line-height:1.4;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.dd a:hover{background:var(--paper-2);color:var(--ink)}
/* current page: the same underline as a text link, in the accent colour (no box) */
.hdr a[aria-current=page]{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.dd-h2{margin-top:14px}
.hdr-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.hdr .menu-btn{display:none}

/* mobile menu */
.mnav{max-height:calc(100vh - 69px);max-height:calc(100dvh - 69px);overflow-y:auto;overscroll-behavior:contain;padding:4px 0 20px;border-top:1px solid var(--line)}
.mnav[hidden]{display:none}
.mnav a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink);text-decoration:none}
.mnav-h{margin:24px 0 4px;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mnav-cta{display:block;width:100%;margin-top:16px;min-height:48px;padding:0 4px;border:0;background:none;font:inherit;font-size:17px;font-weight:500;text-align:left;color:var(--accent);cursor:pointer}
.mnav a.mnav-cta{display:flex;align-items:center;padding:0 4px;border-bottom:0;color:var(--accent)}
.mnav a.mnav-cta+.mnav-cta{margin-top:4px}
/* worker pages: "Mesajul pentru HR" is the first thing in the mobile menu, as a full-width button (the reader's own next step) */
.mnav a.mnav-worker{display:flex;justify-content:center;width:100%;margin:12px 0 8px;min-height:48px;padding:8px 16px;border:0;border-radius:8px;background:var(--ink);color:#fff;font-weight:500;text-align:center;box-sizing:border-box}
.mnav a.mnav-worker:hover{background:#1f1f1d;color:#fff}
/* HR, resource and product pages: "Cere un demo" opens the mobile menu the same way */
.mnav .mnav-cta.mnav-top{display:flex;align-items:center;justify-content:center;margin:12px 0 8px;padding:8px 16px;border-radius:8px;background:var(--ink);color:#fff;text-align:center}
.mnav .mnav-cta.mnav-top:hover{background:#1f1f1d}
/* Devanagari labels sit high in a fixed-height button: centre them on the box, not on the Latin line box */
[lang=ne] .mnav a.mnav-worker,.mnav a.mnav-worker[lang=ne]{align-items:center;line-height:1.3;padding-top:10px;padding-bottom:6px}
@media (max-width:1020px){.hdr .nav,.hdr .hdr-demo{display:none}.hdr .menu-btn{display:inline-flex}}
@media (min-width:1021px){.hdr .mnav{display:none}}

/* footer */
.foot{margin-top:96px;padding:56px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-brand p{margin:0;max-width:300px;font-size:14px;line-height:1.5;color:var(--muted)}
.foot-h{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink)}   /* as the production homepage footer (.foot h4) */
.foot ul{display:flex;flex-direction:column;gap:8px;font-size:15px}
.foot ul a,.foot .linkbtn,.foot-langs a{color:var(--ink-2);text-decoration:none}
.foot ul a:hover,.foot .linkbtn:hover,.foot-langs a:hover{color:var(--ink)}
.foot .linkbtn{padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.foot-langs{margin:14px 0 0;font-size:15px;color:var(--muted)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.legal a{color:var(--muted)}
.made{display:inline-flex;align-items:center;gap:5px}.made svg{flex:none}
@media (max-width:1020px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
/* very narrow viewports (375px at 200% zoom ≈ 188px): the header demo button is already in the mobile menu; brand and "Meniu" wrap instead of overflowing */
@media (max-width:360px){.hdr .wrap{padding:0 12px}.hdr-in{flex-wrap:wrap;gap:6px 12px;padding:6px 0;min-height:56px}.hdr-cta{margin-left:auto}.hdr .menu-btn{padding:0 12px}.mnav{max-height:calc(100dvh - 120px)}}
@media (max-width:640px){.hdr .wrap,.foot .wrap,.draft-bar .wrap{padding:0 16px}.foot-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (prefers-reduced-motion:reduce){.nav-btn::after{transition:none}}
@media print{.hdr,.foot,.skip{display:none!important}}

/* preview bar, identical on the product page and the resource pages (design/build-preview.py, site/templates/base.html) */
.draft-bar{background:#000;color:#D6D3CA;font:14px/1.4 Roboto,Arial,sans-serif}
.draft-bar .wrap{display:flex;gap:4px 12px;align-items:center;min-height:40px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.draft-bar b{color:#79D900;font-weight:500}
/* a Nepali language link inside a Latin row (switcher, menus, footer): Devanagari sits higher on the shared baseline; nudge it level */
:not([lang=ne])>a[lang=ne]{vertical-align:-0.12em;line-height:1.2}
/* in the stacked menu lists each language is its own row: same box height as the Latin rows, text centred */
.dd a[lang=ne],.mnav a[lang=ne]{vertical-align:baseline;line-height:1.4;padding-top:9px;padding-bottom:7px}
.mnav a[lang=ne]{padding-top:13px;padding-bottom:11px}