/*
Theme Name: AI秘書室の子テーマ
Template: astra
Description: AI秘書室による高度なカスタマイズ用子テーマ
Version: 1.0
Author: AI右腕 / and CLEA統括秘書室
*/

/* ==============================================
   フレッシュオート TOP 完全レスポンシブ修正 v5
   ============================================== */

/* --- display補完（flex/grid欠落修正） --- */
#fa-top [style*="flex-wrap"],
#fa-top [style*="align-items"],
#fa-top [style*="justify-content"],
#fa-top a[style*="align-items"] {
  display: flex !important;
}
#fa-top [style*="grid-template"] {
  display: grid !important;
}

/* --- ヒーローセクション --- */
#fa-top [style*="min-height"][style*="92vh"] {
  display: flex !important;
  align-items: flex-end !important;
}
#fa-top [style*="min-height"][style*="92vh"] > [style*="position"][style*="absolute"] {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- wpautop余白除去 --- */
#fa-top p:empty,
#fa-top p br:only-child {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#fa-top > p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* --- 全セクション文字色（ダークBG視認性） --- */
#fa-top h1, #fa-top h2, #fa-top h3 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5) !important;
}
#fa-top h1 span {
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5) !important;
}
#fa-top p {
  color: #ddd !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
#fa-top p[style*="color:#e85d04"],
#fa-top p[style*="color: rgb(232"] {
  color: #e85d04 !important;
}
#fa-top p[style*="color:#e5e7eb"],
#fa-top p[style*="color: rgb(229"] {
  color: #e5e7eb !important;
}
#fa-top p[style*="color:#444"],
#fa-top p[style*="color: rgb(68"] {
  color: #666 !important;
}
/* ヒーロー内テキスト */
#fa-top [style*="min-height"][style*="92vh"] p {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5) !important;
}
#fa-top [style*="min-height"][style*="92vh"] p[style*="letter-spacing"] {
  color: #e85d04 !important;
}

/* --- ブログフィードグリッド（PC: 3列） --- */
#fa-blog-feed {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ============================
   スマホ専用（768px以下）
   ============================ */
@media (max-width: 768px) {

  /* --- ヒーロー：女性の顔を見せる＋文字を読みやすく --- */
  #fa-top [style*="min-height"][style*="92vh"] {
    background-position: 25% center !important;
  }
  /* オーバーレイ：上部〜中央は完全透明、最下部だけ暗くして背景に馴染ませる */
  #fa-top [style*="min-height"][style*="92vh"] > [style*="position"][style*="absolute"] {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 55%,
      rgba(10,10,10,0.7) 85%,
      rgba(10,10,10,1) 100%
    ) !important;
  }
  /* テキスト帯に半透明の黒背景パネルを追加（文字の読みやすさはここで確保） */
  #fa-top [style*="z-index"][style*="max-width"] {
    background: rgba(0,0,0,0.65) !important;
    border-radius: 16px !important;
    padding: 20px 16px 28px 16px !important;
    margin: 0 8px 24px 8px !important;
  }
  /* スマホヒーロー文字サイズ */
  #fa-top [style*="min-height"][style*="92vh"] h1 {
    font-size: clamp(26px, 6vw, 40px) !important;
  }

  /* --- 全flex-wrapコンテナ → 縦積み --- */
  #fa-top [style*="flex-wrap"] {
    flex-direction: column !important;
  }
  /* 全子要素 → 全幅 */
  #fa-top [style*="flex-wrap"] > * {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
  }

  /* --- ボタン行だけ横並び維持 --- */
  #fa-top [style*="flex-wrap"][style*="gap:12px"],
  #fa-top [style*="flex-wrap"][style*="gap: 12px"] {
    flex-direction: row !important;
  }
  #fa-top [style*="flex-wrap"][style*="gap:12px"] > *,
  #fa-top [style*="flex-wrap"][style*="gap: 12px"] > * {
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
  }

  /* --- 画像ブロック高さ --- */
  #fa-top [style*="flex-wrap"] > [style*="min-height"][style*="background"] {
    min-height: 220px !important;
  }

  /* --- グリッド → 1列 --- */
  #fa-top [style*="grid-template"] {
    grid-template-columns: 1fr !important;
  }

  /* --- ブログフィード → 1列（3件表示はJS側で制御） --- */
  #fa-blog-feed {
    grid-template-columns: 1fr !important;
  }

  /* --- パディング縮小 --- */
  #fa-top [style*="padding: 40px"],
  #fa-top [style*="padding:40px"] {
    padding: 24px 16px !important;
  }
  #fa-top [style*="padding: 48px"],
  #fa-top [style*="padding:48px"] {
    padding: 28px 16px !important;
  }
  #fa-top [style*="padding: 80px"],
  #fa-top [style*="padding:80px"] {
    padding: 40px 16px !important;
  }
  #fa-top [style*="padding: 60px"],
  #fa-top [style*="padding:60px"] {
    padding: 36px 16px !important;
  }
}