/* 1. Set the Container: Force everything to stack vertically */
.elementor-widget-sidebar ul li,
.widget_recent_entries li,
.rpwe-block li {
    width: 100%;           /* Fills the sidebar exactly */
    margin-bottom: 25px;   /* Space between articles */
    list-style: none;      /* Removes bullet points */
    padding: 0;
    border: none;          /* Removes border for a cleaner look */
}

/* 2. The Image: Force it to match the text width perfectly */
.elementor-widget-sidebar img, 
.rpwe-thumb,
.widget_recent_entries img {
    width: 100% !important;   /* Forces image to be as wide as the text */
    height: 160px !important; /* Fixed height so all images match */
    object-fit: cover;        /* Crops the image so it doesn't look squashed */
    margin-bottom: 10px;      /* Clean gap between image and text */
    border-radius: 6px;       /* Optional: Slight rounded corners on image */
    display: block;
}

/* 3. The Text: Cut it off after 2 lines */
.elementor-widget-sidebar h3, 
.elementor-widget-sidebar a,
.rpwe-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* CHANGE THIS to '3' if you want more text */
    -webkit-box-orient: vertical;
    overflow: hidden;         /* Hides the rest of the text */
    text-overflow: ellipsis;  /* Adds the '...' */
    
    /* Styling to make it look neat */
    width: 100%;              /* Ensures text is exactly as wide as the image */
    margin: 0;
    font-size: 15px;          /* Readable text size */
    line-height: 1.4em;       /* Good spacing between lines */
    text-decoration: none;
    font-weight: 600;         /* Bold title */
}








/* GLOBAL PARAGRAPH SPACING */
/* This adds breathing room between paragraphs site-wide */
p {
    margin-bottom: 24px !important; /* The space between paragraphs */
    line-height: 1.6em !important;  /* The space between lines of text */
}

/* Optional: Ensures lists inside your content also have the same spacing */
.entry-content ul, 
.entry-content ol,
.elementor-widget-text-editor ul, 
.elementor-widget-text-editor ol {
    margin-bottom: 24px !important;
}






/* --- MASTER JOB BOARD LAYOUT (Textured Post-its & Subtle Tilt) --- */

/* 1. BASE NOTE SHAPE & TEXTURE */
ul.job_listings li.job_listing {
    /* Base Shape */
    border: none !important;
    border-radius: 2px !important;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.2) !important;
    
    /* GRAINY PAPER TEXTURE (The "Finish") */
    /* This adds a transparent noise layer over the colors */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E") !important;
    
    /* Layout */
    min-height: 100px !important; 
    height: auto !important; 
    margin-bottom: 20px !important; 
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 2. THE 4 STANDARD POST-IT COLORS (With Micro-Tilts) */

/* Note 1: Standard Neon Yellow */
ul.job_listings li.job_listing:nth-child(4n+1) {
    background-color: #fff176 !important; 
    transform: rotate(-0.3deg); /* Reduced from -1deg */
}

/* Note 2: Neon Pink */
ul.job_listings li.job_listing:nth-child(4n+2) {
    background-color: #ff80ab !important; 
    transform: rotate(0.3deg); /* Reduced from 1deg */
}

/* Note 3: Neon Blue */
ul.job_listings li.job_listing:nth-child(4n+3) {
    background-color: #80d8ff !important; 
    transform: rotate(-0.2deg); /* Reduced from -0.5deg */
}

/* Note 4: Neon Green */
ul.job_listings li.job_listing:nth-child(4n+4) {
    background-color: #ccff90 !important; 
    transform: rotate(0.4deg); /* Reduced from 1.5deg */
}

/* 3. HOVER EFFECT (Lift Off Wall) */
ul.job_listings li.job_listing:hover {
    transform: scale(1.02) rotate(0deg) !important; /* Straighten */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
    z-index: 100;
}


