/* ==========================================================================
   Beacon / Talonyx shared brand stylesheet
   SINGLE SOURCE OF TRUTH for palette + typography.
   To change the color scheme later, edit the variables in :root below once;
   every page that links this file updates. (SVG logo marks carry their own
   literal hex as a fixed brand asset — see favicon.svg / page headers.)
   ========================================================================== */

/* ---- Inter, self-hosted (renders offline, no external dependency) ---- */
@font-face{font-family:'Inter';font-weight:400;font-style:normal;src:url('fonts/inter-400.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;src:url('fonts/inter-500.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;src:url('fonts/inter-600.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;src:url('fonts/inter-700.woff2') format('woff2');font-display:swap;}

/* ---- Palette (the one-edit swap point) ---- */
:root{
  --steel:#2C4A63;        /* primary */
  --steel-dark:#223a4e;   /* hover / pressed */
  --amber:#C68A3D;        /* status + primary action only */
  --amber-dark:#b57a30;   /* amber hover */
  --bone:#F4F2ED;         /* background */
  --ink:#1A1D1F;          /* body text */
  --muted:#6B6458;        /* secondary text */
  --line:#DFDAD0;         /* hairlines / borders */
  --brand-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---- Base typography applied everywhere this file is linked ---- */
html,body{font-family:var(--brand-font);}

/* ---- Reusable logo mark (CSS-driven, so it swaps with the palette too) ---- */
.bk-mark .bk-stroke{fill:none;stroke:var(--steel);stroke-linejoin:miter;}
.bk-mark .bk-dot{fill:var(--amber);}
.bk-mark.on-dark .bk-stroke{stroke:#fff;}

/* ---- Site-wide nav strip: always-visible way back to Home + Site map ---- */
.site-nav-strip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 20px;background:var(--steel);font-size:12.5px;font-family:var(--brand-font);
}
.site-nav-strip a{color:#fff;text-decoration:none;opacity:.88;}
.site-nav-strip a:hover{opacity:1;text-decoration:underline;}
.site-nav-strip .snav-divider{opacity:.4;margin:0 2px;}
@media (max-width:420px){.site-nav-strip{padding:8px 14px;font-size:12px;}}

/* ==========================================================================
   Shared customer-facing navigation. Two variants:
   - .top-nav (wide marketing pages): logo + inline nav links + sign in/up,
     collapses to a hamburger below 860px viewport width.
   - .compact-nav (narrow single-task pages: signup/login/dashboard forms):
     logo + a hamburger that is ALWAYS visible, since the page itself is
     narrow regardless of viewport, so inline links would wrap and cramp.
   Both open the same .mobile-menu dropdown panel.
   ========================================================================== */
.top-nav, .compact-nav { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 20px; }
.top-nav .brand-home, .compact-nav .brand-home { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.top-nav .word, .compact-nav .word { font-size: 20px; font-weight: 700; color: var(--steel); letter-spacing: -0.01em; }
.top-nav .sub, .compact-nav .sub { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 1px; }
.top-nav .nav-links, .compact-nav .nav-links { display: none; }
.top-nav .nav-links a, .compact-nav .nav-links a { font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; margin-right: 24px; }
.top-nav .nav-links a:hover, .compact-nav .nav-links a:hover { color: var(--steel); }
.top-nav .auth-links, .compact-nav .auth-links { display: flex; gap: 10px; align-items: center; }
.top-nav .auth-links a, .compact-nav .auth-links a { font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 9px 16px; border-radius: 6px; }
.top-nav .auth-links a.signin, .compact-nav .auth-links a.signin { color: var(--steel); }
.top-nav .auth-links a.signin:hover, .compact-nav .auth-links a.signin:hover { background: #fff; }
.top-nav .auth-links a.signup, .compact-nav .auth-links a.signup { background: var(--amber); color: #fff; }
.top-nav .auth-links a.signup:hover, .compact-nav .auth-links a.signup:hover { background: var(--amber-dark); }
.compact-nav .auth-links { display: none; }
/* .nav-wrap: full-width bar that holds a .compact-nav on narrow single-task pages,
   wider than the page's own narrow .wrap/.card below it, so the desktop view shows
   a real nav bar instead of just a hamburger icon sitting over a tiny phone-width card. */
.nav-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 0; }
.hamburger {
  display: none; width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--line);
  background: #fff; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.compact-nav .hamburger { display: flex; }
.hamburger span, .hamburger span::before, .hamburger span::after {
  display: block; width: 18px; height: 2px; background: var(--ink); position: relative;
}
.hamburger span::before { content: ''; position: absolute; top: -6px; }
.hamburger span::after { content: ''; position: absolute; top: 6px; }
.mobile-menu {
  display: none; position: absolute; top: 52px; right: 0; left: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 11px 12px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--ink); border-radius: 6px; }
.mobile-menu a:hover { background: var(--bone); }
.mobile-menu a.signup { background: var(--amber); color: #fff; text-align: center; margin-top: 6px; }
.mobile-menu hr { border: none; border-top: 1px solid var(--line); margin: 6px 0; }
@media (max-width: 860px) {
  .top-nav .nav-links { display: none !important; }
  .top-nav .auth-links { display: none; }
  .top-nav .hamburger { display: flex; }
}
@media (min-width: 861px) {
  .top-nav .nav-links { display: flex; align-items: center; }
  .compact-nav .nav-links { display: flex; align-items: center; }
  .compact-nav .auth-links { display: flex; }
  .compact-nav .hamburger { display: none; }
}
/* Quiet footer site-map link, matches existing footer .links styling */
.sitemap-footer-link { color: var(--muted); font-size: 12.5px; }