/**
 * 共通コンポーネント - Components CSS
 * 
 * @package FCプランニングオフィス
 * @author 株式会社Hackusha - 大硲 神
 * @version 1.0.0
 */

/* ==========================================================================
   共通レイアウト
   ========================================================================== */

/* コンテナ定義は style-static.css で統一 */

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: normal;
    text-align: center;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.section-subtitle {
    font-family: var(--font-japanese);
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0.8;
}

/* ==========================================================================
   ノイズフィルター（モジュール化）
   ========================================================================== */

.noise-filter {
    position: relative;
}

.noise-filter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/noise.webp');
    background-size: cover;
    opacity: 1;
    z-index: 10;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

/* レコード盤専用：円形ノイズフィルター */
.vinyl-record.noise-filter::before {
    clip-path: circle(50%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* ==========================================================================
   共通ノブトリガーボタンスタイル
   ========================================================================== */

.knob-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    flex-direction: column;
}

/* ノブ画像の基本スタイル */
.knob-trigger .trigger-knob {
    width: 80px;
    height: 80px;
    object-fit: contain;
    position: relative;
    transition: none; /* アニメーションはJSで制御 */
}

/* トリガーテキスト */
.knob-trigger .trigger-text {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
}

/* カラーバリエーション */
.knob-trigger--white .trigger-text {
    color: var(--color-white);
}

.knob-trigger--black .trigger-text {
    color: var(--color-black);
}

/* モバイル対応 */
@media (max-width: 768px) {
    .knob-trigger .trigger-knob {
        width: 60px;
        height: 60px;
    }
    
    .knob-trigger .trigger-text {
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   Elementor 統合対応 - 枠線・アウトライン リセット
   ========================================================================== */

/* すべてのリンク・ボタン・画像の不要な枠線を削除 */
a,
button,
input,
textarea,
select,
img,
.elementor-button,
.elementor-icon,
.elementor-image,
.wp-block-button__link,
.wp-block-image img {
    outline: none !important;
    border: none;
    box-shadow: none;
}

/* フォーカス状態の枠線を削除（アクセシビリティは別途対応） */
a:focus,
a:active,
button:focus,
button:active,
input:focus,
textarea:focus,
select:focus,
.elementor-button:focus,
.elementor-button:active,
.elementor-icon:focus,
.elementor-icon:active,
.elementor-image:focus,
.elementor-image:active,
.wp-block-button__link:focus,
.wp-block-button__link:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Elementor ウィジェット固有の枠線リセット */
.elementor-widget-container a,
.elementor-widget-container button,
.elementor-widget-container img,
.elementor-widget-image img,
.elementor-widget-button .elementor-button,
.elementor-widget-icon .elementor-icon {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* クリック時のハイライト効果を削除 */
a:active,
button:active,
.elementor-button:active,
.elementor-icon:active {
    background-color: transparent !important;
    color: inherit !important;
}

/* タップハイライトを削除（モバイル対応） */
a,
button,
.elementor-button,
.elementor-icon {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* 画像の選択とドラッグを無効化 */
img,
.elementor-image img,
.elementor-widget-image img {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    pointer-events: none;
}

/* ただし、リンク画像はクリック可能に */
a img,
.elementor-widget-container a img {
    pointer-events: auto;
}

/* アクセシビリティ配慮：キーボードナビゲーション用の視覚的フィードバック */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
    outline: 2px solid #667eea !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   Elementor Editor 内では枠線リセットを無効化
   ========================================================================== */

.elementor-editor-active a,
.elementor-editor-active button,
.elementor-editor-active .elementor-button {
    outline: revert !important;
    border: revert !important;
    box-shadow: revert !important;
}