/* ==========================================================================
   Shared site header and footer for every page other than the homepage.
   The homepage carries the same design inside home.css; this file repeats it
   under an sx- prefix so it cannot collide with main.css on the older pages.
   Keep the nav items here in step with index.html.
   ========================================================================== */
.sx-wrap { max-width: 1200px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

.sx-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(10,22,40,0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: "Hanken Grotesk", "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.2;
}
.sx-header .sx-wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.sx-logo { display: flex; align-items: center; margin-right: auto; }
.sx-logo img { display: block; height: 32px; width: auto; }
.sx-nav { display: flex; gap: 1.5rem; align-items: center; }
.sx-nav a { position: relative; color: #e6edf5; text-decoration: none; font-weight: 500; font-size: 0.95rem; letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0.85; }
.sx-nav a:hover, .sx-nav a[aria-current] { opacity: 1; }
.sx-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #4caf50; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease-out; }
.sx-nav a:hover::after, .sx-nav a[aria-current]::after { transform: scaleX(1); }
.sx-nav .sx-nav__signin { display: none; }
.sx-actions { display: flex; gap: 0.6rem; align-items: center; }
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Sora", "Segoe UI", Roboto, Arial, sans-serif; font-weight: 600; font-size: 0.9rem; line-height: 1.1;
  padding: 0.62rem 1.1rem; border-radius: 999px; border: 2px solid transparent; text-decoration: none; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.sx-btn--green { background: #4caf50; border-color: #4caf50; color: #fff; }
.sx-btn--green:hover { background: #3d8b40; border-color: #3d8b40; }
.sx-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.sx-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.sx-menu { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 2px solid rgba(255,255,255,0.5); border-radius: 8px; color: #fff; cursor: pointer; }
.sx-menu svg { width: 22px; height: 22px; }

.sx-footer { background: #0a1628; color: #aab6c3; padding-block: 2.5rem 2rem; border-top: 1px solid rgba(255,255,255,0.08); font-family: "Hanken Grotesk", "Segoe UI", Roboto, Arial, sans-serif; font-size: 1rem; line-height: 1.5; }
.sx-footer .sx-wrap { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 2rem; }
.sx-footer img { display: block; height: 28px; width: auto; margin-bottom: 0.8rem; }
.sx-footer p { margin: 0; max-width: 46ch; color: #aab6c3; }
.sx-footer h3 { margin: 0 0 0.7rem; color: #fff; font: 500 0.85rem/1.3 "IBM Plex Mono", Consolas, monospace; letter-spacing: 0; text-transform: none; }
.sx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.sx-footer a { color: #d7e0ea; text-decoration: none; }
.sx-footer a:hover { text-decoration: underline; }
.sx-footer .sx-fine { color: #8a98a6; margin-top: 1rem; font-size: 0.8rem; }

@media (max-width: 1024px) {
  .sx-nav, .sx-actions .sx-btn--ghost { display: none; }
  .sx-menu { display: inline-flex; }
  .sx-header.is-open .sx-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: #0a1628; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0.5rem max(20px, env(safe-area-inset-right, 0px)) 1rem max(20px, env(safe-area-inset-left, 0px)); }
  .sx-header.is-open .sx-nav a { padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 1.05rem; opacity: 1; }
  .sx-header.is-open .sx-nav a::after { display: none; }
  .sx-header.is-open .sx-nav .sx-nav__signin { display: block; }
  .sx-footer .sx-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .sx-footer .sx-wrap { grid-template-columns: 1fr; } }
@media print { .sx-header, .sx-footer { display: none; } }