/* 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;
  /* v1.4.68: text-transform: uppercase 廃止 (ブランド名 GREViA の "i" 保護)。 */
  /* 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).
   左右 padding は内側の .ex-footer-dark-inner が担当 (max-width + --exr-gutter でコンテナ幅 + 余白を一括処理)。
   ここでも両者に付けると padding が二重になり (スマホ 32px / タブ 48px / PC 64px)、
   トップページの「お知らせ / 最新記事」など他セクション (1 段 = --exr-gutter のみ) と不整合になるため左右 0 とする。 */
.ex-footer-dark .ex-footer-main {
  padding: 2.5rem 0 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;
}

/* フッターブランドエリア (ロゴ + サイト名 + タグライン、 全体リンク化対応) */
.ex-footer-dark .ex-footer-brand {
  gap: 12px;
  align-items: center;
}
.ex-footer-dark .ex-footer-brand .wp-block-site-logo img {
  height: min(var(--exr-logo-size, 22px), 48px) !important;
  width: auto !important;
  max-height: none !important;
  display: block;
}
.ex-footer-dark .ex-footer-brand .ex-site-title {
  /* ヘッダーの .ex-site-title (= header.css 251-260) と同等の font-size / weight を使い、
     色は フッターの dark 背景に合わせて bg-base に。 .ex-footer-dark p の !important
     rule を上書きするため、 ここも !important が必須。 */
  font-size: var(--exr-fs-xl) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: var(--color-bg-base) !important;
  margin: 0 !important;
  line-height: 1.2;
}
.ex-footer-dark .ex-footer-brand .ex-footer-tagline {
  font-size: var(--exr-fs-xs);
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-bg-base), transparent 60%);
  margin: 0;
}
.ex-footer-dark .ex-footer-brand-text { gap: 2px; }
/* フッター内 .ex-header-brand-link は色を継承 (dark 上の inherit = light text) */
.ex-footer-dark .ex-header-brand-link { color: inherit; }

/* 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 */ }


/* =========================================================================
   CTA フッターエリア (grevia/cta-area)
   ------------------------------------------------------------------------
   parts/footer.html の gmap 前後に配置されるローダー。
   .alignfull = 背景を画面全幅 / それ以外 = 本文幅で中央寄せ。
   中身は template-part 'cta-footer-area' を site editor で編集。
   ========================================================================= */
.exr-cta-area {
    /* フッター本体との隔たり、上下のセクションとの詰まり防止 */
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    /* v1.4.7: CTA セクションは「常に dark + 常に light text」で固定 (絶対色、preset 非依存)。
       v1.4.6 までは text-primary slot 経由で bg を取っていたが、Dark preset では text-primary
       が #F1F5F9 (light) に反転するため CTA wrap が白くなり、その上の見出し / 本文も
       surface slot (Dark で #1E293B) で書かれていたため text が消えていた。
       is-style-ex-section-dark と同じ「always dark」設計に統一。 */
    background-color: #0F172A;
    color: #F1F5F9;
}
/* 子要素の見出し / 本文も明示的に light text に固定 (preset 非依存)。
   has-*-color クラスが付いていれば WP の specificity でユーザー指定が勝つ。 */
.exr-cta-area > h1:not(.has-text-color),
.exr-cta-area > h2:not(.has-text-color),
.exr-cta-area > h3:not(.has-text-color),
.exr-cta-area > h4:not(.has-text-color),
.exr-cta-area > h5:not(.has-text-color),
.exr-cta-area > h6:not(.has-text-color),
.exr-cta-area > p:not(.has-text-color) {
    color: #F1F5F9;
}

.exr-cta-area.alignfull {
    /* 画面全幅 — alignfull クラス付与のみで WP が本文コンテナーを越えて伸ばす */
    width: auto;
    max-width: none;
}

.exr-cta-area:not(.alignfull) {
    /* 本文幅 (constrained) — wide-size で中央寄せ。
       WP の is-layout-constrained と同じサイズ感を提供。 */
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
}

/* =========================================================================
   会社情報エリア (grevia/company-info-area または footer-stack 経由)
   ------------------------------------------------------------------------
   parts/company-info-area テンプレートパーツを wrap する。
   theme.json の custom.exr.section.padY (clamp(3rem, 6vw, 5rem)) と同じ上下余白を使うと
   トップページの他セクションとリズムが揃う。
   ========================================================================= */
.exr-company-info-area {
    /* 上下余白は EX REDESiGN 設定 > フッター > 会社情報セクション > 「上下余白」 で制御 (v1.4.58+ 移設)。
       dynamic-css.php が --exr-company-info-pad-y を clamp(PC*0.6, 6vw, PC) で出力する。
       未出力時は section--pad-y 、それもなければ定数 clamp を fallback。 */
    padding-block: var(--exr-company-info-pad-y, var(--wp--custom--exr--section--pad-y, clamp(3rem, 6vw, 5rem)));
    background-color: var(--wp--preset--color--surface, #ffffff);
    color: var(--wp--preset--color--text-primary, #0F172A);
}
.exr-company-info-area.alignfull {
    width: auto;
    max-width: none;
}
.exr-company-info-area:not(.alignfull) {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
}

/* スマホ・タブレット時（ WP の wp:columns が縦積みになるブレイクポイント）に、
   会社名/住所/電話の左寄せテキストを中央揃えにしてバランスを復元。
   右カラムの営業時間テーブルはそのまま。 */
@media (max-width: 781px) {
    .exr-company-info-area .wp-block-columns > .wp-block-column:first-child {
        text-align: center;
    }
    /* table は display:table のため text-align では中央寄せにならない。
       wrapping figure と table 自体に margin-inline:auto を当てる。 */
    .exr-company-info-area .wp-block-columns > .wp-block-column:nth-child(2) .wp-block-table,
    .exr-company-info-area .wp-block-columns > .wp-block-column:nth-child(2) .wp-block-table > table {
        margin-inline: auto;
    }
}