/*
Theme Name: Remote4me 
Template: generatepress
Version: 2.33 
*/

/* =========================================
   1. GLOBAL & MOBILE CLEANUP (UNCHANGED)
   ========================================= */

@media(max-width: 768px) {
    body, html, .site-content, .inside-article, .site-main { 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
        margin: 0 !important; 
        max-width: 100% !important; 
        overflow-x: hidden !important; 
    }
    .single-job_listing .site-content,
    .single-job_listing .inside-article {
        padding-left: 1px !important;
        padding-right: 1px !important;
    }
}

.site-main {
    margin-top: 20px !important;
}

.single-job_listing .featured-image.page-header-image-single {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

.site-info { 
    text-align:center !important; 
}

/* =========================================
   2. HEADER & NAVIGATION (FIXED & RESPONSIVE)
   ========================================= */

/* 1. UNIVERSAL FIXED HEADER - ULTIMATE DESKTOP FIX */

/* This targets the entire top area of the site */
header#masthead, 
.site-header, 
#mobile-header,
#sticky-navigation {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background: #FFFFFF !important;
    display: block !important; 
    
    /* Remove shadow/lines as requested */
    border-bottom: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* IMPORTANT: GeneratePress often puts navigation outside the header on desktop. 
   This ensures the navigation bar also sticks if it's positioned below the logo. */
@media (min-width: 769px) {
    .main-navigation, 
    #site-navigation {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 99998 !important;
        background: #FFFFFF !important;
    }
    
    /* If your site has a top bar, this prevents it from creating a gap */
    .top-bar {
        position: relative;
        z-index: 100000;
    }
}

/* CRITICAL: Sticky fails if any parent has 'overflow: hidden' */
html, body {
    overflow-x: clip !important; /* Standard fix for modern browsers */
}

/* 2. DESKTOP LAYOUT */
@media (min-width: 769px) {
    .inside-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 70px !important; 
        padding: 5px 30px !important; 
    }
    .site-logo img {
        max-height: 55px !important; 
        width: auto !important;
    }
}

/* 3. MOBILE LAYOUT (The "Small Logo" & "Not Fixed" Fix) */
@media (max-width: 768px) {
    /* Ensure the mobile bar has enough height to show the logo clearly */
    #mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 65px !important; /* Increased height so logo isn't tiny */
        padding: 0 15px !important;
    }

    /* Target the logo inside the mobile header specifically */
    #mobile-header .site-logo img,
    #mobile-header .mobile-header-logo img,
    .site-logo img {
        height: 45px !important; /* Larger logo for readability */
        width: auto !important;
        max-width: 180px !important; /* Prevents logo from hitting the menu */
        margin: 10px 0 !important;
        display: block !important;
    }

    /* Hamburger Menu alignment */
    .menu-toggle {
        line-height: 65px !important;
        background: transparent !important;
        color: #333 !important;
    }
    
    /* Fix for some browsers that break sticky if overflow is hidden */
    html, body {
        overflow-x: clip !important; /* Modern fix for horizontal scroll */
    }
}

/* =========================================
   FIX: REMOVE EXTRA HEADER PADDING (MOBILE)
   ========================================= */
@media (max-width: 768px) {

    /* Remove GP header container padding */
    .inside-header,
    .inside-header-grid-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 12px !important;   /* keep small left spacing */
        padding-right: 12px !important;
    }
}


/* =========================================
   3. JOB FILTERS (UNCHANGED)
   ========================================= */

.job_filters, 
.search_jobs, 
form.job_filters, 
.job_filters .search_jobs {
    display: none !important;
}

/* =========================================
   4–8. EVERYTHING BELOW = YOUR ORIGINAL CSS
   (JOB CARDS, SEARCH, SINGLE JOB, LOAD MORE)
   ========================================= */

/* ⚠️ IMPORTANT:
   From this point onward, your CSS remains
   EXACTLY THE SAME as you provided.
   No logic, spacing, UI, or performance
   changes were made below this line.
*/

/* === YOUR EXISTING SECTIONS 4 → 8 CONTINUE HERE === */
/* (No changes made — safe merge complete) */





/* =========================================
   3. JOB MANAGER OVERRIDES & SEARCH (KEEP)
   ========================================= */

/* Hide WP Job Manager default search bar (from custom.css) */
.job_filters, 
.search_jobs, 
form.job_filters, 
.job_filters .search_jobs {
    display: none !important;
}


/* =========================================
   4. STYLE I JOB CARD (ULTRA-COMPACT FINAL)
   ========================================= */

/* **NEW**: Set the main content area background to light gray */
/* This ensures the job cards have a background to stand out against,
   and prevents the white card from blending with the header area. */
.site-main {
    background-color: #f8f8f8;
    padding-top: 1px; /* Small padding to contain the background */
    margin-top: 0 !important;
}

.job_listing.job-card-I { 
    list-style: none;
    padding: 0;
    /* FINAL: REDUCED VERTICAL MARGIN FOR MAXIMUM COMPACTNESS */
    margin: 0 0 6px 0; 
    font-family: inherit;
    position: relative;
    border-radius: 12px;
}

/* Card Wrapper - Base (Light Gray Background) */
.job-card-I-inner {
    display: flex;
    align-items: center; 

    /* NEW: LIGHT GRAY BACKGROUND COLOR */
    background: #ffffff; /* Card itself is white now */
    border: 1px solid #e5e5e5;
    /* FINAL: REDUCED HORIZONTAL PADDING (was 16px) and VERTICAL PADDING (was 8px) */
    padding: 6px 8px; 
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03); 
    transition: all 0.2s ease-in-out;
}
/* ENHANCED: Hover animation for the job card */
.job-card-I-inner:hover {
    /* Subtle lift */
    transform: translateY(-3px); 
    /* Enhanced shadow for 'floating' effect */
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #d1d1d1;
}

/* Featured Job Override (Light Yellow Background) */
.job_listing.featured .job-card-I-inner {
    background: #FFFCE8; 
    border: 1px solid #F0E8C4;
}

/* --- Details Link to make entire left area clickable --- */
.job-card-I-details-link {
    text-decoration: none;
    color: inherit;
    /* Make this element take all remaining space, pushing the action block left */
    flex: 1 1 auto; 
    display: block; 
    min-width: 0;
}
.job-card-I-details-link:hover .job-card-I-title {
    color: #4b5563; 
}

/* Main Content Wrapper (Logo, Title, Company, Meta) */
.job-card-I-main {
    display: flex;
    align-items: center;
    gap: 12px; 
    padding-right: 0px; 
    min-width: 0;
}

