/* EX REDESiGN — assets/css/footer.css
 * Dark footer + light footer / copyright bar / footer navigation links.
 *
 * Selectors: .ex-footer-copyright, .ex-footer-copyright-bar, .ex-footer-copyright-inner, .ex-footer-dark, .ex-footer-dark-inner, .ex-footer-main
 * Variables consumed: --color-footer-bg, --exr-container, --exr-gutter
 *
 * Sections (search anchors — grep `@section <name>`):
 *   @section footer                     L11-L74  Footer
 */

/* ── Footer ── */
.ex-footer-dark {
  background-color: var(--color-footer-bg) !important;
  width: 100%;
}
.ex-footer-dark-inner {
  /* container_width = OUTER 幅、gutter = 内側 INSET を代表するユーザー期待に沿う。
     alignwide との幅揃えは dynamic-css.php の .has-global-padding > .alignwide ルールで処理。 */
  max-width: var(--exr-container, 1200px);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: 2.5rem var(--exr-gutter, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.ex-footer-dark .wp-block-navigation .wp-block-navigation-item__content {
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Subdued nav text: ~45% opacity of bg-base so it works on any palette
     (off-white on dark footer / off-dark on light footer in Dark preset). */
  color: color-mix(in srgb, var(--color-bg-base), transparent 55%);
  transition: color 200ms;
  padding: 0 0.75rem;
}
.ex-footer-dark .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--color-bg-base);
}
/* Active page (current-menu-item) inside the footer would otherwise inherit
   the global nav rule color: var(--color-text-primary) — same as footer-bg,
   making the link invisible. Force bg-base here for full visibility. */
.ex-footer-dark .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.ex-footer-dark .wp-block-navigation .current-page-item > .wp-block-navigation-item__content {
  color: var(--color-bg-base) !important;
}
.ex-footer-dark .wp-block-paragraph,
.ex-footer-dark p {
  /* Subdued paragraph text: ~35% opacity of bg-base for paragraphs. */
  color: color-mix(in srgb, var(--color-bg-base), transparent 65%) !important;
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.04em;
  margin: 0;
}


/* ================================================================
   Footer — main area / copyright bar split
   ================================================================ */

/* main nav-area padding (was previously on .ex-footer-dark itself) */
.ex-footer-dark .ex-footer-main {
  padding: 2.5rem var(--exr-gutter, 2rem) 1.5rem;
}


/* ================================================================
   Footer — column layout (デバイスごとのカラム数をテーマ設定から受け取る)
   --exr-footer-cols-pc        : PC ビューポート（1025px+） のカラム数 (1–4)
   --exr-footer-cols-tablet    : タブレット（601–1024px）のカラム数 (1–2)
   --exr-footer-cols-smartphone: スマホ（≦600px）のカラム数 (1–2)
   parts/footer.html 上のコラムブロックは常に 4 カラムだが、display: grid に切り替えて
   grid-template-columns で表示カラム数を制御。余るカラムは次行にリフローされる。
   ================================================================ */
.ex-footer-dark .ex-footer-cols {
  display: grid;
  grid-template-columns: repeat(var(--exr-footer-cols-pc, 4), 1fr);
  width: 100%;
  gap: 2.5rem;
  margin: 0;
}
/* WP 本体の .wp-block-column { flex-basis: 0; flex-grow: 1; } を上書きし、
   grid アイテムとして自然な幅を取るようにする。 */
.ex-footer-dark .ex-footer-cols > .wp-block-column {
  flex-basis: auto;
  flex-grow: 0;
  width: auto;
  min-width: 0;
}
@media (max-width: 1024px) {
  .ex-footer-dark .ex-footer-cols {
    grid-template-columns: repeat(var(--exr-footer-cols-tablet, 2), 1fr);
  }
}
@media (max-width: 600px) {
  .ex-footer-dark .ex-footer-cols {
    grid-template-columns: repeat(var(--exr-footer-cols-smartphone, 1), 1fr);
  }
}
.ex-footer-dark .ex-footer-col-heading {
  font-size: var(--exr-fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-bg-base), transparent 35%);
  margin: 0 0 1rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.ex-footer-dark .ex-footer-col p {
  font-size: var(--exr-fs-xs);
  line-height: 1.7;
}
.ex-footer-dark .ex-footer-col-title {
  font-size: var(--exr-fs-base);
  font-weight: 600;
  color: var(--color-bg-base);
  margin: 0 0 4px;
}
.ex-footer-dark .ex-footer-col-title a {
  color: inherit;
  text-decoration: none;
}
.ex-footer-dark .ex-footer-col-tagline {
  font-size: var(--exr-fs-xs);
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-bg-base), transparent 60%);
  margin: 0;
}

/* nav inside a column is vertical; reset original horizontal padding */
.ex-footer-dark .ex-footer-cols .ex-footer-nav .wp-block-navigation__container {
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.ex-footer-dark .ex-footer-cols .ex-footer-nav .wp-block-navigation-item__content {
  padding: 0.15rem 0;
}

/* thin separator above copyright bar */
.ex-footer-dark .ex-footer-copyright-bar {
  /* Hairline above copyright: 8% opacity of bg-base so it adapts per palette. */
  border-top: 1px solid color-mix(in srgb, var(--color-bg-base), transparent 92%);
  padding: 1rem var(--exr-gutter, 2rem);
}
.ex-footer-dark .ex-footer-copyright-inner {
  max-width: var(--exr-container);
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.ex-footer-dark .ex-footer-copyright {
  margin: 0;
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.05em;
  /* opacity removed — the paragraph color (color-mix bg-base 35%) already
     provides the subdued look. Stacking opacity made it nearly invisible. */
}

/* keep light-mode override consistent when dark footer is disabled */
body:not(.footer-dark-off) .ex-footer-dark .ex-footer-copyright-bar { /* no-op hook for overrides */ }