/*
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: 17px; /* 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; 
    }
    .job-I-header h1.job-I-title {
        font-size: 20px !important;
    }
    /* 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;
    }
    /* Targets the hardcoded box title */
    .job-I-description .job-I-box-title {
        font-size: 17px !important; 
        margin-bottom: 12px;
    }
    /* FIX: Targets any standard H3 inside the actual job post content */
    .job-I-description h3 {
        font-size: 19px !important; 
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    
    .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: 17px !important; /* Lowered from 18px */
        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; }
}



/* =========================================================================
   🐾 REMOTE4ME MOBILE NAV DOCK & AUTO-HIDE ENGINE
   ========================================================================= */

/* 1. Ensure the dock is completely hidden on Desktop screens */
.r4m-mobile-dock {
    display: none;
}

/* 2. Mobile-Only Layout & Interaction Rules */
@media (max-width: 768px) {
    
    /* Hide the default GeneratePress mobile hamburger menu */
    .menu-toggle, 
    #mobile-header .menu-toggle {
        display: none !important;
    }

    /* Prevent text/buttons at the absolute bottom of pages from being blocked */
    body, html, .site-content, #main, main {
        margin-bottom: 70px !important; 
    }

    /* The Low-Profile Floating Glass Navigation Dock */
    .r4m-mobile-dock {
        display: flex;
        position: fixed;
        bottom: 6px; /* Positioned tightly near the bottom edge */
        left: 8px;
        right: 8px;
        height: 56px; /* Balanced tap targets */
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 18px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.04);
        z-index: 999999;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        
        /* Hardware-Accelerated transitions for fluid scrolling physics */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
        will-change: transform;
        transform: translateY(0);
    }

    /* The Hidden State Class (Triggered automatically by Javascript on scroll down) */
    .r4m-mobile-dock.dock-hidden {
        transform: translateY(85px) !important; /* Smoothly glides off-screen */
        opacity: 0;
        pointer-events: none; /* Disables tap registers while hidden */
    }

    /* Text & Layout Wrapper inside individual Dock Tabs */
    .dock-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #94a3b8;
        font-size: 11px;
        font-weight: 700;
        flex: 1;
        height: 100%;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease;
    }

    /* Clear, crisp emoji sizes configured for readability */
    .dock-icon {
        font-size: 19px; 
        margin-bottom: 2px;
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Active Tab Highlight Accent (Matches your signature Theme Blue) */
    .dock-item.active {
        color: #1e73be;
    }

    /* Tactile subtle spring effect on the active link icon */
    .dock-item.active .dock-icon {
        transform: translateY(-2px) scale(1.1);
    }
}




/* --- A-Z CAROUSEL DESKTOP FIX --- */
.dir-nav-carousel {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

/* Ensure the nav takes up the remaining space between buttons */
.dir-nav-carousel .dir-nav {
    flex: 1;
    margin-bottom: 0; /* Override any bottom margin inside the carousel */
    scroll-behavior: smooth; /* Ensures smooth swiping on trackpads too */
}

/* Scroll Arrow Buttons */
.dir-nav-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #428bca; /* Matches your Theme Blue */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    flex-shrink: 0;
    outline: none;
}

.dir-nav-btn:hover {
    background: #428bca;
    color: #ffffff;
    border-color: #428bca;
    transform: scale(1.05);
}

.dir-nav-btn:active {
    transform: scale(0.95);
}

/* Hide the arrows entirely on Mobile (under 768px) */
@media (max-width: 768px) {
    .dir-nav-btn {
        display: none !important;
    }
    .dir-nav-carousel {
        gap: 0;
    }
}


/* Single post css code */

