/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.2.1751043634
Updated: 2025-06-27 17:00:34

*/

/*
 * RTP Custom Membership Full-Width Shortcode Styles
 * --------------------------------------------------
 * These rules make the professional directory and map search
 * shortcodes break out of the theme's narrow content container.
 */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap");
.rtp-directory-container,
.rtp-map-search-container {
    /* Set the max-width to override the theme's default. */
    max-width: 95%;
    
    /* Center the container on the page. */
    margin-left: auto;
    margin-right: auto;
    
    /* Add some vertical spacing to separate from other content. */
    margin-top: 2rem;
    margin-bottom: 2rem;
}



/* * RTP Custom Membership - Directory CSS 
 * Complete Version (Updated)
 */

/* =========================================
   1. グリッドレイアウト設定 (Req 5)
   ========================================= */
/* ディレクトリ一覧と地図検索結果のコンテナ設定 */
#rtp-directory-results,
#rtp-map-results-list {
    display: grid;
    /* 最小幅350pxで折り返し、画面幅に応じて列数が自動調整される */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
    gap: 25px; /* カード間の隙間 */
}

/* モバイル対応：画面幅768px以下は1列表示 */
@media (max-width: 768px) {
    #rtp-directory-results,
    #rtp-map-results-list {
        grid-template-columns: 1fr;
    }

    .rtp-directory-container,
    .rtp-map-search-container {
        max-width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    /* --- Mobile layout enhancements for Map Search (as per new request) --- */

    /* 2. Make the search form scroll away normally (not sticky) */
    /* Using the container class to target the form, as the form's own class is unknown. */
    .rtp-map-search-container form {
        position: static !important;
        top: auto !important;
        width: 100%;
        background-color: #fff; /* Give it a background to cover content behind it if it was overlapping */
        box-sizing: border-box;
        margin-bottom: 15px; /* Space between form and list */
    }

    /* 1. Adjust search form input fields and button */
    #rtp-map-search-form {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .rtp-map-search-container form input[type="text"],
    .rtp-map-search-container form input[type="number"] {
        min-width: 50px; /* prevent from becoming too small */
    }

    .rtp-map-search-container form .button {
        /* Reset button styles for icon display */
        flex-shrink: 0;
        flex-grow: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 0; /* Hide the text "Search" */
        border: 1px solid #ccc;
        background-color: #f0f0f0;
        position: relative;
        cursor: pointer;
        border-radius: 4px;
        /* Add a higher specificity to override theme styles if needed */
        min-width: 44px !important;
    }

    .rtp-map-search-container form .button::before {
        content: "🔍"; /* Magnifying glass character as the icon */
        font-size: 20px;
        color: #333;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 1;
    }
}

/* =========================================
   2. プロフィールカード本体 (Req 7 & 8)
   ========================================= */
.professional-profile-card {
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin-bottom: 0; /* Gridのgapで間隔を取るため0 */
    border-radius: 8px;
    background-color: #fff;
    /* 通常時の影（薄め） */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    /* アニメーション設定 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時の挙動：少し浮き上がり、影を濃くする */
.professional-profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

/* =========================================
   3. カード上部：画像とヘッダー
   ========================================= */
.profile-card-top {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 15px;
}

/* プロフィール画像エリア */
.profile-card-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

/* 画像スタイル */
.profile-card-image img,
.profile-card-image .placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #f0f0f0;
}

/* 画像がない場合のプレースホルダー */
.profile-card-image .placeholder-image {
    background-color: #eee;
}

/* ヘッダー情報（名前・住所エリア） */
.profile-card-header {
    flex-grow: 1;
}

.profile-card-header h3 {
    margin: 0 0 8px 0;
    font-size: 1.3em;
    color: #333;
    line-height: 1.3;
}

/* =========================================
   4. 住所アイコンとテキスト (Req 1)
   ========================================= */
.rtp-address-line {
    display: flex;
    align-items: flex-start; /* アイコンとテキストの上揃え */
    font-size: 0.9em;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.rtp-pin-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    fill: #666; /* アイコンの色 */
    flex-shrink: 0;
    margin-top: 2px; /* テキストとの位置微調整 */
}

