/* Site tagline (text + insertion live in tagline.js).
   Wide screens: sits to the right of the logo in the top bar.
   Narrow screens (760px and under): leaves the bar and becomes a slim strip
   under it. The strip is not sticky, so it scrolls away while the bar stays pinned. */
.tagline{
  font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap;
  color:var(--white,#F3F5F7);
  padding-left:24px; border-left:1px solid var(--line,#262B36);
}
.tagline-strip{ display:none; }
@media (max-width:900px){
  .tagline{ font-size:12px; padding-left:14px; }
}
@media (max-width:760px){
  .topbar-left .tagline{ display:none; }
  .tagline-strip{
    display:block; text-align:center; font-size:12.5px; font-weight:600; line-height:1.3;
    color:var(--white,#F3F5F7); background:var(--bg-elevated,#171B24);
    padding:8px var(--gutter,14px); border-bottom:1px solid var(--line,#262B36);
  }
}

/* Phones (700px and under) on pages that have the "Explore map" row: the
   tagline lives in that row's empty left side, so the separate strip is only
   needed for the 701-760px band, where that row is hidden. */
.mobile-nav-tagline{ display:none; }
@media (max-width:700px){
  .tagline-strip--tablet-only{ display:none; }
  .mobile-nav-tagline{
    display:block; flex:1 1 auto; min-width:0;
    font-size:12.5px; font-weight:600; line-height:1.3; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; color:var(--white,#F3F5F7);
  }
  /* Homepage only: at the top level the "Japan" crumb repeats what the tagline
     says, so the tagline takes its place. Once a region is picked (Back shows)
     the Back button and breadcrumb take the slot back. */
  .mobile-nav-back:not(.visible) ~ .mobile-nav-crumb{ display:none; }
  .mobile-nav-back.visible ~ .mobile-nav-tagline{ display:none; }
}
/* Very small phones: drop ", mapped" so the rest fits on one line. */
@media (max-width:370px){
  .tagline-tail{ display:none; }
}
/* Line the row's edges up with the logo: the shared phone margin. */
@media (max-width:700px){
  .mobile-nav-widget{ padding-left:var(--gutter,14px); padding-right:var(--gutter,14px); }
}

/* Narrow-column pages (the Q&A pages, no side-by-side layout): a strip under
   the header at every width, left-aligned with the logo. Kept last so it wins
   over the generic strip rules above. */
.tagline-strip--column{
  display:block; text-align:left; padding:8px 20px;
  font-size:12.5px; font-weight:600; line-height:1.3;
  color:var(--white,#F3F5F7); background:var(--bg-elevated,#171B24);
  border-bottom:1px solid var(--line,#262B36);
}