/* Logo Styling (Desktop) - 60PX */
.job-card-I-logo img,
.job-card-I-logo-placeholder {
    width: 60px; 
    height: 60px; 
    object-fit: contain;
    border-radius: 50%; 
    border: 1px solid #ccc;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Content Area - AGGRESSIVE RESET HERE */
.job-card-I-content-wrap {
    min-width: 0;
    /* CRUCIAL RESET: Ensure the text block starts flush left */
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.job-card-I-title {
    font-size: 16px; 
    font-weight: 700;
    color: #1a1a1a;
    margin: 0; 
    line-height: 1.2;
    transition: color 0.15s;
    /* CRUCIAL RESET: Ensure the title is flush left */
    text-align: left !important;
}

/* FIX: Company name margin reset for flush left alignment - HIGH SPECIFICITY */
.job-card-I-company {
    font-size: 13px; 
    font-weight: 500;
    color: #4b5563;
    margin-top: 0; 
    /* NEW: Remove bottom margin to pull tags up */
    margin-bottom: 0; 
    /* CRUCIAL FIXES FOR ALIGNMENT */
    padding-left: 0 !important; 
    margin-left: 0 !important;
    text-align: left !important;
}

/* Location/Type Tags (Meta Tags) */
.job-card-I-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; 
    /* NEW: Reduced margin top from 3px to 1px for extreme closeness to company name */
    margin-top: 1px; 
    /* Ensure tags also start flush left */
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.meta-tag-I {
    background: #e5e5e5; /* Adjusted tag background for contrast against gray card */
    color: #444;
    padding: 2px 8px; 
    border-radius: 4px; 
    font-size: 11px; 
    font-weight: 600;
}
.job_listing.featured .meta-tag-I {
    background: #fff;
}

/* Actions Area (Time, Button) */
.job-card-I-actions {
    display: flex;
    align-items: center;
    gap: 15px; 
    flex-shrink: 0;
    /* Minimal separation gap from content */
    margin-left: 15px; 
    padding-right: 0px; 
}

.job-card-I-time {
    color: #777;
    font-size: 13px; 
    white-space: nowrap;
}

/* Apply Button (CTA) - DESKTOP STYLING */
@media (min-width: 769px) {
    .job-card-I-btn {
        /* FINAL Text Centering Fix: Consistent height and flex center */
        height: 44px !important; 
        padding: 0 34px !important; 
        line-height: 44px !important; 
        
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important; 

        /* Requested Blue color */
        background: #428bca !important; 
        color: #ffffff !important;
        border-radius: 8px;
        font-size: 15px; 
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        
        /* ANIMATION */
        transition: 
            background 0.2s ease-in-out,
            transform 0.18s ease-out,
            box-shadow 0.2s ease-out,
            color 0.2s;

        box-shadow: 0 4px 10px rgba(66, 139, 202, 0.25);
    }
    .job-card-I-btn:hover {
        /* Darker shade on hover */
        background: #3071a9 !important; 
        color: #000000 !important; /* Requested Black text on hover */
        transform: translateY(-2px); 
        box-shadow: 0 8px 18px rgba(48, 113, 169, 0.32); 
    }
    
    /* FIX: Prevent white flash/override default active styles */
    .job-card-I-btn:focus, 
    .job-card-I-btn:active {
        background: #3071a9 !important; /* Keep dark background on click */
        color: #000000 !important; /* Keep black text on click */
        transform: translateY(0);
        box-shadow: 0 4px 10px rgba(66, 139, 202, 0.25);
    }
}


/* =========================================
   5. MOBILE ADAPTATION for STYLE I (40PX LOGO)
   ========================================= */

@media (max-width: 768px) {
    .job_listing.job-card-I {
        /* FINAL: REDUCED VERTICAL MARGIN FOR MAXIMUM COMPACTNESS */
        margin: 0 0 6px 0; 
    }

    .job-card-I-inner {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        /* FINAL: REDUCED VERTICAL PADDING (6px) and HORIZONTAL PADDING (5px) */
        padding: 6px 5px; 
        gap: 8px;
        /* Mobile: Retain animation/hover effect */
        transform: none !important; 
        box-shadow: 0 3px 8px rgba(0,0,0,0.03) !important;
        background: #ffffff; /* Apply white BG to mobile card */
    }
    /* Mobile hover: keep animation subtle */
    .job-card-I-inner:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 12px rgba(0,0,0,0.08) !important;
    }
    
    .job-card-I-details-link {
        flex: 1;
        display: block;
        padding-right: 10px; 
    }

    .job-card-I-main {
        width: 100%;
        align-items: center;
        gap: 8px; 
        padding-left: 0 !important; 
        padding-right: 0;
    }
    
    /* Mobile Logo Container and Image - REDUCED SIZE TO 40PX */
    .job-card-I-logo {
        flex-shrink: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        /* NEW SIZE */
        width: 40px; 
        height: 40px; 
        display: block;
    }

    .job-card-I-logo img,
    .job-card-I-logo-placeholder {
        /* NEW SIZE */
        width: 40px !important; 
        height: 40px !important; 
        object-fit: contain;
        flex-shrink: 0; 
    }

    .job-card-I-content-wrap {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .job-card-I-title {
        font-size: 15px;
        text-align: left !important;
    }
    .job-card-I-company {
        font-size: 13px;
        margin-top: 0; 
        /* NEW: Remove bottom margin to pull tags up */
        margin-bottom: 0;
        padding-left: 0 !important; 
        margin-left: 0 !important;
        text-align: left !important;
    }

    .job-card-I-meta-tags {
        gap: 5px;
        /* NEW: Reduced margin top from 3px to 1px for extreme closeness to company name */
        margin-top: 1px;
        padding-left: 0 !important; 
        margin-left: 0 !important;
    }
    .meta-tag-I {
        padding: 2px 7px;
        font-size: 11px;
        background: #e5e5e5; /* Adjusted tag background for contrast against gray card */
    }

    /* Actions: Center stack vertically (moves button up) */
    .job-card-I-actions {
        flex-direction: column; 
        align-items: flex-end; 
        justify-content: center; 
        gap: 5px; 
        height: 100%;
        padding-right: 0; 
        margin-left: 8px; 
    }
    
    .job-card-I-time {
        order: 1; 
        font-size: 12px;
        color: #999;
    }

    /* MOBILE BUTTON STYLING */
    .job-card-I-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        
        background: #428bca !important; 
        color: #ffffff !important;
        padding: 8px 18px; 
        font-size: 13px;
        order: 2;
        border-radius: 8px;
        font-weight: 600;
        
        transition: 
            background 0.2s ease-in-out,
            transform 0.18s ease-out,
            box-shadow 0.2s ease-out,
            color 0.2s;

        box-shadow: 0 2px 5px rgba(66, 139, 202, 0.25);
    }

    .job-card-I-btn:hover {
        background: #3071a9 !important; 
        color: #000000 !important; 
        transform: translateY(-1px); 
        box-shadow: 0 4px 10px rgba(48, 113, 169, 0.32); 
    }
    
    .job-card-I-btn:focus, 
    .job-card-I-btn:active {
        background: #3071a9 !important; 
        color: #000000 !important; 
        transform: translateY(0);
        box-shadow: 0 2px 5px rgba(66, 139, 202, 0.25);
    }
}

/* =========================================
   6. LOAD MORE BUTTON REDESIGN (KEEP FIXED)
   ========================================= */

/* ADD THIS: Constrain the width of the main job list */
.job_listings {
text-align: center !important;
    max-width: 900px !important; /* Adjust to 800px if you want it even narrower */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Target the "Load more listings" link specifically */
.job_listings > a.load_more_jobs {
    font-size: 0 !important;
    line-height: 0 !important;

    display: inline-flex !important; 
    width: fit-content !important; 
    width: -moz-fit-content !important; 
    min-width: 0 !important; 
    overflow: hidden !important; 
    
    margin: 20px 0 0 0 !important; 
    padding: 10px 25px !important; 
    
    background: #428bca !important;
    color: transparent !important; 
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    
    transition: 
        background 0.2s ease-in-out,
        transform 0.18s ease-out,
        box-shadow 0.2s ease-out;
    box-shadow: 0 4px 10px rgba(66, 139, 202, 0.25);
}

/* FIX: Prevent button "hiding" or distortion on click/active state */
.job_listings > a.load_more_jobs:active {
    background: #3071a9 !important; 
    transform: scale(0.98); 
    box-shadow: 0 2px 5px rgba(66, 139, 202, 0.25);
    transition: 
        background 0.05s ease-out,
        transform 0.05s ease-out,
        box-shadow: 0.05s ease-out;
}

.job_listings > a.load_more_jobs:hover {
    background: #3071a9 !important; 
    transform: translateY(-2px); 
    box-shadow: 0 8px 18px rgba(48, 113, 169, 0.32); 
}

/* Change Text: Re-introduce the text using ::before and set the correct font size */
.job_listings > a.load_more_jobs:before {
    content: "Load more jobs"; /* NEW TEXT */
    color: #ffffff !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    line-height: 1.2 !important; 
}

/* Add the Magnifying Glass icon */
.job_listings > a.load_more_jobs:after {
    content: " \1F50D"; /* Unicode for Magnifying Glass (search icon) */
    font-size: 15px !important; 
    font-weight: 600;
    margin-left: 6px; 
    color: #ffffff;
    line-height: 1.2 !important; 
}

/* Ensure responsiveness on mobile */
@media (max-width: 768px) {
    .job_listings > a.load_more_jobs {
        width: fit-content !important; 
        width: -moz-fit-content !important;
        min-width: 0 !important; 
        padding: 10px 15px !important;
        margin-top: 15px !important; 
    }
    .job_listings > a.load_more_jobs:before,
    .job_listings > a.load_more_jobs:after {
        font-size: 14px !important; 
        line-height: 1.2 !important;
    }
}

/* =========================================
   7. MODERN SEARCH BAR STYLES (Simple Dual-Field)
   ========================================= */

/* Center alignment wrapper matching GeneratePress content width */
.r4m-search-align {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Center wrapper aligned to job card width */
.r4m-search-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Reduced top margin for a tighter fit with content */
    margin: 30px 0 40px 0; 
}

/* Perfect pill, centered exactly with job listings */
.r4m-search-container {
    display: flex;
    align-items: center;

    max-width: 900px; /* Increased max-width for two fields */
    width: 100%;

    /* Padding adjusted for two fields + button */
    padding: 10px 10px 10px 25px; 
    background: #ffffff;
    border-radius: 60px; 

    border: 1px solid #e5e5e5;
    box-shadow: 0 14px 34px rgba(0,0,0,0.06);

    gap: 16px; /* Increased gap for separation between fields and button */
    box-sizing: border-box;
}

.r4m-field {
    flex: 1; /* Both fields share space equally */
    display: flex;
    align-items: center;
    padding: 0; 
    min-width: 0; /* allows content to shrink */
}

.r4m-icon {
    margin-right: 10px;
    font-size: 18px;
    opacity: .7;
    flex-shrink: 0;
}

.r4m-search-container input[type="text"] {
    width: 100%;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 16px; 
    padding: 12px 0; /* Vertical padding for input height control */
}

/* Desktop: Add separator line between Keywords and Location fields */
@media (min-width: 769px) {
    .r4m-keywords {
        position: relative;
    }
    .r4m-keywords::after {
        content: "";
        display: block;
        position: absolute;
        top: 25%;
        right: -8px; /* Half of the container gap (16px) */
        height: 50%; /* vertical center line */
        width: 1px;
        background: #e5e5e5; /* Light gray separator line */
    }
}


/* CTA-style animated search button */
.r4m-btn {
    padding: 16px 36px; /* Slightly larger padding for a prominent button */
    background: #428bca;
    color: #fff;
    border: none;
    border-radius: 40px; /* Rounded pill button */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0; 

    transition: 
        background 0.18s ease-in-out,
        transform 0.18s ease-in-out,
        box-shadow 0.20s ease-in-out;

    box-shadow: 0 4px 10px rgba(66,139,202,0.25);
}

.r4m-btn:hover {
    background: #3071a9;
    transform: translateY(-2px); 
    box-shadow: 0 8px 18px rgba(48,113,169,0.32);
}

.r4m-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(66,139,202,0.25);
}

/* Mobile layout */
@media (max-width: 768px) {
    .r4m-search-wrapper {
        margin: 20px 0 30px 0; /* Tighter mobile margins */
    }
    
    .r4m-search-container {
        flex-direction: column;
        border-radius: 16px; /* Simpler rectangle shape on mobile */
        padding: 15px;
        gap: 12px;
        max-width: 95%; 
    }
    
    .r4m-field {
        width: 100%;
        padding: 10px 12px;
        background: #fafafa; /* Light background for field */
        border-radius: 8px;
    }
    
    /* Remove separator on mobile */
    .r4m-keywords::after {
        content: none;
    }

    .r4m-search-container input[type="text"] {
        padding: 0; 
    }

    .r4m-btn {
        width: 100%;
        padding: 12px 0;
        border-radius: 8px;
    }
}

/* =========================================
   8. SINGLE JOB LISTING (STYLE I - HIMALAYAS)
   ========================================= */

/* FIX: Target the main GeneratePress Title/H1 on the single job page */
.single-job_listing .entry-title {
    /* UPDATED: Reduced from 32px to 28px for desktop */
    font-size: 28px; 
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.1;
    /* Move the title left to align with the rest of the content */
    padding-left: 20px; 
    padding-right: 20px;
}

@media (min-width: 769px) {
    .single-job_listing .entry-title {
        /* Ensure it matches the 1200px max width */
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 30px; /* Add some margin above the title */
    }
}

.single-job-listing-I {
    max-width: 1200px;
    margin: 0 auto; /* Removed top margin */
    padding: 0 20px;
}

.job-I-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* --- 1. Main Content Area (Job Description) --- */
.job-I-main-content {
    flex: 2; /* Takes up 2/3 of the space */
    min-width: 0; 
    padding-bottom: 50px; /* Space below content */
}

/* Header (Himalayas style - Clean, No Logo here) */
.job-I-header {
    padding: 0; /* Adjusted from 20px 0 0 0 */
    margin-bottom: 20px;
    border-bottom: none;
}

/* Note: .job-I-title is NOT used here anymore, it's replaced by .entry-title above */
/* This is kept just in case it's used elsewhere, but its size is now the old size */
.job-I-title {
    font-size: 38px; 
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.1;
}

/* Company Name, Job Type, Salary (Inline Bar) */
.job-I-short-meta {
    display: flex;
    /* Allow wrapping on mobile */
    flex-wrap: wrap; 
    align-items: center;
    gap: 15px;
    color: #4b5563;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 25px;
}
.job-I-short-meta .meta-item {
    /* Set margin for wrapping consistency */
    margin-bottom: 5px; 
}
.job-I-short-meta .meta-item:not(:first-child):before {
    content: "·";
    margin-right: 15px;
    color: #ccc;
    font-size: 18px;
    font-weight: 400;
}
.job-I-short-meta .meta-item.salary {
    color: #1a1a1a;
    font-weight: 600;
}

/* Prominent Location Tag */
.job-I-location-prominent {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding: 10px 0;
    margin-bottom: 30px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}


/* Job Description */
.job-I-description {
    line-height: 1.7;
    font-size: 16px;
}
.job-I-description ul, 
.job-I-description ol {
    padding-left: 20px;
    margin-top: 15px;
    margin-bottom: 20px;
}
.job-I-description p {
    margin-bottom: 20px;
}

/* New title for job description block */
.job-I-description .job-I-box-title {
    font-size: 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 10px;
}


/* --- 2. Sticky Sidebar (Apply Button & Info Box) --- */
.job-I-sidebar {
    flex: 1; 
    position: sticky;
    top: 100px; 
    height: fit-content;
}

/* Apply Box */
.job-I-apply-box {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    margin-bottom: 25px;
}

.job-I-expired-flag {
    color: #999;
    font-weight: 600;
    font-size: 13px;
    text-align: right;
    margin-bottom: 5px;
}
.job-I-expired-note {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin: 0 0 10px 0;
}

/* Apply Button (Highly prominent, full width) */
.job-I-sidebar-btn {
    width: 100%;
    /* Reusing the desktop .job-card-I-btn styles from style.css */
    /* Ensure height is correct for the full width button */
    height: 54px !important; 
    padding: 0 20px !important; 
    line-height: 54px !important; 
    font-size: 17px !important;
}

/* Info Boxes (Metadata & Company) */
.job-I-box-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.job-I-info-box {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03); 
    margin-bottom: 25px;
}
.job-I-info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 15px;
}
.job-I-info-item:last-child {
    border-bottom: none;
}
.job-I-info-item .label {
    font-weight: 500;
    color: #4b5563;
    margin-right: 15px;
}
.job-I-info-item .value {
    font-weight: 600;
    color: #1a1a1a;
    text-align: right;
    white-space: nowrap;
}
.job-I-info-item .value.salary {
    color: #428bca; 
}

