/* Shared site chrome — header, nav, brand, disclaimer band, footer.
   Loaded by every page (home + each tool). Home-specific layout stays in home.css. */

.site-header { position: sticky; z-index: 20; top: 0; color: #fff; background: rgba(22,32,43,.97); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.nav-wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.1; }
.brand-mark {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: radial-gradient(circle, rgba(255,255,255,.12), rgba(145,183,242,.04) 62%, transparent 72%);
  border-radius: 50%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.28));
}
.brand-copy { display: flex; flex-direction: column; }
.brand-wordmark { display: block; width: 168px; height: auto; }
.brand-subtitle { margin-top: 4px; color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .04em; }
.site-nav { display: flex; align-items: center; gap: 27px; }
.site-nav a { color: rgba(255,255,255,.78); font-size: 12px; font-weight: 600; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; }
.site-nav .nav-cta { padding: 8px 12px; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; }
.menu-button { display: none; width: 44px; height: 44px; padding: 9px; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; }
.menu-button > span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: currentColor; }
.mobile-nav { padding: 4px 20px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.mobile-nav a { display: flex; min-height: 44px; align-items: center; padding: 10px 0; color: rgba(255,255,255,.8); text-decoration: none; }
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: #fff; }

.notice-band { background: #fbf4e6; border-bottom: 1px solid #eadbbd; }
.notice-inner { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding-block: 17px; }
.notice-label { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.notice-inner p { margin: 0; color: #665938; font-size: 12px; }

.site-footer { color: #fff; background: #111923; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; padding: 48px 0 34px; }
.footer-wordmark { display: block; width: 174px; height: auto; }
.footer-inner p { margin: 5px 0 0; color: rgba(255,255,255,.5); font-size: 11px; }
.footer-links { display: flex; gap: 24px; align-items: center; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; color: rgba(255,255,255,.64); font-size: 12px; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: #fff; }
.footer-links .footer-support-link {
  padding: 8px 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  font-weight: 600;
}
.footer-links .footer-support-link:hover,
.footer-links .footer-support-link:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.52);
}
.footer-social-link {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.34);
}
.footer-social-icon { display: block; width: 20px; height: 20px; object-fit: contain; }
.footer-legal { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.footer-legal:hover, .footer-legal:focus-visible { color: #fff; text-decoration-color: currentColor; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 26px; color: rgba(255,255,255,.62); border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; }
.footer-bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.footer-bottom-links a { display: inline-flex; min-height: 44px; align-items: center; }

@media (hover: none), (pointer: coarse) {
  .site-nav a { display: inline-flex; min-height: 44px; align-items: center; }
}

@media (max-width: 820px) {
  .site-nav { display: none; }
  .menu-button { display: block; }
}
@media (max-width: 560px) {
  .brand-mark { width: 38px; height: 38px; }
  .brand-wordmark { width: 150px; }
  .brand-subtitle { display: none; }
  .notice-inner { grid-template-columns: 1fr; gap: 4px; }
  .footer-inner, .footer-bottom { flex-direction: column; }
  .footer-links { flex-wrap: wrap; }
  .footer-bottom-links { margin-inline: -8px; }
  .footer-bottom-links a { padding-inline: 8px; }
}