/* --- 4. CARD CONTENT LAYOUT (Desktop) --- */
ul.job_listings li.job_listing a {
    display: flex;
    align-items: center;
    /* Left: 80px (Logo) | Right: 80px (Date) */
    padding: 0 80px 0 80px !important; 
    text-decoration: none;
    width: 100%;
    height: 100%;
    min-height: 100px;
    box-sizing: border-box;
    position: relative;
}

/* Logo (Pinned Left) */
ul.job_listings li.job_listing .job_listing-logo {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
}
ul.job_listings li.job_listing .company_logo {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    background: #fff; 
    border-radius: 2px;
}

/* Hide Location */
ul.job_listings li.job_listing .location {
    display: none !important;
}

/* Date (Centered Right) */
ul.job_listings li.job_listing .meta {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 20px !important;
    margin: 0 !important;
    text-align: right;
    font-size: 11px !important;
    color: #333 !important; 
    width: 100px;
    padding: 0 !important;
}
ul.job_listings li.job_listing .meta li { display: inline-block; margin: 0; }


/* --- 5. TYPOGRAPHY --- */
ul.job_listings li.job_listing h3 {
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700;
    color: #111 !important; 
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: hidden;
}

ul.job_listings li.job_listing .company {
    font-size: 13px !important;
    color: #333 !important; 
    text-transform: uppercase;
    font-weight: 600;
}


/* --- 6. SIDEBAR FIXES --- */
.elementor-widget-sidebar ul.job_listings li.job_listing a,
.widget-area ul.job_listings li.job_listing a,
.widget_job_listing ul.job_listings li.job_listing a {
    padding: 15px !important;
    gap: 15px !important;
    justify-content: flex-start !important;
}
.elementor-widget-sidebar .job_listing-logo,
.widget_job_listing .job_listing-logo {
    position: static !important;
    transform: none !important;
    flex-shrink: 0;
}
.elementor-widget-sidebar .meta,
.widget_job_listing .meta {
    display: none !important; 
}


/* --- 7. MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
    /* Straighten notes on mobile */
    ul.job_listings li.job_listing,
    ul.job_listings li.job_listing:nth-child(4n+1),
    ul.job_listings li.job_listing:nth-child(4n+2),
    ul.job_listings li.job_listing:nth-child(4n+3),
    ul.job_listings li.job_listing:nth-child(4n+4) {
        transform: rotate(0deg) !important;
        margin-bottom: 10px !important;
    }
    
    ul.job_listings li.job_listing a {
        padding: 15px !important;
        gap: 15px !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
    ul.job_listings li.job_listing .job_listing-logo {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        flex-shrink: 0;
    }
    ul.job_listings li.job_listing .meta {
        display: none !important;
    }
}









/* 1. CONTAINER: Vertical centering and removing theme grid restrictions */
.job_filters .search_jobs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;     /* Centers everything top-to-bottom */
    justify-content: center !important; /* Pulls the remaining boxes together */
    gap: 12px !important;               /* Reduced gap to half as requested */
    padding: 20px !important;           /* Equal space from top and bottom edges */
    background: #f1f1f1 !important;     /* Maintains the grey box */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. REMOVE GHOSTS: Total removal of the middle slot and its hidden container */
.search_location, .search_regions, .job-manager-region-filter,
.job_filters .search_jobs > div:nth-child(2) {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
}

/* 3. CENTER STRETCH: Force boxes to elongate and fill that middle empty space */
.job_filters .search_jobs > div.search_keywords, 
.job_filters .search_jobs > div.search_categories {
    flex: 1 1 auto !important;          /* This is the secret—forces them to expand */
    margin: 0 !important;               /* Kills theme margins pushing boxes away */
    padding: 0 !important;              /* Kills theme padding */
    max-width: none !important;
    min-width: 0 !important;
}

