/* ==========================================================================
   Team Member Single Page Styles
   ========================================================================== */

/* Main container for team member pages - clean, no background */
.team-member-all-container {
    /* Clean container with no background styling */
}

/* Page title styling */
.team-member-all-container h1.wp-block-post-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* Main content area */
.team-member-all-container .wp-block-columns {
    gap: 3rem;
    align-items: flex-start;
}

/* Right column styling for contact info */
.team-member-info,
.team-member-all-container .wp-block-column.team-member-info {
    background-color: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    position: sticky;
    top: 2rem;
    height: fit-content;
}

/* Team member image in sidebar - responsive with rounded corners and no forced aspect ratio */
.team-member-info .wp-block-post-featured-image {
    margin-bottom: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100%;
    height: auto;
    aspect-ratio: unset !important; /* Remove any forced aspect ratio */
}

.team-member-info .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 12px;
    display: block;
    object-fit: contain !important; /* Show full image without cropping */
    aspect-ratio: unset !important; /* Remove any forced aspect ratio */
}

/* ==========================================================================
   RTM Team Member Field Button Styles
   ========================================================================== */

/* Convert all links in team member fields to buttons - ONLY in the sidebar/info column */
.team-member-info .wp-block-rtm-team-member-field a,
.team-member-info .team-member-field-block a,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a,
.team-member-all-container .team-member-info .team-member-field-block a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #035642;
    color: white !important;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    margin: 0.5rem 0;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(3, 86, 66, 0.2);
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}

/* Hover effects for buttons */
.team-member-info .wp-block-rtm-team-member-field a:hover,
.team-member-info .team-member-field-block a:hover,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a:hover,
.team-member-all-container .team-member-info .team-member-field-block a:hover {
    background-color: #047359;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(3, 86, 66, 0.3);
}

/* All buttons use consistent green theme color */
.team-member-info .wp-block-rtm-team-member-field a[href^="mailto:"],
.team-member-info .wp-block-rtm-team-member-field a[href*="linkedin"],
.team-member-info .wp-block-rtm-team-member-field a[href*="scholar.google"],
.team-member-info .wp-block-rtm-team-member-field a[href*="researchgate"],
.team-member-info .wp-block-rtm-team-member-field a[href*="unbc.ca"],
.team-member-info .wp-block-rtm-team-member-field a[href*="orcid.org"],
.team-member-info .wp-block-rtm-team-member-field a[href*="github.com"],
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a {
    background-color: var(--rtm-accent-green) !important;
}

.team-member-info .wp-block-rtm-team-member-field a:hover,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a:hover {
    background-color: var(--rtm-accent-green-hover) !important;
}

/* ==========================================================================
   Non-link Field Styling (Phone Numbers, etc.)
   ========================================================================== */

.wp-block-rtm-team-member-field .team-member-field-content {
    display: block;
    margin-bottom: 8px;
}

/* Style phone numbers and other non-link content to match button style */
.team-member-info .wp-block-rtm-team-member-field .team-member-field-content:not(:has(a)),
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field .team-member-field-content:not(:has(a)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rtm-accent-green);
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-align: center;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(3, 86, 66, 0.2);
    box-sizing: border-box;
    width: 100%;
}

/* Position/title field styling (below the name) */
.team-member-all-container > .wp-block-group:first-child .wp-block-rtm-team-member-field:first-of-type .team-member-field-content {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--rtm-accent-green);
    margin-bottom: 1.5rem;
    background: none;
    padding: 0;
    text-align: left;
}

/* Long description styling */
.team-member-all-container .wp-block-column:first-child .wp-block-rtm-team-member-field {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.team-member-all-container .wp-block-column:first-child .wp-block-rtm-team-member-field p {
    margin-bottom: 1rem;
}

/* ==========================================================================
   Contact Information Section
   ========================================================================== */

.team-member-info .wp-block-group,
.team-member-all-container .wp-block-group {
    margin-bottom: 20px;
}

/* Contact Information heading */
.team-member-info .has-helvetica-neue-font-family,
.team-member-all-container .has-helvetica-neue-font-family {
    border-bottom: 2px solid #035642;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
}

/* ==========================================================================
   Icon Support for Different Link Types
   ========================================================================== */

/* LinkedIn */
.team-member-info .wp-block-rtm-team-member-field a[href*="linkedin"]:before,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a[href*="linkedin"]:before {
    content: '\f08c';
    font-family: 'Font Awesome 5 Brands';
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* Google Scholar */
.team-member-info .wp-block-rtm-team-member-field a[href*="scholar.google"]:before,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a[href*="scholar.google"]:before {
    content: '\f19d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* ResearchGate - using graduation cap icon like Google Scholar */
.team-member-info .wp-block-rtm-team-member-field a[href*="researchgate"]:before,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a[href*="researchgate"]:before {
    content: '\f19d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* Email */
.team-member-info .wp-block-rtm-team-member-field a[href^="mailto:"]:before,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a[href^="mailto:"]:before {
    content: '\f0e0';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* UNBC Website */
.team-member-info .wp-block-rtm-team-member-field a[href*="unbc.ca"]:not([href^="mailto:"]):before,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a[href*="unbc.ca"]:not([href^="mailto:"]):before {
    content: '\f19c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* ORCID */
.team-member-info .wp-block-rtm-team-member-field a[href*="orcid.org"]:before,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a[href*="orcid.org"]:before {
    content: '\f8d2';
    font-family: 'Font Awesome 5 Brands';
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* GitHub */
.team-member-info .wp-block-rtm-team-member-field a[href*="github.com"]:before,
.team-member-all-container .team-member-info .wp-block-rtm-team-member-field a[href*="github.com"]:before {
    content: '\f09b';
    font-family: 'Font Awesome 5 Brands';
    margin-right: 0.5rem;
    font-size: 1.1em;
}

/* Phone number icon for non-linked phone fields */
.team-member-info .wp-block-rtm-team-member-field .team-member-field-content:not(:has(a)):before {
    content: '\f095';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0.5rem;
    font-size: 1.1em;
    color: white;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    /* Remove sticky positioning on mobile */
    .team-member-info,
    .team-member-all-container .wp-block-column.team-member-info {
        position: static;
        margin-bottom: 2rem;
    }
    
    /* Smaller buttons on mobile */
    .team-member-info .wp-block-rtm-team-member-field a,
    .team-member-all-container .wp-block-rtm-team-member-field a {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
    
    /* Stack columns on mobile */
    .team-member-all-container .wp-block-columns {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Move contact info to top on mobile */
    .team-member-all-container .wp-block-column.team-member-info {
        order: -1;
    }
    
    /* Adjust image size on mobile */
    .team-member-info .wp-block-post-featured-image {
        max-width: 300px;
        margin: 0 auto 1.5rem auto;
    }
    
    /* Smaller title on mobile */
    .team-member-all-container h1.wp-block-post-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    /* Even smaller adjustments for very small screens */
    .team-member-all-container {
        padding: 1rem;
    }
    
    .team-member-info,
    .team-member-all-container .wp-block-column.team-member-info {
        padding: 1rem;
    }
    
    .team-member-all-container h1.wp-block-post-title {
        font-size: 1.75rem;
    }
    
    .team-member-info .wp-block-post-featured-image {
        max-width: 250px;
    }
}