/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/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.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
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
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* Container styling */
.pagination {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.pagination .nav-links {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Individual link and number styling */
.pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

/* Hover state */
.pagination a.page-numbers:hover {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* Current active page styling */
.pagination .page-numbers.current {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
    font-weight: bold;
}

/* Dots (...) styling */
.pagination .page-numbers.dots {
    border: none;
    padding: 8px 5px;
}

@media (max-width: 600px) {
    .pagination .page-numbers {
        padding: 6px 10px;
        font-size: 14px;
    }
    .pagination .nav-links {
        gap: 5px;
    }
}

/* css for single member information display */
/* Container & Layout */
.gt-member-page-wrapper {
    background-color: #f8f9fa;
    padding: 60px 20px;
    min-height: 80vh;
}

.gt-member-card {
    max-width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    display: grid;
    grid-template-columns: 300px 1fr; /* Sidebar width */
    gap: 40px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.gt-vitals-box h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin: 30px 0 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.gt-meta-list {
    list-style: none;
    padding: 0;
}

.gt-meta-list li {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.gt-meta-list li strong {
    font-size: 12px;
    color: #0073aa; /* Accent color */
}

.gt-meta-list li span {
    font-size: 16px;
    color: #333;
}

/* Main Content */
.gt-member-name {
    font-size: 42px;
    margin-top: 0;
    color: #1a1a1a;
}

.gt-section-title {
    font-size: 18px;
    border-left: 4px solid #0073aa;
    padding-left: 15px;
    margin: 30px 0 20px;
}

.gt-biography {
    line-height: 1.8;
    color: #444;
    font-size: 17px;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .gt-member-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    
    .gt-member-sidebar {
        text-align: center;
    }
}
/* For that member information edit form */
.gt-edit-form {
    background: #fdfdfd;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.gt-edit-form .form-group {
    margin-bottom: 20px;
}
.gt-edit-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.gt-edit-form input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.gt-btn-save {
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}




/* --- 1. Button Styling --- */
.member-controls {
    margin-bottom: 30px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.gt-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

/* Edit Button (Theme Blue) */
.gt-btn-edit {
    background-color: #0073aa;
    color: white !important;
    margin-top: 20px;
}

/* Cancel Button (Soft Grey) */
.gt-btn-cancel {
    background-color: #f0f0f0;
    color: #444 !important;
    border: 1px solid #ccc;
}

/* Save Button (Success Green) */
.gt-btn-save {
    background-color: #28a745;
    color: white !important;
    margin-right: 50px;
}

.gt-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* --- 2. Notifications --- */
.gt-success-notice {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    border-left: 5px solid #28a745;
    font-weight: 500;
}

/* --- 3. Form Styling --- */
.gt-edit-form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.form-row {
    margin-bottom: 20px;
}

.form-row label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    font-size: 22px;
}

.form-row input[type="text"], 
.form-row select, 
.form-row textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 22px;
}

.form-row input:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,115,170,0.1);
}

/* --- 4. Profile View (Existing Styles) --- */
.gt-member-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
}
/* --- error message) --- */
.gt-form-notice-error {
    background-color: #fff5f5;
    border: 1px solid #feb2b2;
    border-left: 5px solid #f56565;
    color: #c53030;
    padding: 16px;
    margin-bottom: 25px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
}

.gt-form-notice-error .gt-icon {
    font-size: 20px;
}

/* single member comment section styling */
/* Container for the whole section */
.member-comments-section {
    margin-top: 40px;
    padding: 20px;
    border: 1px solid #e1e1e1;
    background-color: #fdfdfd;
    border-radius: 8px;
}

/* Individual Comment Boxes */
.gt-comment {
    background: #ffffff;
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #0073aa; /* Genealogy-style blue accent */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* The Comment Form Textarea */
#respond textarea#comment {
    width: 100%;
    min-height: 120px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px;
    font-family: inherit;
    font-size: 15px;
    background-color: #fff;
}

/* The Submit Button */
#respond input#submit {
    background-color: #0073aa;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

#respond input#submit:hover {
    background-color: #005177;
}

/* Hide the "You must be logged in" or other default notes if they look messy */
.comment-notes, .logged-in-as {
    margin-bottom: 15px;
    font-size: 18px;
}

/* make the modification info look like a professional meta-data tag: */
.member-modification-info {
    font-style: italic;
    display: flex;
    justify-content: flex-end; /* Aligns it to the right */
    gap: 10px;
}

.member-modification-info strong {
    color: #333;
}
/*make the Save/Cancel buttons look nice */
.btn-update {
    background: #0073aa;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.btn-cancel {
    color: #666;
    margin-left: 10px;
    text-decoration: none;
    font-size: 0.9em;
}