/* =========================================
   5. 下部セクション：詳細情報
   ========================================= */
.profile-card-details {
    padding-top: 10px;
    border-top: 1px dashed #eee; /* 実線から破線に変更 */
}

.profile-card-details p {
    margin: 0 0 8px 0;
    font-size: 0.95em;
    color: #555;
}

/* =========================================
   6. アクションボタンエリア (Req 3 & 4)
   ========================================= */
.profile-card-actions {
    display: flex;
    gap: 10px; /* ボタン間の隙間 */
    margin-top: 15px;
}

/* ボタン共通スタイル */
.rtp-btn {
    flex: 1; /* ボタンを均等な幅にする */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    font-size: 0.9em;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.2s;
    text-align: center;
    border: none;
    cursor: pointer;
}

/* 詳細を見る (Details) ボタン */
.rtp-btn-details {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
}

.rtp-btn-details:hover {
    background-color: #e0e0e0;
    color: #000;
}

/* 相談する (Consult) ボタン */
.rtp-btn-consult {
    background-color: #0073aa;
    color: #fff;
}

.rtp-btn-consult:hover {
    background-color: #005f8c;
    color: #fff;
}

/* =========================================
   7. カテゴリ表示のスタイル (追加)
   ========================================= */
.rtp-category-row {
    color: #333 !important; /* 文字色を濃く */
    margin-bottom: 8px;
}

.rtp-category-row strong {
    color: #0073aa; /* ラベル（Category:）をテーマカラーに */
    margin-right: 5px;
}


/* 専門家プロフィール詳細ページのレイアウト調整 */
.author .professional-profile {
    max-width: 95%; /* ← この行を変更 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* =========================================
   8. Modern Design Enhancements
   ========================================= */

/* --- General Body and Typography --- */
body {
    font-family: "Inter", sans-serif; /* Using a modern sans-serif font */
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif; /* A different font for headings */
    font-weight: 600;
}

/* --- Core Features Section --- */
.page-content .wp-block-group {
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.05);
    background-color: #ffffff;
    margin-bottom: 2rem;
}

.page-content .wp-block-heading {
    color: #2d3748; /* A darker, more modern color */
}

ul.has-medium-font-size {
    list-style: none;
    padding-left: 0;
}

ul.has-medium-font-size li {
    padding-left: 2em;
    position: relative;
    margin-bottom: 1em;
}

ul.has-medium-font-size li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #48bb78; /* A modern green for checkmarks */
    font-weight: bold;
}


/* --- Button Styles --- */
.wp-block-button__link,
.rtp-btn {
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.wp-block-button__link:hover,
.rtp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(0,0,0,0.1);
}

.wp-block-button__link {
    background-color: #0073aa;
    color: white;
}

/* --- Advanced Chat Button --- */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid #0073aa;
    color: #0073aa;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #0073aa;
    color: white;
}

/* --- Shortcode Placeholders --- */
.shortcode {
    border: 1px dashed #ccc;
    padding: 20px;
    text-align: center;
    color: #777;
    background-color: #f9f9f9;
    border-radius: 8px;
}

/* =========================================
   9. AI Chatbot Modern UI Enhancements
   ========================================= */

/* --- General Container --- */
.ai-chatbot-container {
    display: flex;
    height: 80vh; /* Full viewport height */
    font-family: "Inter", sans-serif;
    background-color: #f9f9f9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
}

/* --- Chat History Sidebar --- */
.chatbot-history {
    width: 280px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.chatbot-history h2 {
    font-size: 1.2em;
    color: #11351C; /* Corporate Dark */
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-family: "Poppins", sans-serif;
}

.chatbot-history .new-chat-btn {
    display: block;
    width: 100%;
    padding: 12px 15px;
    background-color: #11351C; /* Corporate Dark */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    margin-bottom: 15px;
    transition: background-color 0.2s ease;
}

.chatbot-history .new-chat-btn:hover {
    background-color: #1a4d2b; /* Slightly lighter shade */
}

.chatbot-history ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}

