/* ==================================================================
   PROJECT KAIROS VISUAL POLISH v3.5.12
   Header density / editorial rhythm / contrast / image handling
   ================================================================== */

/* Compact global header / navigation.
   Quiet editorial header with Linear-like information density. */
.header-container{
  border-bottom: 1px solid rgba(97, 88, 78, .16);
  background: rgba(246, 243, 237, .96);
}

.header-container-in.hlt-top-menu{
  min-height: 60px;
  padding-block: 4px;
  align-items: center;
}

.logo-text a,
.site-name-text{
  font-size: clamp(1.28rem, 1.7vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.site-description{
  margin-top: .18rem;
  font-size: .56rem;
  line-height: 1.2;
  letter-spacing: .11em;
}

body .navi-in > ul{
  align-items: center;
  gap: 2px;
}

body .navi-in > ul .menu-item > a{
  min-height: 38px;
  padding-inline: .72rem;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .025em;
}

body .navi-in > ul .menu-item > a::after{
  right: .72rem;
  bottom: 4px;
  left: .72rem;
}

/* Compact dropdowns.
   Width follows content instead of inheriting Cocoon's generous submenu width. */
body .navi-in > ul > .menu-item > .sub-menu{
  width: max-content;
  min-width: 132px;
  max-width: 190px;
  border: 1px solid rgba(97, 88, 78, .16);
  background: rgba(246, 243, 237, .985);
  box-shadow: 0 10px 24px rgba(44, 41, 37, .065);
}

body .navi-in > ul > .menu-item > .sub-menu > .menu-item{
  width: auto;
  min-width: 0;
}

body .navi-in > ul .sub-menu .menu-item > a{
  min-width: 0;
  min-height: 0;
  padding: .48rem .68rem;
  font-size: .70rem;
  line-height: 1.25;
  white-space: nowrap;
}

/* Brand pages: preserve spaciousness, remove unnecessary full-screen gaps. */
body.kairos-brand-page .content{
  margin-top: clamp(1.25rem, 2.5vw, 2.6rem);
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

body.kairos-brand-page .main{
  padding:
    clamp(18px, 2.3vw, 32px)
    clamp(24px, 4.2vw, 62px)
    clamp(58px, 6.5vw, 88px);
}

body.kairos-brand-page .article .yoin-page > section:not(.yoin-dark-section){
  padding-block: clamp(52px, 5.5vw, 76px);
}

body.kairos-brand-page .article .yoin-page > section.yoin-page-hero{
  padding-top: clamp(18px, 2vw, 30px);
  padding-bottom: clamp(58px, 6vw, 82px);
}

body.kairos-brand-page .article .yoin-display{
  margin-bottom: 30px;
  font-size: clamp(47px, 3.9vw, 66px);
}

body.kairos-brand-page .article .yoin-lead{
  margin-bottom: 24px;
  color: #342f2a;
  font-size: clamp(19px, 1.32vw, 22px);
  line-height: 1.65;
}

body.kairos-brand-page .article .yoin-page section >
p:not(.yoin-eyebrow):not(.yoin-display):not(.yoin-lead){
  margin-bottom: 21px;
  color: #474038;
  font-size: 16px;
  line-height: 1.84;
}

body.kairos-brand-page .article .yoin-page h2{
  margin-bottom: 24px;
  font-size: clamp(35px, 3vw, 49px);
}

body.kairos-brand-page .article .yoin-page blockquote{
  margin: 32px 0 38px;
  padding: 20px 30px;
}

body.kairos-brand-page .article
.yoin-page .yoin-values{
  margin-top: 40px;
}

body.kairos-brand-page .article
.yoin-page .yoin-value{
  min-height: 220px;
  padding: 29px 26px 32px;
}

body.kairos-brand-page .article .yoin-diagram{
  margin: clamp(32px, 4vw, 48px) auto clamp(38px, 4.8vw, 58px);
}

body.kairos-brand-page .article .yoin-dark-section{
  margin-top: clamp(50px, 6vw, 76px) !important;
  padding: clamp(52px, 6vw, 76px);
}

body.kairos-brand-page .article .yoin-note{
  margin-block: clamp(42px, 5vw, 64px);
}

/* Broken external media should not leave a collapsed line of alt text. */
body.kairos-brand-page .yoin-diagram img{
  min-height: 180px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .header-container-in.hlt-top-menu{
    min-height: 54px;
    padding-block: 2px;
  }

  .logo-text a,
  .site-name-text{
    font-size: 1.22rem;
  }

  .site-description{
    display: none;
  }

  .mobile-header-menu-buttons{
    min-height: 48px;
    border-bottom: 1px solid rgba(97, 88, 78, .16);
    background: rgba(246, 243, 237, .97);
  }

  .mobile-header-menu-buttons .menu-button > a{
    min-height: 48px;
    padding-inline: 10px;
  }

  .menu-drawer a{
    padding: 12px 18px;
    font-size: .9rem;
    line-height: 1.35;
  }

  body.kairos-brand-page .article .yoin-page > section:not(.yoin-dark-section){
    padding-block: 48px;
  }

  body.kairos-brand-page .article .yoin-page > section.yoin-page-hero{
    padding-bottom: 62px;
  }
}

/* ------------------------------------------------------------------
   LANGUAGE SWITCH FOUNDATION
   Styling only. No plugin/runtime dependency is introduced in v3.5.11.
   ------------------------------------------------------------------ */

.kairos-language-switch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--kairos-font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
}

.kairos-language-switch a{
  color: #6b6259;
  text-decoration: none;
  transition: color .16s ease, opacity .16s ease;
}

.kairos-language-switch a:hover,
.kairos-language-switch a:focus-visible{
  color: var(--kairos-bronze);
}

.kairos-language-switch [aria-current="page"],
.kairos-language-switch .is-current{
  color: var(--kairos-charcoal);
}

.kairos-language-switch__separator{
  color: rgba(97, 88, 78, .42);
  font-weight: 400;
}

/* Optional WordPress menu classes for the future language switch.
   These rules do nothing until an admin explicitly assigns the classes. */
body .navi-in > ul .menu-item.kairos-lang-item > a{
  min-width: 0;
  padding-inline: .38rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
}

body .navi-in > ul .menu-item.kairos-lang-separator > a{
  pointer-events: none;
  padding-inline: 0;
  color: rgba(97, 88, 78, .42);
}

@media (max-width: 768px){
  .kairos-language-switch{
    gap: 8px;
    font-size: 12px;
  }

  body .menu-drawer .menu-item.kairos-lang-item > a{
    display: inline-block;
    width: auto;
    padding: 10px 8px;
    font-size: .8rem;
  }
}

/* ------------------------------------------------------------------
   POLYLANG COMPACT SWITCH
   Treat JP / EN as one compact control instead of full-width nav items.
   ------------------------------------------------------------------ */

@media (min-width: 769px){
  body .navi-in > ul > li.lang-item{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Keep the language group at the far right and force JP → EN order. */
  body .navi-in > ul > li.lang-item-ja{
    order: 90;
    margin-left: 14px;
    padding-right: 8px;
  }

  body .navi-in > ul > li.lang-item-en{
    order: 91;
    margin-left: 0;
    padding-left: 8px;
  }

  body .navi-in > ul > li.lang-item-ja::after{
    content: "|";
    position: absolute;
    top: 50%;
    right: -1px;
    color: rgba(97, 88, 78, .42);
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
  }

  body .navi-in > ul > li.lang-item > a{
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px;
    padding: 0 2px !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
    line-height: 38px !important;
    letter-spacing: .06em !important;
  }

  /* The language switch is a utility, not a primary-navigation section. */
  body .navi-in > ul > li.lang-item > a::after{
    display: none !important;
  }

  body .navi-in > ul > li.lang-item.current-lang > a,
  body .navi-in > ul > li.lang-item > a:hover,
  body .navi-in > ul > li.lang-item > a:focus-visible{
    color: var(--kairos-bronze);
  }
}

@media (max-width: 768px){
  body .menu-drawer li.lang-item{
    display: inline-block;
    width: auto;
    min-width: 0;
  }

  body .menu-drawer li.lang-item-ja{
    margin-left: 10px;
  }

  body .menu-drawer li.lang-item-ja::after{
    content: "|";
    display: inline-block;
    margin: 0 5px;
    color: rgba(97, 88, 78, .42);
    font-size: 11px;
  }

  body .menu-drawer li.lang-item > a{
    display: inline-block;
    width: auto;
    min-width: 0;
    padding: 10px 2px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
  }
}