/* Company Box (CSS is kept, but the HTML element is removed as requested) */
.job-I-company-box {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.03); 
}
.job-I-company-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.job-I-logo-small img,
.job-I-logo-small .job-I-logo-placeholder {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
}
.job-I-company-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}
.job-I-company-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background: #e5e5e5;
    color: #1a1a1a;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.job-I-company-link:hover {
    background: #d1d1d1;
}


/* --- Mobile Adaptations (Single Job) --- */
@media (max-width: 1000px) {
    /* Switch to single column stack at 1000px */
    .job-I-wrapper {
        flex-direction: column;
        gap: 0;
    }
    .job-I-sidebar {
        position: static;
        height: auto;
        padding-top: 0;
        margin-top: 30px;
        order: 2; /* Place sidebar below the content */
    }
    .job-I-main-content {
        order: 1;
    }
    .job-I-header {
        margin-bottom: 10px;
    }
    /* Note: .job-I-title is not the main title, but keeping this for safety */
    .job-I-title {
        font-size: 32px;
    }
    .job-I-description .job-I-box-title {
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    
    /* FIX: Target the main GeneratePress Title/H1 on the single job page for mobile */
    .single-job_listing .entry-title {
        font-size: 24px; /* Smaller mobile title (Current size, keeping it) */
        padding-left: 12px;
        padding-right: 12px;
        margin-top: 15px;
    }
    
    /* Mobile-specific padding and cleanup */
    .single-job-listing-I {
        margin: 0;
        padding: 0;
    }
    
    .job-I-main-content {
        padding: 0 12px 30px 12px;
    }

    .job-I-header {
        padding: 0; /* Adjusted from 15px 0 0 0 */
    }
    .job-I-title {
        font-size: 26px;
    }
    /* ENHANCEMENT: Allow meta items to wrap onto new lines if necessary */
    .job-I-short-meta {
        font-size: 14px;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap; 
    }
    .job-I-short-meta .meta-item {
        /* Adds space below meta items when they wrap */
        margin-bottom: 5px; 
    }
    .job-I-short-meta .meta-item:not(:first-child):before {
        margin-right: 10px;
    }
    
    .job-I-location-prominent {
        padding: 8px 0;
        margin-bottom: 20px;
        font-size: 15px; /* Slightly smaller font */
    }
    
    .job-I-warning-box {
        padding: 15px;
        gap: 10px;
        margin-bottom: 20px;
    }

    .job-I-warning-icon {
        font-size: 20px;
    }
    
    .job-I-warning-title {
        font-size: 15px;
    }

    .job-I-description {
        font-size: 15px;
    }
    
    .job-I-sidebar {
        margin: 0 12px;
        padding-bottom: 30px; /* Space below the entire sidebar block */
    }
    .job-I-apply-box,
    .job-I-info-box,
    .job-I-company-box {
        padding: 15px;
        margin-bottom: 15px;
    }
    .job-I-sidebar-btn {
        height: 48px !important; 
        line-height: 48px !important; 
        font-size: 15px !important;
    }
    .job-I-info-item {
        font-size: 14px;

    }
/* MOBILE STICKY APPLY BAR - FULL WIDTH STICKY */
    article .job-I-apply-box {
        position: fixed !important;
        bottom: 0 !important; /* Sticks directly to the edge */
        left: 0 !important;
        width: 100% !important; /* Fills the whole width */
        margin: 0 !important;
        padding: 10px 15px !important;
        background: #ffffff !important;
        border-radius: 0 !important; /* Square corners for a bar look */
        border-top: 1px solid #e5e5e5 !important;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1) !important;
        z-index: 999999 !important;
        display: block !important;
    }

    /* Make the button fill the bar nicely */
    article .job-I-sidebar-btn {
        height: 50px !important;
        line-height: 50px !important;
        border-radius: 6px !important; /* Slightly rounded button inside the bar */
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Hide extra flags to keep the bar slim */
    article .job-I-expired-flag, 
    article .job-I-expired-note {
        display: none !important;
    }
}


.r4m-related-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 60px 0;
    background-color: #ffffff;
    clear: both;
}

.r4m-related-inner {
    width: 100% !important; /* Fixes mobile alignment */
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.related-title {
    text-align: center !important;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* Centered underline for the title */
.related-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: #0073aa; 
    margin: 12px auto 0;
}


/* --- Slim Human-Friendly Button Fix --- */

/* Desktop Styles */
.human-apply-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 1.1 !important; /* Pulls text together */
    height: auto !important;     /* Overrides fixed 50px */
    min-height: 54px !important;  /* Slim but fits text */
    padding: 10px 20px !important;
}

.human-apply-btn .main-text {
    font-size: 17px !important;
    font-weight: 700 !important;
}

.human-apply-btn .sub-text {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 0.8 !important;
    margin-top: 2px !important;
}

/* Mobile Responsive Overrides */
@media (max-width: 768px) {
    /* 1. Fix the bottom sticky bar height */
    article .job-I-apply-box {
        height: 75px !important; /* Enough room for two lines */
        display: flex !important;
        align-items: center !important;
        padding: 5px 15px !important;
    }

    /* 2. Reset the button height and line-height */
    article .job-I-sidebar-btn.human-apply-btn {
        height: 52px !important;   /* Slim mobile height */
        line-height: 1.1 !important; /* Fixes the overlap/cut-off */
        width: 100% !important;
        text-decoration: none !important;
        border-radius: 8px !important;
    }

    .human-apply-btn .main-text {
        font-size: 15px !important; /* Smaller for mobile */
    }

    .human-apply-btn .sub-text {
        font-size: 8px !important;
    }
}



/* --- 1. GLOBAL LEAN HEADER (Affects both) --- */
.main-navigation .main-nav ul li a {
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --- 2. DESKTOP: UNIQUE STICKER DESIGN --- */
@media (min-width: 769px) {
    .main-navigation .main-nav ul li a {
        line-height: 45px !important; 
        padding: 0 15px !important;
    }

    /* Hover Animation for Home & Jobs - Matching Theme Blue */
    .nav-home a:hover, .nav-jobs a:hover {
        color: #4a90e2 !important;
        background: transparent !important;
        box-shadow: inset 0 -3px 0 #8cb6e1; 
    }

    /* THE STICKER BUTTON (Desktop) */
    .main-navigation .menu-item.nav-post a {
        background: #4a90e2 !important; /* THEME BLUE */
        color: #ffffff !important;
        line-height: 1 !important;
        padding: 8px 18px !important;
        margin-top: 8px; 
        margin-left: 12px;
        border-radius: 6px 15px 4px 12px !important; 
        box-shadow: 2px 2px 0px #2b2d42;
    }

    .main-navigation .menu-item.nav-post a:hover {
        transform: translateY(-2px) rotate(-1deg);
        box-shadow: 4px 4px 0px #2b2d42;
        background: #357abd !important; /* DARKER BLUE HOVER */
    }
}

/* --- MOBILE: LEAN WITH SEPARATORS --- */
@media (max-width: 768px) {
    #mobile-header, .site-header {
        line-height: 45px !important;
        min-height: 45px !important;
    }

    .main-navigation.toggled .main-nav ul {
        padding: 0 !important;
    }

    .main-navigation .main-nav ul li {
        margin: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .main-navigation .main-nav ul li a {
        padding: 10px 20px !important;
        font-size: 13px !important;
        text-align: left !important;
        line-height: 1.2 !important;
        display: block;
    }

    /* THE POST A JOB STICKER (Mobile) */
    .main-navigation .menu-item.nav-post {
        border-bottom: none !important;
        margin: 12px 20px !important;   
    }

    .main-navigation .menu-item.nav-post a {
        background: #4a90e2 !important; /* THEME BLUE */
        color: #fff !important;
        text-align: center !important;
        padding: 8px 15px !important; 
        font-size: 12px !important;
        font-weight: 800 !important;
        border-radius: 6px 15px 4px 12px !important; 
        box-shadow: 2px 2px 0px #2b2d42 !important;
        display: block !important;
    }
}


.company-profile-header {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid #eee;
}

.company-profile-header h1 {
    margin: 0;
    color: #2b2d42;
    font-size: 28px;
}


/* --- FINAL REDESIGN: COMPACT HEADER + REFINED LIST WIDTH --- */

/* 1. Header Card (Ultra Narrow 500px) */
.company-profile-hero-ultra {
    background: #f8fafc;
    padding: 50px 20px 40px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.company-card-inner {
    max-width: 500px; 
    margin: 0 auto;
}

.company-logo-badge-high-viz {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    background: #ffffff;
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffffff;
}

.company-logo-badge-high-viz img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.company-name {
    font-size: 28px !important;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 10px 0 !important;
}

.company-site-btn {
    display: inline-block;
    color: #3b82f6;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid #3b82f6;
    padding: 6px 20px;
    border-radius: 50px;
    transition: all 0.2s;
    margin-bottom: 20px;
}

.company-site-btn:hover {
    background: #3b82f6;
    color: #fff;
}

.company-meta-pills {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.company-meta-pills .pill {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
}

/* 2. Tagline (Centered) */
.company-tagline-above-list {
    text-align: center !important;
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    margin: 40px auto 25px auto;
}

/* 3. REFINED LIST WIDTH FIX */
/* We target both the wrapper and the UL to force it to stay narrow */
.company-jobs-list-normal-wrap {
    max-width: 750px !important; /* Adjust this number to your liking */
    margin: 0 auto 60px !important;
    padding: 0 20px;
}

/* This targets the actual WP Job Manager list inside your container */
.company-jobs-list-normal-wrap .job_listings,
.company-jobs-list-normal-wrap ul.job_listings {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile Fixes */
@media (max-width: 768px) {
    .company-jobs-list-normal-wrap {
        max-width: 100% !important;
        padding: 0 10px;
    }
}




/* Container & Hero Styling */
.dir-container { 
    max-width: 1200px; 
    margin: 40px auto; 
    padding: 0 15px; 
}

.dir-hero { text-align: center; margin-bottom: 40px; }
.dir-hero h1 { font-size: clamp(24px, 6vw, 42px); font-weight: 800; color: #0f172a; margin: 10px 0; }

/* UNIQUE MOBILE RESPONSIVE NAV: Horizontal Scroll */
.dir-nav { 
    display: flex; 
    justify-content: flex-start; /* Start from left on mobile */
    overflow-x: auto; /* Allows swiping left/right */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 8px; 
    padding: 15px; 
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    margin-bottom: 40px;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.dir-nav::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */

.nav-dot { 
    flex: 0 0 auto;
    text-decoration: none; 
    font-weight: 700; 
    font-size: 14px; 
    color: #475569;
    width: 38px; 
    height: 38px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 8px; 
    background: #f8fafc;
    transition: 0.3s;
}
.nav-dot:hover { background: #428bca; color: white; }

/* THE GRID: Better Column Handling */
.dir-grid { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: start;
}

.dir-section { 
    background: #ffffff; 
    border-radius: 16px; 
    border: 1px solid #f1f5f9; 
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.letter-marker { 
    font-size: 28px; 
    font-weight: 900; 
    color: #428bca; 
    margin-bottom: 15px; 
    opacity: 0.2;
}

.dir-list { list-style: none; padding: 0; margin: 0; }
.dir-list li { margin-bottom: 10px; }

/* Company Card Styling */
.company-card { 
    display: flex; 
    flex-direction: column; /* Stack name and count on very small screens */
    text-decoration: none; 
    padding: 12px; 
    background: #f8fafc;
    border-radius: 10px; 
    transition: 0.3s;
}
.company-card .name { font-weight: 600; color: #1e293b; font-size: 15px; margin-bottom: 4px; }
.company-card .count { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; }

.company-card:hover { 
    background: #eff6ff;
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(66,139,202,0.1); 
}

/* MOBILE BREAKPOINTS */
@media (max-width: 1024px) {
    .dir-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .dir-grid { grid-template-columns: 1fr; } /* Single column on phones */
    .dir-nav { justify-content: flex-start; } /* Ensure user can swipe through letters */
    .dir-hero p { font-size: 15px; }
    .dir-section { padding: 15px; }
}











.r4-h { 
    margin-top: -30px !important; /* Removes gap in WP Editor */
    padding: 60px 20px 20px !important; 
    text-align: center;
    background: transparent; 
    position: relative; 
    z-index: 999; 
}

/* Hide empty tags injected by WordPress editor */
.r4-h > p:empty, .r4-h > br, .site-content > p:empty { 
    display: none !important; 
}

@keyframes fUp { from { opacity: 0; transform: translate3d(0,20px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.a-f { opacity: 0; animation: fUp 0.6s ease-out var(--d) forwards; }

.r4-t { font: 800 clamp(28px, 5vw, 42px)/1.2 sans-serif; color: #2c3e50; margin: 0 0 15px; letter-spacing: -1px; }
.r4-s { font: 18px/1.6 sans-serif; color: #5a6c7d; max-width: 650px; margin: 0 auto 30px; }

.cta-click-fix { position: relative; z-index: 9999; display: block; margin-bottom: 25px; }
.r4-c { 
    background: #428bca !important; 
    color: #fff !important; 
    padding: 16px 45px; 
    font: 700 18px sans-serif; 
    text-decoration: none !important; 
    border-radius: 50px; 
    display: inline-block; 
    box-shadow: 0 8px 20px rgba(66, 139, 202, 0.3);
    transition: 0.3s;
}

/* Social Bar */
.r4-st { font: 700 11px sans-serif; color: #a0aec0; text-transform: uppercase; margin: 20px 0 10px; letter-spacing: 0.5px; }
.r4-sl { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.r4-b { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 50px; color: #fff !important; text-decoration: none !important; transition: 0.2s; }
.r4-tg { background: #0088cc; } .r4-wa { background: #25d366; } .r4-li { background: #0a66c2; } .r4-fb { background: #1877f2; }

/* =========================================
   2. NOTE PAPER SECTION (DESKTOP OPTIMIZED)
   ========================================= */
.r4-theme-note { 
    padding: 60px 15px; 
    background: #ffffff; 
    display: flex; 
    justify-content: center; 
}

.note-paper { 
    width: 100%; 
    max-width: 850px; /* Wider for Desktop */
    background: #fffcf0; 
    border: 1px solid #f2e8cf; 
    border-radius: 12px 60px 12px 55px; 
    padding: 45px 50px; 
    position: relative; 
    box-shadow: 15px 15px 0px #f7ede2; 
    margin: 0 auto; 
}

.note-layout { 
    display: flex; 
    align-items: center; 
    gap: 40px; 
}

.note-content { flex: 1.6; text-align: left; }
.note-content h3 { font-size: 30px; font-weight: 900; color: #2b2d42; margin: 0 0 15px 0; }
.note-content p { font-size: 16px; color: #5b616b; line-height: 1.8; margin-bottom: 12px; }

/* Stickers */
.note-vibe-grid { flex: 1; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.vibe-sticker { 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    box-shadow: 0 10px 25px rgba(43, 45, 66, 0.08); border: 2px solid #ffffff; 
}

.s-1 { background: #faedcd; width: 105px; height: 105px; border-radius: 60% 40% 30% 70%; animation: drift 5s infinite ease-in-out; }
.s-2 { background: #fefae0; width: 90px; height: 90px; border-radius: 30% 70% 70% 30%; animation: drift 4s infinite ease-in-out 0.5s; }
.s-3 { background: #e9edc9; width: 110px; height: 110px; border-radius: 40% 60% 40% 60%; animation: drift 6s infinite ease-in-out 1s; }

.v-val { font-size: 20px; font-weight: 900; color: #2b2d42; }
.v-lab { font-size: 10px; font-weight: 800; color: #bc6c25; text-transform: uppercase; letter-spacing: 0.8px; }

@keyframes drift {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    50% { transform: translate(3px, -5px) rotate(2deg); }
}

/* =========================================
   3. MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {
    .r4-h { padding: 20px 15px 10px !important; margin-top: -15px !important; }
    .r4-t { font-size: 28px; }
    .mobile-line { display: block; margin-top: 5px; } 

    /* Compact Social Buttons for Mobile */
    .r4-b { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
    .r4-b span { display: none; } /* Hide text on mobile icons */

    .note-layout { flex-direction: column; text-align: center; gap: 30px; }
    .note-content { text-align: center; }
    .note-content h3 { font-size: 24px; }
    .note-paper { padding: 30px 20px; border-radius: 25px; box-shadow: 8px 8px 0px #f7ede2; }
    
    .vibe-sticker { width: 85px !important; height: 85px !important; }
    .v-val { font-size: 16px; }
}


/* --- PREVENT WP AUTO-SPACING --- */
.r4-h { 
    margin-top: -30px !important; /* Forces the section up */
    padding-top: 0 !important; 
    text-align: center;
    background: transparent; 
    position: relative; 
    z-index: 999; 
}

/* Hide any hidden empty paragraph tags WP adds */
.r4-h > p:empty, 
.r4-h > br { 
    display: none !important; 
}



/* --- 1. STRIP THEME-LEVEL PADDING --- */
.site-footer,
.site-info,
.footer-widgets-container,
.inside-footer-widgets {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* --- 2. FORCE PERFECT CENTERING --- */
.custom-footer-content {
    display: flex !important;
    flex-direction: column !important; /* Stack copyright and contact email */
    align-items: center !important;    /* Centers horizontally */
    justify-content: center !important; /* Centers vertically if any height exists */
    text-align: center !important;
    padding: 2px 0 !important;        /* Only a tiny 2px gap to prevent touching edges */
    margin: 0 !important;
    width: 100% !important;
}

/* --- 3. KILL WORDPRESS DEFAULT PARAGRAPH MARGINS --- */
.custom-footer-content p {
    margin: 0 !important;             /* Standard <p> tags have bottom margins; this kills them */
    padding: 1px 0 !important;        /* Very tight line spacing */
    line-height: 1.3 !important;
    font-size: 13px;                  /* Clean, compact font size */
    color: #5a6c7d;
}

.footer-contact {
    font-weight: 600;
}

.footer-contact a {
    color: #428bca;
    text-decoration: none;
}

/* --- 4. ENSURE MOBILE CENTERING --- */
@media (max-width: 768px) {
    .site-info {
        display: block !important;
        text-align: center !important;
    }
}



/* =========================================
   REMOTE4ME – BLUE TRUST SAFETY BOX
   Theme: #428bca ONLY
   ========================================= */

.job-I-safety-box.human-safety-tip {
    background: #f2f7fd; /* very light blue wash */
    border: 1px solid rgba(66, 139, 202, 0.25);
    border-left: 4px solid #428bca;
    border-radius: 12px;

    padding: 16px 18px;
    margin: 25px 0;

    box-shadow: 0 4px 12px rgba(66, 139, 202, 0.08);
}

/* Header row */
.job-I-safety-box .safety-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* Icon bubble */
.job-I-safety-box .safety-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(66, 139, 202, 0.15);
    border-radius: 50%;

    font-size: 15px;
}

/* Title */
.job-I-safety-box .safety-header strong {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Text */
.job-I-safety-box p {
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* Links */
.job-I-safety-box a {
    color: #428bca;
    font-weight: 600;
    text-decoration: underline;
}

/* Mobile refinement */
@media (max-width: 768px) {
    .job-I-safety-box.human-safety-tip {
        padding: 14px 15px;
        border-radius: 10px;
    }

    .job-I-safety-box .safety-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 14px;
    }

    .job-I-safety-box .safety-header strong {
        font-size: 13.5px;
    }

    .job-I-safety-box p {
        font-size: 12.5px;
    }
}


/* Content Single Job listing Css */

    /* HIDE THE AUTOMATIC THEME TITLE TO PREVENT DUPLICATES */
    .single-job_listing .page-header, 
    .single-job_listing .entry-title:first-of-type {
        display: none !important;
    }

    /* Mobile-Responsive Breadcrumb Styling */
    .r4m-breadcrumb-text {
        font-size: 13px;
        margin-bottom: 10px;
        color: #777;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .r4m-breadcrumb-text span.sep {
        color: #ccc;
    }

    /* Styling for our intended single title */
    .job-I-header h1.job-I-title {
        display: block !important;
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 15px 0;
        line-height: 1.2;
    }
/* Main Container - Normal Size & Clean */
.r4m-sidebar-note {
    background: #ffffff;
    border: 1px solid #e2e8f0; /* Thin modern border */
    border-top: 4px solid #428bca; /* Slim brand accent */
    border-radius: 8px;
    margin: 15px 0;
    padding: 0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* Clean Centered Title - Normal Case */
.r4m-sidebar-note h4 {
    color: #428bca;
    font-size: 16px; /* Slightly larger for mixed case readability */
    font-weight: 700;
    /* Removed text-transform: uppercase */
    margin: 12px 0 4px 0; 
    padding: 0 15px;
    display: block;
    line-height: 1.2;
}

/* Tightened Content Area */
.r4m-sidebar-note p {
    padding: 0 15px 12px 15px;
    font-size: 13.5px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}

/* Slim Integrated Footer */
.r4m-sidebar-note-footer {
    display: block;
    background: #f8fbff; 
    color: #428bca;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    border-top: 1px solid #f0f4f8;
    text-transform: uppercase; /* Keeps footer as a small label */
    letter-spacing: 0.5px;
}

/* Mobile Friendly Adjustments - INCREASED WIDTH */
@media (max-width: 768px) {
    .r4m-sidebar-note {
        /* Reduced horizontal margin (5px) to make the container wider */
        margin: 15px 5px !important; 
        width: auto; /* Ensures it stretches to the new margin limits */
    }
    
    .r4m-sidebar-note h4 {
        font-size: 15px;
        margin-top: 10px;
        padding: 0 10px; /* Slightly tighter padding to match wider container */
    }
    
    .r4m-sidebar-note p {
        font-size: 13px;
        padding: 0 10px 10px 10px;
    }
}
    /* MOBILE RESPONSIVE SHARE CONTAINER */
    .r4m-share-container {
        margin-top: 25px;
        padding: 0 10px;
        text-align: center;
    }
    .r4m-share-label {
        font-size: 14px;
        font-weight: 600;
        color: #555;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .r4m-share-flex {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap; 
    }
    .r4m-share-circle {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%; 
        color: #fff !important;
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }
    .r4m-share-circle:hover {
        transform: scale(1.1);
    }
    .r4m-share-circle svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

 /* Sidebar Box - Balanced & Human-Friendly */
.job-I-info-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box; 
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 14px; 
    padding: 18px; /* Desktop padding */
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(66, 139, 202, 0.08);
}

/* Updated Title */
.job-I-box-title {
    color: #428bca !important;
    font-size: 15px !important;
    font-weight: 700;
    text-align: center;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

/* View Profile Button */
.view-company-profile-btn {
    display: block;
    text-align: center;
    background: #f0f7ff;
    color: #428bca !important;
    border: 1.5px solid #428bca;
    padding: 10px 16px;
    margin-top: 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.view-company-profile-btn:hover {
    background: #428bca;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* --- MOBILE FIX: ULTRA-LEAN PADDING & MATCHED SIDES --- */
@media (max-width: 768px) {
    .job-I-info-box {
        /* Reduced outside margin to 4px for maximum width */
        margin-left: 4px !important;
        margin-right: 4px !important;
        
        /* Perfectly balanced width calculation */
        width: calc(100% - 8px) !important; 
        
        /* ULTRA-REDUCED internal padding for more text space */
        padding: 10px !important; 
        
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .job-I-box-title {
        font-size: 14px !important;
        margin-bottom: 8px;
    }

    .view-company-profile-btn {
        /* Comfortable touch height but lean padding */
        padding: 12px 10px; 
        font-size: 13.5px;
        margin-top: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Ensure internal items don't have hidden margins pushing to one side */
    .job-I-info-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

    /* Brand Circle Colors */
    .circle-fb { background-color: #1877F2; }
    .circle-ln { background-color: #0077B5; }
    .circle-wa { background-color: #25D366; }
    .circle-tg { background-color: #0088cc; }

/* Meta Items: Remove gaps and unwanted theme symbols */
.job-I-short-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0; /* Handled by separator margins for precision */
    margin-top: 10px;
    line-height: 1.2;
}

.job-I-short-meta .meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    margin-right: 0 !important;
    padding: 0 !important; /* Ensure no internal padding is causing gaps */
    list-style: none !important;
}

/* Force-remove the dots/bullets appearing before icons */
.job-I-short-meta .meta-item::before {
    content: none !important;
    display: none !important;
}

/* Vertical Line Separator | */
.job-I-short-meta .meta-item:not(:last-child)::after {
    content: "|";
    /* UPDATED: Reduced margins to 8px to tighten the gap next to the bar */
    margin: 0 8px; 
    color: #ddd;
    font-weight: 300;
}

/* --- SPECIFIC JOB TYPE COLORS --- */

.job-type-full-time .job-type-text { color: #28a745 !important; font-weight: 700; } 
.job-type-part-time .job-type-text { color: #e67e22 !important; font-weight: 700; } 
.job-type-contract  .job-type-text { color: #3498db !important; font-weight: 700; } 
.job-type-freelance .job-type-text { color: #9b59b6 !important; font-weight: 700; } 
.job-type-internship .job-type-text { color: #f43f5e !important; font-weight: 700; } /* Rose/Pink */
.job-type-temporary .job-type-text  { color: #64748b !important; font-weight: 700; } /* Slate Gray */

/* Responsive adjustments */
@media (max-width: 768px) {
    .job-I-short-meta { 
        line-height: 2.0; 
    }
    .job-I-short-meta .meta-item { font-size: 12px; }
    /* Tighten gap even further for mobile screens */
    .job-I-short-meta .meta-item:not(:last-child)::after { margin: 0 6px; }
}


/* --- FINAL SPACING & MOBILE FIXES --- */

/* 1. Remove GeneratePress default padding */
.single-job_listing .separate-containers .inside-article,
.single-job_listing .one-container .inside-article,
.single-job_listing #content {
    padding-top: 0px !important;
}

.single-job_listing .entry-content {
    margin-top: 0px !important;
}

/* 2. Content Spacing below Header */
.job-I-wrapper {
    margin-top: 15px !important; 
    padding-top: 0 !important;
}

.r4m-breadcrumb-text {
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    font-size: 13px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Mobile adjustments only */
@media (max-width: 768px) {
    .single-job_listing .r4m-related-wrapper h3.related-title {
        font-size: 18px !important;
        text-align: center !important; 
        display: block !important;
        width: 100% !important;
        margin-top: 25px !important;
    }
}

/* Color and global styles for Related Title (All Devices) */
.single-job_listing .r4m-related-wrapper h3.related-title {
    color: #428bca  !important; /* Theme Blue */
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}


/* Page Company Directory */

:root {
    --r4m-main: #428bca;
    --r4m-dark: #2c5d88;
    --text-dark: #1e293b;
    --text-slate: #64748b;
    --border-color: #f1f5f9;
}

.white-bg-fix, .white-bg-fix #main, #primary.content-area, .site-content { 
    background-color: #ffffff !important; 
}

/* Reduced Container Size */
.dir-container {
    max-width: 900px; /* Narrower container as requested */
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', sans-serif;
}

/* --- Hero --- */
.dir-hero { text-align: center; margin-bottom: 40px; }
.dir-badge { background: #f0f7ff; color: var(--r4m-main); display: inline-block; padding: 6px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.dir-hero h1 { font-size: clamp(24px, 5vw, 40px); font-weight: 900; color: var(--text-dark); margin: 0; letter-spacing: -1.5px; }
.accent-text { color: var(--r4m-main); }
.dir-sub-heading { color: var(--text-slate); margin-top: 10px; font-size: 1rem; }
.hero-divider { width: 40px; height: 4px; background: var(--r4m-main); margin: 20px auto; border-radius: 10px; }

/* --- Horizontal Scroll Nav --- */
.nav-wrapper { position: sticky; top: 15px; z-index: 100; margin-bottom: 40px; }
.dir-nav { 
    display: flex; gap: 6px; overflow-x: auto; white-space: nowrap; 
    padding: 10px 15px; background: #fff; border-radius: 100px; 
    border: 1px solid #e2e8f0; scrollbar-width: none; 
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.06);
}
.dir-nav::-webkit-scrollbar { display: none; }
.nav-dot { 
    text-decoration: none; color: var(--text-slate); font-weight: 700; 
    font-size: 12px; min-width: 34px; height: 34px; display: flex; 
    align-items: center; justify-content: center; border-radius: 50%; 
    transition: 0.2s; flex-shrink: 0;
}
.nav-dot:hover { background: var(--r4m-main); color: #fff; }

/* --- COMPACT BOXED GRID --- */
.dir-master-grid { 
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px; 
    align-items: start;
}

.dir-section {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 22px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01);
}

.dir-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px -8px rgba(0,0,0,0.1);
    border-color: #cbd5e1;
}

.section-header {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

/* Compact Blob Marker */
.letter-blob {
    background: linear-gradient(135deg, var(--r4m-main), var(--r4m-dark));
    color: white;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    border-radius: 12px;
}

/* Tag Cloud */
.dir-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.company-tag {
    background: #f8fafc;
    border: 1px solid transparent;
    padding: 7px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.2s;
}

.company-tag:hover {
    background: #fff;
    border-color: var(--r4m-main);
}

.company-tag .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.job-count-inline {
    font-weight: 500;
    color: var(--r4m-main);
    font-size: 11px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .dir-master-grid { grid-template-columns: 1fr; gap: 15px; }
    .dir-section { padding: 18px; border-radius: 18px; }
    .dir-hero h1 { font-size: 1.8rem; }
}



/* Page Job Portal */

/* --- BASE LAYOUT --- */
.r4m-final-clean {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    background: #fff;
    color: #222;
}

.r4m-hero { text-align: center; padding: 25px 0 10px 0; }

.r4m-vibe-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eff6ff; color: #1e73be;
    padding: 3px 10px; border-radius: 50px;
    font-size: 10px; font-weight: 700; margin-bottom: 8px;
    border: 1px solid #dbeafe;
}

.r4m-headline {
    font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
    font-weight: 800 !important; line-height: 1.1 !important;
    letter-spacing: -0.5px !important; margin: 0 0 8px 0 !important;
}

.r4m-cursive { color: #1e73be; font-family: Georgia, serif; font-style: italic; font-weight: 400; }

.r4m-intro { font-size: 0.85rem; line-height: 1.4; color: #4b5563; max-width: 450px; margin: 0 auto !important; }

/* --- FULL WIDTH SEARCH BAR --- */
.r4m-search-wrapper { width: 100%; margin: 15px 0 25px; }
.r4m-custom-form { 
    background: #ffffff; padding: 6px; border-radius: 10px; 
    display: flex; gap: 8px; border: 1px solid #e2e8f0; width: 100%; box-sizing: border-box;
}
.r4m-custom-form input { flex: 1; border: none; background: #f8fafc; padding: 12px; border-radius: 8px; font-size: 14px; outline: none; }
.r4m-custom-form button { background: #1e73be; color: #fff; border: none; padding: 0 30px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; }

/* --- LIVE INDICATOR --- */
.r4m-live-indicator {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 9px; font-weight: 700; color: #10b981; text-transform: uppercase; margin: 12px 0;
}
.r4m-ping { height: 5px; width: 5px; background: #10b981; border-radius: 50%; position: relative; }
.r4m-ping::after {
    content: ''; position: absolute; width: 100%; height: 100%;
    background: #10b981; border-radius: 50%; animation: r4m-ping-anim 2s infinite;
}
@keyframes r4m-ping-anim { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }

/* --- MAIN GRID --- */
.r4m-main-grid { display: flex; gap: 30px; margin-top: 15px; align-items: flex-start; }

/* Sidebar (Pro Size) */
#filter-toggle { display: none; }
.filter-btn-label { 
    display: none; width: 100%; box-sizing: border-box; text-align: center; background: #fff; 
    padding: 12px; border-radius: 8px; font-weight: 700; cursor: pointer; margin-bottom: 15px; 
    color: #1e73be; border: 1px solid #1e73be; font-size: 13px;
}

.r4m-sidebar { flex: 0 0 290px; } 
.r4m-filter-card { background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0; position: sticky; top: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.filter-group { margin-bottom: 20px; }
.filter-group label { display: block; font-size: 11px; font-weight: 700; color: #94a3b8; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.filter-group select, .filter-group input { 
    width: 100%; padding: 11px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px; background: #fdfdfd; outline: none; transition: border 0.2s;
}
.filter-group select:focus, .filter-group input:focus { border-color: #1e73be; }
.apply-btn { width: 100%; background: #1e73be; color: #fff !important; border: none; padding: 12px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; margin-top: 5px; }

/* Feed Area */
.r4m-job-feed { flex: 1; overflow: hidden; }
.job_listings { width: 100% !important; margin: 0 !important; }

/* --- WHATSAPP BOX --- */
.r4m-footer-vibe { margin: 30px 0; width: 100%; }
.r4m-whatsapp-box { 
    background: #f0fdf4; border: 1px solid #dcfce7; padding: 25px; border-radius: 12px; 
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-sizing: border-box;
}
.r4m-wa-btn { background: #25d366; color: white !important; padding: 10px 30px; border-radius: 6px; font-weight: 700; font-size: 14px; text-decoration: none !important; }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .r4m-final-clean { padding: 0 15px; }
    .r4m-main-grid { flex-direction: column; width: 100%; gap: 10px; }
    .filter-btn-label { display: block; } 
    .r4m-sidebar { width: 100%; display: none; flex: none; }
    #filter-toggle:checked ~ .r4m-main-grid .r4m-sidebar { display: block; }
    
    .r4m-custom-form { flex-direction: column; padding: 10px; }
    .r4m-custom-form button { padding: 14px; width: 100%; }
    
    .r4m-job-feed { width: 100%; }
    .job_listings li.job_listing { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
}


/* Page Post a Job css */

/* --- PREVENT HORIZONTAL SCROLLING --- */
html, body { overflow-x: hidden; width: 100%; position: relative; }
* { box-sizing: border-box; }

/* --- FORCE WHITE BACKGROUND --- */
#primary, #main, .site-content, .content-area { background-color: #ffffff !important; }

/* --- BRAND COLORS & LAYOUT --- */
.r4m-post-container, .r4m-post-form-wrapper { max-width: 800px; margin: 0 auto; background: #ffffff; width: 100%; }

/* --- HEADER STYLING --- */
.r4m-post-header { text-align: center; padding: 60px 20px 20px; background: #ffffff; }
.r4m-badge { background: #eff6ff; color: #1e73be; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; }
.r4m-post-title { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; margin: 15px 0 10px; color: #1e293b; line-height: 1.1; }
.r4m-blue-text { color: #1e73be; }
.r4m-post-subtitle { color: #64748b; font-size: 1.1rem; line-height: 1.5; }

/* --- FORM UI REDESIGN --- */
.r4m-post-form-wrapper { padding: 20px 20px 80px; }
.r4m-white-box { background: #ffffff; padding: 10px; }

.job-manager-form fieldset { border: none; padding: 0; margin-bottom: 25px; background: #ffffff; width: 100%; }
.job-manager-form label { display: block; font-weight: 700; color: #334155; margin-bottom: 10px; font-size: 14px; }

.job-manager-form input[type="text"],
.job-manager-form input[type="email"],
.job-manager-form input[type="url"],
.job-manager-form select,
.job-manager-form textarea,
.wp-editor-container {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.job-manager-form input:focus,
.job-manager-form textarea:focus {
    border-color: #1e73be !important;
    box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.1) !important;
    outline: none !important;
}

.job-manager-form small.description { display: block; margin-top: 8px; color: #94a3b8; font-size: 13px; line-height: 1.4; }

.job-manager-form input[type="submit"],
.job-manager-form .button {
    background: #1e73be !important;
    color: #ffffff !important;
    padding: 15px 35px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border: none !important;
    transition: all 0.2s ease;
}

/* --- MOBILE RESPONSIVE FIXES --- */
@media (max-width: 768px) {
    .r4m-post-header { padding-top: 40px; padding-left: 15px; padding-right: 15px; }
    .r4m-post-form-wrapper { padding: 10px; }
    
    /* Pull the form container closer to edges to save space */
    .r4m-white-box { padding: 5px; }

    /* Fix Buttons for Mobile (Preview, Draft, etc) */
    .job-manager-form input[type="submit"],
    .job-manager-form .button {
        width: 100% !important;
        padding: 12px 20px !important; /* Smaller padding */
        font-size: 14px !important;    /* Smaller font */
        margin-bottom: 10px !important;
        display: block;
    }

    /* Ensure form fields don't cause overflow */
    input, select, textarea {
        max-width: 100%;
    }
}


/* Taxonomy Job Page */

/* Pure White Background */
.v2-full-white-bg, .v2-full-white-bg #main, body.tax-job_company, .site-content, #content {
    background-color: #ffffff !important;
}

:root {
    --h-blue: #428bca;
    --h-dark: #1e293b;
    --h-slate: #64748b;
    --h-border: #f1f5f9;
}

.human-container { max-width: 800px; margin: 0 auto; padding: 0 20px; text-align: center; }
.human-container-narrow { max-width: 700px; margin: 0 auto; padding: 0; width: 100%; }

/* Header & Brand */
.human-profile-header { padding: 60px 0 30px; }
.human-brand-visual { margin-bottom: 20px; display: inline-block; }

.human-logo-ring {
    width: 100px; height: 100px; background: #fff; border-radius: 32px; 
    display: flex; align-items: center; justify-content: center; padding: 12px;
    border: 1px solid var(--h-border); box-shadow: 0 15px 30px -10px rgba(0,0,0,0.05);
}

.human-avatar { width: 100%; height: auto; object-fit: contain; }

.human-title {
    font-size: clamp(26px, 5vw, 40px); font-weight: 900; color: var(--h-dark);
    letter-spacing: -1.5px; margin: 0 0 12px 0 !important;
}

.human-intro-bio {
    max-width: 600px; margin: 0 auto 25px; font-size: 1.05rem;
    line-height: 1.5; color: var(--h-slate);
}

/* --- THE UNIQUE TRUST BAR (FIXED FOR MOBILE) --- */
.human-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    flex-wrap: nowrap; 
}

.trust-pill {
    background: #f8fafc; 
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    color: var(--h-dark);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    border: 1px solid #edf2f7;
}

.t-link-pill {
    background: #eff6ff; 
    color: var(--h-blue) !important;
    border-color: rgba(66, 139, 202, 0.15);
    text-decoration: none !important;
}

.t-icon { font-size: 14px; }
.t-arrow { margin-left: 2px; transition: transform 0.2s; }
.t-link-pill:hover .t-arrow { transform: translateX(3px); }

/* Jobs Feed Styles */
.human-jobs-feed { padding-bottom: 60px; }
.feed-header { text-align: center; margin-bottom: 30px; padding: 0 20px; }
.feed-title-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
.feed-title-wrap h2 { font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--h-dark); margin: 0 !important; }
.pulse-icon { width: 7px; height: 7px; background: #10b981; border-radius: 50%; animation: pulse 2s infinite; }

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.feed-subtitle { color: var(--h-slate); font-size: 13px; }

/* Empty State Padding Added Here */
.human-empty-state {
    padding: 0 20px;
    text-align: center;
}

.human-closing-note {
    margin: 40px 20px 0; background: #f8fafc; border-radius: 18px; padding: 20px; border: 1px solid var(--h-border);
}

.note-content { display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.note-content p { margin: 0; font-size: 13px; color: var(--h-slate); line-height: 1.4; }

/* MOBILE SPECIFIC FIX */
@media (max-width: 480px) {
    .human-profile-header { padding: 40px 0 20px; }
    
    .human-trust-bar {
        gap: 4px; 
    }

    .trust-pill {
        padding: 5px 8px; 
        font-size: 10px; 
    }
    
    .human-title { font-size: 24px; }
}