/**
 * カスタムユーティリティクラス
 * テキストシャドウやその他のユーティリティ
 */

/* ===================================
 * テキストシャドウ
 * =================================== */

/* 基本的なテキストシャドウ（黒） */
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.text-shadow-md {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.text-shadow-lg {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

.text-shadow-xl {
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

/* カスタムカラーのテキストシャドウ */
.text-shadow-cream {
  text-shadow: 0px 0px 8px #F4F1EC;
}

.text-shadow-gold {
  text-shadow: 2px 2px 6px #E7B546;
}

.text-shadow-blue {
  text-shadow: 2px 2px 6px #4A596A;
}

/* Google Mapをモノクロにするフィルター */
.map-grayscale {
  filter: grayscale(100%) contrast(1.1);
}

/* ===================================
 * レスポンシブ改行制御
 * md以下（768px未満）では改行を無視
 * =================================== */

/* モバイルでは改行を無視 */
@media (max-width: 767px) {
  .md\:preserve-breaks br {
    display: none;
  }
}

/* デスクトップでは改行を表示 */
@media (min-width: 768px) {
  .md\:preserve-breaks br {
    display: block;
  }
}

/* ===================================
 * WYSIWYGエディタコンテンツスタイル
 * リスト要素のデフォルトスタイルを復元
 * =================================== */

.wysiwyg-content ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1.5rem;
}

.wysiwyg-content ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.wysiwyg-content li {
  margin-bottom: 0.5rem;
}

.wysiwyg-content li:last-child {
  margin-bottom: 0;
}

.wysiwyg-content p {
  margin-bottom: 1rem;
}

.wysiwyg-content p:last-child {
  margin-bottom: 0;
}

.wysiwyg-content strong {
  font-weight: 600;
}

.wysiwyg-content em {
  font-style: italic;
}

.wysiwyg-content a {
  color: #4A596A; /* mastay-blue */
  text-decoration: underline;
  transition: color 0.3s ease;
}

.wysiwyg-content a:hover {
  color: #E7B546; /* mastay-gold */
}

/* 見出しスタイル */
.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4,
.wysiwyg-content h5,
.wysiwyg-content h6 {
  color: #2D2D2D; /* mastay-dark */
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.wysiwyg-content h1 { font-size: 2rem; }
.wysiwyg-content h2 { font-size: 1.75rem; }
.wysiwyg-content h3 { font-size: 1.5rem; }
.wysiwyg-content h4 { font-size: 1.25rem; }
.wysiwyg-content h5 { font-size: 1.125rem; }
.wysiwyg-content h6 { font-size: 1rem; }

@media (min-width: 768px) {
  .wysiwyg-content h1 { font-size: 2.5rem; }
  .wysiwyg-content h2 { font-size: 2rem; }
  .wysiwyg-content h3 { font-size: 1.75rem; }
  .wysiwyg-content h4 { font-size: 1.375rem; }
}

/* 水平線 */
.wysiwyg-content hr {
  border: none;
  border-top: 1px solid rgba(45,45,45,0.2); /* mastay-dark/20 */
  margin: 2rem 0;
}

/* 引用 */
.wysiwyg-content blockquote {
  border-left: 4px solid #E7B546; /* mastay-gold */
  padding-left: 1rem;
  color: #2D2D2D;
  margin: 1.5rem 0;
}

@media (max-width: 767px) {
  .wysiwyg-content li {
    margin-bottom: 0.25rem;
  }
}

.md\:h-calc\(50\%.\-.\36 px\){
  height: calc(50% - 6px);
}

.w-calc\(50\%.\-.\34 px\){
  width: calc(50% - 4px);
}
@media screen and (min-width: 768px) {
  .w-calc\(50\%.\-.\34 px\){
    width: 100%
  }
}

.map-content p{
  height: 100%;
}

.map-content iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===================================
 * ヘッダーメニュー
 * =================================== */

.header-menu a {
  padding: 1rem 1rem 1.625rem 1rem;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #8F3A34;
    transform: translateX(-50%);
    transition: width 0.3s ease;
  }
  &:hover {
    background-color: #FFFEFA;
    &::after {
      width: 100%;
    }
  }
}

/* 言語切り替え */
header .header-menu + div a {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #8F3A34;
    transform: translateX(-50%);
    transition: width 0.3s ease;

  }
  &:hover {
    &::after {
      width: 100%;
    }
  }
}

/* 言語切り替えdivの既存のborder-bを無効化 */
header .header-menu + div.border-b:hover{
  border-bottom: none !important;
}

.grecaptcha-badge{
  display: none;
}

/* ===================================
 * カテゴリフィルター（iOS Safari対応）
 * =================================== */

/* iOS Safariでのselect要素のタッチイベント問題を解決 */
.stories-category-dropdown,
.neighborhood-category-dropdown {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* iOS Safariでタッチイベントが正しく動作するようにする */
  touch-action: manipulation;
  /* タップ時の300ms遅延を防ぐ */
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safariでのselect要素のタッチ領域を確保 */
.stories-category-dropdown:focus,
.neighborhood-category-dropdown:focus {
  outline: none;
  -webkit-tap-highlight-color: rgba(143, 58, 52, 0.2);
}