/* chrome.css — shared v2 page chrome (body, header, mega-menu, footer).
   Loaded by every page: the top page (with heroui.css + top.css) and the tool
   pages (with heroui-lite.css + the legacy app.css, which sits in @layer legacy).
   Colours: HeroUI semantic tokens only, no raw values. Classes use the bt- prefix. */

/* One font stack for HeroUI (Tailwind's --font-sans) and the legacy tokens. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.bt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.bt-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* ---- Header ---------------------------------------------------------- */
.bt-header {
  position: relative;
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bt-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 10px;
}
.bt-logo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.bt-logo__mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--foreground);
  color: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bt-logo__text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.bt-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Mega-menu (toggled by assets/js/nav.js via .is-open) */
.bt-mega-menu {
  display: none;
  position: absolute;
  z-index: 10;
  top: 100%;
  left: clamp(16px, 4vw, 40px);
  right: clamp(16px, 4vw, 40px);
  padding: 24px;
  border-radius: 24px;
  background: var(--overlay);
  color: var(--overlay-foreground);
  box-shadow: var(--overlay-shadow);
}
.bt-mega-menu.is-open { display: block; }

.bt-mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px 24px;
}

.bt-mega-menu .mega-menu__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bt-mega-menu .mega-menu__heading {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.bt-mega-menu .mega-menu__col a {
  padding: 4px 0;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  border-radius: 6px;
}
.bt-mega-menu .mega-menu__col a:hover { text-decoration: underline; }
.bt-mega-menu .mega-menu__col a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Tool pages load HeroUI without Tailwind preflight, so reset the few
   elements the chrome uses (UA button borders, legacy hr / link rules). */
.bt-header a:not(.button),
.bt-footer a { color: inherit; }
.bt-header a,
.bt-footer a { text-decoration: none; }
.bt-header button { margin: 0; border: 0; font-family: inherit; }
.bt-header h3 { line-height: inherit; }

/* ---- Tool page body (legacy content inside <main>, see header.php) ---- */
.bt-page {
  padding-top: clamp(16px, 3vw, 32px);
  padding-bottom: 48px;
}

/* ---- Footer ---------------------------------------------------------- */
.bt-footer { padding-bottom: 40px; }
.bt-footer__rule { margin: 0 0 24px; }
.bt-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.bt-footer__rule { border: 0; }