/* Global Resets for Container */
:root{ --primary:#428bca; --text:#222; --muted:#666; --border:#e8e8e8; }
body{ background:#fafafa; }
.r4-container, .r4-container * { box-sizing: border-box; } 

.r4-container{ max-width:850px; width:100%; margin:auto; padding:30px 20px; overflow-x: hidden; }

/* Centered Header Section */
.r4-header-section { text-align: center; margin-bottom: 35px; }
.r4-category{ display:inline-block; background:#eaf4fb; color:var(--primary); padding:6px 14px; border-radius:50px; font-size:13px; font-weight:600; margin-bottom: 15px; }
.r4-title{ font-size:34px; line-height:1.3; margin:0 0 15px 0; overflow-wrap: break-word; word-wrap: break-word; }
.r4-meta{ display:flex; justify-content:center; flex-wrap:wrap; gap:15px; color:var(--muted); font-size:14px; }

.r4-thumb img{ width:100%; height:auto; border-radius:14px; display: block; }

/* Content Formatting & Reduced Headings */
.r4-content{ font-size:18px; line-height:1.8; color:var(--text); margin-top:35px; }
.r4-content h2{ font-size:26px; margin-top:40px; margin-bottom:15px; font-weight:700; line-height:1.3; }
.r4-content h3{ font-size:22px; margin-top:30px; margin-bottom:15px; font-weight:600; line-height:1.3; }
.r4-content img, .r4-content iframe, .r4-content video { max-width: 100%; height: auto; border-radius: 8px; } 

.r4-progress{ position:fixed; left:0; top:0; height:4px; background:var(--primary); width:0%; z-index:99999; }

/* Share Buttons */
.r4-share-container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 40px 0 10px 0; padding-top: 20px; border-top: 1px solid var(--border); }
.r4-share-label { font-weight: 600; font-size: 15px; color: var(--text); margin-right: 5px; }
.r4-share-btn { padding: 8px 18px; border: 1px solid var(--border); border-radius: 50px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; transition: 0.2s ease; background: #fff; }
.r4-share-btn:hover { border-color: var(--primary); color: var(--primary); background: #f4f9fd; }

/* Follow Us Buttons */
.r4-follow{ background: #fdfdfd; border: 1px solid var(--border); border-radius: 12px; padding: 25px; text-align: center; margin: 30px 0 40px 0; }
.r4-follow-grid{ display: flex; justify-content: center; gap: 15px; margin-top: 15px; }
.r4-follow-btn{ padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; color: #fff; display: inline-block; width: 100%; max-width: 200px; transition: opacity 0.2s; }
.r4-follow-btn:hover { opacity: 0.9; }
.btn-whatsapp{ background: #25D366; }
.btn-telegram{ background: #0088cc; }

/* Related Posts */
.r4-related { margin-top: 40px; }
.r4-related h2 { font-size:26px; text-align: center; margin-bottom: 20px; }
.r4-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top: 20px; }
.r4-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; transition:0.2s; }
.r4-card:hover{ transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.r4-card img{ width:100%; height:140px; object-fit:cover; display: block; }
.r4-card h3{ font-size:17px; padding:14px; margin:0; line-height:1.4; }
.r4-card a { text-decoration: none; color: var(--text); }

/* Bottom Ad Container */
.r4-ad-container { margin-top: 40px; background: #fdfdfd; border: 1px dashed #dcdcdc; border-radius: 12px; padding: 15px; text-align: center; min-height: 100px; overflow: hidden; }
.r4-ad-label { display: block; font-size: 11px; text-transform: uppercase; color: #999; letter-spacing: 1px; margin-bottom: 10px; }

/* --- Mobile Responsiveness --- */
@media(max-width:768px){
    .r4-container{ padding: 20px 15px; } 
    .r4-title{ font-size: 26px; }
    .r4-content h2{ font-size: 22px; margin-top: 30px; }
    .r4-content h3{ font-size: 20px; margin-top: 25px; }
    .r4-content{ font-size: 17px; }
    .r4-meta { flex-wrap: wrap; gap: 10px; }
    
    .r4-share-container { justify-content: flex-start; }
    
    .r4-follow { padding: 20px 15px; }
    .r4-follow-grid { flex-direction: column; align-items: center; gap: 10px; } 
    .r4-follow-btn { max-width: 100%; } 
    .r4-grid{ grid-template-columns: 1fr; } 
}




/* ==========================================================================
   REMOTE4ME SCOPED PAGE STYLES
   Extracted from HTML Editor Blocks - 100% Conflict Free
   ========================================================================== */

/* --- GLOBAL ANIMATIONS & VARIABLES --- */
:root {
    --theme-blue: #428bca;
    --text-main: #2d3436;
    --text-muted: #636e72;
}

@keyframes r4meGlobalFade {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   1. ABOUT US PAGE
   ========================================================================== */
/* ==========================================================================
   REMOTE4ME ABOUT PAGE
   Refined responsive editorial design
   ========================================================================== */


/* ==========================================================
   PAGE RESET / WRAPPER
   ========================================================== */

.r4me-about-page,
.r4me-about-page * {
    box-sizing: border-box;
}

.r4me-about-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: #ffffff;
    color: #292d32;
}

.r4me-about-shell {
    width: calc(100% - 40px);
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 0 70px;
}


/* ==========================================================
   BASE TYPOGRAPHY
   ========================================================== */

.r4me-about-page p {
    margin: 0 0 16px;
    color: #444a50;
    font-size: 16px;
    line-height: 1.72;
}

.r4me-about-page strong {
    color: #202328;
    font-weight: 750;
}

.r4me-about-page em {
    font-style: italic;
}

.r4me-about-page h1,
.r4me-about-page h2,
.r4me-about-page h3 {
    text-transform: none !important;
}

.r4me-reading {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
}

.r4me-small-label,
.r4me-kicker,
.r4me-hand-note {
    display: block;
    margin-bottom: 10px;
    color: #428bca;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* ==========================================================
   HERO
   ========================================================== */

.r4me-about-hero {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 58px;
    text-align: center;
}

.r4me-about-hero .r4me-kicker {
    display: block;
    width: 100%;
    margin: 0 auto 13px;
    text-align: center !important;
}

.r4me-about-hero h1 {
    width: 100%;
    max-width: 690px;

    margin: 0 auto 18px !important;
    padding: 0 !important;

    color: #17191c !important;

    font-size: 34px !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.9px !important;

    text-align: center !important;
}

.r4me-about-hero h1 span {
    color: #428bca;
}

.r4me-hero-intro {
    width: 100%;
    max-width: 650px;

    margin: 0 auto 15px !important;

    color: #555c63 !important;

    font-size: 14px !important;
    line-height: 1.72 !important;

    text-align: center !important;
}

.r4me-hero-punch {
    margin: 0 auto !important;

    color: #22262a !important;

    font-size: 14px !important;
    font-weight: 750;

    text-align: center !important;
}


/* ==========================================================
   NORMAL STORY SECTIONS
   ========================================================== */

.r4me-story-section {
    width: 100%;
    margin: 0 auto 52px;
}

.r4me-story-section h2,
.r4me-direct-section h2 {
    margin: 0 0 17px !important;
    padding: 0 !important;

    color: #181b1f !important;

    font-size: 25px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.5px !important;
}

.r4me-story-section h2 span,
.r4me-direct-section h2 span {
    color: #428bca;
}

.r4me-who-section {
    margin-top: 55px;
    margin-bottom: 60px;
}


/* ==========================================================
   PHOTO 1
   IMPORTANT: FULL IMAGE VISIBLE — NO CROPPING
   ========================================================== */

.r4me-wide-photo {
    width: 100%;
    max-width: 760px;

    margin: 0 auto 60px;
}

.r4me-wide-photo img {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 520px;

    margin: 0 auto;

    object-fit: contain;
    object-position: center;

    border-radius: 14px;
}

.r4me-wide-photo figcaption {
    max-width: 700px;

    margin: 8px auto 0;

    color: #858b91;

    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}


/* ==========================================================
   BUILD PRINCIPLES
   ========================================================== */

.r4me-build-block {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 45px;

    width: 100%;
    max-width: 850px;

    margin: 0 auto 68px;
    padding: 30px;

    background: #f7faff;

    border: 1px solid #e1ebf5;
    border-radius: 17px;
}

.r4me-build-heading {
    align-self: start;
}

.r4me-build-heading h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #181b1f !important;

    font-size: 24px !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.45px !important;
}

.r4me-principles {
    min-width: 0;
}

.r4me-principle {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;

    padding: 0 0 19px;
    margin: 0 0 19px;

    border-bottom: 1px solid #dfe8f1;
}

.r4me-principle:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.r4me-principle-number {
    color: #428bca;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.8px;
}

.r4me-principle h3 {
    margin: 0 0 5px !important;

    color: #202328 !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

.r4me-principle p {
    margin: 0;

    color: #626a72;

    font-size: 12.5px;
    line-height: 1.62;
}


/* ==========================================================
   CAFETERIA PHOTO STORY
   ========================================================== */

.r4me-photo-story {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 38px;
    align-items: center;

    width: 100%;
    max-width: 850px;

    margin: 0 auto 70px;
}

.r4me-photo-story-image img {
    display: block;

    width: 100%;
    height: 340px;

    object-fit: cover;
    object-position: center;

    border-radius: 14px;
}

.r4me-photo-story-copy h2 {
    margin: 0 0 15px !important;

    color: #181b1f !important;

    font-size: 24px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.45px !important;
}

.r4me-photo-story-copy p {
    font-size: 13.5px;
    line-height: 1.7;
}

.r4me-photo-story-last {
    margin-bottom: 0 !important;
}


/* ==========================================================
   DIRECT APPLY
   ========================================================== */

.r4me-direct-section {
    width: 100%;
    max-width: 850px;

    margin: 0 auto 70px;
}

.r4me-apply-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;

    max-width: 720px;

    margin: 26px auto 22px;
}

.r4me-flow-step {
    min-width: 0;

    padding: 18px 13px;

    background: #ffffff;

    border: 1px solid #e1e7ec;
    border-radius: 12px;

    text-align: center;
}

.r4me-flow-step > span {
    display: block;

    margin-bottom: 7px;

    font-size: 18px;
}

.r4me-flow-step strong {
    display: block;

    margin-bottom: 4px;

    font-size: 12.5px;
}

.r4me-flow-step small {
    display: block;

    color: #7a8188;

    font-size: 10px;
    line-height: 1.45;
}

.r4me-flow-arrow {
    color: #428bca;

    font-size: 18px;
    font-weight: 700;
}

.r4me-no-nonsense {
    max-width: 720px;

    margin: 0 auto;

    padding: 20px 22px;

    background: #f8fafc;

    border: 1px solid #e5e9ed;
    border-radius: 13px;
}

.r4me-no-nonsense > div {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;

    margin-bottom: 12px;
}

.r4me-no-nonsense > div:last-child {
    margin-bottom: 0;
}

.r4me-no-nonsense > div > span {
    color: #428bca;
    font-weight: 900;
}

.r4me-no-nonsense p {
    margin: 0;

    font-size: 12.5px;
    line-height: 1.6;
}


/* ==========================================================
   REMOTE REALITY
   ========================================================== */

.r4me-reality-section {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;

    width: 100%;
    max-width: 760px;

    margin: 0 auto 68px;
    padding: 26px 28px;

    background: #fffdf6;

    border: 1px solid #eee7d4;
    border-radius: 16px;
}

.r4me-reality-icon {
    padding-top: 3px;
    font-size: 25px;
}

.r4me-reality-section h2 {
    margin: 0 0 14px !important;

    color: #181b1f !important;

    font-size: 22px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px !important;
}

.r4me-reality-section p {
    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================================
   THIRD IMAGE / MEMORY
   FULL IMAGE VISIBLE
   ========================================================== */

.r4me-memory-section {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 38px;
    align-items: center;

    width: 100%;
    max-width: 850px;

    margin: 0 auto 72px;
}

.r4me-memory-photo {
    min-width: 0;
}

.r4me-memory-photo img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 460px;

    object-fit: contain;

    border-radius: 14px;
}

.r4me-memory-copy h2 {
    margin: 0 0 16px !important;

    color: #181b1f !important;

    font-size: 24px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.45px !important;
}

.r4me-memory-copy p {
    font-size: 13.5px;
    line-height: 1.7;
}

.r4me-memory-emphasis {
    margin-top: 18px !important;

    color: #428bca !important;

    font-size: 15px !important;
    font-weight: 800;
}


/* ==========================================================
   WHO IS THIS FOR?
   ========================================================== */

.r4me-for-you-section {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;

    width: 100%;
    max-width: 820px;

    margin: 0 auto 72px;
}

.r4me-for-you-heading h2 {
    margin: 0 !important;

    color: #181b1f !important;

    font-size: 24px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.45px !important;
}

.r4me-human-list {
    border-top: 1px solid #e5e8eb;
}

.r4me-human-list p {
    position: relative;

    margin: 0;
    padding: 13px 0 13px 20px;

    border-bottom: 1px solid #e5e8eb;

    color: #4b5258;

    font-size: 13px;
    line-height: 1.62;
}

.r4me-human-list p::before {
    content: "•";

    position: absolute;
    left: 2px;
    top: 12px;

    color: #428bca;

    font-size: 16px;
}


/* ==========================================================
   SMALL TEAM NOTE
   ========================================================== */

.r4me-team-note {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;

    width: 100%;
    max-width: 740px;

    margin: 0 auto 68px;
    padding: 24px 26px;

    background: #f8faff;

    border: 1px solid #e2eaf4;
    border-radius: 15px;
}

.r4me-team-note-pin {
    font-size: 23px;
}

.r4me-team-note h2 {
    margin: 0 0 11px !important;

    color: #181b1f !important;

    font-size: 21px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.r4me-team-note p {
    font-size: 13px;
    line-height: 1.68;
}

.r4me-team-note p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   EMPLOYERS
   ========================================================== */

.r4me-employer-section {
    width: 100%;
    max-width: 720px;

    margin: 0 auto 70px;
    padding-top: 36px;

    border-top: 1px solid #e8eaed;
}

.r4me-employer-section h2 {
    margin: 0 0 14px !important;

    color: #181b1f !important;

    font-size: 23px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.4px !important;
}

.r4me-employer-section p {
    font-size: 13.5px;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.r4me-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 7px;
    padding: 10px 17px;

    background: #428bca;

    color: #ffffff !important;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 750;
    line-height: 1;

    text-decoration: none !important;

    box-shadow: 0 3px 8px rgba(66, 139, 202, 0.17);

    transition:
        transform 0.18s ease,
        background 0.18s ease;
}

.r4me-button:hover {
    background: #3277b2;
    color: #ffffff !important;
    transform: translateY(-1px);
}


/* ==========================================================
   ENDING
   ========================================================== */

.r4me-about-ending {
    width: 100%;
    max-width: 740px;

    margin: 0 auto;
    padding: 38px 28px;

    background: #fafbfc;

    border: 1px solid #eceff2;
    border-radius: 17px;

    text-align: center;
}

.r4me-ending-cat {
    display: block;

    margin-bottom: 11px;

    font-size: 23px;
}

.r4me-about-ending h2 {
    max-width: 540px;

    margin: 0 auto 9px !important;

    color: #181b1f !important;

    font-size: 24px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.45px !important;
}

.r4me-about-ending > p {
    margin: 0;

    color: #747b81;

    font-size: 12.5px;
}

.r4me-ending-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin-top: 17px;
}

.r4me-simple-link {
    color: #428bca !important;

    font-size: 12px;
    font-weight: 750;

    text-decoration: none !important;
}

.r4me-simple-link:hover {
    text-decoration: underline !important;
}

.r4me-signoff {
    margin-top: 25px;
    padding-top: 17px;

    border-top: 1px solid #e5e8eb;

    color: #92979c;

    font-size: 10.5px;
    font-weight: 650;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .r4me-about-shell {
        width: calc(100% - 32px);
        padding-top: 32px;
    }

    .r4me-about-hero h1 {
        font-size: 32px !important;
    }

    .r4me-build-block {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .r4me-photo-story {
        gap: 28px;
    }

    .r4me-memory-section {
        gap: 28px;
    }

    .r4me-for-you-section {
        gap: 32px;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .r4me-about-shell {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        padding: 25px 20px 55px;
    }


    /* ======================================================
       HERO — CENTER EVERYTHING
       ====================================================== */

    .r4me-about-hero {
        width: 100%;
        max-width: 100%;

        margin: 0 auto 46px;

        text-align: center !important;
    }

    .r4me-about-hero .r4me-kicker {
        display: block;

        width: 100%;

        margin: 0 auto 12px;

        font-size: 8.5px;
        letter-spacing: 0.9px;

        text-align: center !important;
    }

    .r4me-about-hero h1 {
        display: block;

        width: 100%;
        max-width: 420px;

        margin: 0 auto 16px !important;

        font-size: 27px !important;
        line-height: 1.13 !important;
        letter-spacing: -0.55px !important;

        text-align: center !important;
    }

    .r4me-hero-intro {
        display: block;

        width: 100%;
        max-width: 410px;

        margin: 0 auto 15px !important;

        font-size: 13.5px !important;
        line-height: 1.68 !important;

        text-align: center !important;
    }

    .r4me-hero-punch {
        display: block;

        width: 100%;

        margin: 0 auto !important;

        font-size: 13.5px !important;

        text-align: center !important;
    }


    /* ======================================================
       GENERAL
       ====================================================== */

    .r4me-about-page p {
        font-size: 15px;
        line-height: 1.7;
    }

    .r4me-reading {
        width: 100%;
        max-width: 100%;
    }

    .r4me-story-section {
        margin-bottom: 43px;
    }

    .r4me-story-section h2,
    .r4me-direct-section h2 {
        font-size: 22px !important;
        line-height: 1.22 !important;
    }


    /* ======================================================
       FIRST PHOTO
       FULL IMAGE VISIBLE ON MOBILE TOO
       ====================================================== */

    .r4me-wide-photo {
        width: 100%;
        max-width: 100%;

        margin: 0 auto 48px;
    }

    .r4me-wide-photo img {
        display: block;

        width: auto;
        max-width: 100%;

        height: auto;
        max-height: 420px;

        margin: 0 auto;

        object-fit: contain;
        object-position: center;

        border-radius: 12px;
    }

    .r4me-wide-photo figcaption {
        max-width: 100%;

        padding: 0 4px;

        font-size: 9.5px;
        line-height: 1.5;

        text-align: center;
    }


    /* ======================================================
       WHO
       ====================================================== */

    .r4me-who-section {
        margin-top: 0;
        margin-bottom: 48px;
    }


    /* ======================================================
       BUILD BLOCK
       ====================================================== */

    .r4me-build-block {
        display: block;

        margin-bottom: 52px;
        padding: 21px 17px;

        border-radius: 14px;
    }

    .r4me-build-heading {
        margin-bottom: 26px;
    }

    .r4me-build-heading h2 {
        font-size: 22px !important;
    }

    .r4me-principle {
        grid-template-columns: 29px minmax(0, 1fr);
        gap: 9px;
    }


    /* ======================================================
       CAFETERIA
       ====================================================== */

    .r4me-photo-story {
        display: flex;
        flex-direction: column;

        gap: 23px;

        margin-bottom: 54px;
    }

    .r4me-photo-story-image,
    .r4me-photo-story-copy {
        width: 100%;
    }

    .r4me-photo-story-image img {
        display: block;

        width: 100%;
        height: auto;
        max-height: none;

        object-fit: contain;

        border-radius: 12px;
    }

    .r4me-photo-story-copy h2 {
        font-size: 22px !important;
    }


    /* ======================================================
       DIRECT APPLY
       ====================================================== */

    .r4me-direct-section {
        margin-bottom: 54px;
    }

    .r4me-apply-flow {
        display: block;

        margin-top: 23px;
    }

    .r4me-flow-step {
        padding: 15px;
    }

    .r4me-flow-arrow {
        margin: 7px 0;

        text-align: center;

        transform: rotate(90deg);
    }

    .r4me-no-nonsense {
        padding: 17px 15px;
    }


    /* ======================================================
       REMOTE REALITY
       ====================================================== */

    .r4me-reality-section {
        display: block;

        margin-bottom: 54px;
        padding: 20px 17px;

        border-radius: 14px;
    }

    .r4me-reality-icon {
        margin-bottom: 9px;

        font-size: 22px;
    }

    .r4me-reality-section h2 {
        font-size: 20px !important;
    }


    /* ======================================================
       THIRD PHOTO
       ====================================================== */

    .r4me-memory-section {
        display: flex;
        flex-direction: column;

        gap: 24px;

        margin-bottom: 56px;
    }

    .r4me-memory-photo {
        width: 100%;
    }

    .r4me-memory-photo img {
        display: block;

        width: auto;
        max-width: 100%;

        height: auto;
        max-height: 500px;

        margin: 0 auto;

        object-fit: contain;

        border-radius: 12px;
    }

    .r4me-memory-copy {
        width: 100%;
    }

    .r4me-memory-copy h2 {
        font-size: 21px !important;
    }

    .r4me-memory-emphasis {
        font-size: 14px !important;
    }


    /* ======================================================
       WHO FOR
       ====================================================== */

    .r4me-for-you-section {
        display: block;

        margin-bottom: 54px;
    }

    .r4me-for-you-heading {
        margin-bottom: 23px;
    }

    .r4me-for-you-heading h2 {
        font-size: 21px !important;
    }


    /* ======================================================
       TEAM
       ====================================================== */

    .r4me-team-note {
        display: block;

        margin-bottom: 54px;
        padding: 20px 17px;

        border-radius: 14px;
    }

    .r4me-team-note-pin {
        margin-bottom: 9px;
    }

    .r4me-team-note h2 {
        font-size: 20px !important;
    }


    /* ======================================================
       EMPLOYER
       ====================================================== */

    .r4me-employer-section {
        margin-bottom: 54px;
        padding-top: 28px;
    }

    .r4me-employer-section h2 {
        font-size: 21px !important;
    }


    /* ======================================================
       ENDING
       ====================================================== */

    .r4me-about-ending {
        padding: 30px 17px;

        border-radius: 14px;
    }

    .r4me-about-ending h2 {
        font-size: 21px !important;
    }

    .r4me-ending-actions {
        flex-direction: column;

        gap: 12px;
    }
}


/* ==========================================================================
   SMALL PHONES
   ========================================================================== */

@media (max-width: 420px) {

    .r4me-about-shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .r4me-about-hero {
        text-align: center !important;
    }

    .r4me-about-hero .r4me-kicker {
        width: 100%;
        text-align: center !important;
    }

    .r4me-about-hero h1 {
        max-width: 360px;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 25px !important;
        line-height: 1.14 !important;

        text-align: center !important;
    }

    .r4me-hero-intro {
        max-width: 360px;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 13px !important;

        text-align: center !important;
    }

    .r4me-hero-punch {
        text-align: center !important;
    }

    .r4me-story-section h2,
    .r4me-direct-section h2 {
        font-size: 21px !important;
    }

    .r4me-wide-photo img {
        width: auto;
        max-width: 100%;

        height: auto;
        max-height: 390px;

        object-fit: contain;
    }

    .r4me-small-label,
    .r4me-kicker,
    .r4me-hand-note {
        font-size: 8px;
    }
}

/* ==========================================================
   FINAL BODY FONT SIZE FIX
   Keep all normal About page text readable and consistent
   ========================================================== */

@media (min-width: 701px) {

    .r4me-about-page p,
    .r4me-about-page .r4me-photo-story-copy p,
    .r4me-about-page .r4me-principle p,
    .r4me-about-page .r4me-reality-section p,
    .r4me-about-page .r4me-memory-copy p,
    .r4me-about-page .r4me-human-list p,
    .r4me-about-page .r4me-team-note p,
    .r4me-about-page .r4me-employer-section p,
    .r4me-about-page .r4me-no-nonsense p {
        font-size: 15.5px;
        line-height: 1.7;
    }

}

/* ==========================================================================
   2. CONTACT US PAGE
   ========================================================================== */
.r4me-contact-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.r4me-contact-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #2d3436;
    line-height: 1.6;
}

.r4me-contact-container .theme-blue {
    color: #428bca;
}

.r4me-card {
    background: transparent;
    padding: 0;
}

/* HEADER */

.r4me-contact-header {
    text-align: center;
    margin-bottom: 25px;
}

.r4me-contact-container h1 {
    font-size: clamp(1.8rem, 5vw, 2.3rem);
    font-weight: 850;
    margin: 0 0 10px;
    color: #1a1a1a;
    letter-spacing: -1px;
    text-align: center;
}

.r4me-contact-subtitle {
    font-size: 1.1rem;
    color: #636e72;
    margin-bottom: 10px;
}

.r4me-contact-welcome {
    font-size: 1rem;
    font-weight: 600;
}

/* INTRO */

.r4me-contact-intro {
    font-size: 1rem;
    color: #444;
    margin-bottom: 35px;
    text-align: center;
}

.r4me-contact-intro p {
    margin-bottom: 15px;
}

.r4me-contact-blue {
    font-weight: 600;
    color: #428bca;
}

/* EMAIL */

.email-section {
    background: #f0f7fd;
    padding: 25px;
    border-radius: 20px;
    text-align: center;
    border: 1px dashed #428bca;
    margin-bottom: 35px;
}

.email-section h2 {
    font-size: 1rem;
    margin: 0 0 5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #636e72;
}

.email-section p {
    margin-top: 12px;
    font-size: 0.9rem;
    color: #636e72;
    line-height: 1.4;
}

.email-display {
    font-size: 1.2rem;
    color: #2d3436;
    font-weight: 800;
    text-decoration: none;
    word-break: break-all;
    display: block;
    margin: 10px 0;
}

/* SOCIAL */

.r4me-social-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #b2bec3;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

.contact-method-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 30px 0;
}

.contact-item {
    background: #fcfcfc;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid #eee;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-item:hover {
    border-color: #428bca;
    background: #fff;
}

.contact-emoji {
    font-size: 2rem;
    margin-bottom: 8px;
}

.social-link-text {
    display: block;
    color: #428bca;
    font-weight: 700;
    font-size: 1rem;
}

/* FOOTER */

.r4me-contact-footer {
    text-align: center;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

.r4me-contact-footer-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.r4me-contact-footer-text {
    font-size: 1rem;
    color: #636e72;
}

/* DESKTOP */

@media (min-width: 600px) {

    .contact-method-grid {
        flex-direction: row;
    }

    .contact-item {
        flex: 1;
    }

    .email-display {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   3. PRIVACY POLICY PAGE
   ========================================================================== */
.r4me-privacy-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.r4me-privacy-wrapper {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 20px 10px 10px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #2d3436;
    line-height: 1.6;
}

.r4me-policy-card {
    background: transparent;
    padding: 0;
}

/* HEADER */

.r4me-privacy-header {
    text-align: center;
    margin-bottom: 30px;
}

.r4me-privacy-wrapper h1 {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 850;
    letter-spacing: -1px;
    color: #1a1a1a;
    text-align: center;
}

.r4me-privacy-updated {
    margin: 0;
    color: #b2bec3;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.r4me-privacy-wrapper .brand-accent {
    color: #428bca;
    font-weight: 700;
}

/* SECTIONS */

.r4me-privacy-wrapper .policy-section {
    margin-bottom: 35px;
}

.r4me-privacy-wrapper .policy-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #f0f7fd;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a1a;
}

.r4me-privacy-wrapper .policy-section p {
    margin-top: 0;
}

.r4me-privacy-welcome {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* DATA LIST */

.r4me-privacy-wrapper .data-list {
    margin: 15px 0;
    padding: 15px;
    background: #f0f7fd;
    border-radius: 15px;
    list-style: none;
}

.r4me-privacy-wrapper .data-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.r4me-privacy-wrapper .data-list li:last-child {
    margin-bottom: 0;
}

/* HIGHLIGHT */

.r4me-privacy-wrapper .highlight-box {
    margin: 20px 0;
    padding: 20px;
    background: #fffdf5;
    border-left: 4px solid #428bca;
    border-radius: 15px;
    font-size: 0.95rem;
    font-weight: 500;
}

/* LINKS */

.r4me-privacy-wrapper .email-link {
    color: #428bca;
    font-weight: 700;
    text-decoration: none;
    word-break: break-all;
}

/* FOOTER */

.r4me-privacy-footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    text-align: center;
}

.r4me-privacy-footer h2 {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.r4me-privacy-footer p {
    margin-top: 0;
}

.r4me-privacy-contact {
    margin-bottom: 15px;
}

.r4me-privacy-human {
    color: #636e72;
    font-size: 0.9rem;
    font-style: italic;
}

/* DESKTOP */

@media (min-width: 768px) {

    .r4me-privacy-wrapper {
        padding: 20px;
    }

    .r4me-privacy-wrapper .policy-section h2 {
        font-size: 1.4rem;
    }

    .r4me-privacy-wrapper .data-list {
        padding: 25px;
    }
}
/* ==========================================================================
   4. TERMS OF SERVICE WEBSITE PAGE
   ========================================================================== */
.r4me-tos-wrapper {
    max-width: 750px;
    margin: 0 auto; 
    padding: 0 10px 10px 10px; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #2d3436;
    line-height: 1.7;
    animation: r4meGlobalFade 0.6s ease-out;
}
.r4me-tos-wrapper h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 850; letter-spacing: -1px; margin-bottom: 10px; margin-top: 0; padding-top: 25px; color: #1a1a1a; text-align: center; }
.r4me-tos-wrapper .r4me-tos-card { background: transparent; padding: 0; }
.r4me-tos-wrapper .tos-section { margin-bottom: 35px; }
.r4me-tos-wrapper .tos-section h2 { font-size: 1.25rem; font-weight: 800; color: #1a1a1a; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #f0f7fd; padding-bottom: 5px; }
.r4me-tos-wrapper .tos-list { background: #f0f7fd; padding: 20px; border-radius: 15px; list-style: none; margin: 15px 0; }
.r4me-tos-wrapper .tos-list li { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; }
.r4me-tos-wrapper .tos-list li::before { content: "•"; color: #428bca; font-weight: bold; font-size: 1.2rem; line-height: 1; }
.r4me-tos-wrapper .important-note { background: #fffdf5; padding: 20px; border-radius: 15px; border-left: 4px solid #428bca; margin: 20px 0; font-size: 0.95rem; }
.r4me-tos-wrapper .tos-email { color: #428bca; font-weight: 700; text-decoration: none; word-break: break-all; }
.r4me-tos-wrapper .tos-email:hover { text-decoration: underline; }
@media (min-width: 768px) {
    .r4me-tos-wrapper { padding: 0 20px 20px 20px; }
    .r4me-tos-wrapper .tos-section h2 { font-size: 1.4rem; }
}

/* ==========================================================================
   5. TERMS & CONDITIONS EMPLOYER PAGE
   ========================================================================== */
.remote-terms-container {
    padding: 0 20px 20px 20px;
}
@media (max-width: 600px) {
    .remote-terms-container { padding: 0 10px 10px 10px; margin-top: -30px !important; }
    .remote-terms-container .remote-card { padding: 25px !important; }
    .remote-terms-container .remote-header { margin-bottom: 30px !important; }
}

/* ==========================================================================
   6. HOME PAGE (Hero & Layout)
   ========================================================================== */
/* =========================================================
   REMOTE4ME HOMEPAGE
   ========================================================= */

/* Reset theme layout only on homepage */
body.home #primary,
body.home #primary.site-main,
body.home main.site-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* HERO */
.r4-h {
    width: 100%;
    padding: 20px 20px 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.r4m-focused-width {
    width: 100%;
    max-width: 800px;
    margin: 0 auto !important;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

.r4-alert-text {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 25px 0 5px;
    text-align: center;
}

.r4-t {
    display: block !important;
    width: 100%;
    margin: 0 auto 10px !important;
    padding: 0;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: clamp(26px, 5.5vw, 36px) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    color: #1e293b !important;
    box-sizing: border-box;
}
.r4-s {
    display: block !important;
    width: 100%;
    margin: 0 auto 20px !important;
    padding: 0;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px !important;
    color: #4b5563 !important;
    line-height: 1.6;
    box-sizing: border-box;
}

.r4m-blue-text {
    color: #1e73be !important;
}

.r4-c {
    font-size: 15px !important;
    padding: 12px 26px !important;
    display: inline-block;
    background: #1e73be;
    color: #fff !important;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
}

.r4-st {
    font-size: 11px;
    margin: 20px 0 10px !important;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* COMMUNITY GRID */
@media (min-width: 601px) {
    .r4-desktop-grid {
        display: flex;
        justify-content: center;
        gap: 30px;
    }

    .r4-community-col {
        flex: 1;
        max-width: 350px;
    }
}

.r4-sl {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.r4-unique-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: 0.2s;
    border: 1px solid transparent;
    min-width: 160px;
}

.r4-icon-round {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.2s;
    border: 1px solid transparent;
}

.r4-icon-round svg {
    width: 22px;
    height: 22px;
}

.r4-icon-round:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* PLATFORM COLORS */
.r4-wa {
    background: #f0fff4;
    border-color: #dcfce7;
}

.r4-wa svg {
    fill: #25d366;
}

.r4-tg {
    background: #f0f9ff;
    border-color: #e0f2fe;
}

.r4-tg svg {
    fill: #0088cc;
}

.r4-li {
    background: #f0f7ff;
    border-color: #e0f2fe;
}

.r4-li svg {
    fill: #0077b5;
}

.r4-tw {
    background: #f8fafc;
    border-color: #f1f5f9;
}

.r4-tw svg {
    fill: #000;
}

.r4-th {
    background: #fcf8fb;
    border-color: #f1edf1;
}

.r4-th svg {
    fill: #000;
}

.r4-fb {
    background: #f0f4ff;
    border-color: #e0e7ff;
}

.r4-fb svg {
    fill: #1877f2;
}

/* BUTTON CONTENT */
.r4-icon-box {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
}

.r4-label-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.r4-platform {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.r4-action {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
}

/* SEARCH + JOBS */
.r4m-search-area,
.r4m-jobs-area {
    width: 100%;
    margin: 0 !important;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.r4m-search-box-clean,
.r4m-jobs-box-clean {
    width: 100%;
    max-width: 800px;
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* MOBILE */
@media (max-width: 600px) {

    .r4-h {
        padding: 20px 15px 0 !important;
    }

    .r4m-focused-width {
        padding: 5px 0;
    }

    .r4-unique-btn {
        min-width: 45%;
        padding: 8px 10px;
    }

    .r4-icon-round {
        width: 40px;
        height: 40px;
    }

    .r4m-search-area,
    .r4m-jobs-area {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ==========================================================================
   7. SOCIAL COMMUNITY PAGE
   ========================================================================== */
.r4-social-wrapper {
    max-width: 600px; margin: 0 auto; padding: 0px 15px 30px 15px; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #fff; color: #1e293b;
}
.r4-social-wrapper .r4-hero { text-align: center; margin-top: 0px; margin-bottom: 20px; padding-top: 10px; }
.r4-social-wrapper .r4-badge-human { display: inline-block; background: #ebf3f9; color: #428bca; padding: 5px 12px; border-radius: 50px; font-size: 11px; font-weight: 800; margin-bottom: 12px; }
.r4-social-wrapper .r4-title { font-size: clamp(24px, 6vw, 32px); font-weight: 850; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 10px; }
.r4-social-wrapper .r4-subtitle { font-size: clamp(14px, 4vw, 16px); color: #64748b; line-height: 1.4; margin-bottom: 15px; }
.r4-social-wrapper .r4-hero-description { text-align: center; margin-bottom: 25px; padding: 0 10px; }
.r4-social-wrapper .r4-hero-description p { font-size: 15px; color: #475569; line-height: 1.6; margin: 0; }
.r4-social-wrapper .r4-hero-description strong { color: #1e293b; }
.r4-social-wrapper .r4-stats { display: flex; justify-content: center; gap: 12px; font-size: 10px; color: #94a3b8; text-transform: uppercase; font-weight: 700; margin-bottom: 10px;}

.r4-social-wrapper .r4-grid-stack { display: flex; flex-direction: column; gap: 10px; }
.r4-social-wrapper .r4-action-card { display: flex; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; text-decoration: none !important; transition: all 0.2s ease; }
.r4-social-wrapper .r4-card-icon { width: 32px; height: 32px; margin-right: 12px; flex-shrink: 0; }
.r4-social-wrapper .r4-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.r4-social-wrapper .r4-card-content h3 { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
.r4-social-wrapper .r4-card-content p { font-size: 12px; color: #64748b; margin: 1px 0 0; }
.r4-social-wrapper .r4-btn-label { font-size: 11px; font-weight: 800; color: #428bca; background: #ebf3f9; padding: 4px 10px; border-radius: 50px; margin-left: auto; }

.r4-social-wrapper .r4-premium-divider { display: flex; align-items: center; justify-content: center; margin: 35px 0 10px; gap: 10px; }
.r4-social-wrapper .r4-divider-text { font-size: 10px; font-weight: 800; color: #cbd5e1; letter-spacing: 1px; }
.r4-social-wrapper .r4-divider-line { height: 1px; background: #f1f5f9; flex-grow: 1; }
.r4-social-wrapper .r4-human-note { text-align: center; font-size: 13px; color: #94a3b8; margin-bottom: 20px; line-height: 1.4; }

.r4-social-wrapper .r4-faq-stack { margin-top: 40px; padding: 25px 15px; background: #fdfbf7; border-radius: 20px; }
.r4-social-wrapper .r4-faq-title { font-size: 18px; font-weight: 800; margin-bottom: 20px; text-align: center; color: #428bca; }
.r4-social-wrapper .r4-faq-item h4 { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.r4-social-wrapper .r4-faq-item p { font-size: 13px; color: #64748b; line-height: 1.4; margin-bottom: 15px; }
.r4-social-wrapper .r4-final-footer { margin-top: 40px; text-align: center; font-size: 14px; padding-bottom: 40px; }
.r4-social-wrapper .r4-cat-box p { color: #64748b; margin: 0; }
.r4-social-wrapper .r4-section-label { text-align: center; margin-bottom: 15px; border-bottom: 1px solid #f1f5f9; height: 10px; }
.r4-social-wrapper .r4-section-label span { background: #fff; padding: 0 10px; font-size: 9px; font-weight: 800; color: #cbd5e1; letter-spacing: 1px; }

@media (min-width: 601px) {
    .r4-social-wrapper .r4-grid-stack { display: grid; grid-template-columns: 1fr 1fr; }
    .r4-social-wrapper { max-width: 800px; padding-top: 0px; }
}

/* ==========================================================================
   MODULE 8: BLOG / CAREER ADVICE PORTAL (FIXED & MOBILE OPTIMIZED)
   ========================================================================== */
.r4m-blog-container { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0px 20px 20px 20px; 
    text-align: center; 
}

.r4m-label { 
    display: inline-block; 
    background: #eef2f6; 
    color: #428bca; 
    padding: 4px 12px; 
    border-radius: 20px; 
    font-size: 12px; 
    font-weight: 600; 
    margin-bottom: 10px; 
}

.r4m-title { 
    font-size: clamp(24px, 3vw, 28px) !important; /* Reduced title size */
    font-weight: 800; 
    color: #222; 
    margin: 0 0 8px 0 !important; 
    line-height: 1.1; 
}

.r4m-title-accent { color: #428bca; }

.r4m-sub-text { 
    font-size: 16px; /* Reduced subtitle size */
    color: #555; 
    margin: 0 auto 20px auto; 
    line-height: 1.5; 
}

/* Fixes the button layout so they don't crush into each other */
.r4m-actions { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    flex-wrap: wrap; 
    margin-bottom: 20px; 
}

/* Specifically target the buttons to ensure they remain consistent */
.r4m-blog-container .r4m-btn { 
    padding: 6px 16px !important; 
    border-radius: 99px !important; 
    font-weight: 700; 
    text-decoration: none; 
    font-size: 13px !important; /* Reduced button text size */
    display: inline-block !important; 
    width: auto !important; 
}

.r4m-btn-primary { background: #428bca; color: #fff !important; }
.r4m-btn-secondary { background: #f1f5f9; color: #475569 !important; }

/* Reduced Trust text size */
.r4m-trust { 
    display: flex; 
    justify-content: center; 
    gap: 12px; 
    font-size: 11px; 
    color: #64748b; 
    margin-bottom: 20px; 
    font-weight: 600; 
}

/* Mobile responsive font and layout reduction */
@media (max-width: 800px) {
    .r4m-blog-container .r4m-btn { 
        width: 100% !important; 
        padding: 10px !important;
    }
    .r4m-actions { 
        flex-direction: column; 
        align-items: center; 
    }
    .r4m-title { font-size: 22px !important; }
    .r4m-sub-text { font-size: 13px !important; }
}


/* =========================================================
   REMOTE4ME DMCA PAGE
   ========================================================= */

.r4me-dmca-page {
    width: 100%;
    margin: 0;
    padding: 0;
}

.r4-dmca-page {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 16px 40px;
    box-sizing: border-box;
}

/* HERO */

.r4-dmca-hero {
    text-align: center;
    margin-bottom: 28px;
}

.r4-dmca-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    background: #ebf3f9;
    color: #428bca;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.r4-dmca-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.12;
    color: #1f2937;
    font-weight: 800;
}

.r4-dmca-hero h1 span {
    color: #428bca;
}

.r4-dmca-updated {
    margin: 0 0 14px;
    color: #8b98a5;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.r4-dmca-intro {
    max-width: 700px;
    margin: 0 auto;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.75;
}

/* CARDS */

.r4-dmca-card {
    margin-bottom: 18px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 20px;
}

.r4-dmca-card h2 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.3;
    color: #1f2937;
}

.r4-dmca-card p {
    margin: 0;
    color: #4b5563;
    line-height: 1.8;
    font-size: 15px;
}

/* DMCA LIST */

.r4-dmca-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.r4-dmca-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #f8fbfe;
    border: 1px solid #e8eef5;
    border-radius: 16px;
}

.r4-dmca-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e3edf7;
    border-radius: 50%;
    font-size: 17px;
}

.r4-dmca-item strong {
    display: block;
    margin-bottom: 4px;
    color: #1f2937;
    font-size: 15px;
}

.r4-dmca-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #667085;
}

/* CONTACT */

.r4-dmca-contact-card {
    text-align: center;
    background: #f6fbff;
}

.r4-dmca-email {
    display: inline-block;
    margin-top: 14px;
    padding: 12px 20px;
    background: #428bca;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    border-radius: 999px;
}

.r4-dmca-email:hover {
    opacity: 0.95;
}

/* NOTE */

.r4-dmca-note {
    margin-top: 18px;
    padding: 16px;
    background: #fff8e8;
    border: 1px solid #f6e4ad;
    color: #5f4b16;
    border-radius: 16px;
    line-height: 1.7;
    font-size: 14px;
}

.r4-dmca-note strong {
    color: #a06a00;
}

/* MOBILE */

@media (max-width: 768px) {

    .r4-dmca-page {
        padding: 6px 12px 28px;
    }

    .r4-dmca-card {
        padding: 18px;
        border-radius: 16px;
    }

    .r4-dmca-card h2 {
        font-size: 19px;
    }

    .r4-dmca-intro {
        font-size: 15px;
        line-height: 1.7;
    }

    .r4-dmca-item {
        padding: 14px;
        gap: 12px;
    }

    .r4-dmca-icon {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .r4-dmca-email {
        width: 100%;
        text-align: center;
        padding: 13px 16px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {

    .r4-dmca-hero h1 {
        font-size: 26px;
    }

    .r4-dmca-card p,
    .r4-dmca-item p {
        font-size: 14px;
    }
}