/* ============================================
   Language Toggle Styles for SimpleModeling.org
   Author: AsamiOffice
   Purpose: Lightweight language toggle for EN/JA
            integrated with Bootstrap 5 + Material Kit
   ============================================ */

/* Root-level design tokens for consistency and theme control */
:root {
  --lang-toggle-bg: #e0e0e0;             /* Background of the toggle container */
  --lang-toggle-hover: #d0d0d0;         /* Hover background for inactive buttons */
  --lang-toggle-active-bg: #ffffff;     /* Background of the active button */
  --lang-toggle-active-color: #000000;  /* Text color for active button */
  --lang-toggle-default-color: #555555; /* Text color for inactive buttons */
}

/* Wrapper for the language toggle — rounded and padded to blend with nav bar */
.lang-toggle-wrapper {
  background-color: var(--lang-toggle-bg);
  border-radius: 50rem;     /* Full rounded edges (pill shape) */
  padding: 3px;              /* Slight spacing around the inner toggle */
  display: inline-block;     /* So it fits inline in nav bar */
}

/* Flex container for language buttons */
.lang-toggle {
  display: flex;
  border-radius: 50rem;     /* Matches outer wrapper */
  overflow: hidden;         /* Ensures clean rounded clipping */
}

/* Base style for each language button */
.lang-btn {
  padding: 4px 12px;         /* Smaller padding for compact appearance */
  font-size: 0.75rem;        /* Small readable text */
  font-weight: 500;
  text-decoration: none;
  color: var(--lang-toggle-default-color);
  background-color: transparent;
  border: none;
  border-radius: 50rem;      /* Individual pill shape */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover effect for better interactivity */
.lang-btn:hover {
  background-color: var(--lang-toggle-hover);
}

/* Active button styling — visually highlighted */
.lang-btn.active {
  background-color: var(--lang-toggle-active-bg);
  color: var(--lang-toggle-active-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle depth effect */
}

.hero-overlay-card {
  position: relative;
  z-index: 3;
  margin-top: -100px; /* ヒーローセクションの高さと重なり具合で調整 */
  background: white;
  border-radius: 1rem;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.hero-overlay-card-old {
  position: relative;
  z-index: 3;
  margin-top: -100px; /* 必要に応じて調整 */
}