/* overrides.css - @layer overrides（プラグイン・外部スタイル上書き）
   分割元: style.css @layer overrides セクション */

/* =========================================
   @layer overrides - Critical Overrides
   ========================================= */
@layer overrides {

    /* prefers-reduced-motion: アニメーション無効化（WCAG準拠） */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .fade-section {
            opacity: 1 !important;
        }
    }

    /* Override critical CSS hiding once main styles load */
    body {
        visibility: visible !important;
    }

    /* Instagram Widget (Smash Balloon Plugin) */
    .sbi_header_link h3,
    .sbi_header_text h3 {
        font-family: var(--font-ui) !important;
        font-weight: var(--fw-bold) !important;
        letter-spacing: 0.04em;
    }

    /* =========================================
       Contact Form 7 Styles (CF7 Plugin Override)
       Moved from unlayered section per Task 4-2 #1
       ========================================= */
    .contact-page {
        padding-top: var(--header-safe-zone);
        /* Unified with About Page */
        padding-bottom: 8rem;
    }

    .contact-page .intro-text {
        text-align: center;
        margin-bottom: 4rem;
    }

    .contact-empty-state {
        text-align: center;
        padding: 2rem;
    }

    .contact-form-container {
        max-width: 700px;
        margin: 0 auto 8rem;
    }

    .wpcf7-form-control-wrap {
        display: block;
        margin-bottom: 2rem;
    }

    .wpcf7 label {
        font-family: var(--font-ui);
        font-weight: bold;
        font-size: var(--fs-md);
        display: block;
        margin-bottom: 0.5rem;
        letter-spacing: 0.05em;
    }

    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea {
        width: 100%;
        padding: 1rem;
        border: 1px solid #ddd;
        border-radius: var(--radius-md);
        font-size: 1rem;
        font-family: var(--font-base);
        box-sizing: border-box;
        transition: border-color var(--transition-base), box-shadow var(--transition-base);
        background: transparent;
    }

    .wpcf7 input[type="text"]:focus,
    .wpcf7 input[type="email"]:focus,
    .wpcf7 input[type="tel"]:focus,
    .wpcf7 textarea:focus {
        border-color: var(--color-accent);
        outline: none;
        box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
    }

    /* Placeholder styling */
    .wpcf7 input::placeholder,
    .wpcf7 textarea::placeholder {
        color: rgba(51, 51, 51, 0.4);
        opacity: 1;
    }

    .wpcf7 textarea {
        min-height: 200px;
        resize: vertical;
    }

    /* Validation Errors */
    .wpcf7-not-valid-tip {
        font-size: var(--fs-base);
        color: #d9534f;
        margin-top: 0.5rem;
    }

    .wpcf7-response-output {
        border: none !important;
        padding: 1rem !important;
        margin: 2rem 0 !important;
        background: #f4f4f4;
        text-align: center;
        font-size: var(--fs-md);
    }

    /* Graphic Recording */
    .recipe-graphic-recording {
        margin-top: 4rem;
        border-top: 1px dashed #ccc;
        padding-top: 3rem;
    }

    .recipe-graphic-recording img {
        width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    /* Cloudflare Turnstile Position Adjustment */
    .wpcf7-form {
        display: flex;
        flex-direction: column;
    }

    .wpcf7-form>* {
        order: 1;
    }

    .wpcf7-form .cf-turnstile-container,
    .wpcf7-form .simple-cloudflare-turnstile,
    .wpcf7-form .cf-turnstile {
        order: 2;
        margin-bottom: 2rem;
        display: flex;
        justify-content: center;
    }

    .wpcf7-form input[type="submit"] {
        order: 3;
    }

    /* ── User Requested Fixes (旧2nd @layer overrides, 統合) ── */
    /* --- 1. Sidebar Margin Fix (Mobile/Global) --- */
    /* Target images in the sidebar widget */
    #secondary .widget_recent_entries img,
    #secondary .wp-block-latest-posts__featured-image img,
    /* Custom Sidebar Latest Recipes */
    .latest-recipe-img,
    .latest-recipe-thumbnail {
        /* Add distinct space below the image */
        margin-bottom: 16px !important;

        /* Ensure block display to enforce margin */
        display: block;
    }

    /* Ensure the title text has correct line-height */
    #secondary .widget_recent_entries a {
        display: block;
        line-height: 1.6;
        margin-top: 0;
        /* Clear top margin to rely on image's bottom margin */
    }


    /* --- 2. Contact Form Submit Button (Match About Page Style) --- */
    /* Target standard WP contact form submit buttons */
    .wpcf7-submit,
    .gform_button,
    input[type="submit"] {
        /* --- SHAPE & COLOR (About Page Style: Glassmorphism) --- */
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #333333;
        /* var(--text-color) */

        /* EXACT BORDER from About Page */
        border: 1px solid rgba(100, 100, 100, 0.3);
        border-radius: var(--radius-pill);

        /* --- SHADOW --- */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

        /* --- TYPOGRAPHY --- */
        font-family: var(--font-ui), sans-serif;
        font-weight: 700;
        font-size: var(--fs-md);
        letter-spacing: 0.15em;

        /* --- SPACING & LAYOUT --- */
        padding: 1rem 4rem;
        margin-top: 32px;
        cursor: pointer;
        transition: all var(--transition-fill);

        /* Center the button */
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 300px;

        /* Reset for Input */
        -webkit-appearance: none;
        appearance: none;
        line-height: normal;
    }

    /* Hover Effect */
    .wpcf7-submit:hover,
    .gform_button:hover,
    input[type="submit"]:hover {
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: var(--shadow-fill-hover);
        transform: var(--hover-lift);
        opacity: 1;
    }

    /* =========================================
       Blog Post Summary - Enhanced Scroll Animation Override
       既存の汎用アニメーションルール（レイヤー外）を上書き
       より顕著なフェードイン効果を実現
       ========================================= */

    /* reveal統一: opacity-onlyフェードイン */
    .post-summary {
        opacity: 0 !important;
        transition: opacity 0.8s ease-out !important;
        will-change: opacity;
    }

    .post-summary.is-visible {
        opacity: 1 !important;
    }
}