/* =========================================================
   jpvn.org Ethnology Museum Panels
   Shared CSS (no-omit / full)
   Location: /css/etho-common.css
   Fonts:    /css/fonts/*.ttf
   ========================================================= */

/* -------------------------
   Root variables
------------------------- */
:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --muted2: #64748b;
  --line: #dbe3ef;

  --brand: #1d4ed8;
  --brand2:#0ea5e9;
  --accent:#0b5cff;

  --shadow: 0 10px 30px rgba(2,8,23,.08);
  --shadow2: 0 6px 18px rgba(2,8,23,.08);

  --radius: 16px;
  --radius-sm: 10px;

  --pad: 18px;
  --pad-lg: 24px; /* large padding */
  --pad-xl: 32px; /* extra large padding */

  --max: 1120px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* -------------------------
   Font faces
   (You said only these 3 exist)
   - /css/fonts/NotoSans-Regular.ttf
   - /css/fonts/NotoSans-Bold.ttf
   - /css/fonts/NotoSans-SemiBold.ttf
------------------------- */
@font-face{
  font-family: "NotoSans";
  src: url("fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: "NotoSans";
  src: url("fonts/NotoSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face{
  font-family: "NotoSans";
  src: url("fonts/NotoSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* -------------------------
   Base reset
------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "NotoSans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img{ max-width:100%; height:auto; }
a{ color: var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

hr{
  border:none;
  border-top:1px solid var(--line);
  margin: 18px 0;
}

small{ color: var(--muted2); }

/* -------------------------
   Utility
------------------------- */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: var(--pad);
}

.muted{ color: var(--muted); }
.muted2{ color: var(--muted2); }

.kbd{
  font-family: var(--mono);
  font-size: .92em;
  padding: .1em .35em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

/* -------------------------
   Buttons / pills
------------------------- */
.btn, button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(2,8,23,.06);
  user-select:none;
}
.btn:hover, button.btn:hover{
  background: #eef2ff;
  text-decoration:none;
}
.btn.primary, button.btn.primary{
  border-color: rgba(29,78,216,.25);
  background: rgba(29,78,216,.12);
  color: #0b2e9b;
}

.pillbar{
  display:flex;
  gap: .35rem;
  align-items:center;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f8fafc;
  cursor:pointer;
  font-weight: 700;
}
.pill.primary{
  border-color: rgba(29,78,216,.25);
  background: rgba(29,78,216,.12);
  color:#0b2e9b;
}

/* -------------------------
   Language blocks
   - JS sets html[data-lang="vi"|"ja"]
------------------------- */
html[data-lang="vi"] .lang-ja,
body[data-lang="vi"] .lang-ja{ display:none !important; }

html[data-lang="ja"] .lang-vi,
body[data-lang="ja"] .lang-vi{ display:none !important; }

.lang-ja{
  font-family:"NotoSans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.lang-vi{
  font-family:"NotoSans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* -------------------------
   TOPBAR (ethnic-xx pages)
   NOTE: these pages use .topbar / .topbar-inner / .wrapper
------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(246,248,251,.86);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--pad); /* <- was var(--pad-lg). Now stable. */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.topbar .brand{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.topbar .brand .site{
  font-weight: 800;
  letter-spacing: .2px;
}
.topbar .brand .sub{
  font-size: .92rem;
  color: var(--muted2);
}

/* -------------------------
   Wrapper (ethnic pages)
------------------------- */
.wrapper{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--pad);
}
.wrapper h1{
  margin: 6px 0 4px;
  line-height: 1.25;
  font-size: clamp(1.35rem, 2.1vw, 2.0rem);
}
.wrapper h1 .lang-ja,
.wrapper h1 .lang-vi{
  display:block;
}
.wrapper .meta{
  color: var(--muted2);
  margin: 0 0 12px;
  font-size: .96rem;
}

/* -------------------------
   Nav row (ethnic pages)
------------------------- */
.nav{
  display:flex;
  flex-wrap:wrap;
  gap: .45rem;
  margin: 10px 0 18px;
}
.nav .btn{
  padding: .5rem .85rem;
}

/* -------------------------
   Figure / photo containers
------------------------- */
.figure{
  margin: 14px 0;
}
.figure img{
  width:100%;
  height:auto;
  max-width:100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display:block;
}

/* ethnic pages often use <img class="photo-img" ...> */
.photo-img{
  width:100%;
  height:auto;
  max-width:100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display:block;
}

/* -------------------------
   Cards/sections (index.html)
------------------------- */
main{
  display:block;
}
main > h1{
  margin: 18px 0 6px;
  padding-left: var(--pad);
  padding-right: var(--pad);
  max-width: var(--max);
  margin-left:auto;
  margin-right:auto;
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
}
.lead{
  margin: 0 0 16px;
  padding-left: var(--pad);
  padding-right: var(--pad);
  max-width: var(--max);
  margin-left:auto;
  margin-right:auto;
  color: var(--muted2);
  font-size: 1.0rem;
}

/* Make sections align to the same left margin as header/content */
section{
  max-width: var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Section heading */
section h2{
  margin: 18px 0 10px;
  font-size: 1.2rem;
}

/* -------------------------
   TOC cards (index.html)
------------------------- */
.toc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0 22px;
}
.toc-item{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(2,8,23,.06);
  padding: 12px 12px;
}
.toc-item a{
  display:block;
  text-decoration:none;
}
.toc-item a:hover{
  text-decoration:none;
}
.toc-title{
  font-weight: 800;
  margin: 0;
  color: var(--text);
}
.toc-sub{
  margin-top: 4px;
  color: var(--muted2);
  font-size: .95rem;
}

/* Ensure language lines are separate in TOC cards */
.toc-item .toc-title .lang-vi,
.toc-item .toc-title .lang-ja{
  display:block;
}

/* -------------------------
   Site header (index.html)
------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(10px);
  background: rgba(246,248,251,.86);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  padding: 12px var(--pad);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* -------------------------
   Notes
------------------------- */
.note{
  background: rgba(2,132,199,.06);
  border: 1px solid rgba(2,132,199,.18);
  color: #0f2c44;
  border-radius: 12px;
  padding: 10px 12px;
}

/* -------------------------
   Responsive tweaks
------------------------- */
@media (max-width: 640px){
  .topbar-inner,
  .site-header .container,
  .wrapper{
    padding-left: 12px;
    padding-right: 12px;
  }
  main > h1,
  .lead,
  section{
    padding-left: 12px;
    padding-right: 12px;
  }
  .toc-grid{
    grid-template-columns: 1fr;
  }
}

/* ---- Image sizing (ethnic pages) ---- */
.photo-img,
.figure img{
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
}
.figure{
  margin: 14px 0;
}
.figure img{
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
@media (min-width: 900px){
  /* keep large photos from becoming too huge on wide screens */
  .figure, .photo{
    max-width: 980px;
    margin-left:auto;
    margin-right:auto;
  }
  .photo-img, .figure img{
    max-width: 980px;
  }
}