/* Shared chrome for the tool pages under /tools (moved from duoz.my on 24 Oct 2026).
   Each tool keeps its own inline styles; this file adds the Huzai font, the site bar and footer,
   and a few overrides so the tools read as part of huzaifahzaba.com (black/white, pill buttons, no purple).
   Loaded AFTER each page's inline <style>, so these rules win on equal specificity. */
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/hanken-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body { font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; color-scheme: light; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: #000; color: #fff; }

/* pill buttons, like the rest of the site */
.btn, #copyBtn, .curbtn { border-radius: 999px !important; }
.btn { box-shadow: none !important; }
.btn:hover { background: #2B2B2B; }
.btn.sec, .btn.secondary { background: #F0F1F2; color: #000; }
.cta .btn { background: #fff; color: #000; }
.cta .btn:hover { background: #E4E5E7; }
.btn.sec:hover, .btn.secondary:hover { background: #E4E5E7; }

/* skip link */
.hz-skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: #fff; color: #000; padding: .6rem 1rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
.hz-skip:focus { top: 12px; }

/* site bar */
.hz-bar { background: #000; color: #fff; padding: .75rem max(clamp(16px, 4.5vw, 48px), env(safe-area-inset-left, 0px)); border-bottom: 1px solid #1E1E1F; }
.hz-bar-in { max-width: 1088px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hz-brand { display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; }
.hz-brand .hz { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.hz-brand .hz img { width: 24px; height: auto; display: block; }
.hz-brand > span:last-child { font-weight: 700; letter-spacing: .16em; font-size: 13px; text-transform: uppercase; }
.hz-bar nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 24px); font-size: 15px; }
.hz-bar nav a { color: #C2C6CB; text-decoration: none; font-weight: 500; }
.hz-bar nav a:hover, .hz-bar nav a[aria-current] { color: #fff; }
@media (max-width: 520px) { .hz-brand > span:last-child { display: none; } }

/* site footer */
.hz-foot { background: #000; color: #fff; padding: 3rem max(clamp(16px, 4.5vw, 48px), env(safe-area-inset-left, 0px)); margin-top: 3rem; }
.hz-foot-in { max-width: 1088px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 1.55; }
.hz-foot .links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-weight: 600; }
.hz-foot a { color: #fff; }
.hz-foot p { margin: 0; color: #A1A6AC; }