/* ========================================
   LP additions (shared by kawasaki_minato.html and asama_ryo.html,
   and by their English versions in en/)
   Loaded after the theme file. Styles the language switch in the
   header, the footer links to the stay index and to the other
   property, and the operator block below them.
   ======================================== */

.footer__links {
  margin-bottom: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.footer__links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-size: 0.85rem;
}

.footer__links-list a {
  display: inline-block;
  padding: 4px 0;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: var(--transition);
}

.footer__links-list a:hover {
  color: var(--color-accent-light);
}

@media (max-width: 768px) {
  .footer__links-list {
    flex-direction: column;
    gap: 8px;
  }
}

/* Operator name and tagline, between the links and the copyright line */
.footer__operator {
  margin-bottom: 24px;
  text-align: center;
  color: var(--color-text-light);
}

.footer__operator-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.footer__operator-tagline {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.footer__operator-note {
  margin-top: 6px;
  font-size: 0.82rem;
}

/* Lets the tagline break only at its comma on narrow screens */
.footer__nowrap {
  white-space: nowrap;
}

/* ----------------------------------------
   Language switch in the header nav (li.header__lang)
   The wording lives in the HTML, so the same rules serve the Japanese
   and the English LP. Colors come from the theme variables (indigo for
   Kawasaki, deep green for Asama).
   ---------------------------------------- */

.header__lang {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--color-white);
  transition: var(--transition);
}

.header--scrolled .header__lang {
  color: var(--color-text);
}

.header__lang-current {
  font-weight: 500;
  border-bottom: 1px solid var(--color-gold);
}

.header__lang-sep {
  opacity: 0.6;
}

.header__lang a:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.header--scrolled .header__lang a:focus-visible {
  outline-color: var(--color-accent);
}

/* PC: the nav has seven items with the switch. From 769px to 1100px the
   gaps shrink from 32px to 16px so the row stays on one line. */
@media (min-width: 769px) {
  .header__nav-list {
    gap: clamp(16px, calc(4.834vw - 21.17px), 32px);
  }
}

/* Mobile: the switch sits inside the hamburger menu (light background) */
@media (max-width: 768px) {
  .header__lang {
    font-size: 1rem;
    color: var(--color-text);
  }

  .header__lang a:focus-visible {
    outline-color: var(--color-accent);
  }
}