/* Custom styles for Teruyank WordPress Theme */

/* =================================================================
   フォント設定セクション - FONT CONFIGURATION SECTION
   ================================================================= */

/* 
   フォントを変更したい場合の手順:
   1. functions.php でGoogle Fontsを読み込む（既に設定済み）
   2. 下記のfont-familyを変更する
   3. 必要に応じて日本語フォントも追加する
*/

/* ベースフォント設定 - Base Font Settings */
body {
    /* 
    現在のフォント: Noto Sans JP (日本語メイン) + システムフォント
    Caveatは手書き風なので本文には使わず、見出しやタイトルで使用
    */
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    background-color: #111111;
    color: #E0E0E0;
    position: relative;
    font-size: 16px;
    line-height: 1.6;
}

/* Background tile image from customizer */
body.has-background-tile {
    background-size: auto;
    background-position: top left;
    background-attachment: fixed;
    background-repeat: repeat;
}

/* Background overlay to make the image subtle */
body.has-background-tile::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.95);
    z-index: -1;
    pointer-events: none;
}

/* 見出しフォント設定 - Heading Font Settings */
h1, h2, h3, h4, h5, h6 {
    /* 
    現在のフォント: Caveat (手書き風) + Noto Sans JP (日本語フォールバック)
    Caveatは芸術的で温かみのある手書き風フォント
    フラメンコギタリストのサイトに最適
    */
    font-family: 'Caveat', 'Noto Sans JP', cursive;
    font-weight: 600; /* Caveatは400-700の範囲で使用可能 */
}

/* 特定の見出しレベルに個別フォントを設定したい場合 */
/*
h1 {
    font-family: 'Playfair Display', 'Noto Sans JP', serif;
    font-weight: 700;
}

h2, h3 {
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    font-weight: 600;
}
*/

/* サイトタイトルフォント設定 - Site Title Font Settings */
.site-title {
    /* 
    サイトタイトル専用フォント設定
    Caveatで芸術的で個性的な印象を演出
    */
    font-family: 'Caveat', 'Noto Sans JP', cursive !important;
    font-weight: 700; /* 太めで存在感を出す */
}

/* Navigation styles */
.nav-active {
    color: #FFFFFF;
    font-weight: bold;
}

/* Hero section background */
.hero-bg {
    background: transparent;
    position: relative;
}

/* Hero section overlay - darker for better text readability */
.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

/* Ensure hero content is above the overlay */
.hero-bg > div {
    position: relative;
    z-index: 2;
}

/* Animation classes */
.animate-fade-in-down {
    animation: fadeInDown 1s ease-in-out;
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-in-out 0.3s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #111111;
}

::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* Smooth transitions for interactive elements */
.transition-all {
    transition: all 0.3s ease;
}

/* Custom button styles */
.btn-primary {
    background-color: #c41e3a;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #a01729;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
}

