/* calcul8.loan brand: self-hosted Sora (SIL OFL, see fonts/OFL.txt) and the logo lockup. */
@font-face { font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/sora-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/sora-latin-700-normal.woff2) format('woff2'); }

h1, .result .amount { font-family:'Sora', system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing:-.02em; }

.brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-family:'Sora', system-ui, sans-serif; font-weight:700; font-size:1.45rem; letter-spacing:-.035em; line-height:1; }
.brand svg { width:38px; height:38px; flex:none; fill:none; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.brand .roof { stroke:var(--text); }
.brand .eq, .brand .eight { stroke:var(--accent); color:var(--accent); }
.brand .tld { color:var(--muted); font-weight:600; }
.brand:hover .tld { color:var(--text); }

/* Top menu bar, shared by every page. Body has 32px/16px padding, so the bar bleeds over it. */
.topbar { position:sticky; top:0; z-index:50; margin:-32px -16px 28px; background:var(--card); border-bottom:1px solid var(--border); box-shadow:0 2px 12px rgba(0,0,0,.08); }
.topbar-inner { max-width:1280px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; }
.topbar .brand { font-size:1.2rem; }
.topbar .brand svg { width:30px; height:30px; }
.nav-menu { margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav-menu > a { white-space:nowrap; color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem; padding:8px 12px; border-radius:8px; }
.nav-menu > a:hover { color:var(--text); background:var(--bg); }
.nav-menu > a[aria-current="page"] { color:var(--accent); }
.nav-menu .currency { margin-left:8px; }
.nav-tools { display:flex; margin-left:8px; }
.nav-toggle { display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--border); border-radius:8px; background:var(--card); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nav-toggle span { display:block; width:18px; height:2px; border-radius:2px; background:var(--text); transition:transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:1080px) {
  .nav-toggle { display:flex; }
  .nav-menu { display:none; position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:2px; padding:8px 16px 14px; background:var(--card); border-bottom:1px solid var(--border); box-shadow:0 10px 20px rgba(0,0,0,.15); }
  .nav-menu.open { display:flex; }
  .nav-menu > a { padding:12px; }
  .nav-menu .currency, .nav-tools { margin:8px 12px 0; }
  .nav-menu .currency { justify-content:space-between; }
}

.theme-toggle { width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:1.15rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }

@media print {
  .theme-toggle, .nav-menu, .nav-toggle { display:none !important; }
  .topbar { position:static; margin:0 0 8px; background:none; border:0; box-shadow:none; }
  .topbar-inner { padding:0; justify-content:center; }
  .brand svg { width:26px; height:26px; }
  .brand { font-size:16px; }
}