/**
 * MASAMUNE Design System v4.0
 * Clean & Readable - 視認性重視
 */

:root {
  /* メインカラー */
  --color-primary: #0891B2;       /* シアン - クリーン */
  --color-primary-dark: #0E7490;
  --color-primary-light: #22D3EE;

  /* テキスト - コントラスト重視 */
  --color-text-dark: #1F2937;     /* 濃いグレー（白背景用） */
  --color-text-base: #374151;     /* 本文 */
  --color-text-light: #FFFFFF;    /* 白（ダーク背景用） */
  --color-text-muted: #9CA3AF;    /* 補助テキスト */

  /* 背景 - 明確な階層 */
  --color-bg-white: #FFFFFF;
  --color-bg-light: #F8FAFC;      /* ほぼ白 */
  --color-bg-dark: #0F172A;       /* ダークネイビー */
  --color-bg-darker: #020617;     /* ほぼ黒 */

  /* ボーダー・アクセント */
  --color-border: #E2E8F0;
  --color-border-dark: #334155;
  --color-accent: #10B981;        /* グリーン - 成功 */
  --color-accent-warm: #F59E0B;   /* オレンジ - 注目 */

  /* フォント */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* シャドウ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* 角丸 */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ==========================================
   BASE
========================================== */
body {
  font-family: var(--font-sans);
  color: var(--color-text-base);
  background: var(--color-bg-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================
   TYPOGRAPHY - 視認性重視
========================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-dark);
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
h3 { font-size: 1.25rem; }

p {
  color: var(--color-text-base);
  margin-bottom: 1rem;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--color-primary-dark);
}

/* ==========================================
   HEADER - 白背景、クリーン
========================================== */
.site-header,
#masthead {
  background: var(--color-bg-white) !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.main-navigation a,
.primary-menu a,
nav ul.menu a {
  color: var(--color-text-base);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  transition: all 0.2s;
}

.main-navigation a:hover,
nav ul.menu a:hover {
  color: var(--color-primary);
  background: var(--color-bg-light);
}

.current-menu-item > a {
  color: var(--color-primary) !important;
  background: rgba(8, 145, 178, 0.08) !important;
}

/* ==========================================
   HERO SECTION - 白背景で明るく
========================================== */
.hero-section,
.wp-block-group.hero-section,
[class*="hero"] {
  background: var(--color-bg-white) !important;
  padding: 4rem 1.5rem !important;
  text-align: center;
}

.hero-section h1,
.hero-section .wp-block-heading {
  color: var(--color-text-dark) !important;
  margin-bottom: 1rem;
}

.hero-section p {
  color: var(--color-text-base) !important;
  font-size: 1.125rem;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

/* Badge - 明るい背景 */
.badge,
.hero-section .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg-light) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 100px !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.85rem;
  color: var(--color-text-base) !important;
  margin-bottom: 1.5rem;
}

/* ==========================================
   BUTTONS
========================================== */
.wp-block-button__link,
button,
.btn,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius) !important;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

/* Primary Button */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.btn-primary {
  background: var(--color-primary) !important;
  color: var(--color-text-light) !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--color-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Outline Button */
.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
}

.is-style-outline .wp-block-button__link:hover {
  background: var(--color-primary) !important;
  color: var(--color-text-light) !important;
}

/* ==========================================
   SECTIONS - 白/ライトグレー交互
========================================== */
section,
.wp-block-group {
  padding: 4rem 0;
}

/* 白背景セクション */
section,
.wp-block-group {
  background: var(--color-bg-white);
}

section h2,
section p,
.wp-block-group h2,
.wp-block-group p {
  color: var(--color-text-dark);
}

/* ライトグレー背景セクション */
section:nth-child(even),
.wp-block-group:nth-child(even) {
  background: var(--color-bg-light);
}

section:nth-child(even) h2,
section:nth-child(even) p,
.wp-block-group:nth-child(even) h2,
.wp-block-group:nth-child(even) p {
  color: var(--color-text-dark);
}

/* ダーク背景セクション（特別な場合） */
.dark-section,
.bg-dark {
  background: var(--color-bg-dark) !important;
}

.dark-section h2,
.dark-section h3,
.dark-section p,
.bg-dark h2,
.bg-dark h3,
.bg-dark p {
  color: var(--color-text-light) !important;
}

.dark-section .text-muted,
.bg-dark .text-muted {
  color: var(--color-text-muted) !important;
}