/* LIVE Section Styles */
.live-card {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.live-card:hover {
    border-color: #374151;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.live-date-info {
    border-right: 1px solid #374151;
}

.live-post-date {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 4px;
    padding: 4px 8px;
    transition: all 0.3s ease;
}

.live-post-date:hover {
    background-color: #374151;
}

.live-venue-info {
    transition: color 0.3s ease;
}

.live-card:hover .live-venue-info {
    color: #d1d5db;
}

/* Responsive adjustments for LIVE section */
@media (max-width: 768px) {
    .live-date-info {
        border-right: none;
        border-bottom: 1px solid #374151;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    .live-post-date {
        margin-top: 0.5rem;
        display: inline-block;
        font-size: 0.75rem;
    }
    
    .live-card .flex-col .text-right {
        text-align: left;
        margin-top: 0.5rem;
    }
    
    .live-card h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 640px) {
    .live-card {
        padding: 1rem;
    }
    
    .live-card h4 {
        font-size: 1rem;
    }
    
    .live-card h3 {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }
}

/* Focus styles for accessibility */
.nav-link:focus,
button:focus {
    outline: 2px solid #c41e3a;
    outline-offset: 2px;
}

/* Gallery hover effects */
.gallery-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Custom spacing utilities */
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 640px) {
    .section-padding {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/* Text shadow utility */
.text-shadow {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* Cat section styles */
.cat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.cat-card img {
    transition: transform 0.3s ease;
}

.cat-card:hover img {
    transform: scale(1.05);
}

/* Heart icon color animation */
.heart-icon {
    color: #f472b6;
    transition: color 0.3s ease;
}

.cat-card:hover .heart-icon {
    color: #ec4899;
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
    h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .hero-bg h1 {
        font-size: 2rem;
    }
    
    /* Cat section responsive adjustments */
    .cat-card {
        margin-bottom: 1rem;
    }
}

/* WordPress Admin Bar adjustment */
.admin-bar .fixed {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .fixed {
        top: 46px;
    }
}

/* Aspect ratio utility classes */
.aspect-w-16 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 16;
}

.aspect-w-16 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.aspect-h-9 {
    --tw-aspect-h: 9;
}

/* WordPress block editor support */
.wp-block {
    max-width: 100%;
}

/* WordPress alignment classes */
.alignleft {
    float: left;
    margin-right: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* WordPress caption */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption-text {
    text-align: center;
    color: #666;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Pagination styles */
.pagination,
.page-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.page-numbers,
.page-links a,
.page-links > span {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #1f2937;
    color: #e5e7eb;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.page-numbers:hover,
.page-links a:hover {
    background-color: #374151;
    color: #ffffff;
}

.page-numbers.current,
.page-links > span:not(a) {
    background-color: #c41e3a;
    color: #ffffff;
}

.page-numbers.dots {
    background-color: transparent;
    color: #6b7280;
}

/* Search form in content */
.search-form {
    margin: 1rem 0;
}

/* Comments (if needed in future) */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #1f2937;
    color: #ffffff;
    border: 1px solid #374151;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.comment-form input[type="submit"] {
    background-color: #c41e3a;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.comment-form input[type="submit"]:hover {
    background-color: #a01729;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
}

/* =================================================================
   フォント変更ガイド - FONT CHANGE GUIDE
   ================================================================= */

/* 
   フォントを変更したい場合の詳細手順:
   
   1. Google Fontsを使用する場合:
      a) Google Fonts (https://fonts.google.com/) でフォントを選択
      b) functions.php の wp_enqueue_style('google-fonts', ...) の部分を編集
      c) このファイルの font-family を更新
   
   2. システムフォントを使用する場合:
      a) このファイルの font-family を直接編集
      b) Arial, Helvetica, Georgia, Times New Roman などを使用
   
   3. カスタムフォントファイルを使用する場合:
      a) フォントファイル (.woff2, .woff, .ttf) をテーマフォルダにアップロード
      b) @font-face でフォントを定義
      c) font-family で使用
   
   フォントの種類:
   - Sans-serif (ゴシック体): Roboto, Noto Sans JP, Arial
   - Serif (明朝体): Playfair Display, Noto Serif JP, Georgia
   - Monospace (等幅): Fira Code, Consolas, Monaco
   
   日本語対応フォント:
   - Noto Sans JP (ゴシック)
   - Noto Serif JP (明朝)
   - M PLUS 1p (ゴシック)
   - Sawarabi Gothic (ゴシック)
   
   参考サイト:
   - Google Fonts: https://fonts.google.com/
   - Adobe Fonts: https://fonts.adobe.com/
*/

/* =================================================================
   フォント設定例 - FONT CONFIGURATION EXAMPLES
   ================================================================= */

/* 以下は人気のフォント組み合わせ例です。コメントアウトを外して使用してください */

/* 例1: モダンでクリーンな組み合わせ */
/*
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Noto Sans JP', sans-serif;
}
.site-title {
    font-family: 'Poppins', 'Noto Sans JP', sans-serif !important;
}
*/

/* 例2: エレガントで読みやすい組み合わせ */
/*
body {
    font-family: 'Source Sans Pro', 'Noto Sans JP', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Crimson Text', 'Noto Serif JP', serif;
}
.site-title {
    font-family: 'Crimson Text', 'Noto Serif JP', serif !important;
}
*/

/* 例3: クラシックで格調高い組み合わせ */
/*
body {
    font-family: 'Lato', 'Noto Sans JP', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
}
.site-title {
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif !important;
}
*/

/* 例4: 日本語メインのデザイン */
/*
body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif JP', serif;
}
.site-title {
    font-family: 'Noto Serif JP', serif !important;
}
*/

/* 例5: Caveat (手書き風) + Noto Sans JP - 芸術的で温かみのある組み合わせ */
/*
body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Caveat', 'Noto Sans JP', cursive;
    font-weight: 600;
}
.site-title {
    font-family: 'Caveat', 'Noto Sans JP', cursive !important;
    font-weight: 700;
}
*/

/* カスタマイザーでのライブプレビュー用スタイル（上書き可能） */
/* これらのスタイルはカスタマイザーのJavaScriptによって動的に上書きされます */