/*
Theme Name: Art Gallery Theme
Author: Sugoi Kaizen
Description: Simple Art Gallery theme
Version: 1.1
License: GPLv2 or later
*/

/* ==========================================================================
   1. Import & Base Setup
   ========================================================================== */
@import url("https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css");
/* 全要素を border-box にする */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  max-width: 1200px;
  margin: 0 auto;
  color: #222;
  font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tachyonsの .sans-serif クラスが優先される場合の上書き */
.sans-serif {
    font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
}

/* Front Page: Sticky Footer & Vertical Center Layout
   トップページのみ、画面いっぱいに広げてフッターを最下部へ 
*/

body.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 画面の高さ100%を確保 */
}

body.home main {
  flex: 1; /* 余白をすべてメインエリアが埋めることでフッターを押し下げる */
  
  /* ↓もしメインコンテンツ（ロゴなど）も「画面の上下中央」に置きたい場合は以下も有効化 */
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

h1, h2, h3 {
  margin-bottom: 1rem;
}

/* Base Elements Reset (WordPress Content) */
p {
  margin-top: 0;
}

.front-hd {
  margin: clamp(24px, calc(32 / 960 * 100vw), 32px) auto;
}
.w-fit {
  width: fit-content;
}
/* ==========================================================================
   2. Tachyons Overrides & Extensions (Helpers)
   ========================================================================== */
/* Typography: Clamp overrides for fluid text */
@media screen and (min-width: 30em) {
  h1.f3 {  font-size: 22px; }/* もしくは 1.375rem */
  .page-artists .f5-ns {
    font-size: 0.8rem;
  }
  .page-artists.mw8 {
    max-width: 900px;
  }
}
.f1-l { font-size: clamp(42px, 5.625vw, 54px); }
.f4-l { font-size: clamp(14px, 1.87vw, 18px); }
.lh-copy { line-height: 2; } /* Default is 1.5 */
.author .f1-l { font-size: 42px; }
/* Layout Helpers */
.w4 { width: 150px; height: 150px; } /* Override default 8rem */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-5 { gap: 3rem; }

.f3 {
  font-size: 1.375rem;
}
/* スマホ用（画面幅が768px以下のとき） */
@media screen and (max-width: 768px) {

  .f1-l { font-size: clamp(36px, 6vw, 48px); }

}

/* Utilities */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.transition { transition: all 0.2s ease; }
.link { transition: color 0.2s ease; }

/* Flex Helpers */
.flex.items-center svg { display: block; }

@media screen and (min-width: 30em) {
  .flex-nowrap-ns { flex-wrap: nowrap !important; }
  .flex-nowrap-ns > * { flex-shrink: 0; }
}

/* Shadows */
.shadow-hover:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.shadow-4 { box-shadow: 0 10px 30px rgba(0,0,0,0.12); }


.link:focus {
    outline: none;
}
.z-1000 {
  z-index: 1000;
}
/* ==========================================================================
   3. Components
   ========================================================================== */
.filter-buttons {
  margin-bottom: 1rem;
}

/* Gallery Grid (CSS Grid) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
.gallery-item {
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.gallery-item:hover {
  transform: translateY(-3px);
}
.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/*.artists-items {
  max-width: 250px;
}*/

/* Custom Pagination (Integrated Style) */
.custom-pagination .nav-links {
  display: flex;
  justify-content: center; /* Center alignment default */
  gap: 0.5rem;
  font-family: sans-serif;
  font-size: 0.75rem; /* f7 */
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracked */
}

/* Arrow & Numbers styling */
.custom-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem; /* Square-ish touch target */
  text-decoration: none;
  color: #999;
  border: 1px solid #999;
  transition: all .15s ease-in;
}

/* Hover & Active State */
.custom-pagination .page-numbers:hover,
.custom-pagination .page-numbers.current {
  color: #fff;
  font-weight: bold;
  background: #000;
  border-color: #000;
}
.custom-pagination .page-numbers.current {
  color: #fff;
  font-weight: bold;
  background: #000;
  border-color: #000; /* Active indicator */
}

/* Dots & Screen Reader */
.custom-pagination .page-numbers.dots {
  border: none;
  background: none;
}
.custom-pagination .screen-reader-text {
  display: none;
}

/* Tab Navigation (Archive) */
.is-active {
  color: black;
  border-bottom-color: black;
  font-weight: bold;
}


/* ==========================================================================
   4. Page Specific Styles
   ========================================================================== */
.article-divider img.wp-post-image {
  max-height: 380px;
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: fit-content;
}

/* 十字の共通設定 */
.article-divider::before,
.article-divider::after {
    content: "";
    position: absolute;
    bottom: -10px; /* 線の中心に配置 (高さ11pxの半分強) */
    width: 20px;
    height: 20px;
    z-index: 1;
}