/* 4. BUTTON: Maintain fixed size so it doesn't stretch */
.job_filters .search_jobs > div.search_submit {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. STYLING: High rounding (25px) and pixel-perfect height */
.job_filters .search_jobs input[type="text"],
.job_filters .search_jobs select,
.job_filters .search_jobs .select2-container--default .select2-selection--single,
.job_filters .search_jobs button {
    height: 50px !important;            /* Uniform height for a perfectly straight line */
    border-radius: 25px !important;     /* Matches your blog image style */
    border: 1px solid #ddd !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 6. BUTTON COLOR & BRANDING */
.job_filters .search_jobs button {
    background-color: #344e36 !important; /* Your brand green */
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 35px !important;
}

/* Fix for Select2 category dropdown to ensure text is centered */
.job_filters .search_jobs .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
}











/* 1. UNIVERSAL SELECTOR: Targets the base HTML tags for all buttons */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"],
.button, 
.btn,
.wp-block-button__link {
    border-radius: 20px !important; /* Adjust this to match your feature images exactly */
    overflow: hidden !important;
}

/* 2. SPECIFIC TARGETS: For Subscribe forms, Mailchimp, and Job Manager buttons */
#submit, 
#searchsubmit,
.subscribe-button,
.newsletter-submit,
.job-manager-button,
.application_button,
.submit-job-button,
.load_more_jobs {
    border-radius: 20px !important;
}

/* 3. LINK BUTTONS: For links styled as buttons (very common in WP) */
a.button, 
a.btn, 
a.wp-block-button__link {
    border-radius: 20px !important;
    display: inline-block; /* Ensures rounding is visible on links */
}

















/* --- MASTER NOTEBOOK SKIN (RESPONSIVE & GLOBAL) --- */

/* 1. The Paper Background (Smart Responsive) */
body, html {
    background-color: #fdfbf7 !important; /* Cream Paper */
    background-attachment: fixed !important; /* Content scrolls, paper stays */
}

/* Desktop View (Standard Notebook) */
@media (min-width: 769px) {
    body, html {
        background-image: 
            /* Red Margin at 80px */
            linear-gradient(90deg, transparent 79px, #ffb3b3 80px, transparent 81px),
            /* Blue Lines every 30px */
            linear-gradient(#e1e8ed 1px, transparent 1px) !important;
        background-size: 100% 100%, 100% 30px !important;
    }
}

/* Mobile View (Phone Optimized) */
@media (max-width: 768px) {
    body, html {
        background-image: 
            /* Red Margin reduced to 20px so content fits */
            linear-gradient(90deg, transparent 19px, #ffb3b3 20px, transparent 21px),
            /* Blue Lines every 30px */
            linear-gradient(#e1e8ed 1px, transparent 1px) !important;
        background-size: 100% 100%, 100% 30px !important;
    }
}

/* 2. Global Transparency (The "X-Ray" Effect) */
/* Targets all layouts: Homepage, Blog Posts, Archives, etc. */
#page, .site, .site-content, .site-inner, .wrap, #content, 
.entry-content, article, main, .container, .wrapper,
.elementor-section, .elementor-column, .elementor-widget-wrap, 
.elementor-container, .elementor-widget, .widget-area, .widget,
.elementor-location-header, .elementor-location-footer,
.elementor-location-single, .elementor-location-archive,
#comments, #respond {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 3. Search Box Styling (Sketched Look) */
form.job_search_form,
.elementor-search-form__container {
    background-color: rgba(255, 255, 255, 0.6) !important;
    border: 2px solid #333 !important;
}
.job_search_form input,
.elementor-search-form__input {
    background-color: transparent !important;
}

/* 4. Job Cards (Solid & Readable) */
ul.job_listings li.job_listing {
    background-color: #ffffff !important; 
    opacity: 1 !important;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    border: 1px solid #e5e5e5 !important;
}

/* 5. Clean Up Titles */
.widget-title, h1, h2, h3, h4, h5, h6 {
    background: transparent !important;
}