/*
 * SHARED between the landing page and the WordPress blog theme.
 * Source of truth: src/shared.css. `npm run sync:css` copies this file (and
 * the font) into wordpress/themes/myoyaji/ — never edit the copy there.
 * Keep this file to things BOTH sites use: tokens, reset, nav, footer.
 */

:root {
  --purple:#c46fd8;
  --purple-dark:#9b4bb0;
  --orange-grad-start:#f5a826;
  --orange-grad-end:#f0c840;
  --white:#fafafc;
  --off-white:#fafafa;
  --dark:#1a1a1a;
  --gray:#555;
  --light-gray:#f0f0f0;
  --bubble-bg:#fafafc;
  --font-body-en:"Inter", sans-serif;
  --font-body-ja:"Zen Maru Gothic", sans-serif;
  --font-display:"Fredoka One", cursive;
  --font-ja-display:"Yomogi", cursive;
  --font-oyaji:"OyajiDisplay", "Fredoka One", cursive
}
*,
:before,
:after {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth
}
body {
  font-family:var(--font-body-en);
  color:var(--dark);
  background:var(--white);
  -webkit-user-select:none;
  user-select:none;
  line-height:1.7
}
img {
  pointer-events:none;
  -webkit-user-drag:none
}
body.lang-ja {
  font-family:var(--font-body-ja)
}
img {
  max-width:100%;
  display:block
}
a {
  color:inherit;
  text-decoration:none
}
nav {
  z-index:100;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background:#fafafceb;
  border-bottom:none;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:56px;
  padding:0 2rem;
  display:grid;
  position:fixed;
  top:0;
  left:0;
  right:0
}
.nav-logo {
  font-family:var(--font-oyaji);
  color:var(--purple);
  letter-spacing:.08em;
  font-size:1.15rem
}
.nav-links {
  align-items:center;
  gap:1.5rem;
  list-style:none;
  display:flex
}
.nav-links a {
  color:var(--dark);
  opacity:.75;
  font-size:.85rem;
  font-weight:600;
  transition:opacity .2s
}
.nav-links a:hover {
  opacity:1
}
.nav-right {
  justify-content:flex-end;
  align-items:center;
  gap:.75rem;
  display:flex
}
.btn-lang {
  font-family:var(--font-body-en);
  letter-spacing:.08em;
  border:2px solid var(--purple);
  color:var(--purple);
  cursor:pointer;
  background:0 0;
  border-radius:999px;
  padding:5px 14px;
  font-size:.78rem;
  font-weight:700;
  transition:all .2s
}
.btn-lang:hover {
  background:var(--purple);
  color:#fff
}

footer.site-footer {
  background:var(--dark);
  color:#fff6;
  text-align:center;
  padding:2rem;
  font-size:.8rem
}
footer.site-footer a,
footer.site-footer span {
  color:var(--purple)
}

@media (max-width: 768px) {
  nav {
    grid-template-columns:1fr auto;
    padding:0 1rem
  }
  .nav-links {
    display:none
  }
  .nav-right {
    gap:.5rem
  }
}

/* ── EN/JA switching: both languages sit in the DOM, CSS shows one ── */
[data-lang=en] {
  display:block
}
[data-lang=ja],
body.lang-ja [data-lang=en] {
  display:none
}
body.lang-ja [data-lang=ja] {
  display:block
}
span[data-lang=en] {
  display:inline
}
span[data-lang=ja],
body.lang-ja span[data-lang=en] {
  display:none
}
body.lang-ja span[data-lang=ja] {
  display:inline
}

/* utility */
.is-hidden {
  display:none
}