/* ==========================================
   CARDS - 常に白背景
========================================== */
.wp-block-column,
.card,
[class*="card"] {
  background: var(--color-bg-white) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) !important;
  padding: 1.5rem;
  transition: all 0.2s;
}

.wp-block-column h3,
.wp-block-column h4,
.wp-block-column p,
.card h3,
.card h4,
.card p {
  color: var(--color-text-dark);
}

.wp-block-column:hover,
.card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* ==========================================
   GRID
========================================== */
.wp-block-columns {
  display: grid !important;
  gap: 1.5rem;
}

.wp-block-columns.has-2-columns { grid-template-columns: repeat(2, 1fr) !important; }
.wp-block-columns.has-3-columns { grid-template-columns: repeat(3, 1fr) !important; }
.wp-block-columns.has-4-columns { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 768px) {
  .wp-block-columns { grid-template-columns: 1fr !important; }
}

/* ==========================================
   TABLE - 白背景ベース
========================================== */
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-white);
  box-shadow: var(--shadow-sm);
}

table th {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: 1rem;
  font-weight: 600;
  text-align: left;
}

table td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-dark);
}

table tr:last-child td {
  border-bottom: none;
}

table tr:hover td {
  background: var(--color-bg-light);
}

/* ==========================================
   FORMS - 白背景
========================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--color-text-dark);
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  transition: all 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

label {
  display: block;
  font-weight: 500;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}

/* ==========================================
   FOOTER - ダーク、白文字
========================================== */
footer,
.site-footer {
  background: var(--color-bg-dark) !important;
  color: var(--color-text-muted);
  padding: 3rem 0 1.5rem;
}

footer h3,
footer h4,
footer .widget-title {
  color: var(--color-text-light) !important;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

footer p {
  color: var(--color-text-muted) !important;
}

footer a {
  color: var(--color-text-muted);
  transition: color 0.2s;
}

footer a:hover {
  color: var(--color-text-light);
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer li {
  margin-bottom: 0.5rem;
}

.footer-bottom,
.site-info {
  border-top: 1px solid var(--color-border-dark);
  padding-top: 1.5rem;
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ==========================================
   LATEST NEWS SECTION - 白背景
========================================== */
.masamune-news-section {
  padding: 4rem 0;
  background: var(--color-bg-light);
}

.masamune-news-section h3 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--color-text-dark);
}

.masamune-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 768px) {
  .masamune-news-grid {
    grid-template-columns: 1fr;
  }
}

.masamune-news-column {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.masamune-news-column h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-dark);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-primary);
}

.masamune-latest-posts .latest-post-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.masamune-latest-posts .latest-post-item:last-child {
  border-bottom: none;
}

.masamune-latest-posts .post-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-dark);
  margin: 0 0 0.25rem;
  line-height: 1.4;
}

.masamune-latest-posts a:hover .post-title {
  color: var(--color-primary);
}

.masamune-latest-posts .post-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.masamune-news-column > p {
  margin-top: 1rem;
  text-align: right;
}

.masamune-news-column > p > a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary);
}

/* ==========================================
   FEATURE HIGHLIGHTS
========================================== */
.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--color-text-base);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* チェックマーク（緑） */
.check,
.checkmark {
  color: var(--color-accent);
}

/* ==========================================
   UTILITIES
========================================== */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary) !important; }
.text-dark { color: var(--color-text-dark) !important; }
.text-light { color: var(--color-text-light) !important; }
.text-muted { color: var(--color-text-muted) !important; }

.bg-white { background: var(--color-bg-white) !important; }
.bg-light { background: var(--color-bg-light) !important; }
.bg-dark { background: var(--color-bg-dark) !important; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Menu NEW badge */
.menu-item-new > a::after {
  content: 'NEW';
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--color-accent);
  color: var(--color-text-light);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ==========================================
   強制的な視認性修正
========================================== */
/* グレー背景での黒文字問題を修正 */
[style*="background"] h1,
[style*="background"] h2,
[style*="background"] h3,
[style*="background"] h4,
[style*="background"] p {
  color: inherit;
}

/* 確実に読みやすくする */
.wp-block-group p,
.wp-block-column p,
section p {
  color: var(--color-text-base) !important;
}

/* 見出しは常に濃い色 */
.wp-block-group h2,
.wp-block-group h3,
.wp-block-column h3,
.wp-block-column h4,
section h2,
section h3 {
  color: var(--color-text-dark) !important;
}