/* UX-correcties na de gebruikersdoorloop van 06-10-2026.
   Deze regels staan ook los in option four_u_custom_css, zodat ze werkten
   vóór deze pluginversie was geïnstalleerd. Dubbel toepassen is onschadelijk. */

/* 1. De sitenaam brak op mobiel middenin het woord af ("recruitme/nt.4u.sr").
      Astra zet overflow-wrap:anywhere op de site-identiteit. */
.site-branding,
.ast-site-identity,
.site-title,
.site-title a,
.ast-site-title-wrap * {
    overflow-wrap: normal;
    hyphens: none;
}
/* `word-break: keep-all` leek hier logisch, maar maakte de naam onbreekbaar;
   in de flexbox van de header werd het logo daardoor tot 0 breedte geduwd en
   verdween het op mobiel. De naam mag dus wél tussen woorden afbreken — alleen
   niet middenin een woord. Het logo krimpt niet mee. */
.site-logo-img,
.custom-logo-link,
.custom-logo {
    flex-shrink: 0;
}
.custom-logo {
    max-width: 120px;
    height: auto;
}

/* 2. WP Job Manager toont zijn eigen grijze placeholder als een werkgever geen
      logo heeft. Dat was bij alle vacatures het geval en las als een kapot
      plaatje. Zodra er echte logo's zijn, verschijnen die gewoon. */
img.company_logo[src*="wp-job-manager/assets/images/company.png"],
img.company_logo[src$="/company.png"] {
    display: none !important;
}
.single_job_listing .company {
    border: 0;
    padding-left: 0;
    min-height: 0;
}

/* 3. De vinkjes voor dienstverband staan ónder de zoekknop. Dat is met CSS
      niet op te lossen: de knop zit binnen .search_jobs en de vinkjes zijn
      een broer daarvan, dus er is geen volgorde die ze ertussen krijgt.
      De plugin verplaatst ul.job_types daarom met JS naar vlak boven de knop,
      op dezelfde manier als de werkgever-dropdown. */

/* 4. "Alleen vacatures op afstand" filterde 390 vacatures terug naar 1.
      Verbergen tot er genoeg thuiswerkvacatures zijn om het zinvol te maken. */
.job_filters .search_remote_position {
    display: none;
}

/* 5. Mobiel: de introtekst op de homepage vulde het hele eerste scherm,
      waardoor de eerste vacature pas na drie schermen in beeld kwam. */
@media (max-width: 600px) {
    .fouru-hero p,
    .home .entry-content > p:first-of-type {
        font-size: 1rem;
        line-height: 1.5;
    }
    .fouru-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
}