.chatbot-history li {
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 0.9em;
    color: #333;
    transition: background-color 0.2s ease;
}

.chatbot-history li:hover {
    background-color: #f0f0f0;
}

.chatbot-history li.active {
    background-color: #CAE0CD; /* Corporate Light */
    color: #11351C; /* Corporate Dark */
    font-weight: 600;
}

/* --- Main Chat Area --- */
.chatbot-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;
}

.chatbot-messages {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

/* Message Bubble Styles */
.message {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.message .content {
    max-width: 75%;
    padding: 15px 20px;
    border-radius: 18px;
    line-height: 1.5;
    font-size: 0.95em;
}

/* AI Message */
.message.ai .content {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #e0e0e0;
    align-self: flex-start;
    border-top-left-radius: 4px;
}

/* User Message */
.message.user .content {
    background-color: #11351C; /* Corporate Dark */
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

/* --- Message Input Area --- */
.chatbot-input-area {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #ffffff;
}

.chatbot-input-area form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chatbot-input-area textarea {
    flex: 1;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1em;
    resize: none;
    height: 50px; /* Initial height */
    transition: border-color 0.2s ease;
}

.chatbot-input-area textarea:focus {
    outline: none;
    border-color: #11351C; /* Corporate Dark */
}

.chatbot-input-area .send-btn,
.chatbot-input-area .attach-btn {
    height: 50px;
    width: 50px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.5em; /* Icon size */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

.chatbot-input-area .send-btn {
    background-color: #11351C; /* Corporate Dark */
    color: #ffffff;
}
.chatbot-input-area .send-btn:hover {
    background-color: #1a4d2b;
}

.chatbot-input-area .attach-btn {
    background-color: #f0f0f0;
    color: #555;
}
.chatbot-input-area .attach-btn:hover {
    background-color: #e0e0e0;
}

/* =========================================
   10. Blog Submission Form Modernization
   ========================================= */

/* --- Container and Card Layout --- */
.page-template-default .entry-content,
.page-template-default .post-content {
    background-color: #f7f8fa; /* Light grey background for the page */
    padding-top: 40px;
    padding-bottom: 40px;
}

.blog-submission-form-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

/* --- Form Header --- */
.blog-submission-form-container h1 {
    font-family: "Poppins", sans-serif;
    font-size: 2.2em;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
}

/* --- Form Elements --- */
.blog-submission-form-container .form-row {
    margin-bottom: 25px;
}

.blog-submission-form-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 0.95em;
}

.blog-submission-form-container input[type="text"],
.blog-submission-form-container .wp-editor-area {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 1em;
    font-family: "Inter", sans-serif;
    color: #495057;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-submission-form-container input[type="text"]:focus,
.blog-submission-form-container .wp-editor-area:focus {
    outline: none;
    border-color: #0073aa; /* Using a theme color for focus */
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

/* --- TinyMCE Editor Specific Styles --- */
.blog-submission-form-container .wp-editor-wrap {
    border-radius: 8px;
    overflow: hidden; /* Ensures the border-radius is applied to children */
    border: 1px solid #ced4da;
}

.blog-submission-form-container .wp-editor-tools {
    border-bottom: 1px solid #ced4da;
    background-color: #f8f9fa;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.blog-submission-form-container .wp-editor-container {
    border: none;
}

/* --- Submit Button --- */
.blog-submission-form-container .submit-button {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #ffffff;
    background-color: #11351C; /* Using corporate dark green */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(17, 53, 28, 0.2);
}

.blog-submission-form-container .submit-button:hover {
    background-color: #1a4d2b; /* Slightly lighter green on hover */
    transform: translateY(-2px);
    box-shadow: 0 7px 15px rgba(17, 53, 28, 0.25);
}

.blog-submission-form-container .submit-button:active {
    transform: translateY(0);
}

/* =========================================
   11. Comment Form Layout Adjustments
   ========================================= */

/* Set the width of the comment form container */
.comment-form {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Stack the comment label and textarea vertically */
.comment-form-comment {
    display: flex;
    flex-direction: column;
}

.comment-form-comment label {
    margin-bottom: 5px;
}