/* 十字（プラス）をCSSのグラデーションで描画 */
.article-divider::before,
.article-divider::after {
    background: 
        linear-gradient(to bottom, transparent 48%, #999 48%, #999 52%, transparent 52%),
        linear-gradient(to right, transparent 48%, #999 48%, #999 52%, transparent 52%);
}

/* 左端の十字 */
.article-divider::before {
    left: -10px;
}

/* 右端の十字 */
.article-divider::after {
    right: -10px;
}

/* リンク周りの微調整：画像とテキストのホバー感 */
.shadow-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.shadow-hover:hover {
    transform: translateY(-2px);
}


.author .avatar {
  max-width: 250px;
}

.author-contents {
  width: 64%;
}

@media screen and (max-width: 30em) {
  .article-divider::before,
  .article-divider::after {
      content: "";
      position: absolute;
      bottom: -8px;
      width: 16px;
      height: 16px;
      z-index: 1;
  }
  .article-divider::before {
    left: 0px;
  }
  .article-divider::after {
    right: 0px;
  }
  .author-contents {
    width: 100%;
  }
  .author .avatar {
      max-width: 100%;
  }
}


/* Single Post Navigation */
nav.flex div { min-height: 1.5em; }
nav.flex a {
  font-size: 0.875rem;
  color: #777;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color .15s ease-in;
}
nav.flex a:hover { color: #000; }

/* Single Works */
.pic-max-h { max-height: 500px; }
.work-thumb-zoom { transition: transform 0.5s ease; }
.aspect-ratio:hover .work-thumb-zoom { transform: scale(1.1); }

/* --- ここから追記・上書き --- */

.work-image-container {
    position: relative;
    /* 矢印が初期状態でコンテナの外にはみ出しても見えないようにする */
    overflow: hidden;
}

.pic-max-h {
  max-height: 64vh;
  object-fit: contain;
  /* 画像自体も少し暗くして矢印を際立たせる準備（任意） */
  transition: opacity 0.3s ease;
}
/* モバイル表示時の調整 */

/* リンクホバー時に画像全体を少しだけ暗くする（お好みで削除OK） */
.work-image-container:hover .pic-max-h {
    opacity: 0.9;
}


/* --- リンクと矢印のアニメーション設定 --- */

.work-nav-link {
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* 背景（グラデーション）のトランジション */
    transition: background 0.4s ease;
}

/* ホバー時のグラデーション：端に向かって 0.3（30%）の暗さへ */

/* 左側（Previous）：右(透明)から左(黒)へ */
.work-nav-link.left-0:hover {
    background: linear-gradient(to left, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0.1) 100%
    );
    transition: background 0.4s ease;
}

/* 右側（Next）：左(透明)から右(黒)へ */
.work-nav-link.right-0:hover {
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0.1) 100%
    );
    transition: background 0.4s ease;
}

/* 矢印の共通設定（ここから下は元の設定を維持） */
.nav-arrow {
    opacity: 0; 
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    text-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* 左矢印の初期位置 */
.prev-arrow {
    transform: translateX(-30px);
}
/* 右矢印の初期位置 */
.next-arrow {
    transform: translateX(30px);
}

/* ホバー時の動作 */
.work-nav-link:hover .nav-arrow {
    opacity: 1; 
    transform: translateX(0); 
}


/* Standard Page Content (WYSIWYG) */
.entry-content img { max-width: 100%; height: auto; }
.entry-content p { margin-bottom: 1.5rem; }

/* Contact Form (Custom Flex Layout) */
.cf-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  align-items: flex-start;
}
.cf-row label {
  width: 30%;
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  padding-top: 10px;
  box-sizing: border-box;
  display: block;
}
.cf-row .cf-field {
  width: 70%;
  box-sizing: border-box;
}
.cf-field input, .cf-field textarea {
  width: 100% !important;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 1rem;
  box-sizing: border-box;
  display: block;
  background: #fff;
}
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.any-badge {
  font-size: 0.75rem;
  font-weight: normal;
  background: #eee;
  color: #888;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
}


/* cf7追加 */
/* 確認画面のラベルと値のレイアウト調整 */
#confirm-screen .cf-row {
    display: flex;
    align-items: flex-start;
}
#confirm-screen label {
    width: 30%;
}
#confirm-screen .cf-field {
    width: 70%;
    word-break: break-all;
}

/* CF7のデフォルトメッセージ（送信完了・エラーなど）の枠線を消す */
.wpcf7-response-output {
    border: none !important;
    margin: 2em 0 !important;
    padding: 1em !important;
    text-align: center;
    font-size: 0.875rem; /* f6相当 */
}

/* 成功時の文字色調整（必要であれば） */
.wpcf7-mail-sent-ok {
    color: #555;
}


@media screen and (max-width: 48em) {
    #confirm-screen .cf-row { flex-direction: column; }
    #confirm-screen label { width: 100%; margin-bottom: 0.5rem; }
    #confirm-screen .cf-field { width: 100%; }
    /* 確認画面用のレスポンシブ（前回分の微調整） */
    #confirm-screen .cf-row { flex-direction: column; }
  .cf-row label, .cf-row .cf-field { width: 100%; }
  .cf-row label { padding-top: 0; margin-bottom: 0.75rem; }
  .cf-row { margin-bottom: 1.5rem; }
}

/* Access Map Override */
.aspect-ratio--4x3 { padding-bottom: 150%; }
@media screen and (min-width: 60em) {
  /* Force map to be taller on PC */
  .aspect-ratio--4x3 { padding-bottom: 150%; }
}


/* =========================================
   ハンバーガーボタン & アニメーション
========================================= */
.hamburger-line {
    display: block;
    width: 100%;
    height: 1.5px;
    position: absolute;
    left: 0;
    transition: all 0.3s ease-in-out;
}
.top-line    { top: 0; }
.middle-line { top: 50%; transform: translateY(-50%); }
.bottom-line { bottom: 0; }

.hamburger-btn.is-active .top-line {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.hamburger-btn.is-active .middle-line {
    opacity: 0;
}
.hamburger-btn.is-active .bottom-line {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}