/*pagination styling for member search results */
.gt-pagination {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}
.gt-pagination a, .gt-pagination span {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-decoration: none;
}
.gt-pagination .current {
    background-color: #0073aa;
    color: white;
    border-color: #0073aa;
}

/* Hide Login/Register/reset password when logged in */
body.logged-in .hide-if-logged-in {
    display: none !important;
}

/* Hide Logout/Account/user when logged out */
body:not(.logged-in) .show-only-logged-in {
    display: none !important;
}

/* Targeting by type: date */
.form-row input[type="date"] {
    width: 250px;       /* Control the horizontal size */
    padding: 8px 12px;  /* Control the "thickness" or internal space */
    font-size: 22px;    /* Control the text size and icon scale */
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* This targets only the title you just tagged */
.my-genealogy-title-in-header, 
.my-genealogy-title-in-header a {
    font-family: 'Ma Shan Zheng', serif !important;
    font-weight: 400;
    letter-spacing: 2px; /* Adds a bit of elegance to Chinese characters */
    color: #2c3e50;      /* You can set a specific "old ink" color here */
}
/* for repeat name, lunar calendar checkboxes */
 .side_by_side_container {
  display: flex;              /* Magic line! */
  gap: 20px;                  /* Space between divs (modern & easy) */
  width: 600px;
  /* Optional extras: */
  flex-wrap: wrap;            /* Allows stacking on small screens */
  justify-content: space-between; /* or center, space-around, etc. */
}

/* for upload profile picture */
.gt-member-photo {
    position: relative;
    width: 200px;
    height: 250px;
    cursor: pointer;
    overflow: hidden;
    background: #f9f9f9;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    
    /* CRITICAL: This allows the click to pass through to the trigger underneath */
    pointer-events: none; 
}

/* Show the overlay when the mouse hovers over the main container */
.gt-member-photo:hover .upload-overlay {
    opacity: 1;
}

.gt-member-photo img, 
.gt-placeholder-avatar {
    width: 200px;  /* Match exact container width */
    height: 250px; /* Match exact container height */
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover;
    border: none !important;      /* Removes 5px borders from some themes */
    outline: none !important;
    box-sizing: border-box !important;
}

/* Specific fix for the avatar to ensure it doesn't shift */
.gt-placeholder-avatar {
    display: flex;
    background: #eee;
    align-items: center;
    justify-content: center;
    font-size: 80px;
}

/* profile display page's pc screen and phone screen adaptation */
/* 1. Base Structure (Desktop First) */
.gt-member-card {
    display: flex;
    flex-direction: row; /* Side-by-side */
    gap: 30px;           /* Space between photo and text */
    align-items: flex-start;
}

.gt-member-sidebar {
    flex: 0 0 200px;     /* Don't grow, don't shrink, stay 200px */
}

.gt-member-main {
    flex: 1;             /* Take up the remaining space */
}

/* 2. Mobile Responsive Logic */
@media screen and (max-width: 767px) {
    .gt-member-card {
        flex-direction: column; /* Stack vertically */
        align-items: center;    /* Center the photo and text on mobile */
        gap: 20px;
    }

    .gt-member-sidebar {
        flex: 0 0 auto;         /* Allow sidebar to fit its content */
        width: 100%;            /* Ensure container is full width */
        display: flex;
        justify-content: center; /* Center the photo box on the phone */
    }

    .gt-member-main {
        width: 100%;
        text-align: center;     /* Optional: Center the text for better mobile look */
    }
}

/* Make Select2 match your site's style */
/* 1. The Outer Shell */
.select2-container--default .select2-selection--single {
    border: 2px solid #dcd7c9 !important;
    height: 55px !important;       /* Increased from 40px to 60px */
    border-radius: 6px;
    display: flex;                 /* Helps with vertical alignment */
    align-items: center;
}

/* 2. The Inner Text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 51px !important;  /* 60px minus 4px for the top/bottom borders */
    font-size: 22px;               /* Optional: Make text larger to match the taller box */
}

/* 3. The Arrow Icon (Optional adjustment) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 51px !important;       /* Centers the dropdown arrow in the taller box */
}

/* Limit the Genealogy Tree Viewport */
#gt-container {
    max-height: 75vh; /* 75% of the screen height */
    overflow: auto;   /* Enables both vertical and horizontal scrollbars */
    border: 2px solid #e5e5e5;
    border-radius: 12px;
    background-color: #fdfdfd;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    position: relative;
    margin-top: 10px;
}

/* Ensure the search bar sticks to the top of the container */
.gt-search-wrapper {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    /* border-bottom: 1px solid #ddd;*/
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05);*/
}

/* Optional: Improve the appearance of the scrollbars */
#gt-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
#gt-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
#gt-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}
/* member search result styling */
#gtSearchStatus {
    transition: opacity 0.3s ease;
    padding: 2px 8px;
    border-radius: 4px;
}